9 juin 2024
Introduction à JavaScript
Javascript est un langage dis dynamique, en effet celui-ci peut interagir avec le contenu d'une page web directement (le DOM*) sans devoir passer par d'autres éléments externes.
Prenons en exemple le site web ou vous êtes actuellement, sur la page de garde, il y a un texte qui est dynamique, c'est grâce à JavaScript.
*Le Document Object Model ou DOM (pour modèle objet de document) est une interface de programmation pour les documents HTML, XML et SVG. Il fournit une représentation structurée du document sous forme d'un arbre et définit la façon dont la structure peut être manipulée par les programmes, en termes de style et de contenu. Le DOM représente le document comme un ensemble de nœuds et d'objets possédant des propriétés et des méthodes. Les nœuds peuvent également avoir des gestionnaires d'événements qui se déclenchent lorsqu'un événement se produit. Cela permet de manipuler des pages web grâce à des scripts et/ou des langages de programmation. Les nœuds peuvent être associés à des gestionnaires d'événements. Une fois qu'un événement est déclenché, les gestionnaires d'événements sont exécutés.
1# Votre premier script JavaScript
Il existe plusieurs façons d'intégrer un script JavaScript dans votre projet web. On peut passer par un fichier .js ou depuis les balises <script></ script> directement dans votre page HTML, PHP etc ..
Il y a aussi quelques règles à respecter pour que vos futurs scripts soient bien fonctionnels :
1/ Les scripts JavaScript sont à mettre soit dans le <head></ head> soit juste avant la balise de fin </ body>
2/ Dans un fichier externe (ex: app.js), il faut prendre en compte que si vous chargez le DOM avant d'exécuter du code JS, il se peut que parfois le code JS ne fonctionne pas (nous reverrons ça plus tard).
Dans cette formation, nous utiliserons la méthode avec les balises HTML pour une question de simplicité et de compréhension.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Intro JS</ title>
</ head>
<body>
<script>alert("Cours Du Dev")</ script>
</ body>
</ html>
Le script ci-dessus, créer une alerte qui s'affichera dans votre navigateur. On se rend bien compte que JavaScript interagi avec notre page directement sans devoir recharger la page etc..
Prenons un autre exemple, avec JavaScript, on peut ajouter du contenu dans notre page HTML sans rien mettre dans nos balises HTML :
<body>
<p id="para"></ p>
<script>document.getElementById('para').innerHTML = "Bonjour"</ script>
</ body>
Le script ajoute “Bonjour” à notre paragraphe HTML. Détaillons le code :
<script>document.getElementById('para').innerHTML = "Bonjour"</ script>
document = On sélectionne un élément dans notre document HTML.
getElementById('para') = On sélectionne l'élément qui contient l'id “para”
innerHTML = "Bonjour" = Permet d'ajouter du code HTML entre nos balises HTML sélectionné avec l'id.
Il y a plusieurs façon de sélectionner un élément :
Détaillons ça rapidement :
.getElementsByClassName('para') = Sélectionne un élément par une classe (<p class="para"></ p>)
.getElementsByName('para') = Sélectionne un élément par son nom (<p name="para"></ p>)
Le reste n'est pas souvent utilisé surtout quand on débute. Il y a aussi moyen de sélectionner notre balise <p></ p> directement via la balise avec un querySelector :
.querySelector('p')
Et on peut choisir de sélectionner toutes les balises du même nom avec .querySelectorAll('p') (moins utilisé).
JavaScript reste un langage de programmation, on peut donc créer des conditions, des boucles etc .. Essayons avec une condition :
— Condition remplie —
<body>
<p id="para"></ p>
<script>
if(document.getElementById("para")){
alert("La condition existe");
}
</ script>
</ body>
—
— Condition non remplie —
<body>
<!-- <p id="para"></ p> -->
<script>
if(document.getElementById("para")){
alert("La condition existe");
}
</ script>
</ body>
—
On peut voir que notre script se lance seulement si notre <p></ p> est présent.
2# les variables et les évènements
Maintenant, que l'on a vu un peu comment fonctionne JavaScript, on peut constater qu'il s'agit d'un langage à part entière. Il contient donc des variables pour stocker différents éléments :
<p id="para"></ p>
<script>
let text = "Bonjour";
document.getElementById('para').innerHTML = text;
</ script>
Pour définir une variable il faut donc mettre “let”, “var” ou “const” juste avant. Voyons la différence entre les trois :
var = Les déclarations var ont une portée globale ou une portée fonction/locale. La portée est globale lorsqu'une variable var est déclarée en dehors d'une fonction. Cela signifie que toute variable déclarée avec var en dehors d'un bloc fonctionnel peut être utilisée dans toute la fenêtre. var est limité à une fonction lorsqu'il est déclaré dans une fonction. Cela signifie qu'il est disponible et accessible uniquement dans cette fonction.
let = let est désormais préféré pour la déclaration de variables. Ce n'est pas une surprise car il s'agit d'une amélioration des déclarations var. Let est hors de portée, il ne sera disponible que dans le block ou il a été déclaré.
const = Les variables déclarées avec const conservent des valeurs constantes. Les déclarations const partagent certaines similitudes avec les déclarations let. Comme les déclarations let, les déclarations const ne sont accessibles que dans le bloc dans lequel elles ont été déclarées.
Regardons quelques exemples :
<script>
function bonjour(){
let hello = "hello";
return hello;
}
console.log(hello)
</ script>
Dans notre fonction “bonjour” on a déclaré la variable "hello" qui a pour valeur “hello”. console.log sert à afficher des valeurs dans la console de votre navigateur (en faisant clique droit > inspecter) :
On peut bien voir que notre variable “hello” n'existe pas car elle est dans notre fonction. Pour afficher le résultat de notre variable, il faut appeler la fonction :
<script>
function bonjour(){
let hello = "hello";
return hello;
}
console.log(bonjour())
</ script>
NB : Pensez à utiliser console.log régulièrement pour afficher vos différentes erreurs pendant votre développement
Passons aux événements, JavaScript permet d'interagir avec notre contenu web sans devoir rafraîchir la page, on pourrait donc afficher un texte ou une alerte lors d'un clique sur un bouton par exemple.
Pour ça, il existe plusieurs façon de procéder :
1/ événement par la souris :
| Evenement | Se produit quand |
|---|---|
| onclick | L'utilisateur clique sur un élément |
| oncontextmenu | L'utilisateur fait un clic droit sur un élément |
| ondblclick | L'utilisateur double-clique sur un élément |
| onmousedown | Un bouton de la souris est enfoncé sur un élément |
| onmouseenter | Le pointeur est déplacé sur un élément |
| onmouseleave | Le pointeur est déplacé hors d'un élément |
| onmousemove | Le pointeur se déplace sur un élément |
| onmouseout | Le pointeur de la souris sort d'un élément |
| onmouseover | Le pointeur de la souris est déplacé sur un élément |
| onmouseup | Le bouton de la souris est relâché sur un élément |
2/ onChange()
3/ addEventListener()
Quand on fera une action avec la souris, on pourra lancer un événement, regardons ça :
<p id="para">Bonjour</p>
<button type="button" onclick="color()">Changer la couleur</ button>
<script>
function color(){
document.getElementById('para').style.color = "red";
}
</ script>
Le script ci-dessus, change la couleur de notre texte “Bonjour” en rouge quand on clique sur le bouton “Changer la couleur”.
Regardons désormais le onChange() :
<input type="text" id="para" onchange="texte()"/>
<p id="texte"></ p>
<script>
function texte(){
let texte = document.getElementById('para').value;
document.getElementById('texte').innerHTML = texte;
}
</ script>
On a dans notre exemple, un input de type texte, quand on rentre quelque chose dedans et que l'on sort de l'input, le texte s'affiche également en dessous dans notre balise <p></ p>.
Passons au dernier qui est le plus complet le “addEventListener()”. En effet, cette fonction se fait directement dans notre script JavaScript et directement sur l'élément qui doit créer un événement :
<input type="text" id="para"/>
<p id="texte"></ p>
<script>
document.getElementById('para').addEventListener('keyup', ()=>{
texte();
})
function texte(){
let texte = document.getElementById('para').value;
document.getElementById('texte').innerHTML = texte;
}
</ script>
Ce script rend dynamique notre input texte, quand on relâche une touche de notre clavier (avec keyup), ça lance notre fonction “texte()” ce qui ajoute notre texte dans notre balise <p></ p>. Petite information supplémentaire, la fonction fléchée ()=>{} reviens à faire function(){} (pour plus d'information aller ici : https://developer.mozilla.org/fr/ ).
Cette formation est terminée, je pense que vous avez suffisamment pour commencer à compléter vos projets HTML.
J'espère que vous avez appris des choses !
Mots clés:
js intro
Cours Du Dev
Recevez les dernières formations disponibles en vous inscrivant à la newsletter
Créé par arkunis