Comment connecter des scripts js au HTML. Connexion d'un fichier JavaScript externe

Et aujourd'hui, nous allons commencer une nouvelle section consacrée à l'utilisation des scripts en HTML. La section comprend une seule leçon vidéo dans laquelle nous nous familiariserons avec les scripts, apprendrons ce qu'est un script, comment utiliser les scripts, comment connecter un script au HTML, etc. Quant aux balises que nous utiliserons. Il y en aura deux, c'est tag et tag.

De plus, dans ce didacticiel vidéo, nous récapitulerons la conversation sur les cartes d'images. Nous en avons parlé assez longtemps, mais j'ai transféré la conception visuelle des objets images dans la section scripts afin qu'il n'y ait pas de confusion ou de malentendu dans nos têtes. Alors voilà. Aujourd'hui, nous clôturerons complètement la question de l'ajout de cartes d'images interactives à un document HTML et inclurons des scripts qui aideront à mettre en évidence les objets dans l'image.

Qu'est-ce qu'un scénario ?

Je ne décrirai aucun concept technique et intelligent. Nous savons tous depuis longtemps ce qu'est le HTML et qu'il est nécessaire pour créer un cadre de site Web. Mais en plus du cadre, pour créer un site internet, il faut le configurer et le concevoir de manière appropriée. CSS peut nous aider avec cela. Et des scripts sont nécessaires pour étendre les fonctionnalités des sites. De manière générale, pour ajouter de la dynamique à notre site.

Les scripts dont nous parlerons sont spécifiques au site Web et utilisent des langages comme JavaScript et JQuery. J'ai noté cela car la notion de scripts est assez large et est utilisée dans différentes directions, dans notre cas il s'agit de sites web.

Scripts en HTML.

Dans notre cas, nous utiliserons deux balises HTML qui nous aideront à connecter les scripts.

Une balise HTML est destinée à connecter un script à une page HTML. Dans le même temps, nous pouvons utiliser différentes méthodes de connexion, puisque le code du script peut être soit dans un fichier séparé, qui peut se trouver quelque part sur un serveur tiers ou sur notre serveur, soit intégré directement dans le code HTML du document. .

La balise HTML est destinée à informer le visiteur de la page que la prise en charge des scripts est désactivée dans son navigateur ou n'existe pas du tout. Cela signifie qu'il ne pourra pas utiliser toutes les fonctionnalités de la page sur laquelle il se trouve.

Connexion du script. Comment insérer un script en HTML ? (Toutes les options de connexion)

Commençons par la balise et voyons comment l'utiliser en HTML. Après tout, pour rendre la page plus dynamique, nous devons pouvoir connecter ou implémenter des scripts en HTML. Comme je l'ai mentionné juste au-dessus, nous disposons de plusieurs options pour connecter des scripts en HTML.

Connexion d'un script depuis un autre serveur.

Lorsque nous utilisons des scripts, nous n'avons pas toujours besoin de les écrire nous-mêmes ou de télécharger des fichiers et de les placer sur notre serveur pour la connexion. Le fichier contenant le script de script peut également se trouver sur un serveur tiers, par exemple Google.

Dans cet exemple, nous inclurons le support de jQuery dans notre document. Le fichier avec les scripts se trouve sur le serveur Google et pour le connecter il suffit d'indiquer l'adresse correcte de l'emplacement du fichier. Il convient également de noter ici que lors de l'utilisation d'une balise, nous devons utiliser l'attribut de type HTML, qui aidera à indiquer au navigateur Web à quel type de document appartient le fichier inclus.

Alors, pour vous connecter, rendez-vous sur la page des développeurs Google. Pour faciliter votre recherche, voici le lien : https://developers.google.com/speed/libraries/devguide#jquery. Ensuite, nous copions simplement le code quelque chose comme ceci dans notre document HTML :

La version de la bibliothèque peut varier.

Une fois le code copié, on le colle dans le document HTML avant la balise fermante. Après quoi nous pouvons vérifier si la bibliothèque est connectée ou non. Regardez le didacticiel vidéo pour voir comment procéder.

C'est peut-être le moyen le plus simple, car ici, à part copier et coller le code terminé, vous n'avez rien d'autre à faire. La seule chose à ajouter est qu'il faut spécifier l'attribut type avec une valeur. Autrement dit, le code final ressemblera à ceci :

Connexion du script depuis notre serveur.

Cette méthode de connexion est similaire à la première, uniquement lors de la connexion d'un script depuis notre serveur, c'est-à-dire que le fichier avec les scripts doit être situé sur l'hébergement que le site lui-même utilise, nous devons spécifier le chemin correct vers le fichier. De plus, pour une organisation plus pratique de l'orientation dans les fichiers du site, nous pouvons créer un dossier séparé pour les scripts et le nommer, par exemple, js. Ensuite dans ce dossier il faut mettre un fichier au format .js, qui contient les fonctionnalités nécessaires à la connexion. Et spécifiez le chemin d'accès à ce fichier dans le document HTML avant la balise head de fermeture.

