Les bases du language

Déclarations de variables

var foo = 'bar'; // string

var account = 1; // number

var isAuthenticated = true; //boolean

console.log(typeof foo); //typeof permet de retrouver le type d'une variable

va foo = 'bar' + 'anOtherString';

var result = 2 * 5;

result = 'foo';

Le type de la variable est determiné au runtime

Typage dynamique.

Les opérateurs de comparaison

var myAge = 45,
    otherAge = 23,
    sameAge = 45;

var isOlder = myAge > otherAge; // isOlder => true
var isOlder = myAge >= otherAge;

var isYounger = myAge < otherAge; //isYounger => false;
var isYounger = myAge <= otherAge;


var isSameAge = myAge == sameAge; isSameAge => true

http://jsbin.com/zahojo/edit?js,console

var foo = 'bar' + 4; bar4

var result = 2 + true; 3

Conversions implicite

Pour comparer deux variables javaScript convertit ces dernières de manière implicite.

Les structures de controle

• if
• switch
• while
• do while
• for

La condition if

permet d'executer du code si une condition est remplie.

var myAge = 45,
    otherAge = 34;

if(myAge >= otherAge){
    //faire quelque chose si je suis plus vieux
}else{
    //faire autre chose si je suis plus jeune
}

Il est possible de chainer les conditions à l'aide des opérateurs || (ou) && (et)

var myAge = 45,
    otherAge = 34;

if(myAge >= otherAge && myAge != 19){
    //faire quelque chose si je suis plus vieux et que je n'ai pas 19 ans
}

Switch

A utiliser dans les situations ou nous avons beaucoup de cas possibles.

var myAge = 25;

switch(myAge){
    case 25:
        //faire quelque chose
        break;
    case 18:
        //encore autre chose
    break;
    default:
        //comportement par defaut
    break;
}

Plus performant que l'equivalent à base de if else if

La boucle while

Permet de reépéter un traitement, tant que la condition fournis est vraie.

Il faut donc s'arranger pour que la condition devienne fause pour pouvoir sortir de la boucle.

var myAge = 1;

while(myAge < 18){
    //faire quelque chose
    myAge++;
}

La boucle do while

Do while fonctionne de la même façons que while, sauf que le traitement sera exécuté au moins une fois.

var myAge = 19;

while(myAge < 18){
    //faire quelque chose
    myAge++;
}

//le traitement ne sera jammais éxécuté

do {

    myAge++
} while (myAge < 18)

//le traitement ne sera éxécuté une seule fois

La boucle for

La boucle for est composée de trois bloc.

Elle permet de répéter un traitement un nombre de fois donné.

for(var i = 0; i < 10; i++){
    //faire quelque chose
}

//cette boucle se répétera 10 fois;

break et continue

break et continue sont des mot clé qui permettent d'interrompre ou de modifier le comportement de la boucle.

for(var i = 0; i < 10; i++){
    if(i === 5)
        continue;

    console.log(i);
}

//affiche 0 1 2 3 4 6 7 8 9

for(var i = 0; i < 10; i++){
    if(i === 5)
        break;

    console.log(i);
}

//affiche 0 1 2 3 4

continue permet d'interompre l'itération courante et de passer à la suivante.

break interomp purement et simplement la boucle.

Les fonctions

Une fonction est une suite d'instructions pouvant être appelé plusieurs fois.

function sayHello(){
    console.log('Hello');
}

sayHello();

Les fonctions

Les fonctions peuvent retoruner une valeur,

pour cela il suffit d'utiliser le mot clef "return".

function multiply(firstInput, secondInput){
    return firstInput * secondInput;
}

var result = multiply(10, 5);

console.log(result);

Les fonctions

En JavaScript les fonctions sont des objets de première classe. 

var myFunction = function(){
    //faire quelque chose
}

myFunction();

Ce qui veux dire que nous pouvons assigner une fonction à une variable

Gestion des erreurs

Les mots clef "try", "catch" et "throw" permettent de gérer les erreurs.

function multiply(firstInput, secondInput){
    if( typeof firstInput != 'number' || typeof secondInput != 'number' )
        throw 'invalid inputs';
    return firstInput * secondInput;
}

try{
    var result = multiply(10, 5);
    console.log(result);
} catch (error){
    console.error(error);
}

