11484 sujets

JavaScript, DOM et API Web HTML5

$(document).ready(function() avec JQuery

Bonjour,

j'ai lu un texte (en anglais, c'est pire), ce texte me disais qu'une page ne pouvait être manipulée tant que le document n'est pas prêt. Et JQuery vérifie ça pour moi. Et le code contenu dans ce 

$(document).ready(function()

ne fonctionnera que quand le DOM (je maitrise mal ce que ça représente) est prêt pour que le code Javascript s'exécute.
Pourriez vous, s'il vous plait me donner un exemple, parce que moi je n'arrive pas à faire la différence avec une forme élaborée de traçage.
Merci à vous
Modérateur
Bonjour,

Le DOM (définition wikipédia) en gros c'est le code html.
En gros quand tu as du Js qui influe sur les balise html il faut etre sur que tes balise existent. Parfois le Js se charge trop rapidement et le site n'est pas encore affiché quand le Js tente d’accéder à un élément du html (avec un getElementById() par exemple).

Du coup on utilise des fonction pour n’exécuter le Js que quand on est sur que le DOM est prêt à être manipulé par le Js.

On peut utiliser JQuery pour faire ça effectivement :
$( document ).ready(function() {
    console.log( "ready!" );
});

https://learn.jquery.com/using-jquery-core/document-ready/

ou bien le faire en Js normal si on utilise pas JQuery :
window.addEventListener('DOMContentLoaded', function() {
    console.log( "ready!" );
});


Il suffit juste de mettre son code Js dans ces fonctions.
Merci, c'est beaucoup plus clair, juste une dernière question à te poser
dans le bout de code qui suit, je demande un affichage si le document n'est pas prêt
et pourtant il ne s'affiche pas :


<html>
<head>
    <script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script>
    $( document ).ready(function() {
        console.log( "document loaded" );
    });
    if!($( document ).ready(function()) {
        console.log( "document unloaded" );
    });
 
    $( window ).on( "load", function() {
        console.log( "window loaded" );
    });
    </script>
</head>
<body>
    <iframe src="http://techcrunch.com"></iframe>
</body>
</html>

J'ai tout de même une question, est-ce que le programme revient estimer si le DOM est prêt
pour afficher "document loaded" ou pas ?
Merci à nouveau
Modifié par desperatis (17 Jul 2017 - 18:35)
Modérateur
Alors déjà il y a une erreur de syntaxe dans l'utilisation du if. On écrit :
if (contdition) {
   // code
}

et donc
if (!true) {
   // code
}

Il y a donc un problème de placement du point d'exclamation mais aussi de la parenthèse fermante.
if!( $(document).ready(function()) { // journée portes ouvertes
    console.log( "document unloaded" );
}); // on ne ferme pas la condition du if après le code à exécuter sinon je le met ou mon else ?!


Ensuite la fonction ne s'utilise pas trop comme ça... il n'y a pas trop d’intérêt à faire ça quoi. Pourquoi cherche tu a savoir si le DOM n'est pas encore chargé ? La fonction sert surtout a n’exécuter du Js que quand tout est prêt...
Modifié par _laurent (18 Jul 2017 - 08:54)
Modérateur
y'a pas de soucis. c'est juste que ca peut etre une raison de plus pour laquelle cela ne fonctionne pas Smiley smile
Sujet clos
Aller à