Javascript

Généralités

Documentation

Liens vers la documentation MDN

Afficher un message dans la console

console.log('Bonjour');

Déclaration d’une variable

let maVar = 'Hello';

Types

Primitifs

• String // “Regardez cette chaîne” -> String = Texte
• Boolean // true, false
• Number // 1,2,3,4
• Null // rien, nada
• Undefined // valeur qui n’a pas été initialisée

Objets

-> Si ce n’est pas un type primitif, alors c’est un objet

Comparaison

Primitifs, c’est similaire à des maths

'flo' === 'flo' // true
'flo' === 1 // false
 1 === 2 // false
true === true //true
true === false // false
false === false // true
undefined === undefined // true
null === null // true

Objet

{} === {} // false
let maisonA = {}
maisonA === maisonA // true
maisonA === {} // false
let maisonB = {}
maisonA === maisonB // false

Les tableaux

let todos = [];
// Ajouter
todos.push('truc');
// Modifier
todos[0] = 'new truc';
// Supprimer
['toto', 'tutu', 'tata','titi']
todos.splice(1,2); //  ['toto','titi']

Les objets

let maVoiture = {
  marque: "Peugeot", // Attribut
  couleur: "Grise",
  sayCouleur: function() { // Méthode
    console.log("Bonjour, je suis "+this.couleur);
  }
 }

  maVoiture.marque; // "Peugeot"
  maVoiture.sayCouleur(); // Bonjour, je suis Grise

let maVoiture1 = {couleur: 'jaune'};
let maVoiture2 = maVoiture1;
maVoiture2.couleur = 'rouge';

maVoiture1 adresse mémoire 1 ===> {couleur:’jaune’’}

maVoiture2 adresse mémoire 1 ===^

maVoiture1 adresse mémoire 1 ===> {couleur:’rouge’’}

maVoiture2 adresse mémoire 1 ===^

Fonctions

// Exemple de fonction sans paramètre
function displayTodos(){
  console.log('Mes Todos: ',todos);
}
// Exemple de fonction avec paramètre
function addTodo(item){
  todos.push(item);
  displayTodos();
}
// Exemple de fonction avec valeur de retour
function multiply(x,y){
  return x*y;
}

// Appel à la fonction
let result = multiply(3,4);
console.log(result);

• Une fonctions en paramètre d’une autre fonction est une fonction de rappel ou callback function
• Une fonction qui prend une fonction en paramètre est une fonction d'ordre supérieur ou high order function

Conditions

if (this.todos[i].completed) {
  console.log("(x) ", this.todos[i].texte);
} else {
  console.log("( ) ", this.todos[i].texte);
}

Manipulation du dom

DOM = Document Object Model

Récupération élément

<div id="monDiv">test</div>

let el = document.getElementById('monDiv');

Création d’élément

let el = document.createElement('li');

Ajout / Modification d’élément

todoUl.innerHTML = '';
todos.appendChild(todoLi);

<ul>
  <li></li>
</ul>

Évenements

todoUl.addEventListener('click',function(event){
  console.log(event.target);
});