Formation Javascript
Intermédiaire
5.
Window
ScrollBy
La méthode scrollBy() fait défiler le document du nombre de pixels spécifié.
scrollTo
La méthode scrollTo() fait défiler le document jusqu'aux coordonnées
spécifiées.
scrollX et scrollY
La propriété scrollX renvoie les pixels qu'un document a défilé depuis le coin
supérieur gauche de la fenêtre.
La propriété scrollY renvoie les pixels qu'un document a défilé depuis le coin
supérieur gauche de la fenêtre.
Window.open()
La méthode open() ouvre une nouvelle fenêtre de navigateur ou un nouvel
onglet, selon les paramètres de votre navigateur et les valeurs des paramètres.
Window.open()
Ouvrez une page about:blank dans une nouvelle fenêtre/onglet :
Window.print()
La méthode print() imprime le contenu de la fenêtre courante.
La méthode print() ouvre la boîte de dialogue d'impression, qui permet à
l'utilisateur de sélectionner les options d'impression préférées.
innerWidth et innerHeight
La propriété innerWidth renvoie la largeur de la zone de contenu d'une fenêtre.
La propriété innerHeight renvoie la hauteur de la zone de contenu d'une fenêtre.
Location
L' objet location contient des informations sur l'URL actuelle.
Methodes Location
La propriété location.hash définit ou renvoie la partie ancre d'une URL, y compris le signe dièse (#).
La propriété location.host renvoie l'hôte (adresse IP ou domaine) et le port d'une URL.
La propriété location.hostname renvoie l'hôte (adresse IP ou domaine) d'une URL.
La méthode reload() recharge le document courant.
History
L' objet history contient les URL visitées par l'utilisateur (dans la fenêtre du navigateur).
La méthode history.back() charge l'URL (page) précédente dans la liste d'historique.
La history.forward() méthode charge l'URL (page) suivante dans la liste d'historique.
La méthode history.go() charge une URL (page) à partir de la liste d'historique.
Navigator
L' objet navigator contient des informations sur le navigateur.
La propriété onLine renvoie true si le navigateur est en ligne, sinon false.
La propriété language renvoie la langue du navigateur.
6.
Modules
Introduction
Au fur et à mesure que notre application grandit, nous souhaitons la diviser en plusieurs
fichiers, appelés «modules». Un module peut contenir une classe ou une bibliothèque de
fonctions dans un but précis.
Pendant longtemps, JavaScript a existé sans syntaxe de module au niveau du langage. Ce
n'était pas un problème, car au départ, les scripts étaient petits et simples, donc ce n'était
pas nécessaire.
Mais finalement, les scripts sont devenus de plus en plus complexes, de sorte que la
communauté a inventé une variété de façons d'organiser le code en modules, des
bibliothèques spéciales pour charger des modules à la demande.
Qu’est-ce qu’un module
Un module n'est qu'un fichier contenant un script qui doit être exporté pour être utilisé
ailleurs.
Les modules peuvent se charger les uns les autres et utiliser des directives
spéciales export et import pour échanger des fonctionnalités, appeler des fonctions
d'un module à partir d'un autre :
• Export : étiquette les variables et les fonctions qui doivent être accessibles depuis
l'extérieur du module actuel.
• import : permet l'importation de fonctionnalités à partir d'autres modules.
Exemple
Live server
On ne peut accéder à un module que par une requête http, sinon il y aura une
erreur dans le console
Portée au niveau du
module
Chaque module a sa propre portée de niveau supérieur. En d'autres termes, les variables
et fonctions de niveau supérieur d'un module ne sont pas visibles dans les autres scripts.
Importer un module plusieurs
fois
Si le même module est importé dans plusieurs autres modules, son code n'est exécuté
qu'une seule fois, lors de la première importation. Ensuite, ses exportations sont
données à tous les autres importateurs.
Exporter avant
déclaration
Nous pouvons étiqueter n'importe quelle déclaration comme exportée en export la plaçant
devant, qu'il s'agisse d'une variable, d'une fonction ou d'une classe.
Exportation hors
déclaration
Nous pouvons mettre export séparément.
Import as
Nous pouvons également utiliser as pour importer sous différents noms.
Export default
En pratique, il existe principalement deux types de modules.
1.Modules qui contiennent une bibliothèque, pack de fonctions.
2.Les modules qui déclarent une seule entité
Les modules fournissent une syntaxe spéciale export default ("l'exportation par
défaut") pour améliorer l'apparence de la méthode "une chose par module".
Importer toutes les bibliothèques d’un
module
7.
Stockage
localStorage et
sesslonstorage
Objets de stockage Web localStorage et sessionStorage permettent d'enregistrer des
paires clé/valeur dans le navigateur.
Ce qui est intéressant à leur sujet, c'est que les données survivent à une actualisation
de la page (pour sessionStorage) et même à un redémarrage complet du navigateur
(pour localStorage). Nous verrons cela très bientôt.
Methodes
Les deux objets de stockage fournissent les mêmes méthodes et propriétés :
• setItem(key, value) : stocker la paire clé/valeur.
• getItem(key) : obtenir la valeur par clé.
• removeItem(key) : supprimer la clé avec sa valeur.
• clear() : tout supprimer.
• key(index) : obtenir la clé sur une position donnée.
• length : le nombre d'éléments stockés.
localStorage
Les principales caractéristiques de localStorage sont :
• Partagé entre tous les onglets et fenêtres d'une même origine.
• Les données n'expirent pas. Il reste après le redémarrage du navigateur et même
le redémarrage du système d'exploitation.
sessionStorage
L'objet sessionStorage est beaucoup moins utilisé que localStorage.
Les propriétés et les méthodes sont les mêmes, mais c'est beaucoup plus limité :
• La sessionStorage n'existe que dans l'onglet actuel du navigateur.
• Un autre onglet avec la même page aura un stockage différent.
• Mais il est partagé entre les iframes du même onglet (en supposant qu'ils
proviennent de la même origine).
• Les données survivent à l'actualisation de la page, mais ne ferment/ouvrent pas
l'onglet.
Exemple
8.
Librairie :
SheeJS
Introduction
sheetJS est une librairie qui nous permet d'exportation de données vers des feuilles de
calcul.
<script lang="javascript" src="https://cdn.sheetjs.com/xlsx-0.19.3/package/dist/xlsx.full.min.js"></script>
Exemple
9.
Librairie : Jquery
Introduction
jQuery est une bibliothèque JavaScript rapide, petite et riche en
fonctionnalités. Il rend les choses comme la traversée et la manipulation de
documents HTML, la gestion des événements, l'animation et Ajax beaucoup
plus simples avec une API facile à utiliser qui fonctionne sur une multitude de
navigateurs. Avec une combinaison de polyvalence et d'extensibilité, jQuery a
changé la façon dont des millions de personnes écrivent JavaScript.
10.
Librairie : Jquery
ui
Introductio
n
jQuery UI est un ensemble organisé d'interactions, d'effets, de widgets et de thèmes d'interface
utilisateur construits au-dessus de la bibliothèque JavaScript jQuery. Que vous créiez des
applications Web hautement interactives ou que vous ayez simplement besoin d'ajouter un
sélecteur de date à un contrôle de formulaire, jQuery UI est le choix parfait.
Évènements