Portée des variables

Une variable déclarée à la racine du script peut être utilisée n'import ou, elle fait partie du scope global.

var globalVar = 'foo';

function(){
    var scopedVar = 'bar';
    console.log(globalVar, scopedVar);
}

console.log(globalVar, scopedVar);

Une variable déclarée dans une fonction ne peut être utiliser qu'à l'intérieur de cette fonction

Les Objets

Un objet est un ensemble de propriétés et une propriété est une association entre un nom (aussi appelé clé) et une valeur.

https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/Object

var myUser = {
    firstName: 'john',
    lastName: 'snow',
    email: 'johny@winterfell.org'
}

console.log(myUser.firstName);

firstName et lastName sont des propriété de l'objet myUser.

Pour accéder à la valeur d'une propriété, il suffit d'utiliser le "."

Exemple simple

var myUser = {
    firstName: 'john',
    lastName: 'snow',
    email: 'johny@winterfell.org',
    saySomething: function(){
        console.log('winter is coming');
    }
}

myUser.saySomething();

Lorsqu'une propriété de notre objet est une fonction, on parle de méthode.

Les méthodes

var myUser = {
    firstName: 'john',
    lastName: 'snow',
    email: 'johny@winterfell.org',
    saySomething: function(){
        console.log('Hello i am ',this.firstName);
    }
}

myUser.saySomething();

Le mot clé this fait référence à l'object qui appelle la méthode.

Le mot clé this

var myUser = {
    firstName: 'john',
    saySomething: function(){
        console.log('Hello i am ',this.firstName);
    },
    parent: {
        firstName: 'ned',
        saySomething: function(){
            console.log('Hello i am ',this.firstName);    
        }
    }
}

myUser.saySomething();
myUser.parent.saySomething();

Le mot clé this

function User(name, email){
    this.name = name;
    this.email = email;
}

var myUser = new User('john','johnny@winterfell.org');

JavaScript et les classes

Pas de mot clé "class" avant ES2015 (anciennement ES6) .

Une simple fonction va nous permettre de mettre en place quelque chose de similaire

function Person(name){
    this.name = name;
}

Person.prototype.saySomething = function(){
    console.log('hello i am ', this.name);
}

var myUser = new Person('johnSnow');

myUser.saySomething();

La propriété prototype

Pour rajouter une méthodes aux instances de la classe User, il suffit d'utiliser le prototype de la fonction.

function Client(name, company){
    this.name = name;
    this.company = company;
}

Client.prototype = Person.prototype;

var myClient = new Client('johnSnow', 'winterfell');
myClient.saySomething();

Héritage par prototype

Une classe peut heriter d'une autre classe.

class Person{
    constructor(name){
        this.name = name;
    }
    saySomething(){
        console.log(this.name);
    }
}

class Client extend Person{
    constructor(name, company){
        super(name);
        this.company = company;
    }
}

const myClient = new Client('Tony', 'starckIndustries');
myClient.sySomething();

Equivalent ES2015

Les Objets de type String

https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/String

Intro

Pour retrouver la taille d'une chaine il suffit d'utiliser la propriété length.

var aString = new String(4);
var anOtherString = new String(true);

console.log(typeof aString);

console.log(myString.length);

Nous pouvons utiliser la classe String pour convertir d'autres valeur en string.

Les méthodes du prototype de String

Les objets de type string disposent de beaucoup de méthodes qui permettent de les manipuler:

https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/String

• charAt
• concat
• indexOf
• lastIndexOf
• substr
• substring

• toLowercase
• toUppercase
• trim

Exemples

//recuperer le énième char

var myString = 'i am a string';

console.log('La caractère d\'indice 0 est', myString.charAt(0));


//manipulation de sous chaine

console.log('selection a partir du 2eme char et sur 4 char ', myString.substr(2,4));
console.log('selection a partir du 2eme char jusqu\'au 5eme ', myString.substring(2,5)); 
//affiche 'am a'


//concaténation

var anotherString = 'another string';

console.log('concat method : ', myString.concat(anotherString));
console.log('concat with + : ', myString + anotherString);
//Toujours privilégier la deuxiémé methode (performances)

Exemples

//trim supprime les espace au début et à la fin de la chaine

var myString = '   i am a STRING   ';
console.log(myString.trim());


