A Simple HTML Page

EP33 – Importing JavaScript into HTML via Script tag

Up to this point we haven’t talked about the elephant in the room!

And that’s the fact that we’ve been talking about JavaScript for quite a while now, but we haven’t yet discussed how to actually USE JavaScript inside of an HTML page.

Well, no time is better than the present right? Let’s talk about JavaScript and HTML.

How to Link HTML and JavaScript Together

As I just mentioned, you’ve already seen many examples of JavaScript syntax, but we haven’t seen the link between an HTML page and the JavaScript code.

The link between them is pretty straight-forward, you just need to know that there are two ways to link your JavaScript code to your HTML pages:

1. Importing an external JavaScript file into your HTML page
2. Embedding JavaScript code directly onto your HTML page

Now that you know there are two ways to link your JavaScript to your HTML, let’s take a look at each approach.

Importing JavaScript into an HTML Page

If you happen to have some JavaScript code stored in a file (like we saw in the last article on debugging in JavaScript) then there’s a simple way to “import” this JavaScript code into your HTML page.

Let’s first assume that we have a basic HTML page like so:

     My HTML Page   

Secondly, let’s also assume that we have a JavaScript file that’s called “Debugging_Example.js” and we’d like to include it into our HTML page above. In this case, we’ve already seen this JavaScript file in the last article on debugging, and we know that it is stored in the following URL: https://www.coderscampus.com/wp-content/uploads/2015/07/Debugging_Example.js

Note: If you like, you can even click on it and see the contents of the JS file in a new tab

Okay, so now we know where our example JavaScript file exists, where do we go from here?

Well, in order to import this JavaScript file into our HTML file, we just need to use a tag with a src property that points to the file itself.

Here’s what that script tag would look like:

SUPER IMPORTANT NOTE: When using the script tag, it is mandatory that you use the closing tag just as it appears. Don’t try to use the “short-cut” approach like this My HTML Page

And voila! You've now successfully imported the “Debugging_Example.js” file into your simple HTML page.

Pretty simple to understand I hope.

Embedding JavaScript Code in Your HTML Page

There is also a second way to include JavaScript code in your HTML files, and that's by directly embedding the JS code itself.

This method is nearly identical to the one above, and thus the same rules from above apply here. You still need to use the proper closing tag when embedding JavaScript code.

The only difference when embedding JavaScript code is that you don’t specify a src property, as you’re not importing the code from an external file, so there’s no purpose to trying to specify the source of the code right?

Here’s what embedding our “debugging example” code would look like:

      My HTML Page   

Boom! You’ve just learned how to directly embed JavaScript code into your HTML pages.

When to Import and When to Embed

So you’re probably wondering when you should use either of the two options for including JavaScript code on your HTML pages.

And the answer is also pretty simple.

Generally speaking, it’s best to separate your JavaScript code from you HTML code.

This means that it’s usually a best practice to create separate JavaScript files (just like our “Debugging_Example.js” file) and import them rather than embed them.

When you embed a LOT of JavaScript code, it can get a little bit hard to follow along with the HTML file. So you should try to always favor importing over embedding.

In Summary

In order for your HTML files to make use of JavaScript code, you’ll need to include the JavaScript code IN your HTML files in one of two ways.

Either you import the code from an external JS file, or you embed the JavaScript code right into your HTML page.

Both approaches will get the job done, but you should try to favor importing your code from an external file, as it’s best to separate your HTML code from your JavaScript code for easy readability.

Oh! And don’t forget, we’re always offering SWEET stuff in the email signup form below. So if you haven’t already, be sure to check out what freebies we’re offering and sign up below.

Источник

Подключение JavaScript к HTML

Осваивайте профессию, начните зарабатывать, а платите через год!

Курсы Python Ак­ция! Бес­плат­но!

Станьте хакером на Python за 3 дня

Веб-вёрстка. CSS, HTML и JavaScript

Станьте веб-разработчиком с нуля

В этой главе мы займемся размещением сценариев в HTML-документе, чтобы иметь возможность использовать их для оперативной модификации HTML-документа. Для вставки JavaScript-кoдa в НТМL-страницу обычно используют элемент .

Первая программа

