Instructions

Joindre un script provenant d'une source externe au document, adressé à un URI connu. Utilisez un élément HTML avec une valeur d'attribut src spécifiée. Modifiez le document en ajoutant une construction comme celle-ci :

Ici, la valeur script_URI doit être un URI qui identifie la ressource à partir de laquelle les données du script seront chargées.
La valeur de l'attribut charset doit correspondre à l'encodage des caractères du script, s'il diffère de l'encodage des caractères du document. Le codage du document est déterminé en fonction du champ Content-Type de l'en-tête de réponse HTTP du serveur ou de la valeur de l'attribut de contenu d'un élément META avec l'attribut http-equiv défini sur Content-Type.
La connexion des scripts de cette manière se fait souvent dans l'en-tête du document (les éléments SCRIPT sont situés à l'intérieur de l'élément HEAD) et leur exécution immédiate n'est pas requise. Dans ce cas, il est logique d'utiliser l'attribut defer pour différer l'interprétation du texte du script.

Connectez le script en l'intégrant directement dans le document. Ajoutez un élément SCRIPT au balisage de votre document dont le contenu est du code JavaScript. Utilisez une construction comme :

// texte du code du script

// texte du code du script

// texte du code du script

Faites attention aux commentaires HTML entourant le code du script. Ils sont nécessaires pour garantir la compatibilité avec les anciens modèles de navigateurs.

Connectez le script en spécifiant "javascript:" comme URI du descripteur de protocole de l'ancre cible de l'élément A. Créez un lien dans le document avec une valeur d'attribut href de la forme :

javascript :

Ici, la valeur doit être écrite sous forme d'expression calculée dans le langage de script JavaScript. Dans ce cas, plusieurs phrases de la langue peuvent être combinées en une seule expression en utilisant supports d'opérateur, Par exemple:

texte

Ajoutez des scripts à votre document sous forme de code pour les gestionnaires d'événements d'éléments intégrés. Pour ce faire, définissez des gestionnaires intégrés pour les événements souhaités des éléments sélectionnés en ajoutant les attributs appropriés à ces éléments. Saisissez des extraits de code JavaScript comme valeurs d'attribut. Par exemple, ajoutez du code en tant que gestionnaire d'événements un seul clic passez la souris sur l'élément DIV, comme suit :

Contenu de l'élément

Une liste des événements d'élément qui doivent être pris en charge par les agents utilisateurs conformes peut être trouvée dans les sections Événements de la spécification. modèles d'objet documente les niveaux 2 et 3 (DOM2 et DOM3) sur le site Web du consortium W3C w3c.org.

02/07/17 6,4K

JavaScript est un langage de programmation utilisé dans le développement Web. Il est utilisé pour créer des pages Web interactives et des applications Web. Les navigateurs modernes prennent en charge JavaScript à l'aide de la balise de script HTML et ne nécessitent pas l'installation de plugins supplémentaires.

JavaScript doit être chargé et exécuté en même temps que le balisage. Cela peut être fait soit à l'intérieur du document HTML, soit dans un fichier séparé que le navigateur chargera en même temps que le HTML.

Dans cet article, nous expliquerons comment activer JavaScript dans pages Web créées sous la forme d'un script dans un document HTML et d'un fichier séparé.

Ajout de JavaScript vers un document HTML

Vous pouvez ajouter du code JavaScript à un document HTML à l'aide d'une balise spéciale. Il peut être placé dans une section d'un document HTML, ou après celle-ci. Selon le moment où JavaScript doit être chargé.

Généralement, le code JavaScript est placé à l'intérieur d'une section, le gardant en dehors du contenu principal du document HTML.

Mais si votre script doit être exécuté à un emplacement spécifique de la mise en page, il est alors placé dans .

Considérez le document HTML suivant avec l'en-tête Today's Date :

index.html

La date d'aujourd'hui

Sur ce moment le fichier contient un balisage sans balise de script en HTML. Supposons que nous souhaitions y ajouter le code JavaScript suivant :

soit d = new Date(); alert("La date d"aujourd"hui est " + d);

Ce code permettra à la page web d'afficher un message avec date actuelle peu importe le moment où l'utilisateur charge le site.

Commençons par ajouter le script entre les balises. Cela signalera au navigateur d'exécuter le script avant le chargement du reste du contenu de la page :

index.html

Date d'aujourd'hui let d = new Date(); alert("La date d'aujourd'hui est " + d);

Désormais, lorsque vous chargez une page avec un script HTML, vous verrez un message qui ressemble à ceci :

Vous pouvez expérimenter : insérez ce code à l’intérieur ou au contraire déplacez-le à l’extérieur de la balise et rechargez la page. Puisque le document HTML est assez simple, vous ne remarquerez aucune différence.

Pour apporter des modifications à la structure d'un document HTML, vous devez placer le code après la section. Maintenant, la date sera affichée sur la page :

index.html

Date d'aujourd'hui let d = new Date(); document.body.innerHTML = "La date d'aujourd'hui est " + d + ""