//mise en majuscule, minuscule

console.log(myString.trim().toUppercase());
console.log(myString.trim().toLowercase());

Exemples

//recuperer la position d'un char

var myString = 'txtFileName.txt';

console.log('La 1ére sous chaine txt est à la ', myString.indexOf('txt'), 'éme position');
console.log('La dernière sous chaine txt est à la ', myString.lastIndexOf('txt'), 'éme ');
console.log(myString.indexOf('png')); //retourne -1

indexOf retourne l'indice de la première occurence de la sous chaine passé en paramètre.

lastIndexOf retourne l'indice de la dernière occurence de la sous chaine passé en paramètre.

Si la sous chaine n'est pas présente dans la chaine testée, les deux méthodes retourne -1.

Les Objets de type Array (tableaux ...)

https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/Array

Intro

var myStringArray = ['C++','Java','JavaScript'];

var otherArray = [
    4,
    'apple',
    {
        name: 'toto'
    }
]

console.log(myStringArray.length);

Les Array sont des objets complexes qui se comportent comme des listes de données.

Ces données peuvent être de tout type (objets ou primitive).

Pour récuperer le nombre d'élément dans un tableau, il suffit d'utiliser la propriété length (come pour les strings)

Acceder à une donnée

var myStringArray = ['C++','Java','JavaScript'];

console.log(myStringArray[0], myStringArray[1]);
// 'C++' 'Java'

myStringArray[1] = 'php';

console.log(myStringArray);
// 'C++' 'php' 'JavaScript'

Pour acceder à une donnée stockée dans un array, il suffit de préciser un indice correspondant à la position de la donnée dans le tableau entre les "[]".

Afficher tous les éléments d'un tableau à l'aide d'une boucle

var myStringArray = ['C++','Java','JavaScript'];

for(var i = 0; i < myStringArray.length; i++){
    console.log(myStringArray[i]);
}

for(var i in myStringArray){
    console.log(myStringArray[i]);
}

Les méthodes du prototype d'Array

https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/Array

Les objets de type array possède les méthodes suivantes :

• push
• pop
• shift
• unshift
• concat
• splice
• slice

• forEach
• map
• filter
• reduce
• ...

Ajouter des éléments à un Array

var languages = ['C++','Java','JavaScript'];

languages.push('Python');
languages.unshift('C');

console.log(languages);
// ['c','c++','Java','JavaScript','Python']

Pour ajouter un element en fin de tableau, il faut utiliser la méthode push.

Pour ajouter un element en début de tableau, il faut utiliser la méthode unshift.

Retirer des éléments à un Array

var languages = ['C++','Java','JavaScript', 'C#', 'Python'];

languages.pop();
languages.shift();

console.log(languages);
// ['Java','Javascript', 'C#']

languages.splice(1,1); 
// le premier param est la position de l'élement à supprimer, 
// le deuxième param est le nombre d'élément à supprimer.

console.log(languages);
// ['Java', 'C#']

Pour retirer un element en fin de tableau, il faut utiliser la méthode pop.

Réordonner un tableau

var myStringArray = [13,5,3,24,7,6,75,45];

myStringArray.sort(function(a,b){
    return a-b;
});
// Ascendant
console.log(myStringArray);

myStringArray.sort(function(a,b){
    return b-a;
});
//descendant
console.log(myStringArray);

//inverse l'ordre d'un tableau (les derniers seront les premiers)
myString.reverse();
console.log(myStringArray);

La methode sort va nous permettre de réordonner un tableau de string ou un tableau de number.

Concaténer plusieurs tableaux

var fruits = ['pomme','poire'],
    legumes = ['brocoli', 'choux'];

var panier = fruits.concat(legumes);

var panierFinal = fruits.concat(legumes, [
    'steack',
    'oeuf'
])

console.log(panierFinal);
// ['pomme','poire', 'brocoli', 'choux', 'steack', 'oeuf']

La methode concat retourne un nouveau tableau, resultat de la concaténation entre le tableau original, et les tableaux passés en paramètre.

Transformer en String

var myArray = ['foo','bar'];

console.log(myArray.join('/'));  //affiche foo/bar
console.log(myArray.join());  //affiche foo,bar

La méthode join permet de réunir tous les éléments d'un tableau dans une chaine de caractère.

