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 de various[], 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