Lors du chargement du document HTML ci-dessus dans un navigateur, la page Web avec le corps du script HTML ressemblera à ceci :

Les petits scripts peuvent fonctionner correctement dans un fichier HTML. Mais pour les gros scripts, cette approche est inefficace. Leur mise en œuvre rend le balisage lourd et difficile à comprendre. Nous verrons ensuite comment inclure un fichier JavaScript distinct dans un document HTML. Travailler avec un fichier JavaScript séparé

Pour accueillir des scripts volumineux qui seront utilisés sur plusieurs pages Web, le code JavaScript est placé dans un ou plusieurs fichiers js. Ils sont connectés à un document HTML tout comme CSS.

Avantages de l'utilisation d'un fichier JavaScript distinct :

• Séparer le balisage HTML et le code JavaScript les rend plus faciles à comprendre ;
• Les fichiers individuels sont plus faciles à gérer ;
• Lorsque les fichiers JavaScript sont mis en cache, les pages se chargent plus rapidement.

Pour démontrer la connexion d'un fichier JavaScript à un document sans balise de script en HTML, créons un petit projet Web. Il sera composé d'un fichier script.js situé dans le répertoire js/, d'un fichier style.css situé dans le répertoire css/, et page d'accueil index.html situé à la racine du projet :

Vous pouvez commencer avec le modèle HTML de la section ci-dessus :

index.html

La date d'aujourd'hui

Déplaçons maintenant le code JavaScript qui affichera la date en en-tête dans le fichier script.js :

script.js

soit d = new Date(); document.body.innerHTML = "La date d'aujourd'hui est " + d + " "

La balise pointe vers un fichier script.js situé dans le répertoire js/ du projet web. Regardons cette ligne dans le contexte de notre fichier HTML, situé sous la section :

index.html

La date d'aujourd'hui

Modifions le fichier style.css en ajoutant une couleur d'arrière-plan et un style d'en-tête.

De l'auteur : Salutations, amis. Dans cet article, nous apprendrons comment transférer notre code JavaScript vers un fichier externe et connecter le script JavaScript. L'article s'adresse aux débutants débutant leur apprentissage du langage JavaScript.

Alors, commençons par la question : pourquoi avez-vous besoin de mettre du code JavaScript dans un fichier externe ? C'est simple. Imaginez que votre script occupe des dizaines ou des centaines de lignes de code. Ou même plus. Et bien sûr, nous aurons très probablement besoin de ce script sur chaque page de notre site. D'accord, ce serait complètement mauvais dans ce cas de dupliquer ces centaines de lignes de code dans chaque fichier. Et simplement la présence de code non HTML dans Document HTML Cela n’aura pas l’air très bien et pas très beau.

C'est pourquoi il est d'usage de mettre du code JavaScript dans fichier séparé, qui se connecte à la page. En fait, tout est pareil que dans le cas des fichiers de style. Comment connecter un script JavaScript au fichier principal ? Très simple. Pour ce faire, nous utilisons la balise déjà familière, à laquelle est ajouté l'attribut src, tout comme dans le cas des images. Eh bien, comme vous l'avez peut-être deviné, l'attribut src spécifie le chemin d'accès au script JavaScript à connecter.

Essayons de transférer notre programme, composé d'une seule ligne de code, vers un fichier externe et d'inclure ce fichier. Appelons ce fichier, par exemple, scripts.js :

JavaScript. Départ rapide

alert("Bonjour !");

Si nous actualisons maintenant la page, rien ne changera, notre script fonctionne et affiche toujours une fenêtre modale avec un message d'accueil.

JavaScript. Départ rapide

Explorer Bases de Javascript sur un exemple pratique de création d'une application web

À quoi devez-vous faire attention lors de la connexion de scripts ? Nous avons inclus le script à la fin du document, avant la balise body de fermeture. Auparavant, il était courant d'inclure des scripts au début du document, dans les balises head. Cependant, aujourd'hui, il n'est pas recommandé de le faire et il est recommandé d'inclure des scripts à la fin du document. Pourquoi donc?

Essayons de déplacer les connexions entre les balises head :

Que voit-on ? Rien sauf fenêtre modale. Il n'y a pas de contenu. C'est le but. Lorsqu'un script externe est inclus au début du document, le navigateur commence à le télécharger et tente de l'exécuter. Et jusqu'à ce que le chargement et l'exécution du script soient terminés, le navigateur n'affichera pas la partie du document suivant le fichier inclus.

Imaginez maintenant que, pour une raison quelconque, ce fichier se charge extrêmement lentement. En conséquence, l’utilisateur devra attendre, et parfois il ne pourra tout simplement pas attendre. C'est pourquoi il est recommandé d'inclure des scripts à la fin du document, avant la balise body de fermeture.

Mais que se passe-t-il si une certaine bibliothèque doit être incluse au début du document ? Comment être dans ce cas ? Dans ce cas, nous serons aidés par les attributs async et defer, qui permettent au navigateur de charger des scripts de manière asynchrone, c'est-à-dire le navigateur commencera à télécharger le script, mais n'arrêtera pas d'afficher le document. Essayons d'utiliser ces attributs un par un :

