Want to create interactive content? It’s easy in Genially!

Reuse this genially

JavaScript 101

rootasjey

Created on May 10, 2021

Apprendre les bases du JavaScript

Start designing with a free template

Discover more than 1500 professional designs like these:

Essential Learning Unit

Akihabara Learning Unit

Genial learning unit

History Learning Unit

Primary Unit Plan

Vibrant Learning Unit

Art learning unit

Transcript

JavaScript 101

JS

Les bases pour tout comprendre

commencer

QUI SUIS-JE ?

Jérémie CORPINOT

DÉVELOPPEUR WEB ET MOBILE

Je suis freelance depuis 2019 après être passé chez Dassault Systèmes et Fabernovel Technologies. J'ai eu mon diplôme en 2015 à l'Université de Versailles. Autodidacte depuis mon jeune âge et ayant appris mes premières lignes de code avec le Site du Zéro, c'est avec plaisir que je souhaite partager mes connaissances aux autres. Je créé depuis plusieurs années des projets open-source sur mon temps libre. À part la programmation, beaucoup de sujets m'intéressent tels que l'art, la psychologie, les jeux-vidéos, la sociologie, Twitch et j'en passe.

INFO

Index

Comment va se découper la formation. Il y aura 3 grands modules accompagnés d'une partie théoriques, de plusieurs exercices, ainsi qu'un mini projet.

Algorithmique

Objectifs

Fondamentaux

Mini-projet

Web & DOM

Bibliographie

Objectifs

L'objectif de cette formation est que vous soyez capable de comprendre:

  • Les bases du JavaScript
  • Avoir des notions en algorithmique*
  • Créer une simple application web

*Algorithmique = Processus de résolution de problèmes

Objectifs

Vous serez capables de créer un Quizz (Trivia) sur des citations de films et de séries. À chaque étape, une question sera présentée au joueur, et il devra sélectionner la bonne réponse. Vous serez en charge de vérifier la véracité de sa proposition.

INFO

Exemple d'application frontend

Les Fondamentaux

Un peu d'histoire sur la création du JavaScript, son contexte, son utilité.

Le JavaScript a été inventé par Brendan Eich en 1995 pour le navigateur web Netscape.

Il est souvent abrégé en JS et est une des technologies piliées du World Wide Web.

C'est un langage de haut niveau, souvent compilé à la volée, et comportant de multiple paradigmes.

Statistiques

Le JavaScript alimente > 97% des sites web

1,500,000

Modules Stats

NPM est un gestionnaire de modules pour JavaScript

INFO

Le nombre de modules publiés par language

Source: Wikipedia, Medium, GitHub

Statistiques

56M+

Développeurs au total sur GitHub

L'HISTOIRE DU JAVASCRIPT

1996

2004

1994

Création de Mozilla Firefox successeur de Netscape

Microsoft publie Internet Explorer et JScript pour concurrencer Netscape

Créaction de Netscape et du web statique

1995

1997

Création de ECMAScript un standard de spécifications pour les navigateurs

Sortie officielle de JavaScript par Netscape

L'HISTOIRE DU JAVASCRIPT

2009

2021

2005

Consolidation avec ECMAScript 5 pour combiner les innovations et avancer ensemble

Le brouillon des specs est sur GitHub avec un système de propositions

White paper sur Ajax pour créer des apps web

2008

Sortie de Google Chrome avec son moteur V8 et le JIT

LA DIVERSITÉ ET RICHESSE DU WEB AUJOURD'HUI

Des œuvres d'art

Apps de visio

Modelisation 3D

Purecss Fracine est un projet de Diana Smith où elle a recréé une peinture à la main grâce au HTML et CSS

Marseille by La Phase 5 est un projet de modélisation 3D avec un rendu en temps réel

Des applications telles que Zoom, Google Meet, ou Skype fonctionnent dans un navigateur web grâce au JS

INFO

INFO

INFO

Marseille en 3D

Grâce à des moteurs 3D tels que three.js, on peut peut faire de la simulation 3D dans un navigateur web

Particules Interactives

On peut créer des particules réagissant aux déplacements du curseur d'un utilisateur

Jeux-vidéos

Une grande quantité de jeux web sont créés grâce au JavaScript et techno apparentes

" Best code is no code"

Anonymous

Les bases du JavaScript

La syntaxe, le vocabulaire, c'est comme apprendre une nouvelle langue.

Les Variables

Utiliser l'excellente mémoire de la machine.

Les variables

Une variable permet de sauvegarder une information

Cette information peut être:

  • du texte
  • un nombre
  • une valeur logique (booléenne)

La syntaxe

La création d'une variable suit toujours la même structure. Cette opération se nomme l'affectation.

