js.library
Importer un module
import module from './module' // importe le export default function module() de ./module.js
importer une fonction d’un module
import {toto} from './module';
Importer des vars/fonctions d’un module
import * as module from './module'
module.fonc1(); // fonction
module.fonc2(); // fonction
console.log(module.var) // variable
ES6 export/import vs CommonJs/NodeJS export/import
ES6 way
// source
export function scale(num, in_min, in_max, out_min, out_max){
return (num - in_min) * (out_max - out_min) / (in_max - in_min) + out_min;
}
// target
import {scale} from "./scale";
CommonJS/NodeJs way
// source
function scale(num, in_min, in_max, out_min, out_max){
return (num - in_min) * (out_max - out_min) / (in_max - in_min) + out_min;
}
module.exports = scale;
// target
var scaleUsage = require("./scale")
Exporter des variables
const fontFamily = 'Comic Sans MS, Lucida Handwriting, cursive';
const background = 'pink url("https://media.giphy.com/media/oyr89uTOBNVbG/giphy.gif") fixed';
const fontSize = '4em';
const padding = '45px 0';
const color = 'green';
export const styles = {
fontFamily: fontFamily,
background: background,
fontSize: fontSize,
padding: padding,
color: color
};
Then
import {styles} from './styles'
Je vérifie qu’une valeur n’est pas dans un tableau
et je l’ajoute si elle n’y est pas. sort un tableau avec les valeurs uniques
let types = []; // le tableau qu'on remplit de valeurs uniques
let various = [ // le tableau de base
"toto",
"riri",
"lulu",
"riri",
"lulu",
"lulu"
]
for (let i=0; i<various.length; i++) {
let isThere = false;
for (let j=0; j<types.length; j++) {
if(types[j] == various[i]){
isThere = true;
}
}
if(isThere == false){
types.push(various[i]);
}
}
isThere
est une variable qui me contrôle si la valeur est présente. réinitialisée à false à chaque nouvelle loop.- Si la loop à travers
types[]
trouve la valeur courante devarious[]
, on passe la variable àtrue
. On bloque alors le remplissage du tableau pour ce tour - Un
console.log(types)
doit retourner["toto", "riri", "lulu"]
Remplacer getElementById par $
function $(x) {return document.getElementById(x);}
let e = $("header");
console.log(e) // return the #header element
Reproduire le mode de sélection de jQuery
function $(x){
let type;
let sel = x.substring(0,1);
let name = x.substring(1);
let query;
sel == "#" ? query=document.getElementById(name) : query=document.querySelectorAll(x);
return query;
}
let e = $(".item");
Get data from HTML form
<input id="search-bar">
Pour retrouver la valeur de l’élément
let v = document.getElementById("search-bar").value
Get element size
var h = document.getElementById('someDiv').clientHeight;
var h = document.getElementById('someDiv').offsetHeight;
var h = document.getElementById('someDiv').scrollHeight;
clientHeight/clientWidth
includes the height and vertical padding.
offsetHeight/offsetWidth
includes the height, vertical padding, and vertical borders.
scrollHeight
includes the height of the contained document (would be greater than just height in case of scrolling), vertical padding, and vertical borders.
https://stackoverflow.com/questions/526347/how-do-you-get-the-rendered-height-of-an-element#526352
Get element attribute
<div id="element" role="contentInfo"></div>
let e = document.getElementById("element")
e.getAttribute("role") // console.log > "contentInfo"
Toggle boolean value
value = false
value = !value
console.log(value) // true