La méthode toString appelé sur un array appelera en réalité join

Extraire une portion d'un tableau

var myArray = ['foo','bar', 'toto', 'tata'];

var slicedArray = myArray.slice(1,2);

console.log(slicedArray.join());
//affiche bar, toto 

La méthode slice retourne un nouveau tableau qui contient une portion du tableau de base.

Déterminer la position d'un élémént

var myArray = ['foo','bar', 'toto', 'tata', 'bar'];

console.log(myArray.indexOf('bar'));
//affiche 1 

console.log(myArray.indexOfLast('bar'));

Les méthodes indexOf et indexOfLast retourne la position dans le tableau de l'élément fournit en paramètre. 

La méthode forEach

var myArray = ['foo','bar', 'toto', 'tata'];

myArray.forEach(function(value, index){
    console.log(value, index);
    //ici on peut manipuler chaque valeur une par une
})

Pour boucler dans un tableaux nous n'auront pas forcément besoin d'utiliser le for.

Il n'est pas possible d'utiliser breack avec la methode Array.prototype.forEach

!

La méthode map

var nombrePair = [2,4,6,8,10];

nombreImpair = nombrePair.map(function(value, index){
    console.log(value, index);
    return value -1;
})

console.log(nombrePair.join());
// affiche 2,4,6,8,10

console.log(nombreImpair.join());
// affiche 1,3,5,7,9

La fonction map retourne un nouveau tableau, chaque élément du tableau originel sera transformé par le callback.

inside the map method

Array.prototype.map = function(projection){
    //la function retourne un array créons le
    var response = [];
    //on lance la boucle
    this.forEach(function(value, index){
        //on stocke dans le tableau de réponse, la valeur modifiée 
        //par la fonction passée en paramétre
        response.push(projection(value));
    })
    //on retourne le tableau
    return response;
}

Réecrivons la fonction map :

La méthode filter

var nombres = [1,2,3,4,5,6,7,8,9,10];

var nombrePair = nombres.filter(function(value){
  return value % 2 === 0;
});

var nombreImpair = nombres.filter(function(value){
    return value % 2 === 1;
});

console.log('nombre pair : ', nombrePair.join());
// affiche 2,4,6,8,10

console.log('nombre impair : ',nombreImpair.join());
// affiche 1,3,5,7,9

La methode filter retourne un nouveau tableau contenant tous les éléments du premier tableau pour lesquel le callback retourne true.

La méthode reduce

var nombres = [1,2,3,4];

var reducedArray = nombres.reduce(function(valeurPrecedente, valeurCourante, index){
  return valeurPrecedente + valeurCourante;
});

console.log(reducedArray);
// affiche 10

La methode reduce est un accumulateur, elle traite chaque valeur de la liste de la gauche vers la droite afin de réduire le tableau à une seule valeur.

Manipulation du D.O.M.

(Document object model)

Dom ?

Désigne la technologie liant le HTML au JavaScript. 

Chaque balise HTML est un objet, dont les attributs sont les clés de l’objet.

Le Document Object Model (DOM) a été normalisé par le W3C en 1998.

root : html

body

head

title

section

article

article

p

H1

L'objet document

L'object document permet de manipuler le Dom.

Les objets de type HtmlElement et HtmlElementCollection

Un objet de type HtmlElement, représente une balise html, présente ou non dans notre document.

• Ajout / Suppression
• modification de style
• modification de contenu

Nous allons pouvoir effectuer un certain nombre de manipulations sur ces balises :

Le type HtmlElementCollection represente une liste d'objet HtmlElement.

Les objets de type HtmlElementCollection ne sont pas des Array

!

Récupérer un Element depuis le DOM

• getElementById(id)
• getElementsByClassName(className)
• getElementsByTag(htmlTag)
• querySelector(selecteurCss)
• querySelectorAll(selecteurCss)

window.document possède 5 méthodes pour récupérer des éléménts dans le dom :

var myElement = document.getElementById('main-header');

var myHeaders = document.getElementsByTagName('header');

var mySpecialHeaders = document.getElementsByClassName('special-header');


var secondChildHeader = document.querySelector('article:nth-child(2) header');

var secondChildHeaders = document.querySelectorAll('article:nth-child(2) header');

Exemple

http://codepen.io/Charl---/pen/dGOBLQ?editors=101