Dynamisez mes pages avec Javascript

Introduction

Le Javascript est un langage de programmation extrêmement puissant pour dynamiser des pages Web. En utilisant les bonnes techniques, vous pouvez ajouter des fonctionnalités à votre site web et le rendre plus interactif que jamais. Dans ce blog, nous explorerons certains des principaux avantages de l'utilisation de Javascript pour le dynamisme des pages Web.

Initiation

Afin d’executer du code JavaScript, vous ne devez disposer que d’un navigateur web.

Créons un fichier JavaScript que nous appellerons “app.js”.

Il faudra l’inclure avant la fermeture de la balise “body” de votre document HTML :

...
	<script src="app.js"></script>
</body>
...

Bases de JavaScript

Afin de tirer le meilleur parti des fonctionnalités Javascript, il est important de comprendre les bases du langage. Avec un peu de pratique, vous serez bientôt à l'aise avec les principaux éléments de JavaScript. Nous allons examiner les principaux types de données JavaScript, les opérateurs, les fonctions et les structures de contrôle.

var, let et const

Les variables sont des espaces mémoire qui peuvent contenir des valeurs de n'importe quel type de données. JavaScript fournit trois types de variables: var, let et const. Les variables var sont des variables globales qui peuvent être modifiées et réutilisées dans tous les contextes. Les variables let sont des variables locales qui ne peuvent être modifiées que dans le contexte actuel. Les variables const sont des variables qui ne peuvent pas être modifiées une fois initialisées.

Type de données

Les principaux types de données en JavaScript sont les chaînes de caractères, les nombres, les booléens, les objets et les tableaux. Une chaîne de caractères est une suite de caractères entre guillemets, tandis qu'un nombre est un nombre entier ou réel. Les booléens sont des valeurs qui peuvent être soit vraies soit fausses. Les objets sont des collections de propriétés qui peuvent contenir des valeurs de n'importe quel type de données, tandis que les tableaux sont des collections d'éléments qui peuvent contenir des valeurs de n'importe quel type de données.

// chaine de charactères
const string = "Ceci est une chaîne de charactères";
// un nombre
const number = 1;
// un booléen
const statement = false;
// un objet
const object = {
	id: 1
	name: "Webeit",
}
// un tableau
const array = [{id: 1, name: "Webeit"}, {id: 2, name: "Digital"}]

Les opérateurs

Les opérateurs sont des instructions qui sont utilisées pour effectuer des opérations sur des données. Les principaux opérateurs en JavaScript sont l'addition, la soustraction, la multiplication, la division, le modulo et le comparaison. Par exemple, l'opérateur de comparaison « == » vérifie si deux valeurs sont égales. Il existe également des opérateurs plus complexes comme « && » et « || » qui sont utilisés pour la comparaison conditionnelle.

1 > 2                // false
550 >= 550           // true
3 === 3              // true
6 === '6'            // false

true && true;        // true
1 > 2 && 6 > 3;      // false
4 === 4 && 2 > 1;    // true

true || false;       // true
12 > 5 || 10 > 50;   // true
false || false;      // false

Fonctions

Les fonctions sont des blocs de code qui sont utilisés pour effectuer une tâche spécifique. Les fonctions en JavaScript peuvent prendre des arguments et retourner une valeur. Les fonctions sont très utiles car elles peuvent être réutilisées et rendent le code plus lisible et plus facile à maintenir.

// Définition  d'une fonction
function maFonction(arg1, arg2) {
  // Instructions à exécuter
  return result;
}

// Appel de la fonction
let result = maFonction(arg1, arg2);

Structures de contrôle

Les structures de contrôle sont des instructions qui sont utilisées pour exécuter des instructions sous certaines conditions. Les principales structures de contrôle en JavaScript sont les if/else, switch et while. Les structures if/else sont utilisées pour exécuter des instructions uniquement si une condition est remplie. Les switches sont utilisés pour exécuter différentes instructions en fonction d'une valeur. Les boucles while sont utilisées pour exécuter des instructions plusieurs fois jusqu'à ce que la condition soit remplie.

// if/else
if (condition) {
  // Instructions à exécuter si la condition est vraie
} else {
  // Instructions à exécuter si la condition est fausse
}

// Switch
switch (value) {
  case 0:
    // Instructions à exécuter si la valeur est 0
    break;
  case 1:
    // Instructions à exécuter si la valeur est 1
    break;
  case 2:
    // Instructions à exécuter si la valeur est 2
    break;
  default:
    // Instructions à exécuter si aucune des valeurs n'est trouvée
}

// Boucle while
while (condition) {
  // Instructions à exécuter tant que la condition est vraie
}

Manipulation du DOM

Le DOM (Document Object Model) est une interface de programmation qui permet aux développeurs d'accéder et de modifier le contenu et la structure d'un document HTML. En utilisant le DOM, les développeurs peuvent créer des applications et des sites Web plus dynamiques et interactifs. Avec le DOM, vous pouvez ajouter, modifier et supprimer des éléments HTML, ainsi que manipuler et modifier le style des éléments. Nous allons explorer certains des principaux concepts et outils utilisés pour manipuler le DOM en JavaScript.

Sélectionner un élément

Pour sélectionner un élément, nous pouvons utiliser les méthodes getElementById, getElementsByClassName, getElementsByTagName et querySelector. Ces méthodes nous permettent de sélectionner un élément ou une liste d'éléments en fonction de leur identifiant, du nom de leur classe, du type de balise ou d'une sélection CSS.

Pour l’exemple nous allons utiliser le footer que nous avions réalisé lors de tutoriels précédents :

<footer class="container flex row gap-half">
  <p>© </p><p class="year">2022</p><p>WeBeit</p>
</footer>

Nous allons donc sélectionner l’élément et l’afficher sur notre console :

// Selectionner notre élément HTML grâce à sa classe "year"
const year = document.querySelector('.year');
// Afficher l'élément dans la console
console.log(year);

Affichage de l’élément dans la console

Insérer l’année actuelle

Maintenant que nous avons sélectionné notre élément, nous allons maintenant ajouter l’année actuelle à notre site web. Nous allons utiliser la méthode getFullYear() de l'objet Date pour obtenir l'année actuelle et l'afficher dans notre élément HTML.

// Selectionner notre élément HTML
const year = document.querySelector('.year');

// Obtenir l'année actuelle
const currentYear = new Date().getFullYear();

// Afficher l'année actuelle dans notre élément HTML
year.textContent = currentYear;

Conclusion

Ainsi, nous avons exploré les principaux avantages de l'utilisation de JavaScript pour le dynamisme des pages Web. Nous avons vu comment sélectionner un élément HTML à l'aide de différentes méthodes et comment ajouter l'année actuelle à notre site web. Enfin, nous avons examiné les bases du JavaScript, notamment les variables, les types de données, les opérateurs, les fonctions et les structures de contrôle. Apprendre à utiliser JavaScript est un excellent moyen de rajouter de l’interactivité à votre site web.