Javascript Révision

Apprendre javascript, l'essentiel

Javascript & jQuery

Présentation

Javascript & jQuery

Présentation

Javascript (JS) est un language de programmation multi-paradigm

Il est "conformé" et développé par ECMAScript

C'est aujourd'hui l'un des languages de programmation les plus utilisé et populaire au monde ! 

Javascript & jQuery

Présentation

Ses avantages sont nombreux :

  1. Multi paradigm (impératif, orientée objet, prototypage, fonctionnelle etc ...)
  2. Performant
  3. Optimisé pour la programmation concurrentielle
  4. Utilisé sur de multiples machines (backend, web browser, mobile, TV etc ...)
  5. Une très grande communauté de développeur
  6. Un très grand nombre de librairies !

Javascript & jQuery

Les fondamentaux

Javascript & jQuery

Les fondametaux

Les variables

Javascript & jQuery

Les fondametaux

// Déclaration d'une variable
var nom = "john";
var unVariablePlusGrande = "test";

// Déclaration d'une constante
const age = 30;

// Déclaration d'une variable "Scopped"
let surname = "JDoe";

Déclaration d'une variable

Javascript & jQuery

Les fondametaux

// Number
let age = 30; // Entier
let note = 12.5; // Flottant numérique

// Boolean
let estMajeur = true;
let estMineur = false;

// String (chaîne de caractères)
let nom = 'Doe'; // Avec guillemet simple
let prenom = "John"; // Ou avec guillement double
let nomComplet = `${prenom} ${nom}`; // concatenation
let paragraph = `
  Voici un chaine de caractère
  sur plusieurs
  lignes
`;

// Array (tableaux)
let utilisateurs = ['John', 'Jane', 'Henri'];

// Object (Les objets)
let utilisteur = {
  nom: 'Doe',
  prenom: 'John',
  age: 34
};

Les types de variables

Javascript & jQuery

Les fondametaux

let n = 0;
let x = n + 1; // addition
let x = n - 2; // soustraction
let x2 = n * 2; // multiplication
let x3 = n / 3; // division
let x4 = n % 3; // reste de la division (modulo)
let x = x + 1; // incrémentation

n++; // Incrémentation : n = n + 1

Les opérateurs numérique

Javascript & jQuery

Les fondametaux

let nom = 'doe';
let prenom = 'john';

let nomComplet = nom + ' ' + prenom // concatenation avec "+"
let nomComplet2 = `${nom} ${prenom}` // concatenation avec interpollation

La concaténation

Javascript & jQuery

Les fondametaux

// Accéder aux valeurs d'un tableaux
let noms = ['John', 'Jane', 'Jack'];

noms[0] // John
noms[1] // Jane
noms[2] // Jack

Les tableaux (Array)

Javascript & jQuery

Les fondametaux

// Accéder au clefs d'un objet
let utilisateur = {
  nom: 'Doe',
  prenom: 'John',
  age: 30,
  notes: [12, 5, 19, 18]
}

utilisateur['nom'] // Doe
utilisateur.prenom // John
utilisateur.notes[0] // 12
utilisateur.notes[2] // 19

Object (les objets)

Javascript & jQuery

Les fondametaux

undefined // Quand une variable est non définie
null // Quand une variable est définie mais ne possède pas de valeur
NaN // Not a number (opération numéraire qui ne fonctionne pas)

Les types spéciaux

Javascript & jQuery

Les fondametaux

/*
En javascript le typage est dit "faible".
Ce qui signifie que les types peuvent
être naturelement convertit
*/
var a = '1' 
var b = 1
a + b = '11'
// b est convertit en chaine de caractère implicitement
a * b = 1 
// a est convertit en nombre de manière implicite 
"Salut" * 3 // NaN, Not a number
// Attention aux opérations qui n'ont pas de sens :)
"43" > 1000 // false, 1000 est convertit en string, il compare l'ordre alphabétique

Le typage faible

Javascript & jQuery

Les fondametaux

Les conditions

Javascript & jQuery

Les fondametaux

Les conditions "if"

/*
Les conditions "if"
*/
let age = 25;

if (age < 18) {
  console.log('La personne est mineur');
} else if (age < 65) {
  console.log('La personne est majeur');
} else {
  console.log('La personne est sénieur !')
}