Dans l'exemple que je vais donner ci-dessous, nous essaierons de connecter un script qui aidera à créer une mise en évidence pour les cartes d'images. En même temps, lors de la connexion du script, j'utilise le chemin relatif vers le fichier .

Vous pouvez télécharger le fichier de script lui-même sur la page de matériel supplémentaire pour le cours vidéo sur cette page.

Comment vérifier le fonctionnement du script est montré dans le clip vidéo.

Intégration d'un script de script dans un document HTML. Comment insérer un script en HTML ?

Cette dernière méthode n'envisage pas d'inclure des fichiers individuels, mais suggère d'intégrer le script directement dans le document HTML. Mais ici, il convient de noter que si le script n'est pas volumineux, nous pouvons facilement l'implémenter dans le document. S'il s'agit d'une fonctionnalité énorme ou d'une bibliothèque entière, vous devez utiliser l'une des méthodes répertoriées ci-dessus.

Supposons donc que nous ayons un certain script qui doit être implémenté. Dans notre cas, il s’agira de la mise en évidence d’objets cliquables. Vous pouvez trouver la fonction dans les documents supplémentaires dans le dossier js. Au même endroit où se trouve le fichier de script se trouve un fichier texte ordinaire dans lequel le code nécessaire est écrit. Vous pouvez également copier le code du script sur cette page :