Чтобы ваша первая пpoгpaммa (или сценарий) JavaScript запустилась, ее нужно внедрить в НТМL-документ.
Сценарии внедряются в HTML-документ различными стандартными способами:

• поместить код непосредственно в атрибут события HTML-элемента;
• поместить код между открывающим и закрывающим тегами ;
• поместить все ваши скрипты во внешний файл (с расширением .js), а затем связать его с документом HTML.

JavaScript в элементе script

Самый простой способ внедрения JavaScript в HTML-документ – использование тега . Теги часто помещают в элемент , и ранее этот способ считался чуть ли не обязательным. Однако в наши дни теги используются как в элементе , так и в теле веб-страниц.

Таким образом, на одной веб-странице могут располагаться сразу несколько сценариев. В какой последовательности браузер будет выполнять эти сценарии? Как правило, выполнение сценариев браузерами происходит по мере их загрузки. Браузер читает HTML-документ сверху вниз и, когда он встречает тег , рассматривает текст программы как сценарий и выполняет его. Остальной контент страницы не загружается и не отображается, пока не будет выполнен весь код в элементе .

Обратите внимание: мы указали атрибут language тега , указывающий язык программирования, на котором написан сценарий. Значение атрибута language по умолчанию – JavaScript, поэтому, если вы используете скрипты на языке JavaScript, то вы можете не указывать атрибут language .

JavaScript в атрибутах событий HTML-элементов

Вышеприведенный сценарий был выполнен при открытии страницы и вывел строку: «Привет, мир!». Однако не всегда нужно, чтобы выполнение сценария начиналось сразу при открытии страницы. Чаще всего требуется, чтобы программа запускалась при определенном событии, например при нажатии какой-то кнопки.

В следующем примере функция JavaScript помещается в раздел HTML-документа. Вот пример HTML-элемента с атрибутом события, обеспечивающим реакцию на щелчки мышью. При нажатии кнопки генерируется событие onclick.

Внешний JavaScript

Если JavaScript-кода много – его выносят в отдельный файл, который, как правило, имеет расширение .js .

Чтобы включить в HTML-документ JavaScript-кoд из внешнего файла, нужно использовать атрибут src (source) тега . Его значением должен быть URL-aдpec файла, в котором содержится JS-код:

В этом примере указан абсолютный путь к файлу с именем script.js, содержащему скрипт (из корня сайта). Сам файл должен содержать только JavaScript-кoд, который иначе располагался бы между тегами .

По аналогии с элементом атрибуту src элемента можно назначить полный URL-aдpec, не относящийся к домену текущей НТМL-страницы:

На заметку: Подробнее о путях файлов читайте в разделе «Абсолютные и относительные ссылки».

Чтобы подключить несколько скриптов, используйте несколько тегов:

Примечание: Элемент , хотя внешний сценарий выполняется, встроенный код игнорируется.

Независимо от того, как JS-код включается в НТМL-документ, элементы интерпретируются браузером в том порядке, в котором они расположены в HTML-документе. Сначала интерпретируется код первого элемента , затем браузер приступает ко второму элементу и т. д.

Внешние скрипты практичны, когда один и тот же код используется во многих разных веб-страницах. Браузер скачает js-файл один раз и в дальнейшем будет брать его из своего кеша, благодаря чему один и тот же скрипт, содержащий, к примеру, библиотеку функций, может использоваться на разных страницах без полной перезагрузки с сервера. Кроме этого, благодаря внешним скриптам, упрощается сопровождение кода, поскольку вносить изменения или исправлять ошибки приходится только в одном месте.

Примечание: Во внешние файлы копируется только JavaScript-код без указания открывающего и закрывающего тегов .

Расположение тегов

Вы уже знаете, что браузер читает HTML-документ сверху вниз и, начинает отображать страницу, показывая часть документа до тега . Встретив тег , переключается в JavaScript-режим и выполняет сценарий. Закончив выполнение, возвращается обратно в HTML-режим и отображает оставшуюся часть документа.

Это наглядно демонстрирует следующий пример. Метод alert() выводит на экран модальное окно с сообщением и приостанавливает выполнение скрипта, пока пользователь не нажмёт «ОК»:

Источник