Javascript & jQuery

Les fondametaux

Les opérateurs de comparaison

a == b // a égale à b
a != b // a n'est pas égale à b
a === b // a == b et a est de même "type" que b
a !== b // a n'est pas identique à b
a >= b // a supérieur OU égal à b
a > b   // a strictement supérieur à b
a <= b // a inférieur OU égal à b
a < b   // a strictement inférieur à b

Javascript & jQuery

Les fondametaux

Les opérateurs "boolean"

// && ET
true && true // true
true && false // false
false && true // false
false && false // false

// || OU
true || true // true
true || false // true
false || true // true
false || false // false

// ! NON
!true // false
!false // true

Javascript & jQuery

Les fondametaux

Les "switch / case"

switch (expression) {
  case valeur1:
    // Instructions à exécuter lorsque le résultat
    // de l'expression correspond à valeur1
    instructions1
    break
  case valeur2:
    // Instructions à exécuter lorsque le résultat
    // de l'expression correspond à valeur2
    break
  default:
    // Instructions à exécuter lorsqu'aucune des valeurs
    // ne correspond 
    break
}

Javascript & jQuery

Les fondametaux

Les conditions ternaires

// condition ? <expression si vrai> : <expression si faux>
let age = 19
"Je suis " + (age >= 18 ? "majeur" : "mineur")

Javascript & jQuery

Les fondametaux

Les boucles

Javascript & jQuery

Les fondametaux

La boucle "while" (tant que)

let i = 0 // Création d'une variable i = 0

while (i < 3) { // Tant que i inférieur à 3
    console.log("Je compte " + i);
  
    if (i == 1) { // Si is est égale à 1
        break // On arréte la boucle !
    }
  
    i++ // Sinon on "incrémente" i
}

Javascript & jQuery

Les fondametaux

La boucle "for"

 
for (let i = 0 /* initialisation */; i < 3 /* condition */; i++ /* incrémentation */) {
    console.log("Je compte " + i);
}

Javascript & jQuery

Les fondametaux

La boucle "for .. in"

let noms = ['john', 'sarah', 'jack'];

for (let i in noms) {
  console.log('Index : ' + i); // Index : 0, Index : 1, Index : 2
  console.log('Nom : ' + noms[i]); // 'Nom : John', Nom : Sarah ...
}

let personne = {
  nom: 'doe',
  prenom: 'john',
  age: 20
};

for (let key in personne) {
  console.log('Clef : ' + key); // Clef : nom, Clef : prenom etc ...
  console.log(personne[key]); // "doe", "john", 20
}

Javascript & jQuery

Les fondametaux

La boucle "for .. of"

let noms = ['john', 'jack', 'sarah'];

for (let nom of noms) {
  console.log(nom); // john", "jack", "sarah"
}

Javascript & jQuery

Les fondametaux

Les fonctions

Javascript & jQuery

Les fondametaux

Les fonctions en javascript

function ajouter(a, b) {
  let resultat = a + b;

  return resultat;
}

console.log(ajouter(3, 4)) // 7

Javascript & jQuery

Les fondametaux

Les valeurs de retour

function ajouter(a, b) {
  let resultat = a + b;
}

function ajouter2(a, b) {
  let resultat = a + b;
  
  return resultat;
}

console.log(ajouter(3, 4)) // undefined
console.log(ajouter2(3, 4)) // 7

Javascript & jQuery

Les fondametaux

Les fonctions anonymes

const ajouter = function (a, b) {
  return a + b;
}

console.log(ajouter(3, 4)) // 7

Javascript & jQuery

Les fondametaux

Les fonctions anonymes fléchées

const ajouter = (a, b) => {
  return a + b;
}

console.log(ajouter(3, 4)) // 7

Javascript & jQuery

Les fondametaux

Les fonctions anonymes fléchées à une seule instruction !

const ajouter = (a, b) => a + b;

console.log(ajouter(3, 4)) // 7

Javascript & jQuery

Les fondametaux

Les fonctions anonymes fléchées à une seule instruction et un seul argument !

const salutation = nom => `Bonjour ${nom}`;

console.log(salutation('John')) // "Bonjour John"

