Toujours dans un fichier JavaScript séparé du fichier HTML.
Ne vous laissez pas influencer par les exemples du forum ou d'autres qui placent le code JavaScript dans la page HTML uniquement pour des raisons de concision et de facilité. En production, conserver un fouillis CSS, HTML et JavaScript dans le même fichier est un non-sens du point de vue de la maintenance de votre code.
L'ordre d'incorporation de vos fichiers JavaScript dans la page HTML est d'une importance capitale.
Si vous travaillez comme il se doit en fractionnant votre code JavaScript en modules et composants, vous savez que tel module ou tel composant ne peut fonctionner si tel autre module ou tel autre composant n'est pas chargé le premier. Il en va de même dans le monde jQuery.
Exemples
Simpliste (niveau débutant).
Normal (niveau débutant expérimenté), on utilise un chargeur de code et on met les styles et les scripts dans des fichiers séparés. J'utilise head.js pour charger JS et CSS de manière asynchrone et parallèle, mais les fichiers sont exécutés dans l'ordre. Voir la documentation et l'API de head.js (https://headjs.com/). Les polices de caractères et le fichier head.js doivent être inclus manuellement.
Conforme aux recommendations (niveau expert). Cet exemple utilise le plugin "dynatree" et isole le code dans un objet JSON généré par une clôture jQuery.