Please enable JavaScript.
Coggle requires JavaScript to display documents.
Javascript Fundamentals (Block Scope with let const (let et const on une…
Javascript Fundamentals
Divers
Console
How much time take your code
console.time('Pouet');
var toto = 'toto';
console.table({a:1, b:2});
console.log(toto);
console.timeEnd('Pouet');
console.error('this is an error');
console.table({a:1, b:2}); // print as table
console.log('Pouet')
Visual Code
Plugin
Bracket Pair Colorizer
Live Server
JavaScript ES6 code snippets
Variable
var greeting ; // undifined
variable name only letters, numbers, _, $(money sign), and can not start with a number. By convention start with $ related to jquery
const
Use const for most strong code.
const name = 'jo' // can not reassign
name = 'toto'; .// error
const aa ; // error
object
const person = { name : 'john'};
const person.name = 'marie'; // Ok
person = {}// error
array same behavior object
Primitive Data Types vs Reference Types
Primitive
If it with primitive data types.The data is stored directly in the location that the variable accesses it's stored on the stack when you access primitive data you access it by its actual value.
Reference
Now reference types are objects that are accessed by reference.So the data isn't actually stored in the variable it's stored on what's called the heap which has to do with dynamically allocated memory
Primitive value
String
Number //Decimal, float, ...
Boolean
Null
Undefined // not assigned
Symbols (ES6)
Reference value
Arrays
Object Literal
Functions
Dates
Anything Else
Type conversion
let val = String(true); // 'true' as a string
val = (true).toString; // idem
val = Number('5');
val = Number(true); // val contain 1
val = Number(false); // 0
val = Number(null); //0
val = Number([1,2];// NaN
type coersion
const val1 = String(5);
const val2 = 6;
val1 + val2 ;// '56' as a string
Number & The math object
Contient de nombreuse fonction
let val = Math.PI
val = Math.E
val = Math.round(2.4);//2
val = Math.ramdom() * 20; // mieux que ra math.ramdom tout seul
...
Template literal
Evite une concatenation, peut contenir un appel à fonction
const name = 'John';
let html = '<ul><li>${name}</li>
<li>${hello()}</li> // appel a une fonction
<li>${2+2}</li> // calcul
</ul>'
Arrays and Arrays Method
const array = [2,3];
const array = new Array("rr","ff");
const mixed = [123, 'John', true, null, new Date(), {a:1,b:3}]
Function
Beaucoup de fonction dans Array
Array.from() // transforme une collection html ou autre en array
Array.isArray(mixed);
array.indexOf(2);//0
array.push(250);// ajoute à la fin
array.unshift(12);//ajoute en premier
array.pop() // supprime le dernier element
array.shift()// supprime le 1er element
Dates & Times
let val = new Date('1-1-2017')
val.getMonth() // return 0 janvier, ...
val.getDay // Dimanche 0, lundi 1
val.getTime()
If Statement & Comparison Operators
=== // value and type recommended
tester si une variable existe
typeof id !== 'undefined' // recommended
if(id) // not good
const var = '100';
if(var > 100) //
Switch
const color = yellow;
switch(color){
case 'yellow': console.log('');
break;
}
Function Declaration & Expression
Valeur par défaut
Si pas de paramètres passer lors de l'appel
function great(firstName = 'John', lastName='Poe'){}
const square = function(x=3){return x * x;}
Immediately Invocable expression - IIFE
(function(name){
console.log('Hello ' + name
})('Brad')
le fait de mettre entre parenthèses la function s'appelle le Self Invoking function. Executée au moment de sa creation
Module pattern
Ce type de fonction est la base du module pattern
var MODULE =
(function(){ var
self
= {};
var variablePrivee = 10;
self
.attributPublic = "bonjour";
function methodePrivee() { console.log('Je suis encapsulée !'); }
self
.methodePublique = function(){
console.log('Je suis accessible !');
};
return
self
; })();
Loops
Boucler sur les attributs d'un objet
const user = { firstName: 'John', lastName: 'Doe', age: 40}
for(let x in user){ console.log(
${x} : ${user[x]}
);}
MAP
const users = [ {id: 1, name:'John'}, {id: 2, name: 'Sara'}, {id: 3, name: 'Karen'}, {id: 4, name: 'Steve'}];
const ids = users.map(function(user){ return user.id; });
// retourn un tableau d'ids
Array
const cars = ['Ford', 'Chevy', 'Honda', 'Toyota'];
cars.forEach(function(car, index[optional], array[optional]){ console.log(
${index} : ${car}
); console.log(array); });
The Window Object
window
window.location
window.history
window.navigator
Block Scope with let const
let
et
const
on une portée limitée au block dans lequel ils sont
var
à une porté dans tout le sprint
Si on ajoute
pas de type
de variable la portée est
globale
DOM Manipulation
DOM Selectors For Single Elemnents
element = document.getElementById('id')
element.style.color = '#fff'// change the style
element.textContent = 'Ttoto'// change the content
element.innerHTML = 'html'
More powerfull use
document.querySelector()
DOM Selectors For Multiple Elements
GetElementByTagName :
getelementbyClassName
Ces fonctions retourne une collection-item Qui doit être transformer si on vêt la manipuler avec Array.from()
Document.querySelectorAll() retourne une NodeList que l’on peut parcourir dans une loop, sans transformation.