Les commentaires

Il ne sont pas exécutés par le programme. Il sont là pour donner des informations au développeurs.

L'importance du mot-clé

Le mot-clé utilisé pour déclarer une variable est primordiale

Le type Object

Un objet est une structure qui contient plusieurs informations

LES VARIABLES: PRATIQUE

Exercice

DURÉE: 10 MIN

Il est temps de pratiquer !Ouvrez votre éditeur de code préféré, on va écrire du JavaScript. Si vous n'en avez pas, vous pouvez utiliser l'IDE en ligne Replit.Le but de cet exercice est de s'entraîner à manipuler des variables. Reprenons l'objet track3 du slide précédent, et ajoutons-y de nouvelles propriétés:

  • createdAt une chaîne de caractères correspondant à sa date ce création
  • isFromAlbum un booléen indiquant si la piste vient d'un album
  • artist un objet à l'intérieur de l'objet track3 comporte deux propriétés:
    • id une chaine de caractère
    • name le nom de l'artiste

INFO

Les tableaux

Un tableau est une structure qui contient un ensemble de valeurs souvent similaires

Quelle est donc la différence avec les objets ?

L'accès aux éléments ne se fait pas de la même manière

Quelle est donc la différence avec les objets ?

Un tableau possède des méthodes spécifiques

Quelle est donc la différence avec les objets ?

La différence est non seulement technique, mais aussi conceptuelle

  • un objet représente une entité
  • un tableau représente un ensemble d'entités

LES TABLEAUX: PRATIQUE

Exercice

DURÉE: 10 MIN

Pratique time again !Vous n'avez pas le droit de supprimer ou modifier du code. Vous ne pouvez qu'en rajouter. Voici les tâches à réaliser afin de finir cet exo:

  • Supprimer le dernier élément du tableau tracksList
  • Ajouter un nouvel élément au tableau ayant une valeur name différente
  • Modifier la valeur isFav du 2nd élément du tableau à true:

INFO

Les Opérateurs

Combiner les valeurs

La concaténation

Elle permet de combiner plusieurs variables qui ont été déclarées à deux endroits différents.

Opérateurs arithmétiques

L'addition

Cette opération effectue la somme de nombres.

La soustraction

Cette opération effectue la soustraction de nombres.

Opérateurs arithmétiques

La multiplication

Cette opération effectue le produit de nombres.

La division

Cette opération effectue la division de nombres.

L'incrémentation

Un raccourci utile

Les trois affectations ci-contre (en dessous du commentaire) sont équivalentes en terme de résultat.

Le modulo

Le résultat d'une opération mathématique

C'est le reste dans une division euclidienne. Souvent utilisé pour connaître la parité d'un nombre.

Les Structures Logiques

Ou l'exécution non-linéaire

Les structures logiques

Par défaut, le code s'exécute de façon linéaire de haut en bas. Il est possible de modifier l'ordre grâce aux structures logiques.

if...else

Permet d'exécuter du code selon une condition. Si la condition n'est pas satisfaite, le code sera ignoré.

LES STRUCTURES LOGIQUES: PRATIQUE

Exercice

DURÉE: 10 MIN

Yey ! Il y a une grande soirée organisée au château de Peach avec Pauline comme invitée d'honneur. Mario a perdu son invitation et a mystérieusement rajeuni. Faites entrer Mario dans le club par n'importe quel moyen. Indice chez vous:

  • Modifier la restriction sur l'âge pourrait vous aider

INFO

if...else if

On peut enchaîner les conditions grâce à cette structure.

switch ()

Raccourci de conditions au lieu d'enchaîner les if...else if La condition à tester est généralement simple.

while ()

Permet d'exécuter du code selon une condition. Tant que la condition est satisfaite, le code à l'intérieur s'exécute en boucle. Dès que la condition n'est plus satisfaite, on sort de la boucle.

LES STRUCTURES LOGIQUES: PRATIQUE

Exercice

DURÉE: 10 MIN

C'est l'heure d'aller dormir ! Sortez les ultras de la fête en dehors du club à l'aide d'une boucle while. Indice chez vous:

  • Utilisez la fonction .pop() pour retirer un élément d'un tableau

INFO

for ()

Permet de répéter l'exécution d'un bout de code. On fait un parcours par indice.

LES STRUCTURES LOGIQUES: PRATIQUE

Exercice

DURÉE: 10 MIN

Était-ce vraiment du Bubble tea ? Il semblerait que tout ceux qui ont reçu une boisson soit saoule. Grâce à une boucle for, ajouter une propriété drunk dont la valeur est true, sauf pour Pauline qui n'est pas affecté. Indice chez vous:

  • Utilisez une condition à l'intérieur de la boucle pour vérifier le nom de l'invité.e

