Dans cette séance, nous découvrirons l'univers de JavaScript et comment l'utiliser dans un site web.

- JavaScript est un langage de programmation principalement utilisé pour le développement web. Il permet d'ajouter des fonctionnalités interactives et dynamiques aux sites web.

- En front-end, JavaScript est utilisé pour manipuler le contenu et l'apparence d'un site web côté client. Il peut être utilisé pour ajouter des effets visuels, gérer les interactions utilisateur, valider les formulaires, charger des données dynamiquement, etc.

- En backend, JavaScript peut être utilisé pour créer des serveurs web en utilisant des frameworks tels que Node.js. Cela permet de développer des applications web complètes, de gérer les requêtes des clients, d'accéder à des bases de données, de gérer des sessions utilisateur, etc.

- Pour intégrer JavaScript dans un site web, vous avez plusieurs méthodes :

1. Inline (directement dans le code HTML) :

<button onclick="alert('Bonjour')">Cliquez sur moi</button>

Lorsque vous cliquez sur le bouton, une boîte de dialogue avec le message "Bonjour" s'affiche.

<a href="apropos.html" onclick="return confirm('Êtes-vous sûr!')">Confirmer</a>

Lorsque vous cliquez sur le lien "Confirmer", une boîte de dialogue apparaît avec le message "Êtes-vous sûr!". Si vous cliquez sur OK, vous serez redirigé vers l'URL spécifiée dans l'attribut href. Si vous cliquez sur Annuler, rien ne se passe.


2. Interne (dans une balise `<script>` dans le fichier HTML) :

<script>

//Code javascript...

</script>

3. Externe (en important un fichier JavaScript externe) :

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

- Voici quelques exemples d'utilisation basique de JavaScript dans un site web :

1. Afficher une alerte :

alert("Bonjour !");

2. Modifier le contenu d'un élément HTML :

document.getElementById("monElement").innerHTML = "Nouveau contenu";

3. Changer le style d'un élément HTML :

document.getElementById("monElement").style.backgroundColor = "red";

4. Afficher ou masquer un élément HTML :

function toggleElement() {

var element = document.getElementById("monElement");

if(element.style.display == "block") {

element.style.display = "none";

} else {

element.style.display = "block";

}

}

NB:La syntaxe des instructions conditionnelles if et else diffère entre Python et JavaScript.

Exemple en Python :

x = 10

if x > 5:

  print("x est supérieur à 5")

else:

  print("x est inférieur ou égal à 5")

Exemple en JavaScript :

var x = 10;

if (x > 5)

{

alert("x est supérieur à 5");

}

else

{

alert("x est inférieur ou égal à 5");

}

5. Obtenir la date et l'heure actuelles :

var date = new Date();

console.log(date);

6. Changer la source d'une image

<img id="myImage" src="image1.jpg" />

<button onclick="changeImage()">Changer l'image</button>



<script>

function changeImage() {

document.getElementById("myImage").src="image2.jpg";

}

</script>

- Les événements en JavaScript permettent de réagir à des actions de l'utilisateur ou à des changements sur la page. On peut par exemple détecter un clic sur un bouton, une soumission de formulaire, un survol de souris, etc.

Exemple:

1. Événement onclick (clic) :

<button onclick="myFunction()">Cliquez-moi</button>



<script>

function myFunction()

{

alert("Le bouton a été cliqué");

}

</script>

Lorsque le bouton est cliqué, la fonction `myFunction()` est appelée, et le message "Le bouton a été cliqué" est affiché.

2. Événement onmouseover (survol de la souris) :

<button onmouseover="myFunction()">Survolez-moi</button>



<script>

function myFunction()

{

alert("La souris survole la div");

}

</script>

Lorsque la souris survole le bouton, la fonction `myFunction()` est appelée, et le message "La souris survole le bouton" est affiché.

3. Événement onchange (changement de valeur) :

<input type="text" onchange="myFunction()">



<script>

function myFunction() {

var inputValue = event.target.value;

alert("La valeur a changé : " + inputValue);

}

</script>

Lorsque la valeur du champ de saisie change (par exemple, lorsque vous le modifiez et quittez le champ), la fonction `myFunction()` est appelée, et le message "La valeur a changé : [valeur saisie]" est affiché.

4. Événement onkeydown (appui sur une touche) :

<input type="text" onkeydown="myFunction(event)">



<script>

function myFunction(event) {

var key = event.key;

alert("Touche appuyée : " + key);

}

</script>

Lorsque vous appuyez sur une touche dans le champ de saisie, la fonction `myFunction()` est appelée, et le message "Touche appuyée : [touche]" est affiché.

5. Événement onload (chargement de la page) :

<script>

window.onload = function() {

alert("La page est chargée");

};

</script>

Lorsque la page est complètement chargée, la fonction anonyme associée à l'événement `onload` est exécutée, et le message "La page est chargée" est affiché dans.

Ce ne sont là que quelques exemples d'événements en JavaScript. Il existe de nombreux autres événements, tels que `onsubmit`, `onmouseout`, `onfocus`, `onscroll`, etc., qui peuvent être utilisés pour détecter et répondre à différentes interactions utilisateur.

- La manipulation du DOM (Document Object Model) en JavaScript permet de modifier la structure, le contenu et le style des éléments HTML d'une page. On peut accéder aux éléments, modifier leur contenu, ajouter ou supprimer des éléments, changer leur style, etc.

- Pour le débogage en JavaScript, on peut utiliser des outils de développement intégrés aux navigateurs web tels que l'inspecteur de Chrome ou l'outil de développement de Firefox. Ces outils permettent de mettre des points d'arrêt, d'inspecter les valeurs des variables, d'exécuter du code pas à pas, de surveiller les erreurs, etc.

- Pour réaliser des animations en JavaScript, on peut utiliser les fonctionnalités du DOM ou des bibliothèques externes telles que jQuery, owl carousel, slick slider, wow slider, aos etc...

- Pour aller plus loin avec JavaScript, vous pouvez explorer les concepts avancés tels que l'utilisation de bibliothèques/frameworks (comme React, Angular ou Vue.js), l'utilisation de bases de données, les API externes (comme l'API Fetch pour récupérer des données), Ajax, la manipulation d'images et de médias, etc. JavaScript est un langage polyvalent et peut être utilisé dans de nombreux domaines du développement web et de l'application.