TP3B - JavaScript Positionnement

Différentes méthodes d'intégration

Objectif :

Comprendre les différentes méthodes pour intégrer du JavaScript dans une page HTML.

1. JavaScript interne (dans head)

Ce script s'exécute au chargement de la page :

2. JavaScript interne (à la fin de body)

Ce script s'exécute après le chargement du DOM :

3. JavaScript externe avec defer

Script externe chargé avec l'attribut defer :

4. JavaScript externe avec async

Script externe chargé avec l'attribut async :

HTML

<!-- Méthode 1 : Dans head -->
<head>
    <script>
        // Code JavaScript exécuté tôt
        document.addEventListener('DOMContentLoaded', function() {
            console.log('Script dans head');
        });
    </script>
</head>

<!-- Méthode 2 : À la fin de body -->
<body>
    <div id="contenu"></div>
    
    <script>
        // Code JavaScript exécuté après le DOM
        document.getElementById('contenu').textContent = 'Contenu modifié';
    </script>
</body>

<!-- Méthode 3 : Fichier externe avec defer -->
<script src="script.js" defer></script>

<!-- Méthode 4 : Fichier externe avec async -->
<script src="script.js" async></script>

tp3.js

// tp3.js - Script JavaScript externe

// Modification du titre de la page
document.title = 'TP3B - JavaScript Positionnement';

// Modification des titres
const h1 = document.getElementsByTagName('h1')[0];
if (h1) {
    h1.innerHTML = 'TP3B - Différentes méthodes d\'intégration JavaScript';
}

// Affichage du résultat pour defer
const resultatDefer = document.getElementById('resultatDefer');
if (resultatDefer) {
    resultatDefer.innerHTML = `
        
            ✅ Script externe avec defer exécuté
            Ce script a été chargé avec l'attribut defer.
            Il s'exécute après le parsing du DOM.
        
    `;
}

// Fonction pour le bouton async
function executerAsync() {
    const resultatAsync = document.getElementById('resultatAsync');
    if (resultatAsync) {
        resultatAsync.innerHTML = `
            
                ⚡ Script async exécuté
                Date d'exécution: ${new Date().toLocaleTimeString()}
                Les scripts async s'exécutent dès qu'ils sont chargés.
            
        `;
    }
}

Comparaison des méthodes :

Méthode	Description	Avantages	Inconvénients
Dans <head>	Script exécuté tôt	Disponible rapidement	Peut bloquer le rendu
Fin de <body>	Script exécuté après DOM	Pas de blocage	Attente du chargement complet
defer	Exécuté après parsing	Ordre préservé, pas de blocage	Attente du parsing
async	Exécuté dès chargement	Très rapide	Ordre non garanti

TP Suivant → Retour à l'accueil