Javascript & jQuery

Les fondametaux

Les méthodes (fonctions dans des objets)

var eleve = {
    nom: 'Marc',
    note: 14,
    present: function () {
        return 'Je suis présent'
    }
}

eleve.present() // 'Je suis présent'

Javascript & jQuery

Les fondametaux

Les méthodes (fonctions dans des objets) avec fonction fléché

var eleve = {
    nom: 'Marc',
    note: 14,
    present: () => 'Je suis présent'
}

eleve.present() // 'Je suis présent'

Javascript & jQuery

Les fondametaux

Quelques méthodes prédéfinie et très utilisé en javascript : Le Console

console.log('coucou') // Affiche un message dans la console
console.warn('coucou') // Affiche un message warning dans la console
console.error('coucou') // Affiche un message d'erreur dans la console
console.table([ 'john', 'sarah', 'michel' ]) // Affiche un tableaux

Javascript & jQuery

Les fondametaux

Quelques méthodes prédéfinie et très utilisé en javascript : String

// String
"salut".toUpperCase() // "SALUT"
"SALUT".toLowerCase() // "salut"
"Jean Jack Sarah".split(' ') // ['Jean', 'Jack', 'Sarah']
"s".repeat(4) // "ssss"
"Mon chien s'appel 'super chien'".replace('chien', 'chat');
// "Mon chat s'appel 'super chien'"
"Mon chien s'appel 'super chien'".replaceAll('chien', 'chat');
// "Mon chat s'appel 'super chat'"

Javascript & jQuery

Les fondametaux

Quelques méthodes prédéfinie et très utilisé en javascript : Number


// Number
10.toString(); // "10"
1.23428648.toFixed(2) // 1.23

Javascript & jQuery

Les fondametaux

Quelques méthodes prédéfinie et très utilisé en javascript : Array

// Array
['John', 'Sarah', 'Jack'].join(' ') // "John Sarah Jack"
['John', 'Sarah', 'Jack'].sort() // ["Jack", "John", "Sarah"]
[10, 11, 13, 9, 8, 13].length // 6
[13, 14].push(15) // [13, 14, 15]
[13, 14].unshift(15) // [15, 13, 14]
[13, 14, 7].map(n => n + 1) // [14, 15, 8]

Javascript & jQuery

Les fondametaux

Quelques méthodes prédéfinie et très utilisé en javascript : Array et transformation

let notes = [12, 13, 14]

let nouvellesNotes = notes
  .map(note => note + 2)
  .map(note => (note > 20 ? 20 : note))
  .filter(note => note >= 10)

let notesSur20 = nouvellesNotes.reduce((accumulateur, note) => {
  // Boucle 0 : accumulateur = "", note = 12
  // Boucle 1 : accumulateur = "12/20 ", note = 13
  // Boucle 2 : accumulateur = "12/20 13/20 ", note = 14
  return accumulateur + `${note}/20 `
  // Boucle 0 : retourne "12/20 "
  // Boucle 1 : retourne "12/20 13/20 "
  // Boucle 2 : retourne "12/20 13/20 14/20 "
}, '')

Javascript & jQuery

Les fondametaux

Quelques méthodes prédéfinie et très utilisé en javascript : Math

Math.round(13.80) // 14
Math.random() // Décimal aléatoire entre 0 et 1
Math.ceil(13.03) // 14
Math.floor(13.03) // 13

Javascript & jQuery

Les fondametaux

Les erreurs

Javascript & jQuery

Les fondametaux

Créer une erreur avec "throw"

function erreur() {
  throw Error('Oups ...');
}

erreur(); // Affiche une erreur dans la console*

// Les erreurs arréte l'éxécution du script / fonctions !
console.log("ne s'affichera jamais !");

Javascript & jQuery

Les fondametaux

Gérer les erreur avec try / catch

function erreur() {
  throw Error('Oups ...');
}

try {
  erreur();
  
  console.log("ne s'affichera jamais");
} catch (erreur) {
  console.log("Se block s'éxécutera");
  console.log(erreur.message); // Affiche: "Oups ..."
}

javascript & jQuery

By David Jegat

Made with Slides.com

javascript & jQuery

  • 605

More from David Jegat