Développement web

Cours 09

JavaScript

Intro

À quoi sert JavaScript

  • Modifier la page (le DOM)
  • Créer des intéractions impossible en CSS
  • Empêcher l'utilisateur d'accomplir certaines actions
  • Animer des éléments
  • Envoyer des données analytics
  • Charger des données extérieurs et les ajouter dans la page
  • Intéragir avec les API du navigateur telles que audio, video, geolocalisation, canvas, websocket, WebGL...
  • Créer des jeux
  • Faire fonctioner un serveur
  • Créer des application "natives"
Java is to JavaScript what car is to carpet

Ajouter du JavaScript

Le JavaScript s'ajoute en HTML avec la balise script

Il n'est aujourd'hui plus nécessaire de préciser l'attribut type, mais ça donne plus de clarté


<script type="text/javascript"></script>

Ce code peut être placé dans l'entête, mais il est conseillé de le placer en bas de page juste avant la fermeture du body

De cette manière, nous sommes certain que le DOM est chargé et le chargement du script n'a pas bloqué le chargement du reste


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <h1>Mon super site</h1>

    <script></script>
</body>
</html>

La balise script peut contenir du JS


<script>
    alert('coucou');
</script>

Elle peut aussi charger un fichier .js externe

L'attribut src peut-être absolu ou relatif


<!-- Absolu -->
<script src="http://monsite.com/src/js/script.js"></script>

<!-- Relatif -->
<script src="src/js/script.js"></script>

Il est aussi possible d'avoir plusieurs script dans la même page


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mon super site</title>
    <script src="http://analytics.com/tracking.js"></script>
</head>
<body>
    <h1>Mon super site</h1>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam magnam, dolores eius est quasi, doloremque molestiae voluptates laborum ullam enim iste minus tempora reprehenderit dolorem aperiam sint officia praesentium ea.</p>
    <script src="http://autresite.com/libraries/library.js"></script>
    <script src="src/js/script.js"></script>
</body>
</html>

C'est l'occasion de charger des fichiers differents selon la page, mais aussi pour charger des librairies

Nous pouvons maintenant écrire du JavaScript