< ! -- вариант1 -- > < ! -- вариант2 -- >

Dans les deux cas nous obtiendrons le même résultat ; le script se connecte sans interrompre l'affichage du document :

Quelle est la différence entre les attributs async et defer ? L'attribut defer préserve la séquence de connexion scripts externes, c'est à dire. Le script connecté ci-dessus sera toujours exécuté en premier. Ceci est important lorsque nous connectons plusieurs scripts et que certains d’entre eux peuvent dépendre d’un autre. Dans ce cas, le script principal doit être connecté avant celui dépendant. L'attribut defer garantit que l'ordre est maintenu. L'attribut async garantira que le script est exécuté immédiatement après son chargement. Par conséquent, cette option n'est pas toujours adaptée, car le script dépendant peut se charger avant le script principal.

Ceci conclut l’article. Si vous souhaitez en savoir plus sur JavaScript, je vous recommande de porter votre attention sur le fichier . Bonne chance!

JavaScript. Départ rapide

Apprenez les bases de JavaScript avec un exemple pratique de création d'une application Web.

JavaScript est un langage de script qui s'exécute uniquement dans le navigateur de l'utilisateur, c'est-à-dire côté client. Pour appeler ce langage, les balises et sont écrites dans le code HTML.

Voici un exemple de programme simple qui affiche la phrase « Hello, World ! » dans la fenêtre du navigateur :

Exemple JavaScript document.write("Bonjour tout le monde !")

Dans ce script, la commande document.write("Hello, World!") a imprimé la phrase "Hello, World!" sur l'écran. Dans la commande document.write(""), vous pouvez écrire n'importe quel texte et balises entre guillemets. Les balises seront interprétées par le navigateur.

Nous parlerons davantage de cette commande plus tard, mais revenons maintenant au sujet de cet article : l'insertion d'un script JavaScript dans le code HTML.

En fait, l'entrée de balise développée et plus précise ressemble à ceci : . Dans l'attribut type, nous indiquons le type de langage dans lequel le script est écrit. Dans notre cas, il s'agit de JavaScript. En réalité, JavaScript n'a actuellement aucun concurrent notable, donc dans l'ensemble navigateurs modernes JavaScript sera utilisé par défaut.

Mais par souci d'authenticité, donnons un exemple d'utilisation étendue de la balise :

Exemple JavaScript document.write("Bonjour tout le monde !

Je suis content de te voir!")

Dans cet exemple, notez également la paire de balises et . Cette balise n'affichera du texte que si le navigateur de l'utilisateur a désactivé ou non JavaScript.

Le script peut être inséré non seulement dans la section, mais également dans la section.

Exemple JavaScript var i = "Hello World!" document.write(i) Votre navigateur ne prend pas en charge JavaScript ou la prise en charge est désactivée dans les paramètres.

Cet exemple nécessite quelques explications. Dans la section, nous avons utilisé la commande var pour créer une variable i et l'attribuer valeur du texte Bonjour le monde!. Ensuite, dans la section, nous avons utilisé la commande document.write(i) pour afficher la valeur de cette variable à l'écran. En savoir plus sur les variables dans l'article Variables JavaScript, vous avez alors appris que le code JavaScript peut être inséré dans les deux sections d'un document HTML : et .

La deuxième façon consiste à inclure le fichier

Dans l'article qu'est-ce que CSS une méthode pour joindre un fichier avec du code a été décrite Styles CSS dans un document appelé attacher. Vous pouvez également lier un document à un fichier contenant du code JavaScript. Pour cela, insérez une balise dans la section, comme dans l'exemple :

Exemple JavaScript

Comme vous pouvez le constater, vous pouvez joindre deux fichiers ou plus à un document avec Scripts JavaScript. Vous pouvez utiliser des fichiers script situés sur un domaine tiers, pour cela, vous devez préciser l'URL du fichier avec le script dans l'attribut src de la balise. Vous pouvez également ignorer l'attribut type si vous le souhaitez.

Les fichiers de code JavaScript doivent avoir une extension .js.

Il n'est pas nécessaire d'utiliser des balises dans le fichier .js contenant le code JavaScript. Cela entraînera une erreur.

Navigateurs obsolètes et non standards

Pour soutenir très navigateurs obsolètes qui ne comprennent pas le code JavaScript, vous devez le prendre dans les commentaires à l'aide de balises Commentaires HTML. Si vous ne le faites pas, le navigateur qui ne comprend pas le code JavaScript l'affichera à l'écran sous forme de texte brut. Mais il n’existe plus de tels navigateurs. Bien que vous puissiez rencontrer un tel code, pour le comprendre, examinons-le.

Exemple JavaScript

DANS dans cet exemple ouverture Balise HTML commentez immédiatement avant la balise qui termine le code de notre script.

La double barre oblique // est déjà un commentaire JavaScript, elle montre que toute la ligne qui la suit est un commentaire du point de vue JavaScript. En savoir plus sur les commentaires JavaScript ici.