INFO

Les Fonctions

Et l'organisation du code.

Les fonctions

La définition d'une fonction suit généralement ce schéma. L'appel à une fonction se fait toujours grâce aux parenthèses.

Les fonctions

Dans la plupart des langages de programmation, il existe un ensemble de fonctions prédéfinies.

MDN Web Docs

Elle est une excellente ressource pour les développeurs web par des développeurs

Introduction à l'Algorithmique

L'art de résoudre des problèmes

INTRODUCTION À L'ALGORITHMIQUE

L'algorithmique

Une partie intégrante de la programmation

L'algorithmique est l'étude de techniques permettant de décrire précisément les étapes pour résoudre un problème. Cette discipline permet de conceptualiser des problèmes et leurs solutions que ce soit de manière formelle ou non. On en fait iconsciemment tous les jours.

INFO

REPRÉSENTATION D'ALGORITHMES

Diagramme

Suite de Texte

Il peut être plus adapté de représenter la démarche sous forme de schéma et diagramme. Surtout lorsque les étapes représente un processus.

Les étapes peuvent être décrites à la suite. Les termes doivent aller à l'essentiel. Le but n'est pas d'avoir le vocabulaire le plus complet mais la description la plus efficace.

DES ALGORITHMES TRÈS CONNUS

Videos

L'algorithmique touche tous les domaines, notamment la biologie où un algorithme de deep learning a réussi à plier des protéïnes.

La cryptographie est remplie d'algorithmes pour chiffrer et déchiffrer des messages. C'est un des pillier de la sécurité numérique aujourd'hui.

Le jeu de la vie de Conway est une simulation basée sur des règles élémentaires, mais capable de produir des résultats étonnants.

INFO

CodeSignal

On va passer à de la pratique grâce à la plateforme en ligne CodeSignal. Il est nécessaire de se créer un compte pour bénéficier de toutes les fonctionnalités pratiques. Pour les récalcitrant.e.s, il existe une version hors-ligne de chaque exercice.

Simple calcul

Écrire une fonction qui retourne la somme de deux nombres

Exemple

Pour param1 = 1 et param2 = 2, la sortie devrait être add(param1, param2) = 3.

Le siècle de l'année

Soit une année, retourner son siècle. Le premier siècle se situe de l'année 1 jusqu'à l'année 100 inclus. Le second - de l'année 101 jusqu'à l'année 200 inclus, etc.

Exemple

  • Pour year = 1905, le résultat devrait être centuryFromYear(year) = 20
  • Pour year = 1700, le résultat devrait être centuryFromYear(year) = 17.

Palindrome

Étant donné une chaîne de caractères, vérifier si elle est un palindrome.

Exemple

  • Pour inputString = "aabaa", le résultat devrait être checkPalindrome(inputString) = true
  • Pour inputString = "abac", le résultat devrait être checkPalindrome(inputString) = false
  • Pour inputString = "a", le résultat devrait être checkPalindrome(inputString) = true

Produit adjaçant

Étant donné une tableau d'entiers, trouvez les paires d'éléments adjaçants ayant le plus grand produit, et retournez ce produit.

Exemple

Pour inputArray = [3, 6, -2, -5, 7, 3], le résultat devrait être adjacentElementsProduct(inputArray) = 21.7 et 3 donnent le plus grand produit.

Le Web, le DOM

Écrire des apps web

UNIT 01 LOREM IPSUM DOLOR SIT

L'articulation d'une page web

HTML

LES ÉLÉMENTS QUI L'A COMPOSENT

Une page web est composée de HTML, CSS, JavaScript. Le point d'entrée est le fichier HTML. C'est lui qui va indiquer quel aute fichier doit être intégré.

JS

CSS

INFO

HTML et ses ressources

La balise script dans le fichier HTML référence le fichier script.js

Le DOM

La Document Object Model est la représentation d'une page web sous forme d'arbre

JavaScript + DOM

On peut accéder aux élément du DOM depuis le code JavaScript grâce à l'objet global document.

Les fonctions du DOM

Il existe de nombreuses fonctions JavaScript pour manipuler le DOM.

Bibliography

Lorem ipsum dolor sit amet

Wikipedia JavaScript

The State of JS 2020 A data insight

01

05

CodeSignal Challenges algorithmiqus

02

Quotes programming defprogramming

06

The State of the Octoverse GitHub

03

Scrimba Outil de tutoriel

07

04

Module counts Data on languages external modules

Félicitations !

Merci d'avoir participé à cette formation. J'espère qu'elle vous aura plu et que vous avez appris une tonne de choses. N'hésitez pas à me faire des retours positifs ou négatifs.