Les bases du Javascript.
Javascript c'est quoi ?
JavaScript est un langage de programmation qui permet d’implémenter des mécanismes complexes sur une page web.
À chaque fois qu’une page web fait plus que simplement afficher du contenu statique — afficher du contenu mis à jour à des temps déterminés, des cartes interactives, des animations 2D/3D, des menus vidéo défilants, ou autre, JavaScript a de bonnes chances d’être impliqué.
C’est la troisième couche des technologies standards du web, les deux premières (HTML et CSS).
Javascript ça sert à quoi ?
Le langage Javascript permet entre autre, de proposer de l’interaction sur un projet web et ainsi, de le rendre dynamique et interactif.
On peut ainsi afficher des informations telles que la date du jour, le navigateur de l’utilisateur, le temps de connexion, …
On peut également déclancher une action lorsqu’un utilisateur effectue une action (clique sur un bouton, scroll sur une page, tape sur une touche du clavier, …).
Comment ça fonctionne ?
Le code Javascript s’exécute dans une page HTML et par conséquent dans un navigateur web.
Comment créer et appeler un script en JS ?
La balise <script> permet d’appeler du code JAVASCRIPT dans un projet HTML. Un fichier contenant du code Javascript à pour extension .js.
Pour créer un fichier Javascript, il suffit de créer un nouveau document et de le renommer avec un nom suivi de l’extension .js
Les bonnes pratiques veulent que le fichier principal Javascript se nomme main.js et se trouve dans un dossier nommé script.
Exemple d’arborescence de base :
mywebsite > script > main.js
L’appel d’un script se fait après le chargement du code d’une page HTML, et se place juste avant la fermeture de la balise </body>.
Si le code HTML n’est pas chargé au préalable, le JS ne pourra bien évidemment pas interagir avec ce dernier.
Pour appeler le fichier Javascript créé, il suffit d’utiliser la balise <script>, comme indiqué ci-dessous.
Exemple d’appel d’un fichier Javascript qui se trouve dans le dossier “script” et qui se nomme “main.js” :
<html lang=”fr”> <body> <h1> Appel d’un fichier JS </h1> <script type=”text-javascript” src=”script/main.js”></script> </body> </html>
Les variables en JS.
Une variable ?
Une variable est un objet dans lequel on va stocker une valeur, une information, un texte, un nombre, etc…
Une variable est un objet repéré par son nom, pouvant contenir des données, qui pourront être modifiées lors de l’exécution du programme.
Un nom de variable peut comporter des lettres, des chiffres et les caractères _ et & (les espaces ne sont pas autorisés).
Identifiant d'une variable.
Les variables sont utilisées comme des noms symboliques, stockant les valeurs et les informations à utiliser dans l’application.
Les noms des variables sont appelés identifiants. Ces identifiants doivent respecter certaines règles.
Un identifiant JavaScript doit commencer par une lettre, un tiret bas (_) ou un symbole dollar ($). Les caractères qui suivent peuvent être des chiffres (0 à 9). À noter : puisque Javascript est sensible aux majuscules et minuscules: les lettres peuvent comprendre les caractères de « A » à « Z » (en majuscule) mais aussi les caractères de « a » à « z » (en minuscule).
Pour créer une variable comportant une valeur numérique, on peut par exemple éditer la ligne de code suivant :
let x = 100;
On crée ici une variable que l’on nomme avec l’identifiant « x » et on stocke dedans la valeur « 100 ». On termine notre ligne de code par un ;
Pour créer une variable comportant un texte, on peut par exemple éditer la ligne de code suivante :
let monTexte = "Bonjour tout le monde";
On crée ici une variable que l’on nomme avec l’identifiant « monTexte » et on stock dedans la phrase ‘Bonjour tout le monde ». Notez que pour stocker du texte dans une variable, on entoure ce dernier par des guillemets. On termine notre ligne de code par un ;
Pour créer une variable contenant du code HTML, on peut par exemple éditer la ligne de code suivante :
let codeHtml = “<h1>Ceci est un titre en HTML </h1>”;
On crée ici une variable que l’on nomme « codeHtml » et on stock le code Html d’un titre H1. On termine notre ligne de code par un ;
Déclaration de variable.
Il existe trois types de déclarations de variable en JS :
var (obsolète)
La variable var, a une portée globale et peut être utilisée dans une fonction mais aussi en dehors.
var x = 5000;
let
La variable let, a une portée limitée à sa fonction et ne peut pas être utilisée en dehors de cette dernière.
let x = 5000;
const
On déclare une constante nommée, dont la portée est celle du bloc courant, accessible en lecture seule.
const x = 5000;
Les sélecteurs.
Un sélecteur en Javascript permet de sélectionner un ou plusieurs éléments par un Id, une classe ou encore un attribut….
En ciblant un sélecteur, on peut grace à JS, modifier son contenu ou encore son apparence.
Les différents sélecteurs.
getElementById(), permet de sélectionner un élément HTML par un ID
getElementsByName(), permet de sélectionner des éléments HTML par une valeur name
getElementsByTagName(), permet de sélectionner des éléments HTML par un tag (div, p, span, ….)
getElementsByClassName(), permet de sélectionner des éléments HTML par une classe
Comment cibler un élément grâce aux sélecteurs.
Pour cibler un élément par son ID :
document.getElementById(‘nomid’);
Pour cibler un ou plusieurs éléments par un name :
document.getElementsByName(‘nomduname’);
Pour cibler un ou plusieurs éléments par un tag :
document.getElementsByTagName(‘nom du tag’);
Pour cibler un ou plusieurs éléments par une classe :
document.getElementsByClassName(‘nom de la classe’);