Quelle est la différence entre Window, Document, Screen?

Window est l’objet principal du DOM, le document object model, qui est la base de la page web et quand je dis la base ça comprend vraiment tout, les images, les scripts javascript, et autres objets, bref ce que vous voyez dans la fenêtre de votre navigateur.

Quand vous faite un script javascript, vous ne le savez peut être pas, mais vous utiliser une méthode ou un objet de l’objet Window, qui est le parent de tous les objets javascripts.

 

Document est un sous objet de Window. Document est en fait la vraie partie visible de la page qui est dans votre navigateur.

Pour savoir ce que l’objet Window contient, je vous invite à faire tourner le script suivant dans la console javascript (pour Chrome, faire F12,cliquer sur console) :

console.log(window);

 

cette ligne de javascript va afficher l’objet Widow dans la console de debug. Déplier le et vous allez être submergé, car il contient beaucoup d’objet, et vous allez vous rendre compte qu’il est facile de faire une radiographie de la page web et très facilement.

Ne sous estimez pas la puissance d’un simple console.log, il vous permet d’afficher n’importe quel objet, même les lus obscure. Par exemple, quend vous chargez un script Jquery, il est rattaché au DOM donc à window. Vous pourrez afficher tout l’objet Jquery et regarder ce qu’il contient ! De même si vous ne savez pas ce qu’il y a dans l’objet Angular, vous pouvez l’afficher de cette façon. Attention, c’est gros et vous allez peut etre vous y perdre.

 

Cas des iframes

Lorsqu’il y a des iframes dans votre page html, le code JS qu’il y a dans le ifrmae ne peut pas accéder directement à la fenêtre qui le contient. Si vous êtes dans l’iframe, pour accéder à un élément du DOM de la fenêtre parente, vous devez faire :

var topWindow = window.top

votre variable topWindow contiendra une référence vers l’objet window le pus haut dans la hiérachie des windows, oui il peut avoir plusieurs windows dans une page web.

Le parent immédiat :

Si vous êtes dans une iframe et que vous voulez le parent immédiat :

var parentWindow = window.parent

 

 

 

 

Pour manipuler les dates en Javascript, ce n’est pas forcément simple, en outre nativement Javascript possède peu de fonction de manipulation de date, d’ou l’intérêt de Moment.js.

Le problème c’est que moment.js sait faire tellement de chose et que la documentation est tellement touffue (voire pas bien foutue) que l’on peine même pour faire les opérations les plus élémentaires.

Ce post se veut comme un aide mémoire pour faire les opérations les plus simples avec les dates.

 

Instanciation d’une date

const t = moment()

génère un objet correspondant à la date et heure actuelle

const t = moment("12-05-1996","MM-DD-YYYY")

 

génère une date mais avec un format passé en second argument, pour être sûr de bien comprendre la date passée en premier argument.

calculer la différence entre deux dates

Pour calculer la différence entre deux objets moment, il faut utiliser la méthode diff (moment.diff() )

const start = moment('2016-11-13','YYYY-MM-DD')

const end = moment('2016-11-11','YYYY-MM-DD')

 

 

 

Calculer la différence en heures

const c = start.diff(end,’hours’)

 

Calculer la durée dans moment

 

MomentJS est plus dédié à la notation de temps à un point donné, mais il est possible de

duration = moment.duration(start.diff(end),’milliseconds’)

On entends sur le net beaucoup à propos de Grunt ou de Gulp, ces outils vous permettent de compiler du sass en css, de minifier les script css et javascript, de rassembler en un seul fichier etc.

Cependant, il vous est tout à fait possible de faire ce que fait Gulp par exemple rien qu’en utilisant ce qui est disponible avec NPM script.

NPM est le gestionnaire de package sous nodeJS. Il vous permet de télécharger les dépendances nécessaire au fonctionnement de votre application web et du développement de ce dernier.

Voyons voir comment on peut compiler du Sass en CSS en utilisant NPM script.

les scripts NPM sont logés dans le fichier package.json, dans la propriété scripts.

