-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathlexique.html
1954 lines (1881 loc) · 163 KB
/
lexique.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Lexique definition</title>
<link rel="stylesheet" href="https://stackedit.io/style.css" />
</head>
<body class="stackedit">
<div class="stackedit__html"><h1 id="lexique-définition">Lexique définition</h1>
<h2 id="définition">Définition</h2>
<ul>
<li>
<p><strong>Terminal</strong>: Un terminal est un moyen de communiquer avec la machine sous forme de ligne de commande</p>
<blockquote>
<p>Exemples d’une commande:<br>
<strong>cd</strong> en ligne de commande, permet de naviguer entre les répertoires</p>
</blockquote>
</li>
<li>
<p><strong>OS</strong> : Un O.S <em>(operating system ou système d’exploitation)</em> est un ensemble de programmes qui communique et dirige tous les composants d’un ordinateur. C’est le programme qui permet de communiquer entre machine et utilisateur via l’interface graphique.</p>
</li>
<li>
<p><strong>Bash</strong> : Le bash est un langage qui interprète des commandes spécifiques via un terminal pour exécuter une action précise.</p>
</li>
<li>
<p><strong>racine</strong> : La racine est la base d’une succession de dossier.</p>
</li>
<li>
<p><strong>~</strong> : Le titlde est un signe qui à pour but sur le terminal de viser le dossier utilisateur.</p>
</li>
<li>
<p><strong>.</strong> : Le point dans un chemin signifie le dossier courant.</p>
</li>
<li>
<p><strong>..</strong> : le double point dans un chemin signifie le dossier parent.</p>
</li>
<li>
<p><strong>permission</strong> : Une permission est un moyen d’attribuer à un fichier ou dossier, un droit d’accès suivant l’utilisateur qui utilise (administrateur, groupe et autres)</p>
<blockquote>
<p><strong>Exemple:</strong> d rwx r-x --x<br>
<strong>D</strong> signifie <em>directory</em>, <strong>R</strong> pour <em>read</em> , <strong>W</strong> pour <em>write</em> et <strong>X</strong> pour execute</p>
<ul>
<li>Le premier groupe <strong>“rwx”</strong> signifie les droits d’un administrateur</li>
<li>Le deuxime groupe <strong>"r-x "</strong> signifie les droits de groupe entre “session”</li>
<li>Le troisième groupe <strong>“r-x”</strong> signifie les droits pour autres utilisateur.</li>
</ul>
<p><strong>Valeur de droits</strong><br>
X -> 1<br>
W -> 2<br>
R -> 4</p>
</blockquote>
</li>
<li>
<p><strong>chemin absolue</strong> : Un chemin absolue signifie qu’on défini le chemin à partir de la racine.</p>
</li>
<li>
<p><strong>chemin relatif</strong> : Un chemin relatif signifie qu’on défini le chemin à partir du répertoire qu’on se situe.</p>
</li>
<li>
<p><strong>HTML</strong> : Le HTML (HyperText Markup Language) est un langage de balise qui permet de faire des sites web. L’extension se défini par <strong>.html</strong> ou <strong>.htm</strong>.</p>
</li>
<li>
<p><strong>Balise</strong> : Une balise est un objet en HTML qui permet d’identifier un élément d’un contenu. Il existe 2 types de balises</p>
<blockquote>
<p><strong>Balise paire</strong> : C’est une balise qui fonctionne par paire c’est a dire il y’a un début et une fin</p>
</blockquote>
<pre class=" language-html"><code class="prism language-html"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
</code></pre>
<blockquote>
<p><strong>Balise orphline</strong>: C’est un balise qui fonctionne en un ligne et qui prend aucun contenu entre.</p>
</blockquote>
<pre class=" language-html"><code class="prism language-html"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
</code></pre>
</li>
<li>
<p><strong>Attribut</strong> : Un attribut est un élément qu’on rajoute dans une balise qui défini une valeur supplémentaire pour configurer la balise en question.</p>
</li>
<li>
<p><strong>Entité</strong> : Une entité en HTML est une chaîne de caractère qui commence par esperluette “&” et se termine par un point-virgule “;”. Il permet d’afficher des caractères spéciaux.</p>
<pre class=" language-html"><code class="prism language-html"><span class="token entity" title=" ">&nbsp;</span> permet de faire un espacement
<span class="token entity" title="©">&copy;</span> permet d'afficher le signe copyright
</code></pre>
</li>
<li>
<p><strong>IDE</strong> : Une IDE (integrated development environment, <em>environnement de développement en français</em>) est un ensemble de fonctionnalité pour la programmation qui regrouper un éditeur de texte, compilateur, débogueur, …</p>
</li>
<li>
<p><strong>Indentation</strong> : L’indentation en langage de programmation signifie de restructurer les lignes de codes sous forme d’espaces pour une meilleur lisibilité.</p>
</li>
<li>
<p><strong>Git</strong>: Git est un logiciel qui permet de faire des versions d’un projet et de poster dans un serveur. Il fonctionne sous forme de branche pour plusieurs utilisateur permettant de travailler en parallèle.</p>
</li>
<li>
<p><strong>GitHub</strong> : GitHub est une plateforme qui permet d’héberger ces travaux sous forme de répertoire.</p>
</li>
<li>
<p><strong>Snipet</strong>: Snipet en langage de programmation est une fonctionnalité qui permet d’afficher un bout de code prédéfini.</p>
</li>
<li>
<p><strong>CSS</strong> : Le CSS Cascading Style Sheets (feuilles de style en cascade) est un langage pour le web qui permet transformer les balises, donner du style <strong>style</strong>. Il existe 2 familles pour les propriétés:</p>
<blockquote>
<p>Formatage de texte (celui qui touche le texte).<br>
Layout de la boite ().</p>
</blockquote>
<ul>
<li><strong>Sélecteur</strong>: Un sélecteur en css est le noms qui défini la balise.</li>
<li><strong>Propriété</strong>: Une propriété en css est une propriété qu’on défini</li>
<li><strong>Valeur</strong>: Une valeur en css est celui qui va rajouter les données pour les propriétés</li>
<li><strong>Sélecteur</strong>: Un sélecteur en css est celui qui va cibler une balise, une identifiant ou une classe</li>
<li><strong>Référence pour les propriétés</strong> : <a href="https://www.w3schools.com/cssref/">https://www.w3schools.com/cssref/</a></li>
<li><strong>Padding</strong> : espacement interieur</li>
<li><strong>Margin</strong> : espacement exterieur</li>
<li><strong>Absolue et relative</strong> Si le parent est relative et l’enfant est absolu, l’enfant va agir seulement sur le parent.</li>
<li><strong>flexbox</strong>: defini la direction de l’axe principal
<ul>
<li>flex-direction</li>
<li>justify-content: aligne les elements selon l’axe principal</li>
<li>align-items: Aligne les elements flex selon l’axe transversal</li>
<li>flex-wrap: Specifie si les elements flex sont forcés à etre sur une seule ligne ou peuvent etre envelopé sur plusieurs ligne</li>
</ul>
</li>
<li><strong>Pseudo-classe</strong>: Une pseudo-classe est un mot-clé qui peut être ajouté à un sélecteur. Il indique un état spécifique dans l’élement.<br>
Lien -> <a href="https://developer.mozilla.org/fr/docs/Web/CSS/Pseudo-classes">https://developer.mozilla.org/fr/docs/Web/CSS/Pseudo-classes</a><pre class=" language-css"><code class="prism language-css"> <span class="token selector">selecteur<span class="token pseudo-class">:pseudo</span></span><span class="token punctuation">{</span>
<span class="token property">propriete</span><span class="token punctuation">:</span> valeur<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre>
</li>
<li><strong>Pseudo-élément</strong>: Un pseudo-élément est un mot-clé qui peut être ajouté à un sélecteur. Il permet de mettre en forme certaines parties d’un élement ciblé par la règle<pre class=" language-css"><code class="prism language-css"> <span class="token selector">selecteur<span class="token pseudo-element">::pseudo-element</span></span><span class="token punctuation">{</span>
<span class="token property">propriete</span><span class="token punctuation">:</span> valeur<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre>
Lien -><a href="https://developer.mozilla.org/fr/docs/Web/CSS/Pseudo-%C3%A9l%C3%A9ments">https://developer.mozilla.org/fr/docs/Web/CSS/Pseudo-%C3%A9l%C3%A9ments</a></li>
<li><strong>@media queries</strong>: Media queries est une fonction en CSS3 permetant d’ajuster le contenu d’un page à diférrente taille d’écran(Pc, tablette, smartphone,…).<br>
Pour les sélecteurs -> <a href="https://www.w3schools.com/cssref/css_selectors.asp">https://www.w3schools.com/cssref/css_selectors.asp</a></li>
</ul>
</li>
<li>
<p><strong>Internet</strong>: Internet est un systeme de connexion entre plusieurs ordinateur relier entre eux qui permet d’accéder a des donnes de toutes sortes(textes, musiques, vidéos, photos,…)</p>
</li>
<li>
<p><strong>Protocole HTTP</strong>: HTTP (HyperText Transfer Protocol) est un protocole de communication entre client et serveur.</p>
</li>
<li>
<p><strong>Côté client</strong>:Le coté client signifie tout ce qui est la vue d’une application.</p>
</li>
<li>
<p><strong>Côté serveur</strong>: Le coté serveur signifie tout ce qui est les requêtes serveur, la gestion des données.</p>
</li>
<li>
<p><strong>Objet connecté</strong> : Un objet connecté est un objet qui est capable d’envoyer ou de recevoir des données via une connexion internet.</p>
</li>
<li>
<p><strong>Package</strong>: Un package est un ensemble de logiciel.</p>
</li>
<li>
<p><strong>Bootstrap</strong>: Bootstrap est une librairie css.</p>
</li>
<li>
<p><strong>SASS</strong> Syntactically Awesome Stylesheet) est un langage dynamique qui génère des feuilles de style en cascade. Il permet de fragmenter son css, créer des variables, importer/exporter les fichiers.<br>
idem q</p>
</li>
</ul>
<hr>
<h2 id="git">Git</h2>
<h3 id="quelques-petites-définitions">Quelques petites définitions:</h3>
<p><strong>Git</strong>: Git est un logiciel qui permet de poster dans un serveur ces codes avec plusieurs version d’un projet. Il fonctionne sous forme de branche pour plusieurs utilisateur permet de travailler en parallèle. Par plus tard, on peut le faire rejoindre les modification sous forme de sauvegarde ou version.</p>
<ul>
<li>
<p><strong>Stage</strong>: Le Stage dans git est un répertoire qui prépare un fichier ou plusieurs fichiers pour être en compression et faire une sauvegarde. Lors du processus du Stage, git va créer un dossier et un fichier caché. Le dossier est essentiel car c’est celui qui va prendre les fichiers et préparer a faire la sauvegarde du projet.</p>
</li>
<li>
<p><strong>Commit</strong>: Le Commit dans git est un processus qui permet de créer une sauvegarde dans tous ce qui trouve dans le stage.</p>
<p><img src="https://i.stack.imgur.com/zLTpo.png" alt="alt image"></p>
</li>
</ul>
<h3 id="sous-le-terminal">Sous le terminal:</h3>
<table>
<thead>
<tr>
<th>Ligne de commande</th>
<th>Description</th>
<th>Exemple</th>
</tr>
</thead>
<tbody>
<tr>
<td>git init</td>
<td>Initialise le dossier courant. C’est le début d’un phase pour sauvegarder les fichiers/dossiers</td>
<td>git init</td>
</tr>
<tr>
<td>git add</td>
<td>Permet d’ajouter un <strong>ou</strong> plusieurs fichiers dans le stage</td>
<td>git add <em>nomFichier</em> <strong>ou</strong> git add --all <em>(l’ensemble des fichiers )</em></td>
</tr>
<tr>
<td>git commit -m</td>
<td>Permet de faire une sauvegarde en local des fichiers du stage et <strong>-m</strong> permet de rajouter le nom de la sauvegarde</td>
<td>git commit -m"<em>description save</em>"</td>
</tr>
<tr>
<td>git log</td>
<td>Permet d’afficher les sauvegardes effectuer avec le <strong>commit</strong></td>
<td>git log</td>
</tr>
<tr>
<td>git log --oneline</td>
<td>La même chose que le log sauf qu’il montre en une ligne</td>
<td>git log --oneline</td>
</tr>
<tr>
<td>git statuts</td>
<td>Affiche les fichiers qui sont dans le stage</td>
<td>git statuts</td>
</tr>
<tr>
<td>git rm --cached</td>
<td>Retire le fichier du stage</td>
<td>git rm --cached <em>nomFichier</em></td>
</tr>
<tr>
<td>git checkout</td>
<td>Mets à jour la branche avec les modifications</td>
<td>git checkout ‘idCommit’</td>
</tr>
<tr>
<td>git checkout master</td>
<td>Mets à jour la branche <strong>master</strong> avec les modifications</td>
<td>git checkout master</td>
</tr>
<tr>
<td>git checkout -b</td>
<td>Permet de créer une branche et de ci rendre</td>
<td>git checkout -b ‘albi’</td>
</tr>
<tr>
<td>git merge</td>
<td>Fusionne une branche vers l’autre</td>
<td>“albi -> master” git merge albi</td>
</tr>
<tr>
<td>git push</td>
<td>Envoi le répertoire (stage) actuel dans le cloud</td>
<td>git push</td>
</tr>
<tr>
<td>git pull</td>
<td>Télécharge le répertoire (stage) à partir du cloud</td>
<td>git pull</td>
</tr>
<tr>
<td>git clone</td>
<td>Télécharge un répertoire complet en cherchant sur le site Github</td>
<td>git clone <em>Lien</em></td>
</tr>
<tr>
<td>git reset --hard</td>
<td>Restaure la version avec le code alpha-numerique</td>
<td>git reset --hard <em>a9694a1</em></td>
</tr>
<tr>
<td><strong>code</strong></td>
<td>Permet d’ouvrir VS code dans le terminal</td>
<td>code <em>nomDuDossier</em> <strong>ou</strong> code <em>.</em> (<em>dossierCourant</em>)</td>
</tr>
</tbody>
</table><h2 id="bash">Bash</h2>
<table>
<thead>
<tr>
<th>Ligne de commande</th>
<th>Description</th>
<th>Exemple</th>
</tr>
</thead>
<tbody>
<tr>
<td><strong>sudo</strong></td>
<td>Permet de faire une action en mode administrateur</td>
<td>sudo <em>commandes</em></td>
</tr>
<tr>
<td><strong>echo</strong></td>
<td>Affiche du texte dans le terminal</td>
<td>echo <em>texte</em></td>
</tr>
<tr>
<td><strong>cd</strong></td>
<td>Permet de naviguer entre les répertoires</td>
<td>cd <em>repertoire1/</em></td>
</tr>
<tr>
<td><strong>ls</strong></td>
<td>Permet d’afficher la liste des fichiers et/ou répertoire dans le <strong>dossier courant</strong></td>
<td>ls <strong>ou</strong> ls ./</td>
</tr>
<tr>
<td><strong>mkdir</strong></td>
<td>Créer un dossier</td>
<td>mkdir <em>nomDuDossier/</em></td>
</tr>
<tr>
<td><strong>rmdir</strong></td>
<td>Permet de supprimer un répertoire</td>
<td>rmdir <em>repertoire_a_supprimer/</em></td>
</tr>
<tr>
<td><strong>rm</strong></td>
<td>Permet de supprimer un fichier</td>
<td>rm <em>nom_fichier</em></td>
</tr>
<tr>
<td><strong>rm -rf</strong></td>
<td>Permet de supprimer un dossier qui n’est pas vide</td>
<td>rm -rf <em>dossier/</em></td>
</tr>
<tr>
<td><strong>nano</strong></td>
<td>Ouvre un éditeur de texte sous terminal</td>
<td>nano <em>nomDuFichier</em></td>
</tr>
<tr>
<td><strong>cat</strong></td>
<td>Permet d’afficher le contenu d’un fichier</td>
<td>cat <em>fichier.ext</em></td>
</tr>
<tr>
<td><strong>cp</strong></td>
<td>Permet de copier un ou plusieurs fichiers ou dossiers</td>
<td>cp <em>/répertoire_source/nom_fichier_à_copier /répertoire_destination/nom_fichier</em></td>
</tr>
<tr>
<td><strong>chmod</strong></td>
<td>Permet d’attribuer les droits d’accès d’un fichier pour chaque utilisateur</td>
<td>chmod <em>valeurDroit</em> <em>Fichier</em> <strong>ou</strong> <em>Dossier/</em></td>
</tr>
<tr>
<td><strong>pwd</strong></td>
<td>Affihce le chemin absolue du répertoire actuel</td>
<td>pwd</td>
</tr>
<tr>
<td><strong>touch</strong></td>
<td>Permet de créer un fichier</td>
<td>touch <em>nomFichier</em></td>
</tr>
<tr>
<td><strong>mv</strong></td>
<td>Changer de nom <strong>OU</strong> Permet de déplacer un fichier</td>
<td>mv <em>nomA</em> <em>nomB</em> <strong>//</strong> <em>repertoire_A/fichier</em> <em>repertoire_B</em></td>
</tr>
<tr>
<td><strong>clear</strong></td>
<td>Permet de replacer la ligne de commande en haut de la fenêtre</td>
<td>clear</td>
</tr>
<tr>
<td><strong>man</strong></td>
<td>Accède au manuel de la commande en question</td>
<td>man <em>nomCommande</em></td>
</tr>
<tr>
<td><strong>tree</strong></td>
<td>Affiche l’arborescence du dossier en question (<em>commande à installer</em>)</td>
<td>tree <em>nomDossier/</em></td>
</tr>
</tbody>
</table><hr>
<h2 id="javascript">Javascript</h2>
<h3 id="quelques-petites-définitions-1">Quelques petites définitions:</h3>
<p>Javascript est un langage de programmation orienté objet qui permet de rentre dynamique un site web. Il est programmé sous formes de scripts. Les scripts sont introduit en fin de page pour d’abord charger la page html, ensuite les scripts pour optimiser le chargement.</p>
<p>Il est aussi un langage de type ( String, Int, Float, …).</p>
<ul>
<li>
<p><strong>Variable</strong> : Une variable en programmation est un nom qui représente sur la mémoire centrale qui lui donne un nom et stocke l’information. Il existe plusieurs type de variable</p>
<blockquote>
<p><strong>let</strong> et <strong>var</strong> : une valeur qui évolue dans le temps<br>
<strong>const</strong> : une valeur qui sera définitif</p>
<pre class=" language-javascript"><code class="prism language-javascript"><span class="token keyword">var</span> maVariable <span class="token operator">=</span> maValeur<span class="token punctuation">;</span> ou <span class="token keyword">let</span> maVariable <span class="token operator">=</span> maValeur<span class="token punctuation">;</span>
<span class="token keyword">const</span> maVaribleFixe<span class="token punctuation">;</span>
</code></pre>
<p>Pour les noms de variables : <a href="https://mathiasbynens.be/notes/javascript-identifiers">https://mathiasbynens.be/notes/javascript-identifiers</a></p>
</blockquote>
</li>
<li>
<p><strong>Conditions</strong> : Une condition en programmation est une fonction qui permet de faire des calculs ou action en fonction d’une valeur vrai <strong>true</strong> ou faux <strong>false</strong>.</p>
<blockquote>
<pre class=" language-javascript"><code class="prism language-javascript"><span class="token keyword">if</span><span class="token punctuation">(</span>maVariable <span class="token operator">==</span> <span class="token boolean">true</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
Code à exécuter si <span class="token boolean">true</span>
<span class="token punctuation">}</span>
<span class="token keyword">else</span><span class="token punctuation">{</span>
Code à exécuter si <span class="token boolean">false</span>
<span class="token punctuation">}</span>
</code></pre>
</blockquote>
</li>
<li>
<p><strong>Boucles</strong>: Une boucle en programmation est un processus de boucle qui tourne en fonction de condition. Il existe plusieurs type de boucles:</p>
<blockquote>
<p>while**: La boucle while est utilisé si on ne sait pas combien de fois on doit faire tourner</p>
<pre class=" language-javascript"><code class="prism language-javascript"><span class="token keyword">while</span><span class="token punctuation">(</span>boolean<span class="token punctuation">)</span><span class="token punctuation">{</span>
code à exécuter si <span class="token boolean">true</span>
pour sortir de la boucle la variable doit être modifier
<span class="token punctuation">}</span>
</code></pre>
<p><strong>for</strong>: la boucle for est utilisé si on a un tour défini, connu.</p>
<pre class=" language-javascript"><code class="prism language-javascript"> <span class="token operator">-</span> <span class="token punctuation">(</span><span class="token keyword">let</span> i<span class="token operator">=</span>a<span class="token punctuation">)</span><span class="token punctuation">:</span> La premire partie permet d'initialiser le compteur de boucle<span class="token punctuation">.</span>
<span class="token operator">-</span> <span class="token punctuation">(</span>i<span class="token operator"><</span>nbToursVoulu<span class="token punctuation">)</span><span class="token punctuation">:</span> La deuxième partie permet définir la condition de boucle<span class="token punctuation">.</span>
<span class="token operator">-</span> <span class="token punctuation">(</span>i<span class="token operator">++</span><span class="token punctuation">)</span><span class="token punctuation">:</span> La troisime partie permet d<span class="token string">'incrémenter, c'</span>est a dire de faire <span class="token operator">+</span><span class="token number">1</span><span class="token punctuation">.</span>
<span class="token keyword">for</span><span class="token punctuation">(</span><span class="token keyword">let</span> i<span class="token operator">=</span>a<span class="token punctuation">;</span>i<span class="token operator"><</span>nbToursVoulu<span class="token punctuation">;</span>i<span class="token operator">++</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
Code à exécuter si <span class="token boolean">true</span>
<span class="token punctuation">}</span>
</code></pre>
<p><strong>foreach</strong>: la boucle foreach agit comme le for mais qui est plutôt utilisé pour chaque élément d’un tableau.</p>
<pre class=" language-javascript"><code class="prism language-javascript">array<span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span>e <span class="token operator">=></span><span class="token punctuation">{</span>
Code à excuter<span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre>
</blockquote>
</li>
<li>
<p><strong>Switch</strong>: Un switch est une instruction qui prend une variable et va vérifier si il y’a une correspondance avec <strong>case</strong>. S’il existe, alors la parti case avec la variable correspondant va exécuter le code qui contient.</p>
<blockquote>
<pre class=" language-javascript"><code class="prism language-javascript"> <span class="token keyword">switch</span><span class="token punctuation">(</span>maVariable<span class="token punctuation">)</span><span class="token punctuation">{</span>
<span class="token keyword">case</span> <span class="token punctuation">(</span>number ou String<span class="token punctuation">)</span><span class="token punctuation">:</span>
<span class="token comment">//Code à executer;</span>
<span class="token keyword">break</span><span class="token punctuation">;</span>
<span class="token punctuation">.</span>
<span class="token punctuation">.</span>
<span class="token punctuation">.</span>
<span class="token punctuation">.</span>
<span class="token keyword">default</span><span class="token punctuation">:</span> <span class="token comment">//Si aucune variable correspond, la case default va s’exécuter.</span>
Code à executer<span class="token punctuation">;</span>
<span class="token keyword">break</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre>
</blockquote>
</li>
<li>
<p><strong>Tableau</strong>: Un tableau (array) permet de stocker les donnees dans un tableau.</p>
<blockquote>
<pre class=" language-javascript"><code class="prism language-javascript"> <span class="token comment">//Declare une variable avec un tableau</span>
<span class="token keyword">let</span> tab <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
<span class="token comment">//Pour stocker des donnees</span>
<span class="token keyword">let</span> tab <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span><span class="token number">2</span><span class="token punctuation">,</span><span class="token number">3</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
<span class="token comment">//ou</span>
<span class="token keyword">let</span> tab <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token string">"test"</span><span class="token punctuation">,</span><span class="token string">"yolo"</span><span class="token punctuation">,</span><span class="token string">"lol"</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
</code></pre>
</blockquote>
</li>
<li>
<p><strong>Fonction</strong>: Une fonction (function) est un morceau de code qu’on pourra utiliser plusieurs fois en appellant par son nom.</p>
<blockquote>
<pre class=" language-javascript"><code class="prism language-javascript"> <span class="token keyword">function</span> <span class="token function">nomDeMaFonction</span><span class="token punctuation">(</span>VariableEnParametre<span class="token punctuation">)</span><span class="token punctuation">{</span>
<span class="token comment">//Code à executer;</span>
<span class="token punctuation">}</span>
</code></pre>
<p>Il existe aussi les fonction fléché</p>
<pre class=" language-javascript"><code class="prism language-javascript"><span class="token punctuation">(</span><span class="token punctuation">[</span>param<span class="token punctuation">]</span><span class="token punctuation">,</span><span class="token punctuation">[</span>param<span class="token punctuation">]</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
<span class="token comment">//Code à executer;</span>
<span class="token punctuation">}</span>
</code></pre>
</blockquote>
</li>
</ul>
<hr>
<h2 id="orienté-objet">Orienté Objet</h2>
<h3 id="quelques-petites-définitions-2">Quelques petites définitions:</h3>
<p><strong>Définition:</strong> Un objet est un élément qui peut regrouper plusieur information et/ou de methode. Un objet regroupe des propriétés.</p>
<ul>
<li>
<p><strong>Propriétés</strong>: Un objet regroupe des propriétés:</p>
<pre class=" language-javascript"><code class="prism language-javascript"><span class="token keyword">let</span> personne <span class="token operator">=</span> <span class="token punctuation">{</span>
nom<span class="token punctuation">:</span>zak<span class="token punctuation">,</span>
prenom<span class="token punctuation">:</span>zak<span class="token punctuation">,</span>
age<span class="token punctuation">:</span><span class="token number">27</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
</code></pre>
</li>
<li>
<p><strong>New</strong>: On peut créer un objet avec ces propriétés, on <strong>instancie</strong> un objet:</p>
<pre class=" language-javascript"><code class="prism language-javascript"><span class="token keyword">let</span> noty <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Personne</span><span class="token punctuation">(</span><span class="token string">'albi'</span><span class="token punctuation">,</span><span class="token string">'noty'</span><span class="token punctuation">,</span><span class="token number">21</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre>
</li>
<li>
<p><strong>Modifier un Objet</strong>: On peut modifer un objet en appelant la variable qui la stock suivant de la propriétes voulu: construct</p>
<pre class=" language-javascript"><code class="prism language-javascript">noty<span class="token punctuation">.</span>prenom <span class="token operator">=</span> <span class="token string">"Albi"</span><span class="token punctuation">;</span>
</code></pre>
</li>
<li>
<p><strong>Classe</strong>: Une classe en orienté objet est un ensemble de propriétes, de methode communs a l’objet.</p>
<pre class=" language-javascript"><code class="prism language-javascript"><span class="token keyword">class</span> <span class="token class-name">Personne</span><span class="token punctuation">{</span>
<span class="token function">constructor</span><span class="token punctuation">(</span>nom<span class="token punctuation">,</span> prenom<span class="token punctuation">)</span><span class="token punctuation">{</span>
<span class="token keyword">this</span><span class="token punctuation">.</span>nom <span class="token operator">=</span> nom<span class="token punctuation">;</span>
<span class="token keyword">this</span><span class="token punctuation">.</span>prebom <span class="token operator">=</span> prenom<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre>
</li>
<li>
<p><strong>this</strong>: Le mot clé this représente l’objet pour lequel on désire accéder a une propriété ou un méthode:</p>
<pre class=" language-javascript"><code class="prism language-javascript"><span class="token function">afficherNom</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
<span class="token keyword">return</span> <span class="token keyword">this</span><span class="token punctuation">.</span>nom<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre>
</li>
<li>
<p><strong>Méthode</strong> : Une méthode est une “fonction” mais qui appartient uniquement à un objet. Elle se porte juste a l’appel de l’objet.</p>
<pre class=" language-javascript"><code class="prism language-javascript"><span class="token function">bonjour</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
<span class="token keyword">return</span> <span class="token string">"Bonjour"</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre>
<ul>
<li>On peut les appeler dans un fichier sous forme:</li>
</ul>
<pre class=" language-javascript"><code class="prism language-javascript">albi<span class="token punctuation">.</span><span class="token function">bonjour</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre>
</li>
<li>
<p><strong>Héritage</strong> : L’héritage en orienté objet est la définition d’une classe qui s’étend ces caractéristique d’une classe vers une autre. Par exemple, on a créer une classe Personne(nom, prénom,…) et par après on crée une classe Coach, Eleve, qui s’étend de la Personne</p>
<pre class=" language-javascript"><code class="prism language-javascript"> <span class="token keyword">class</span> <span class="token class-name">Personne</span><span class="token punctuation">{</span>
<span class="token function">constructor</span><span class="token punctuation">(</span>nom<span class="token punctuation">,</span> prenom<span class="token punctuation">)</span><span class="token punctuation">{</span>
<span class="token keyword">this</span><span class="token punctuation">.</span>nom <span class="token operator">=</span> nom<span class="token punctuation">;</span>
<span class="token keyword">this</span><span class="token punctuation">.</span>prenom <span class="token operator">=</span> prenom<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre>
<ul>
<li>Extends</li>
<li>Le <strong>super</strong> permet de recupéré les proriétés de l’objet</li>
</ul>
<pre class=" language-javascript"><code class="prism language-javascript"> <span class="token comment">// Classe Coach qui s'etends Personne</span>
<span class="token keyword">class</span> <span class="token class-name">Coach</span> <span class="token keyword">extends</span> <span class="token class-name">Personne</span><span class="token punctuation">{</span>
<span class="token function">constructor</span><span class="token punctuation">(</span>nom<span class="token punctuation">,</span> prenom<span class="token punctuation">)</span><span class="token punctuation">{</span>
<span class="token keyword">super</span><span class="token punctuation">(</span>nom<span class="token punctuation">,</span> prenom<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token comment">// Classe Eleve qui s'etend Personne</span>
<span class="token keyword">class</span> <span class="token class-name">Eleve</span> <span class="token keyword">extends</span> <span class="token class-name">Personne</span><span class="token punctuation">{</span>
<span class="token function">constructor</span><span class="token punctuation">(</span>nom<span class="token punctuation">,</span> prenom<span class="token punctuation">)</span><span class="token punctuation">{</span>
<span class="token keyword">super</span><span class="token punctuation">(</span>nom<span class="token punctuation">,</span> prenom<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre>
<p><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/1e/Heritage_informatique.svg/1024px-Heritage_informatique.svg.png" alt="alt image"></p>
</li>
<li>
<p><strong>Import/Export</strong>: L’import et l’export de fichier en js permet de d’importer les fichies qu’on a besoin et exporter les fichiers vers un autre. Dans le HTML, il faudra pas oublier d’écrire type module dans la balise script.</p>
<ul>
<li>HTML:</li>
</ul>
<pre class=" language-html"><code class="prism language-html"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>./assets/js.main.js<span class="token punctuation">"</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>module<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script language-javascript"></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span>
</code></pre>
<ul>
<li>Javascript:</li>
</ul>
<pre class=" language-javascript"><code class="prism language-javascript"> <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token keyword">class</span> <span class="token class-name">Player</span><span class="token punctuation">{</span>
<span class="token punctuation">}</span>
<span class="token keyword">import</span> Player <span class="token keyword">from</span> <span class="token string">'./Player.js'</span><span class="token punctuation">;</span>
</code></pre>
</li>
</ul>
<ul>
<li>Annexe: le fichier main.js/app.js est le nom de base qu’on défini pour le fichier principal de js.</li>
</ul>
<h2 id="dom">DOM</h2>
<h3 id="quelques-petites-définitions-3">Quelques petites définitions:</h3>
<ul>
<li>
<p><strong>Définition</strong> : Le DOM ( <em>Document Object model</em> ) est une représentation d’un model en objet. Les balises html ou texte sont représenter par des nœuds. Il existe 2 types de nœuds:</p>
<ul>
<li><strong>Node Element</strong> (un nœud de type élément): Celui qui représente les balises</li>
<li><strong>Node Text</strong> (un nœud de type texte): Celui représente le contenu texte. Il est <strong>enfant</strong> et ne <strong>peut pas avoir d’enfant</strong><br>
<img src="https://www.w3schools.com/js/pic_htmltree.gif" alt="alt image"></li>
</ul>
</li>
<li>
<p><strong>Type Node</strong>: il est possible de verifier quel type est l’élément qu’on veut cibler</p>
<pre class=" language-javascript"><code class="prism language-javascript"> <span class="token keyword">let</span> ele <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'#ele'</span><span class="token punctuation">)</span><span class="token punctuation">.</span>nodetype<span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>ele<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre>
<p>Il renvoi un nombre entre 1 et 12 suivant quel type d’élément.<br>
<a href="https://www.w3schools.com/jsref/prop_node_nodetype.asp">Pour connaitre le type node du nombre.</a></p>
</li>
<li>
<p><strong>childNodes</strong>: le childNodes permet de récupérer les enfants d’un élément sous forme de tableau</p>
<pre class=" language-html"><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>body</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>div1<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>div2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>div3<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>body</span><span class="token punctuation">></span></span>
</code></pre>
<p>Javascript:</p>
<pre class=" language-javascript"><code class="prism language-javascript"><span class="token keyword">let</span> ele <span class="token operator">=</span> document<span class="token punctuation">.</span>body<span class="token punctuation">.</span>childNodes<span class="token punctuation">;</span>
<span class="token comment">//Ele contient maintenant un tableau avec 3 element</span>
<span class="token comment">// car dans le body il y a 3 enfants </span>
<span class="token comment">// qui sont des <div></span>
</code></pre>
</li>
<li>
<p><strong>parentNode</strong>: le parentNode permet de récupérer le parent d’un élément.</p>
<pre class=" language-html"><code class="prism language-html"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>body</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>div1<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>div2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>div3<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>body</span><span class="token punctuation">></span></span>
</code></pre>
<p>Javascript:</p>
<pre class=" language-javascript"><code class="prism language-javascript"><span class="token keyword">let</span> ele <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span>#div1<span class="token punctuation">)</span><span class="token punctuation">.</span>parentNode<span class="token punctuation">;</span>
<span class="token comment">//Renvoi l'element parent qui le body</span>
<span class="token comment">//Renvoi <body>...</body></span>
</code></pre>
</li>
<li>
<p><strong>getElementById</strong>: Le getElementById permet de récupérer un élément grâce à son id.<br>
/!\ <strong>Attention l’affectation de l’id, un element peut avoir un ET un seul id.</strong> /!\</p>
<pre class=" language-html"><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>body</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>div1<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>div2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>div3<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>body</span><span class="token punctuation">></span></span>
</code></pre>
<p>Javascript:</p>
<pre class=" language-javascript"><code class="prism language-javascript"><span class="token comment">//Je veux recuperer le div avec id div1</span>
<span class="token keyword">let</span> ele <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'div1'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">//Recupere l'element</span>
<span class="token comment">//Resultat : <div id="div1"></div></span>
</code></pre>
</li>
<li>
<p><strong>getElementsByClassName</strong>: Le getElementsByClassName permet de récupérer un tableau dont les éléments avec la class voulu.</p>
<pre class=" language-html"><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>body</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>maDiv<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>a<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>maDiv<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>b<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>maDiv<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>c<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>body</span><span class="token punctuation">></span></span>
</code></pre>
<p>Javascript:</p>
<pre class=" language-javascript"><code class="prism language-javascript"><span class="token comment">//Je veux recuperer les div avec la classe div</span>
<span class="token keyword">let</span> ele <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementsByClassName</span><span class="token punctuation">(</span><span class="token string">'div'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">//Pour cibler le premier element du tableau</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>ele<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">//Recupere l'element du tableau en index 0</span>
<span class="token comment">//Resultat : <div class="maDiv">a</div></span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>ele<span class="token punctuation">[</span><span class="token number">2</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">//Recupere l'element du tableau en index 2</span>
<span class="token comment">//Resultat : <div class="maDiv">c</div></span>
</code></pre>
</li>
<li>
<p><strong>getElementsByTagName</strong>:Le getElementsByTagName permet de récpérer un tableau dont les éléments sont la balise voulu</p>
<pre class=" language-html"><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>body</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>maDiv<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>a<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>maDiv<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>b<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>maDiv<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>c<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>body</span><span class="token punctuation">></span></span>
</code></pre>
<p>Javascript:</p>
<pre class=" language-javascript"><code class="prism language-javascript"><span class="token comment">//Je veux recuperer les div</span>
<span class="token keyword">let</span> ele <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementsByTagName</span><span class="token punctuation">(</span><span class="token string">'div'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">//Pour cibler le premier element du tableau</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>ele<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">//Recupere l'element du tableau en index 0</span>
<span class="token comment">//Resultat : <div class="maDiv">a</div></span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>ele<span class="token punctuation">[</span><span class="token number">2</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">//Recupere l'element du tableau en index 2</span>
<span class="token comment">//Resultat : <div class="maDiv">c</div></span>
</code></pre>
</li>
<li>
<p><strong>querySelector</strong>: Le querySelector agit comme le getElement mais il a sa particularité. En paramètre, il agit comme le css c-à-d qu’il faut indiquer le sélecteur (div, #monId, .maClasse).</p>
<pre class=" language-html"><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>body</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span>a<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>maDiv<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>b<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>maDiv<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>c<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>body</span><span class="token punctuation">></span></span>
</code></pre>
<p>Javascript:</p>
<pre class=" language-javascript"><code class="prism language-javascript"><span class="token keyword">let</span> ele <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">'div'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">let</span> ele1 <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">'#maDiv'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">let</span> ele2 <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">'.maDiv'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>ele<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">//Recupere l'element dont balise div</span>
<span class="token comment">//Resultat : <div>a</div></span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>ele1<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">//Recupere l'element dont l'id est #maDiv</span>
<span class="token comment">//Resultat : <div id="maDiv">c</div</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>ele2<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">//Recupere l'element dont la class est .maDiv</span>
<span class="token comment">//Resultat : <div class="maDiv">c</div</span>
</code></pre>
</li>
<li>
<p><strong>querySelectorAll</strong>: Le querySelectorAll agit comme getElement mais il a sa particularité. En parametre, il agit comme le css c-à-d qu’il faut indiquer le sélecteur (div, .maClasse). Mais, il renvoi un tableau avec les elements qui correspond.</p>
<pre class=" language-html"><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>body</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span>a<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>maDiv<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>b<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>monP<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Aurvoir<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>monP<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Merci<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>body</span><span class="token punctuation">></span></span>
</code></pre>
<p>Javascript:</p>
<pre class=" language-javascript"><code class="prism language-javascript"><span class="token keyword">let</span> ele <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">querySelectorAll</span><span class="token punctuation">(</span><span class="token string">'div'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">let</span> eleP <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">querySelectorAll</span><span class="token punctuation">(</span><span class="token string">'.monP'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>ele<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">//Recupere le tableau dont les element sont </span>
<span class="token comment">//les balise div</span>
<span class="token comment">//Resultat : NodeList(2)</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>eleP<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">//Recupere le tableau dont les elements sont</span>
<span class="token comment">//class .maDiv</span>
<span class="token comment">//Resultat : NodeList(2)</span>
<span class="token comment">//Verifier dans la console</span>
</code></pre>
</li>
<li>
<p><strong>innerHTML</strong>: Le innerHTML permet de renvoyer du contenu html à un élément (c’est a dire qu’on peut modifier son contenu).</p>
<pre class=" language-html"><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h1</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>test<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Hello World<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h1</span><span class="token punctuation">></span></span>
</code></pre>
<p>Javascript:</p>
<pre class=" language-javascript"><code class="prism language-javascript"><span class="token keyword">let</span> ele <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'test'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
ele<span class="token punctuation">.</span>innerHTML <span class="token operator">=</span> <span class="token string">"Salut Mec"</span><span class="token punctuation">;</span>
</code></pre>
<p>Résultat en HTML:</p>
<pre class=" language-html"><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h1</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>test<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Salut Mec<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h1</span><span class="token punctuation">></span></span>
</code></pre>
</li>
<li>
<p><strong>getAttribute()</strong>: il permet de récupérer l’attribut d’une balise HTML.<br>
HTML</p>
<pre class=" language-html"><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h1</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>test<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>titre<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Hello World<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h1</span><span class="token punctuation">></span></span>
</code></pre>
<p>Javascript:</p>
<pre class=" language-javascript"><code class="prism language-javascript"><span class="token keyword">let</span> ele <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'test'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">let</span> attribut <span class="token operator">=</span> ele<span class="token punctuation">.</span><span class="token function">getAttribute</span><span class="token punctuation">(</span><span class="token string">'class'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">//ou</span>
document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'test'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">getAttribute</span><span class="token punctuation">(</span><span class="token string">'class'</span><span class="token punctuation">)</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>attribut<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">//renvoi titre</span>
</code></pre>
</li>
<li>
<p><strong>classList</strong>: Il permet de renvoyer un tableau avec toutes les class d’une balise. Mais aussi on pourra ajouter, supprimer, remplacer ou modifier. <a href="https://developer.mozilla.org/fr/docs/Web/API/Element/classList">Source</a></p>
</li>
<li>
<p><strong>createElement()</strong>: Il permet de créer un élément html en spécifiant sa balise.</p>
<pre class=" language-javascript"><code class="prism language-javascript"><span class="token keyword">let</span> el <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">createElement</span><span class="token punctuation">(</span><span class="token string">'div'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">//Pour le mettre dans le html, il faudra utiliser appendchild.</span>
</code></pre>
</li>
<li>
<p><strong>createTextNode()</strong>: Il permet de creer un texte qu’on pourra le push dans l’html.</p>
<pre class=" language-javascript"><code class="prism language-javascript"><span class="token keyword">let</span> el <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">createTextNode</span><span class="token punctuation">(</span><span class="token string">'Something to write here...'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre>
</li>
<li>
<p><strong>appendChild():</strong> Il permt d’ajouter un element à l’enfant d’un balise.</p>
<pre class=" language-javascript"><code class="prism language-javascript"><span class="token keyword">let</span> a <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">createElement</span><span class="token punctuation">(</span><span class="token string">'div'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">let</span> body <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">'body'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
body<span class="token punctuation">.</span><span class="token function">appendChild</span><span class="token punctuation">(</span>a<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre>
</li>
<li>
<p><strong>.remove()</strong>: Il permet de supprier un element dans l’html.</p>
<pre class=" language-javascript"><code class="prism language-javascript"><span class="token keyword">let</span> a <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'test'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
a<span class="token punctuation">.</span><span class="token function">remove</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre>
</li>
<li>
<p><strong>removeChild()</strong>: Il permet de permet d’effacer un enfant d’un element.</p>
<pre class=" language-javascript"><code class="prism language-javascript"><span class="token keyword">let</span> body <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementByTag</span><span class="token punctuation">(</span><span class="token string">'Body'</span><span class="token punctuation">)</span>
body<span class="token punctuation">.</span><span class="token function">removeChild</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre>
</li>
<li>
<p><strong>.style</strong>: Il permet de donner du style a un élement.</p>
<pre class=" language-javascript"><code class="prism language-javascript"><span class="token keyword">let</span> el <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">'#test'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
el<span class="token punctuation">.</span>style<span class="token punctuation">.</span>marginTop <span class="token operator">=</span> <span class="token string">"5px"</span><span class="token punctuation">;</span>
</code></pre>
</li>
<li>
<p><strong>Evenement</strong>: Un événement en dom est un moment qu’on peut détecter suivant les actions de l’utilisateur. On peut parler d’écouteur. Il s’applique sur élément. Pour déclencher un événement, il faudra cibler l’élément en question et qu’il doit l’écouter avec <strong>addEventListener</strong>.</p>
<ul>
<li>Le premier parametre va servir à dire qu’elle type d’événement il doit écouter.</li>
<li>Le second paremetre est l’éxecution d’une fonction</li>
</ul>
<pre class=" language-javascript"><code class="prism language-javascript"> bouton<span class="token punctuation">.</span><span class="token function">addEvenetListener</span><span class="token punctuation">(</span><span class="token string">'event'</span><span class="token punctuation">,</span><span class="token string">'function'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre>
<p>Exemple sur un click:</p>
<pre class=" language-javascript"><code class="prism language-javascript"> <span class="token keyword">let</span> bouton <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'bouton'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">//Ici nous allons agir lorsque le bouton est cliquer</span>
<span class="token comment">//Execute la fonction qui fait un console.log</span>
bouton<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">'click'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">"Bonjour"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre>
<p>Exemple pour input :</p>
<pre class=" language-javascript"><code class="prism language-javascript"> input<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">'input'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'md'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre>
<p>Dans un event, il est possible de récuperer ce qu’une personne introduit dans un input.</p>
<pre class=" language-javascript"><code class="prism language-javascript">input<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">'input'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span>e<span class="token punctuation">)</span> <span class="token operator">=></span><span class="token punctuation">{</span>
<span class="token comment">//Affiche l'objet de l'event</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>e<span class="token punctuation">)</span>
<span class="token punctuation">}</span>
</code></pre>
<p>Pour voir les autres types d’event: <a href="https://developer.mozilla.org/fr/docs/Web/Events">https://developer.mozilla.org/fr/docs/Web/Events</a></p>
</li>
</ul>
<h3 id="liste-de-méthode">Liste de méthode</h3>
<table>
<thead>
<tr>
<th>Nom</th>
<th>Effet</th>
</tr>
</thead>
<tbody>
<tr>
<td>push()</td>
<td>Insère un élément à la dernière position du tableau</td>
</tr>
<tr>
<td>pop()</td>
<td>Supprime un élément à la dernière position du tableau</td>
</tr>
</tbody>
</table><hr>
<h2 id="react">React</h2>
<h3 id="quelques-petites-définitions-4">Quelques petites définitions</h3>
<ul>
<li>
<p><strong>Définition</strong>: React est une libraire Js créer par les developpeurs de<br>
Facebook. Il permet de faciliter la construction d’une ou plusieurs interface(s) pour utilisateur (UI) sous forme de composant.<br>
Le react est utilisé car le DOM en javascript est difficile de prévoir dans quel état il sera à l’instant T et certes rapide mais lent pour les interactions. Il est basé aussi sur l’ES6-7 (ECMA Script).</p>
</li>
<li>
<p><strong>Virtual DOM</strong>: Le virtual DOM est sous forme d’objet Js. Il est plus rapide à manipuler. Mais, il permet de garder une memoire du DOM précédent.</p>
</li>
<li>
<p><strong>Spread operator</strong>: Le spread operator est un opérateur qui permet de parcourir une variable sous forme de boucle. Il est utiliser sous forme de …</p>
<pre class=" language-javascript"><code class="prism language-javascript"><span class="token keyword">let</span> a <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span><span class="token number">2</span><span class="token punctuation">,</span><span class="token number">3</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
<span class="token keyword">let</span> b <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token number">4</span><span class="token punctuation">,</span><span class="token number">5</span><span class="token punctuation">,</span><span class="token number">6</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
<span class="token keyword">let</span> c <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token operator">...</span>a<span class="token punctuation">,</span> <span class="token operator">...</span>b<span class="token punctuation">]</span>
</code></pre>
</li>
<li>
<p><strong>Mutation et Réassignation</strong>: Les deux mots signifie une modification d’une variable ou d’un objet. Mais, ils sont très différent.</p>
<ul>
<li>
<p><strong>Mutation</strong>: La mutation signifie qu’on ajoute une valeur directement dans la variable.</p>
<pre class=" language-javascript"><code class="prism language-javascript"><span class="token keyword">let</span> a <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span><span class="token number">2</span><span class="token punctuation">,</span><span class="token number">3</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
<span class="token keyword">let</span> b <span class="token operator">=</span> a<span class="token punctuation">;</span>
a<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token number">4</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
a <span class="token operator">===</span> b <span class="token comment">// true</span>
</code></pre>
</li>
<li>
<p><strong>Réassignation</strong>: La reassignation signifie qu’on va redéfinir la variable en ajoutant la modification.</p>
<pre class=" language-javascript"><code class="prism language-javascript"><span class="token keyword">let</span> a <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span><span class="token number">2</span><span class="token punctuation">,</span><span class="token number">3</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
<span class="token keyword">let</span> b <span class="token operator">=</span> a<span class="token punctuation">;</span>
a <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token operator">...</span><span class="token punctuation">,</span><span class="token number">4</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
a <span class="token operator">===</span> b<span class="token punctuation">;</span>
</code></pre>
</li>
</ul>
</li>
<li>
<p><strong>map()</strong>: La méthode map va permettre de parcourir un tableau et lancer une fonction qui va permettre d’executer quelque chose</p>
<pre class=" language-javascript"><code class="prism language-javascript"><span class="token keyword">let</span> a <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span><span class="token number">2</span><span class="token punctuation">,</span><span class="token number">3</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
a<span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span>num <span class="token operator">=></span> num<span class="token operator">*</span><span class="token number">2</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>a<span class="token punctuation">)</span> <span class="token comment">// renvoi [2,4,6]</span>
</code></pre>
</li>
<li>
<p><strong>filter()</strong>:</p>
<pre class=" language-javascript"><code class="prism language-javascript"><span class="token keyword">let</span> a <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span><span class="token number">2</span><span class="token punctuation">,</span><span class="token number">3</span><span class="token punctuation">,</span><span class="token number">4</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
a <span class="token operator">=</span> a<span class="token punctuation">.</span><span class="token function">filter</span><span class="token punctuation">(</span>num <span class="token operator">=></span> num <span class="token operator">%</span> <span class="token number">2</span> <span class="token operator">===</span> <span class="token number">0</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>a<span class="token punctuation">)</span> <span class="token comment">//Renvoi [2,4]</span>
</code></pre>
</li>
</ul>
<p>dossier public:<br>
<br>
npx create-react-app : permet de creer l’application avec tous les composants s</p>
<p>/<em>pwa</em>/</p>
<p>pour creer un fichier voir vscode</p>
<p>render() : toujours avec un return<br>
JSX: on peut envoyer dans le render une balise</p>
<p>props: permet de passer des donnees via les balises de l’importation</p>
<p>pour faire passer un objet on utilise {{}}</p>
<p>state: cest la ou les donnes vont etre stocker<br>
on peut inserer un objet dans le state. permet avoir les donnees dans une page</p>
<p>cycle de vie d’un composant</p>
<p>setState: permet de redefinir la state</p>
<p><a href="https://reactjs.org/docs/events.html#supported-events">https://reactjs.org/docs/events.html#supported-events</a></p>
<p>handling events: ressemble addEveentListener<br>
bind pour assigner<br>
ex:</p>
<p>button onClick(this.handleChangeTitle.bind(this))</p>
<p>conditional rendering: L’affichage conditionel ( Conditional Rendering ) permet de mettre des conditions pour afficher un contenu voulu. On peut passer des props des conditions et ensuite verifier en condition:<br>
- condition javascript(if else …)<br>
- condition && ( {condition && le bloc jsx})<br>
- condition ternaire.</p>
<p>condition ternaire: une methode de rendu conditionnel</p>
<p>(condition ? vrai : faux)</p>
<p>Cache React: <a href="https://www.robinwieruch.de/local-storage-react">https://www.robinwieruch.de/local-storage-react</a></p>
<hr>
<h2 id="raccourci-clavier">Raccourci clavier</h2>
<h3 id="sur-vs-code">Sur VS Code</h3>
<table>
<thead>
<tr>
<th>Description</th>
<th>Touche clavier</th>
</tr>
</thead>
<tbody>
<tr>
<td>Ouvrir la commande palette</td>
<td>CTRL + SHIFT + P</td>
</tr>
<tr>
<td>Replace le code dans la limite de la fenêtre</td>
<td>ALT + Z</td>
</tr>
<tr>
<td>Dupliquer la ligne de code vers le bas</td>
<td>SHIFT + ALT + flche de bas</td>
</tr>
<tr>
<td>Afficher la prévisualition d’un ficher markdown sur Vs code</td>
<td>CTRL + K + V</td>
</tr>
</tbody>
</table><hr>
<h3 id="sous-linux">Sous Linux</h3>
<table>
<thead>
<tr>
<th>Description</th>
<th>Touche Clavier</th>
</tr>
</thead>
<tbody>
<tr>
<td>Ouvrir le terminal</td>
<td>CTRL + ALT + T</td>
</tr>
<tr>
<td>Dans le terminal, permet de compléter rapidement</td>
<td>Tab</td>
</tr>
<tr>
<td>Dans le terminal, permet de voir les commandes introduites précédemment</td>
<td>Flche de Haut</td>
</tr>
<tr>
<td>Rechercher dans le code</td>
<td>CTRL + F</td>
</tr>
<tr>
<td>Permet d’aller sur le fichier</td>
<td>CTRL + P</td>
</tr>
</tbody>
</table><h2 id="sass">SASS</h2>
<h3 id="importation">Importation</h3>
<ul>
<li>
<p>Importation: L’ importation permet en sass de diviser le code css en plusieurs morceau. Pour eviter que le fichier soit compiler, il faut indiquer avec un underscore devant le nom.<br>