Javascript "defer" et "setInterval", les chemins relatifs
Cas pratiques et explication pour débutants :)
Javascript
Ici des notions pour les débutants avancés en Javascript avec des connaissances préalables en web dev.
defer
defer
le mot à ne pas oublier quand on veut appeler un document javascript en ouverture de l’élément body
plutôt qu’en fermeture.
Pourquoi faire ça ? Pour améliorer la lecture du document. Regrouper les appels de fichier en haut de document.
<body>
<script defer src="https://javascript.info/article/script-async-defer/long.js"></script>
defer
attend que le DOM soit construit avant d’appeler le script.
asynch
similaire à defer
, asynch
est surtout utilisé pour appeler les fichers venant de tiers. Exemple, Google analytics.
<script async src="https://google-analytics.com/analytics.js"></script>
👀 Pour appronfondir defer + asynch (en anglais)
setInterval
J’ai eu besoin de cette fonction pour afficher dans l’interface le contenu d’un array
en goutte à goutte.
setInterval
est une fonction native de JavaScript. Elle fonctionne avec deux paramètres : le code à exécuter et le délai d’exécution.
setInterval(code, delay)
Cette fonctionnalité peut être utilisée en tandem avec setTimeout()
,
qui permet d'interrompre une boucle afin de revenir à une valeur initiale. Dans cet exemple, elle permet d'appliquer une opacité à chaque mot afin d’obtenir un effet de fondu en entrée et en sortie ( fade in, fad out).
🧐 Retrouve le code sur ma page github script.js.
🏗️ Retrouve mon profil github (WIP) ici.
Sans transition, mais toujours à voir avec le code, les chemins relatifs.
Chemin relatif
J’ai enfin imprimé la différence entre / ../ ou ../../ pourquoi et quand.
D’abord qu’est-ce qu’un chemin relatif ?
Plutôt que de commencer le chemin à la racine de notre site en utilisant http://www.monsite.fr/, on commence le chemin là où se trouve le fichier dans lequel on veut ajouter un lien.
Bon, mémoriser cela ne semble pas être quelque chose d’incroyable, mais au quotidien, ça fait économiser quelques cliques.
Voilà ce que j’ai retenu :
../ remonte dans le dossier précédent.
Par exemple, ajouter une image à un background dans un fichier .css, dans le cas ou le fichier d’où l’on part (style.scss) se trouve à un niveau du dossier target (images) :
body { background-image : url(../images/background.png);}
Dans le cas où le fichier d’où l’on part se trouve à deux niveaux du dossier target :
body { background-image : url(../../images/background.png);}
Enfin dans le cas où le fichier d’où l’on part se trouve à la racine du dossier target :
body { background-image : url(/images/background.png);}
Pour plus de publications abonnez-vous. C’est gratuit!
Pour envoyer mes services de Product Designer, envoyez-moi un message sur LinkedIn