février 2019 – devfrontend.info

Monthfévrier 2019

[CSS] Du random en CSS avec :nth-child

27/02/2019 / admin

Source: https://www.lottejackson.com/learning/nth-child-cicada-principle. Version PDF de l’article.

.Item:nth-child(2n+1) .Item-image {…} 
.Item:nth-child(3n+2) .Item-image {…} 
.Item:nth-child(5n+3) .Item-image {…} 
.Item:nth-child(7n+5) .Item-image {…} 
.Item:nth-child(11n+7) .Item-image {…}

.Item:nth-child(2n+1) .Item-image {…}

.Item:nth-child(3n+2) .Item-image {…}

.Item:nth-child(5n+3) .Item-image {…}

.Item:nth-child(7n+5) .Item-image {…}

.Item:nth-child(11n+7) .Item-image {…}

[jQuery] Bootstrap 3 et affix ne conserve pas la pleine largeur d’un élément si j’utilise les classes de la grille

19/02/2019 / admin

        <div id="pageStickyHeader" class="row page-StickyHeader">
          <div class="col-lg-2">
            <img src="image/logoCALL-new.jpg" alt="" class="img-responsive" />
          </div>
          <div class="col-lg-8">
            <form class="form-inline">
              <label for="input-id" class="sr-only">Rechercher un produit</label>
              <input type="text" name="" id="input" class="form-control" value="" required="required" pattern="" title="" placeholder="Rechercher un produit">
              <button type="submit" class="btn btn-default"><i class="glyphicon glyphicon-search"></i><span class="sr-only">Rechercher</span></button>
            </form>
          </div>
          <div class="col-lg-2">Favoris | Panier</div>
        </div>

</div>

<label for="input-id" class="sr-only">Rechercher un produit</label>

<button type="submit" class="btn btn-default"><i class="glyphicon glyphicon-search"></i><span class="sr-only">Rechercher</span></button>

</form>

</div>

<div class="col-lg-2">Favoris | Panier</div>

</div>

  // Partie sticky du bandeau
  let $pageStickyHeader = $('#pageStickyHeader');
  let $pageStickyHeaderWidth = $('#pageStickyHeader').width();

  $pageStickyHeader
    .affix({
      offset: {
        top: 100,
        bottom: function () {
          return (this.bottom = $('#pageFooter').outerHeight(true))
        }
      }
    })
    .on('affix.bs.affix', function() {
      $(this).css('width', $pageStickyHeaderWidth);
    })
    .on('affix-top.bs.affix', function() {
      $(this).removeAttr('style');
    });
    // Fin: Partie sticky du bandeau

// Partie sticky du bandeau

let $pageStickyHeader = $('#pageStickyHeader');

let $pageStickyHeaderWidth = $('#pageStickyHeader').width();

$pageStickyHeader