$(function() ( $(".map").maphilight(); $("#squidheadlink").mouseover(function(e) ( $("#squidhead").mouseover(); )).mouseout( function(e) ( $("#squidhead").mouseout(); )).click(function(e) ( e.preventDefault(); ));

Après quoi, il doit être inséré entre les balises. Autrement dit, nous pouvons ajouter certaines fonctions individuelles directement au document HTML avant la balise :

Il convient également de noter ici que pour que la mise en évidence de la carte d'image fonctionne, vous devez ajouter tous les scripts proposés. C'est-à-dire la bibliothèque JQuery, connectez le fichier qui se trouve dans les documents supplémentaires et ajoutez la fonction au document HTML. Si au moins une des étapes n'est pas complétée, le rétroéclairage ne fonctionnera pas.

Balise HTML.

Quant au tag, tout est simple. Cette balise sera incluse dans l'œuvre si le navigateur Web de l'utilisateur ne prend pas en charge les scripts ou s'il est désactivé. Il s'agit d'une balise appariée. Entre les balises d'ouverture et de fermeture, il faut préciser les informations qui seront affichées à l'utilisateur si son navigateur ne supporte pas les scripts. Par exemple, comme ceci :

Votre script ne fonctionne pas...

Cette balise doit être incluse après la balise d'ouverture.

Leçon vidéo : Connecter des scripts en HTML. Activez le rétroéclairage de la zone cliquable.

Le répertoire HTML et d'autres documents peuvent et doivent être téléchargés !

Dans la prochaine vidéo, nous continuerons notre connaissance des scripts en HTML et commencerons à nous familiariser avec un autre concept, ce sont des objets en HTML, tels que des bannières vidéo, audio et flash. Tout d'abord, voyons comment insérer une vidéo dans HTML et familiarisons-nous avec les balises HTML et

Dernière mise à jour : 11/1/2015

Une autre façon de connecter du code JavaScript à une page Web consiste à placer le code dans des fichiers externes et à les connecter à l'aide d'une balise.

Ainsi, dans la dernière rubrique, nous avons créé une page html index.html, qui se trouve dans le répertoire de l'application. Créons maintenant un nouveau sous-répertoire dans ce répertoire. Appelons-le js. Il sera conçu pour stocker des fichiers avec du code javascript. Dans ce sous-répertoire, nous créerons un nouveau fichier texte, que nous appellerons myscript.js. Les fichiers avec du code javascript ont une extension .js. Autrement dit, nous aurons la structure suivante dans le dossier app :

Ouvrons le fichier monscript.js dans un éditeur de texte et définissez-y le code suivant :

Var date = nouvelle Date(); // récupère la date actuelle var time = date.getHours(); // récupère l'heure actuelle en heures if(time< 13) // сравниваем время с число 13 alert("Доброе утро!"); // если время меньше 13 else alert("Добрый вечер!"); // если время равно 13 и больше

Pour des raisons de compatibilité avec l'encodage de la page index.html, il est également conseillé de définir l'encodage en utf-8 pour le fichier javascript.

Il y a plus d'expressions javascript ici. La première expression obtient la date actuelle et l'affecte à la variable date. En utilisant la deuxième instruction, nous obtenons le temps en heures. Ensuite, nous comparons l'heure reçue avec le chiffre 13 et, en fonction des résultats du test, affichons le premier ou le deuxième message.

Connectons maintenant ce fichier à la page Web index.html :

JavaScript Premier programme JavaScript

Pour inclure un fichier avec du code javascript sur une page Web, la balise est également utilisée, qui a l'attribut src défini. Cet attribut pointe vers le chemin d'accès au fichier de script. Dans notre cas, un chemin relatif est utilisé. Puisque la page Web se trouve dans le même dossier que le répertoire js, nous pouvons écrire comme chemin js/monscript.js.

Vous devez également prendre en compte que la balise de script d'ouverture doit être suivie d'une balise de fermeture.

Et après avoir ouvert le fichier index.html, le navigateur affichera un message :

Contrairement à la définition de code javascript, le placer dans des fichiers externes présente de nombreux avantages :

Nous pouvons réutiliser le même code sur plusieurs pages Web

Le navigateur peut mettre en cache des fichiers javascript externes, de ce fait, la prochaine fois que le navigateur accède à la page, le navigateur réduit la charge sur le serveur et le navigateur doit télécharger moins d'informations.

Le code de la page web devient « plus propre ». Il contient uniquement du balisage HTML et le code de comportement est stocké dans des fichiers externes. En conséquence, vous pouvez séparer le travail de création du code de la page HTML de celui de l'écriture du code javascript.

Il est donc généralement préférable d’utiliser du code javascript dans des fichiers externes plutôt que de l’insérer directement dans une page web à l’aide d’un élément de script.

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 connecter JavaScript dans les pages Web que vous créez sous la forme d'un script dans un document HTML et un fichier séparé.

Ajout de JavaScript à 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 du document HTML, ou après celui-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

Actuellement, le fichier contient un balisage sans balise de script dans le 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 la date du jour quel que soit 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 d'une page principale index.html située à 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.

Peut-être êtes-vous impatient et souhaitez-vous plonger rapidement dans le monde de la programmation, commencer à écrire vos scripts et épater tout le monde avec votre magie. Mais sans des concepts fondamentaux sur la manière dont tout cela fonctionne, il sera difficile d’en saisir l’essence.

Oui, vous pouvez modifier du code, rechercher des erreurs, travailler avec des scripts tiers, mais écrire quelque chose de votre choix sera beaucoup plus difficile sans connaissances de base.

Par conséquent, mon objectif n'est pas seulement de vous montrer des exemples d'écriture de programmes, mais d'aller plus loin, de vous apprendre à penser comme un programmeur, ce qui vous donnera les possibilités illimitées qu'ouvrira JavaScript. Par conséquent, nous commençons la formation dès le début, avec des concepts simples, des désignations et une idée du fonctionnement de ce mécanisme dans son ensemble.

est un véritable langage de programmation. Il fonctionne différemment de HTM ou CSS et possède sa propre syntaxe. Pour quelqu’un qui commence tout juste à programmer, il peut être difficile de faire le changement et de commencer à penser comme un programmeur.

Chaque langage de programmation possède son propre ensemble de mots-clés, de symboles, ainsi qu'un ensemble unique de règles pour leur combinaison et leur syntaxe.

Au cours du processus d'apprentissage, vous ferez beaucoup d'erreurs, sauterez des signes de ponctuation, ce qui conduira à un programme qui ne fonctionne pas. Pendant les cours, nous apprendrons à initialiser les erreurs dans le navigateur, à nous familiariser avec les nouveaux symboles (), , ; , (), !, apprenez la désignation des nouveaux mots (var, null, else if), nous analyserons les règles de ponctuation et la syntaxe de la langue elle-même.

De plus, dans ces leçons, nous nous familiariserons non seulement avec jQuery, mais également avec jQuery - sa bibliothèque la plus populaire, qui vous aidera à créer des éléments de conception Web interactifs complexes.

Quel est le programme

Lorsque vous ajoutez du code JavaScript à une page Web, vous écrivez un programme informatique. Bien sûr, c'est plus simple que ceux avec lesquels il faut travailler, à travers lesquels on lit du courrier, traite des photographies, mais en principe ils sont tous similaires.

Le processus de programmation de base est divisé en plusieurs étapes : vous déterminez ce que vous voulez faire, puis vous divisez la tâche en étapes, dont chacune est nécessaire pour obtenir le résultat final.

Lors de la création d'un programme JavaScript, vous devez définir les étapes nécessaires pour atteindre l'objectif. Une fois que vous avez compris ce que vous souhaitez mettre en œuvre et divisé les étapes en étapes, vous êtes prêt à écrire le programme. En d’autres termes, vous transformez vos propres pensées en code de programme – des mots et des symboles qui obligent le navigateur à agir comme vous le souhaitez.

Ajouter du JavaScript à une page

Les navigateurs comprennent HTML et CSS et transforment ces langages en informations visuelles à l'écran. La fonctionnalité du navigateur qui comprend HTML et CSS est appelée moteur de navigateur. La plupart des navigateurs disposent d'un composant appelé interpréteur JavaScript. Il s'agit de la fonctionnalité avec laquelle il comprend le langage JS et est capable d'exécuter les étapes du code du programme écrit.

L'élément script est utilisé pour indiquer au navigateur lorsque JavaScript apparaît.

Une balise est une commande HTML qui agit comme un commutateur, indiquant au navigateur où commence JavaScript. Lorsque le navigateur atteint la fin de la balise de fermeture, il sait qu'il a atteint la fin du programme et peut reprendre ses fonctions normales.

Très souvent, vous pouvez voir l'ajout d'un élément de script à la partie principale d'une page Web - la section d'en-tête, comme suit :

Leçons JavaScript

Dans cet exemple, la balise de commentaire HTML d'ouverture se trouve juste avant la balise de fin de notre code de 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.