C’est un objet json qui contient des paire clé-valeurs. La clé étant le nom d’un script, et la valeur est la commande NPM que vous auriez tapé en ligne de commande.

Bon assez parlé on y va !

Compiler du Sass en css

c’est la tâche que l’on aura le plus souvent à faire.

Donc je suppose que vous avez déjà installé nodeJS, donc que vous pouvez utiliser NPM.

> npm install node-sass

Ensuite dans l’objet scripts qu’il y a dans le fichier package.json, créez une entrée comme ceici:

"scripts": {
"scss-build": "node-sass --include-path src/scss src/scss/style.scss public/css/style.css",
"watch-scss": "node-sass -w src/scss/ -o public/css/"
},

 

les chemins sont relatifs à l’emplacement du fichier package.json

le premier script « scss-build » va dire à node de compiler le fichier style.scss en style.scss

1. src/scss est le répertoire source
2. src/scss/style.scss est le fichier sass à compiler
3. public/css/style.css est le fhicer cible

Rien qu’avec ce premier script (n’ajoutez pas le second script watch-scss pour l’instant), faite ceci:

> npm run scss-build

 

et voilà !

Passons au second script, comme avez à modifier un grand nombre de fois le fichier sass, vous aurez envie que la compilation se fasse à chaque fois que vous sauvez le fichier sass,

le « watch-scss » va surveiller toute modification du ficheir et va le compiler.

Il suffit donc de lancer non pas le premier script, mais le second script seul.

> npm run watch-scss

 

 

et voilà !

Il y a plus dans les npm scripts que la compilation. On aura envie de minifier le css,minifier le javascript, linter le javascript (linter veut dire vérifier que le code soit aux normes),autopréfixer les propriétés css, et même compresser les images (ce qui est très intéressant !). Le top du top est de pouvoir travailler avec Browsersync quand vous développez en cross browser.

 

 

Pour un projet web en php pour le backend, et javascript pour le front(en fait vous n’avez pas d’autres choix que le javascript pour le front car c’est le seul langage côté navigateur à l’heure actuelle),

je vais vous montrer comment initier un projet avec NPM.

 

Créez votre répertoire web, entrez-y, et commencez par:

>npm init

Vous aurez une suite de question pour configurer votre application, les paramètres globaux de la solution sera sauvée dans un fichier package.json.

A ce niveau votre fichier json ne contient pas de dépendance vers une quelconque bibliothèque javascript.

On va installer Angular (la dernière version):

> npm install --save angular

 

L’argument save a pour but de sauver la ligne d’installation du module Angular dans el fichier package.json.

Vous faites de même avec les autres librairie (sass, gulp etc), pour savoir ce qu’il faut taper exactement, allez sur le site officiel de NPM, maintenant on va faire une installation d’une autre catégorie de librairies, les dev dependencies. Ce sont les librairies qui sont utilisée seulement en développement mais ne figureront pas dans la version production.

Par exemple je vais installer la librairie de test unitaire Karma, qui est un orchestrateur de tests, et Jasmine qui est la librairie de test unitaire proprement dite.

>npm install --save-dev karma

 

 

Voilà ce que vous aurez comme fichier package.json

{

"name": "monprojet",
"version": "1.0.0",
"description": "monprojet",
"main": "index.php",
"dependencies": {
"angular": "^1.5.8"
},
"devDependencies": {
"karma": "^1.1.2"
},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "Yvon Huynh",
"license": "ISC"

}

Si vous versionnez avec GIT par exemple, vous n’allez pas versionner le répertoire node_modules (le répertoire dans lequel sont entreposés les dépendances). Mais vous allez par contre versionner le fichier package.json. C’est lui qui contient toutes les informations sur les dépendances, si un collègue ou un contributeur désire cloner le projet chez lui, il fera un :

> npm update

pour lancer le processus de chargement des modules npm. Npm va lire le package.json et réinstaller les modules. Comme ça pas de repository Github surchargé par du code non en liaison directement avec votre application.