.affix({

offset: {

top: 100,

bottom: function () {

return (this.bottom = $('#pageFooter').outerHeight(true))

}

})

.on('affix.bs.affix', function() {

$(this).css('width', $pageStickyHeaderWidth);

})

.on('affix-top.bs.affix', function() {

$(this).removeAttr('style');

});

// Fin: Partie sticky du bandeau

.page-StickyHeader.affix {
  top: 0px;
  z-index: 100;
  background: #fff;
}

.page-StickyHeader.affix {

top: 0px;

z-index: 100;

background: #fff;

}

[javascript] Les bases: les opérateurs

13/02/2019 / admin

Ressources:

Précédence des opérateurs sur MDN WebDocs (ordre de priorité d’exécution des opérateurs)

Exemple d’opérateurs: delete, &&, =, +, !, *, ||, typeof

Jargon

a = 10 « a » et « 10 » sont des operands ou des arguments.
Unary operators: un opérateur qui n’a qu’un seul argument:

a++ +a delete obj.a typeof a new Object()

1
2
3
4
5

a++
+a
delete obj.a
typeof a
new Object()
Binary operators: un opérateur qui a 2 arguments:

a = 5 a + b a += 5 a === b a && b

1
2
3
4
5

a = 5
a + b
a += 5
a === b
a && b

Notation

Infix notation

Opérateur est déclaré ENTRE 2 operands/arguments:

a = true
a + b
a += 5
a || b
a > b

a = true

a + b

a += 5

a || b

a > b

Prefix notation

Opérateur est déclaré AVANT l’operand/argument:

++a
delete obj.a
typeof a

++a

delete obj.a

typeof a

Postfix notation

Opérateur est déclaré APRES l’operand/argument:

a++
myFunction()

1 2	a++ myFunction()

Demo:

let a, b;
a = 1;
b = 2;

// Math with numbers
console.log(a + b); // 3
console.log(a * b); // 2
console.log(a / b); // 0.5
console.log(a - b); // -1

a = "abc";
b = 5;

// Math with non-numbers
console.log(a + b); // abc5
console.log(a * b); // NaN
console.log(a / b); // NaN
console.log(a - b); // NaN

a = "Hello";
b = "World";

// Strings concatenation
console.log(a + " " + b); // Hello World

// Unary plus (convertir du texte en nombres)
c = "1"; <= texte
console.log(+c); // 1
console.log(Number(c)); // 1
c = undefined;
console.log(+c); // NaN

// Unary minus
c = "5"; <= texte
console.log(-c); // -5
c = "abc";
console.log(-c); // NaN

// ++
let d = 5;
++d;  // Same as d = d + 1;
console.log(d); // 6
d++;
console.log(d); // 7

// Built-in "++" function FIRST increments value of the operand and SECOND returns value of the operand
console.log(++d); // 8
// Built-in "++" function FIRST returns value of the operand and SECOND increments value of the operand
console.log(d++); // 8
console.log(d); // 9

// --
console.log(d--); // 9
console.log(d); // 8
console.log(--d); // 7, Same as d = d
console.log(d); // 7

let a, b;

a = 1;

b = 2;

// Math with numbers

console.log(a + b); // 3

console.log(a * b); // 2

console.log(a / b); // 0.5

console.log(a - b); // -1

a = "abc";

b = 5;

// Math with non-numbers

console.log(a + b); // abc5

console.log(a * b); // NaN

console.log(a / b); // NaN

console.log(a - b); // NaN

a = "Hello";

b = "World";

// Strings concatenation

console.log(a + " " + b); // Hello World

// Unary plus (convertir du texte en nombres)

c = "1"; <= texte

console.log(+c); // 1

console.log(Number(c)); // 1

c = undefined;

console.log(+c); // NaN

// Unary minus

c = "5"; <= texte

console.log(-c); // -5

c = "abc";

console.log(-c); // NaN

// ++

let d = 5;

++d; // Same as d = d + 1;

console.log(d); // 6

d++;

console.log(d); // 7

// Built-in "++" function FIRST increments value of the operand and SECOND returns value of the operand

console.log(++d); // 8

// Built-in "++" function FIRST returns value of the operand and SECOND increments value of the operand

console.log(d++); // 8

console.log(d); // 9

// --

console.log(d--); // 9

console.log(d); // 8

console.log(--d); // 7, Same as d = d

console.log(d); // 7

Opérateurs de comparaison

<, <=, >, <=, ==, !=, ===, !==

/*
 * Section 2
 *
 * Comparison operators
 */

let a, b;

a = 5;
b = 7;
c = 5;

console.log(a < b); // true
console.log(a > b); // false

console.log(a <= c); // true
console.log(a >= c); // true

let myStr1, myStr2;

myStr1 = "abc";
myStr2 = "bcd";
myStr3 = "Bcd";
// Sorted strings (smaller > taller) "Bcd", "abc", "bcd"

console.log(mystr1 > myStr2); // false (a=1, b=2, c=3)
console.log(mystr1 < myStr2); // true (b=2, c=3, a=1)
console.log(mystr1 > myStr3); // true

* Section 2

* Comparison operators

let a, b;

a = 5;

b = 7;

c = 5;

console.log(a < b); // true

console.log(a > b); // false

console.log(a <= c); // true

console.log(a >= c); // true

let myStr1, myStr2;

myStr1 = "abc";

myStr2 = "bcd";

myStr3 = "Bcd";

// Sorted strings (smaller > taller) "Bcd", "abc", "bcd"

console.log(mystr1 > myStr2); // false (a=1, b=2, c=3)

console.log(mystr1 < myStr2); // true (b=2, c=3, a=1)

console.log(mystr1 > myStr3); // true

/*
 * Section 2
 *
 * Equality operators
 * ALWAYS USE "STRICT" EQUALITY/INEQUALITY
 * NEVER USE "==" and "!=" operators!
 */

let myString = "0";
let myNumber = 0;
let myBoolean = false;


// Types of the values may be different
console.log(myString == myNumber); // true
console.log(myNumber == myBoolean); // true
console.log(myString == myBoolean); // true

// TYPE and VALUE are compared
console.log(myString === myNumber); // false
console.log(myNumber === myBoolean); // false
console.log(myString === myBoolean); // false

// How you SHOULD compare variables of different types
console.log(Number(myString) === myNumber); // true! Explicit conversion of string to number
console.log(+myString === myNumber); // true! Explicit conversion of string to number


console.log(myString != myNumber); // false
console.log(myString !== myNumber); // true


console.log(null === undefined); // false (different value types)
console.log(null == undefined); // true (both equal "0")

console.log(0 === "" === null === undefined === false); // true

* Section 2

* Equality operators

* ALWAYS USE "STRICT" EQUALITY/INEQUALITY

* NEVER USE "==" and "!=" operators!

let myString = "0";

let myNumber = 0;

let myBoolean = false;

// Types of the values may be different

console.log(myString == myNumber); // true

console.log(myNumber == myBoolean); // true

console.log(myString == myBoolean); // true

// TYPE and VALUE are compared

console.log(myString === myNumber); // false

console.log(myNumber === myBoolean); // false

console.log(myString === myBoolean); // false

// How you SHOULD compare variables of different types

console.log(Number(myString) === myNumber); // true! Explicit conversion of string to number

console.log(+myString === myNumber); // true! Explicit conversion of string to number

console.log(myString != myNumber); // false

console.log(myString !== myNumber); // true

console.log(null === undefined); // false (different value types)

console.log(null == undefined); // true (both equal "0")

console.log(0 === "" === null === undefined === false); // true

Opérateurs logiques (logical operators)

and, or, not

/*
 * Logical operators
 */

// OR
// returns first operand evaluated as TRUE
console.log(true || false); // true
console.log(false || true); // true (si "false", on passe à l'argument suivant)

console.log("abc" || ""); // abc
Boolean("a"); // true
Boolean(""); // false
console.log("" || "abc"); // abc (si "false", on passe à l'argument suivant)
console.log("" || ""); // ""

// Falsy values
// All those values, after converted to boolean type, are evaluated as false.
console.log("" || 0 || null || undefined || NaN || false); // false (valeur du dernier operand, car tous les operands précédents ont été évalués comme "false")


let city;
const defaultCity = "New York"

console.log(city || defaultCity); // New York ("city" = undefined, donc on nous retourne "default");

let myCity = city || defaultCity;
console.log(myCity); // New York (if "city" is Falsy => "defaultCity")

city = "Los Angeles";

myCity = city || defaultCity;
console.log(myCity); // Los Angeles ("city" now contains an non empty string, so it returns true. Evaluation is stopped when first true value is found)

let myOtherCity = city || console.log("Fill in city please") || defaultCity;
console.log("myOtherCity " + myOtherCity); // Los Angeles


// AND operator
// returns first operand evaluated as FALSE
console.log(true && false); // false
console.log(false && true); // false

// And returns value of the first falsy operand
console.log("abc" && 10 && false && "" && "abcd"); // false
console.log("abc" && 10 && NaN && "" && "abcd"); // NaN (get value of first Falsy operand)
console.log("abc" && 10 && "" && "abcd"); // ""

// All operands are "truthy"
console.log("abc" && 10 && true && 123 && "string"); // string (when all operands are evaluated to true, value of the last operand is returned)
console.log("abc" && 10 && true && 123 && "Hello World"); // Hello World

Boolean("Hello World"); // true



// NOT operator
console.log(!"abc"); // false
console.log(!""); // true (empty string is falsy value)
console.log(!0); // true

let myVariable;
myVariable = undefined;
console.log(!myVariable); // true

myVariable = "Frank";
console.log(!myVariable); // false

// Quick truthy/falsy check
myVariable = null;
console.log(!!myVariable); // false (because "null" is falsy value)
myVariable = 10;
console.log(!!myVariable); // true (because "10" is truthy value)

* Logical operators

// OR

// returns first operand evaluated as TRUE

console.log(true || false); // true

console.log(false || true); // true (si "false", on passe à l'argument suivant)

console.log("abc" || ""); // abc

Boolean("a"); // true

Boolean(""); // false

console.log("" || "abc"); // abc (si "false", on passe à l'argument suivant)

console.log("" || ""); // ""

// Falsy values

// All those values, after converted to boolean type, are evaluated as false.

console.log("" || 0 || null || undefined || NaN || false); // false (valeur du dernier operand, car tous les operands précédents ont été évalués comme "false")

let city;

const defaultCity = "New York"

console.log(city || defaultCity); // New York ("city" = undefined, donc on nous retourne "default");

let myCity = city || defaultCity;

console.log(myCity); // New York (if "city" is Falsy => "defaultCity")

city = "Los Angeles";

myCity = city || defaultCity;

console.log(myCity); // Los Angeles ("city" now contains an non empty string, so it returns true. Evaluation is stopped when first true value is found)

let myOtherCity = city || console.log("Fill in city please") || defaultCity;

console.log("myOtherCity " + myOtherCity); // Los Angeles

// AND operator

// returns first operand evaluated as FALSE

console.log(true && false); // false

console.log(false && true); // false

// And returns value of the first falsy operand

console.log("abc" && 10 && false && "" && "abcd"); // false

console.log("abc" && 10 && NaN && "" && "abcd"); // NaN (get value of first Falsy operand)

console.log("abc" && 10 && "" && "abcd"); // ""

// All operands are "truthy"

console.log("abc" && 10 && true && 123 && "string"); // string (when all operands are evaluated to true, value of the last operand is returned)

console.log("abc" && 10 && true && 123 && "Hello World"); // Hello World

Boolean("Hello World"); // true

// NOT operator

console.log(!"abc"); // false

console.log(!""); // true (empty string is falsy value)

console.log(!0); // true

let myVariable;

myVariable = undefined;

console.log(!myVariable); // true

myVariable = "Frank";

console.log(!myVariable); // false

// Quick truthy/falsy check

myVariable = null;

console.log(!!myVariable); // false (because "null" is falsy value)

myVariable = 10;

console.log(!!myVariable); // true (because "10" is truthy value)

Cas pratiques

// Task 1
let myVariable1 = "2";
let myVariable2 = "4";

console.log(Number(myVariable1) <= Number(myVariable2));
console.log(+myVariable1 <= +myVariable2);

// Task 2
// Afficher ce qu'il reste de la division 10/3
let myNumber1 = 10;
let myNumber2 = 3;

console.log(myNumber1 % myNumber2); // 1 (10 = 3 + 3 + 3 + 1)
console.log(100 % 30 % 3); // 1

// Task 3
console.log(3 || true && null || false); // 3
// STEP 1: true && null -> null
// STEP 2: 3 || null -> 3
// RESULT: 3

// Task 4
let a = 10;

// a = a + 1;
a += 1;
console.log(a); // 11

// a = a * 2;
a *= 2;
console.log(a); // 22

// a = a - 5;
a -= 5;
console.log(a); // 17

// a = a / 2;
a /= 2;
console.log(a); // 8.5

// Task 1

let myVariable1 = "2";

let myVariable2 = "4";

console.log(Number(myVariable1) <= Number(myVariable2));

console.log(+myVariable1 <= +myVariable2);

// Task 2

// Afficher ce qu'il reste de la division 10/3

let myNumber1 = 10;

let myNumber2 = 3;

console.log(myNumber1 % myNumber2); // 1 (10 = 3 + 3 + 3 + 1)

console.log(100 % 30 % 3); // 1

// Task 3

console.log(3 || true && null || false); // 3

// STEP 1: true && null -> null

// STEP 2: 3 || null -> 3

// RESULT: 3

// Task 4

let a = 10;

// a = a + 1;

a += 1;

console.log(a); // 11

// a = a * 2;

a *= 2;

console.log(a); // 22

// a = a - 5;

a -= 5;

console.log(a); // 17

// a = a / 2;

a /= 2;

console.log(a); // 8.5

[javascript] Les bases: les fonctions

12/02/2019 / admin

let a = 5;
let b = 3;

function sum(a , b) {
    let c = a + b;
    console.log(c);
}

sum(a, b); //8

a = 8;
b = 12;

sum(a, b); //20

let a = 5;

let b = 3;

function sum(a , b) {

let c = a + b;

console.log(c);

}

sum(a, b); //8

a = 8;

b = 12;

sum(a, b); //20

function myFn(a, b) {
    let c;
    a = a + 1;
    c = a + b;
    return c;
}

console.dir(myFn);
console.log(myFn(5, 10)); // 16
console.log(myFn(a)); // Uncaught ReferenceError: a is not defined

function myFn(a, b) {

let c;

a = a + 1;

c = a + b;

return c;

}

console.dir(myFn);

console.log(myFn(5, 10)); // 16

console.log(myFn(a)); // Uncaught ReferenceError: a is not defined

Scope

function myFunction1(a, b) {
	console.log(a, b);
}

function myFunction2(a, b) {
	console.log(a, b);
}

const a = true;
const b = null;

myFunction1(2, 3); // 2, 3
myFunction2(4, 5); // 4, 5
console.log(a, b); // true, null

function myFunction1(a, b) {

console.log(a, b);

}

function myFunction2(a, b) {

console.log(a, b);

}

const a = true;

const b = null;

myFunction1(2, 3); // 2, 3

myFunction2(4, 5); // 4, 5

console.log(a, b); // true, null

return

function sum(a, b) {
	return a + b;
}

sum(10, 5); // 15
sum("abc", 2); // "abc2"
sum(); // NaN (Not a Number)

function sum(a, b) {

return a + b;

}

sum(10, 5); // 15

sum("abc", 2); // "abc2"

sum(); // NaN (Not a Number)

function myFunction(a) {
	console.log(a);
	return a; // function stops HERE
	console.log(a);
	const c = 10;
	console.log(c); // code NOT evaluated
}

myFunction(10);

function myFunction(a) {

console.log(a);

return a; // function stops HERE

console.log(a);

const c = 10;

console.log(c); // code NOT evaluated

}

myFunction(10);

function mult(a, b, c) {
	const result = a * b * c;
	console.log(result);
}

mult(0,3,5); // 0
mult(2,3,5); // 30
mult(2,3,"abc"); // NaN
mult(); // NaN

console.log(mult(2,3,5)); // 30 is printed inside of the function and function returns "undefined"

function mult(a, b, c) {

const result = a * b * c;

console.log(result);

}

mult(0,3,5); // 0

mult(2,3,5); // 30

mult(2,3,"abc"); // NaN

mult(); // NaN

console.log(mult(2,3,5)); // 30 is printed inside of the function and function returns "undefined"

function concatenatedStrings(str1, str2) {
	return str1 + " " + str2;
}

const str3 = concatenatedStrings("Hello", "World");
console.log(str3); // Hello World

function concatenatedStrings(str1, str2) {

return str1 + " " + str2;

}

const str3 = concatenatedStrings("Hello", "World");

console.log(str3); // Hello World

function outerFunction(a, b) {
	function innerFunction(c) {
		return c * c;
	}
	const sum = a + b;
	const result = innerFunction(sum);

	console.log(result);
}

outerFunction(5, 2); // 49

// ...which can be simplified as:
function outerFunction(a, b) {
	function innerFunction(c) {
		return c * c;
	}
	console.log(innerFunction(a + b));
}

outerFunction(5, 2); // 49

function outerFunction(a, b) {

function innerFunction(c) {

return c * c;

}

const sum = a + b;

const result = innerFunction(sum);

console.log(result);

}

outerFunction(5, 2); // 49

// ...which can be simplified as:

function outerFunction(a, b) {

function innerFunction(c) {

return c * c;

}

console.log(innerFunction(a + b));

}

outerFunction(5, 2); // 49

Fonctions anonymes

Function expression assigned to the variable:

=> variable à laquelle est assignée une « function expression »

const myFunction = function(a, b) {
	let c;
	a = a + 1;
	c = a + b;
	return c;
};

myFunction(5, 3); // 9

const myFunction = function(a, b) {

let c;

a = a + 1;

c = a + b;

return c;

};

myFunction(5, 3); // 9

Function expression as argument in the function call

=> callback function

setTimeout(function() {
	console.log("Delayed message");
}, 1000);

setTimeout(function() {

console.log("Delayed message");

}, 1000);

callback function

setTimeout();

/**
 * CALLBACK FUNCTION
 * setTimeout
 */

setTimeout(function() {
	console.log("Delayed message");
}, 1000);

/**

* CALLBACK FUNCTION

* setTimeout

setTimeout(function() {

console.log("Delayed message");

}, 1000);

setInterval();

setInterval(function(){
	console.log("Message logged each 1 second");
}, 1000);

setInterval(function(){

console.log("Message logged each 1 second");

}, 1000);

Compteur incrémentiel avec la méthode `setInterval()`

let i = 1;
setInterval(function(){
	console.log("Message logged each 1 second " + i);
	i = i + 1;
}, 1000);

let i = 1;

setInterval(function(){

console.log("Message logged each 1 second " + i);

i = i + 1;

}, 1000);

Compteur incrémentiel qui s’arrêt automatiquement à 5 avec les méthodes `setInterval(), clearInterval() et setTimeout()`

let i = 1;
const repeat = setInterval(function() {
    console.log("Here is message number " + i);
    i = i + 1;
}, 1000);

repeat;

setTimeout(function(){
    clearInterval(repeat);
}, 5000);

let i = 1;

const repeat = setInterval(function() {

console.log("Here is message number " + i);

i = i + 1;

}, 1000);

repeat;

setTimeout(function(){

clearInterval(repeat);

}, 5000);

[JavaScript] UMD (Universal Module Definition) des modules JS qui s’exécutent partout!

11/02/2019 / admin

Sources:

Introduction: UMD: JavaScript modules that run anywhere par Bob Yexley. Version PDF.
Explication: Writing Modular JavaScript With AMD, CommonJS & ES Harmony par Addy Osmani. Version PDF.
Examples: UMD (Universal Module Definition) patterns for JavaScript modules that work everywhere. sur GitHub

Theme by Anders Norén — Up ↑

devfrontend.info

Le bloc-notes professionnel d'un développeur front-end senior

Articles récents

Catégories

Archives

Méta

Monthfévrier 2019

[CSS] Du random en CSS avec :nth-child

[jQuery] Bootstrap 3 et affix ne conserve pas la pleine largeur d’un élément si j’utilise les classes de la grille

[javascript] Les bases: les opérateurs

Jargon

Notation

Infix notation

Prefix notation

Postfix notation

Demo:

Opérateurs de comparaison

Opérateurs logiques (logical operators)

Cas pratiques

[javascript] Les bases: les fonctions

Scope

return

Fonctions anonymes

Function expression assigned to the variable:

Function expression as argument in the function call

callback function

setTimeout();

setInterval();

Compteur incrémentiel avec la méthode `setInterval()`

Compteur incrémentiel qui s’arrêt automatiquement à 5 avec les méthodes `setInterval(), clearInterval() et setTimeout()`

[JavaScript] UMD (Universal Module Definition) des modules JS qui s’exécutent partout!

devfrontend.info

Le bloc-notes professionnel d'un développeur front-end senior

Articles récents

Catégories

Tags

Archives

Méta

Monthfévrier 2019

[CSS] Du random en CSS avec :nth-child

[jQuery] Bootstrap 3 et affix ne conserve pas la pleine largeur d’un élément si j’utilise les classes de la grille

[javascript] Les bases: les opérateurs

Jargon

Notation

Infix notation

Prefix notation

Postfix notation

Demo:

Opérateurs de comparaison

Opérateurs logiques (logical operators)

Cas pratiques

[javascript] Les bases: les fonctions

Scope

return

Fonctions anonymes

Function expression assigned to the variable:

Function expression as argument in the function call

callback function

setTimeout();

setInterval();

Compteur incrémentiel avec la méthode setInterval()

Compteur incrémentiel qui s’arrêt automatiquement à 5 avec les méthodes setInterval(), clearInterval() et setTimeout()

[JavaScript] UMD (Universal Module Definition) des modules JS qui s’exécutent partout!

Compteur incrémentiel avec la méthode `setInterval()`

Compteur incrémentiel qui s’arrêt automatiquement à 5 avec les méthodes `setInterval(), clearInterval() et setTimeout()`