Add JavaScript to a web page
These instructions will help you create a JavaScript file, add it to your web page and test that it is working.
1 | Create a JavaScript file
In your project, in the same folder as your index.html page, create a new file called my-project.js . All of your project’s JavaScript code should be written in .js files.
2 | Add some test code to the file
In your new file my-project.js , add the code below:
This code will show the message “It works!” in your browser’s developer output window, which we will look at soon.
3 | Add the file to your web page
In your index.html file, add a script tag to load your new JavaScript. The script tag should be the last line of code before your closing body tag.
This is the line you need to add:
And this is an example HTML file including the new line:
4 | Save your files
Make sure you have saved all your files, especially your new my-project.js and your changes to index.html .
5 | Open the web page in Google Chrome
In your normal operating system’s folder browser, find your index.html file. Right click the file and choose “Open with Google Chrome”.
6 | Open the Developer Console
In Chrome, click on the options menu at the top right, which looks like three little dots. Go to More Tools then click Developer Tools.
In the developer tools, click on the tab called Console and you should see your message “It works!”
If you do not see the message, you will need to double-check that you have followed the steps correctly.
Quick Recap
Here’s all the steps in a simplified form:
- Create a new JavaScript file with some console.log() test code.
- Load the JavaScript file using a script tag in your HTML.
- Use the Developer Tools to check that the message shows up.
Once the test message is showing up successfully, you can add any other JavaScript code you want to the file.
Методы вставки JavaScript в HTML
В этой статье мы поговорим с вами о том, как подключить JavaScript в HTML страницу. В этом нет ничего сложного, делается это так же, как и подключение CSS стилей.
Единственное отличие — JavaScript код можно вставлять в любой части HTML-документа. Если вы помните, то CSS код можно было подключить через тег <link> или же напрямую, записывая стили в парном теге style. Всё это можно было сделать только в теге head.
В этом плане JavaScript отличается от CSS — его можно подключить как в начале, так и в конце веб-страницы.
Внутреннее подключение скриптов
Для того, чтобы подключить скрипты внутри HTML страницы, добавьте в неё парный тег <script>, в котором и нужно записывать JavaScript код. Делается это так же, как и с тегом style.
Тег script можно добавлять в тег head, что делает большинство веб-разработчиков, но можно прописывать скрипты и в конце страницы. Это никак не влияет на их обработку, так как тег script считывается сразу, как только загружается веб-страница.
Подключение JavaScript в Head:
Подключение JavaScript в конце страницы:
Между первым и вторым примером нет особой страницы. В обоих случаях JavaScript-код будет обрабатываться быстрее чем остальная разметка страницы.
Главным плюсом является то, что вы сможете редактировать код не закрывая HTML документ — вам не нужно будет переключаться между документами.
Минусом считается то, что общий весь HTML-файла будет увеличен, что сказывается на его оптимизации. Кроме этого, на профессиональных веб-сайтах используется множество скриптов, которые отвечают за определенный функционал сайта. Для каждой функции принято использовать один JavaScript файл.
Подключение внешнего JavaScript файла
В CSS для подключения стилей использовалось 2 тега: <script> — для работы со стилями внутри HTML страницы, link — для подключения внешних стилей. Для подключения внешних JS файлов используется тот же тег script.
Создайте новый документ и сохраните его с расширением ".js". Чтобы подключить его создайте пустой тег script с атрибутом src. В нем прописываем путь к JavaScript файлу.
Ещё одним преимуществом внешних стилей является то, что их намного удобнее использовать на больших сайтов. Представьте что вам приходилось бы писать скрипты для каждой HTML страницы, это очень долго и неудобно, не правда ли?
На страницу можно подключать неограниченное количество скриптов, просто создайте несколько документов и подключите их через тег <script>:
Есть также 1 нюанс, если тег <script> содержит атрибут "src", то внутреннее содержимое не обрабатывается. То есть, если вы подключите скрипты через тег <script> и попытаетесь записать в теге какой-то код, он обрабатываться не будет.
Кроме src принято вписывать атрибут type, в нем указывается язык скрипта. Пример:
Если вы забудете про данный атрибут, то на работе сайта это никак не отразится, но код будет считаться не валидным.
Заключение
В этой статье мы узнали о том, как подключать скрипты на HTML-страницу. Как мы уже поняли в этом нет ничего сложного, и лучше использовать внешние скрипты, так как это гораздо удобнее.
В следующих статьях мы поговорим с вами о синтаксисе языка и работе его некоторых элементов. Заранее создайте файл с расширением ".js" и подключите не свою тестовую страницу. Желаем удачи в изучении.
Как подключать скрипты для сайта – JavaScript в HTML
В этом руководстве мы покажем вам, как вставить JavaScript в HTML. Начало будет посвящено краткой презентации JavaScript, тогда как остальная часть руководства будет сфокусирована на вариантах добавления JavaScript в HTML.
Если вы хотите отобразить статический контент, например, набор изображений, тогда HTML выполнит для вас эту работу. Однако, статические страницы медленно, но уверенно становятся вчерашним днём. Большинство контента сегодня интерактивное и включает динамические слайд-шоу, формы и меню. Они расширяют восприятие пользователя и добавляют динамичности сайту. Это достигается использованием скриптовых языков и JavaScript – один из самых известных в этом отношении. Он позволяет разработчикам делать сайты, взаимодействующие с пользователем. Хотя, есть много других доступных языков, но не один из них не достиг такой популярности, как JavaScript. Для раскрытия огромного потенциала этого языка, его используют совместно с HTML.
Преимущества JavaScript
JavaScript вначале назывался LiveScript. Но, так как на тот момент Java была у всех на устах (по всему миру), Netscape решил переименовать его в JavaScript. Дата его первого появления – 1995 как часть Netscape 2.0. Некоторые самые выдающиеся преимущества JavaScript опишем ниже.
Минимизация взаимодействия с сервером
Хорошо известный факт, что если вы хотите оптимизировать производительность своего сайта, лучший путь – это снизить взаимодействие с сервером. JavaScript тут помогает проверкой корректности ввода пользователем на стороне клиента. Запрос серверу отправляется только тогда, когда начальные проверки пройдены. Как результат, использование ресурсов и количество запросов к серверу значительно уменьшается.
Более богатый интерфейс, ориентированный на удобство пользователя
Используя JavaScript, вы можете создавать интерактивный интерфейс на стороне клиента. Например, добавлять слайдеры, карусели, эффекты по действиям мыши, функции простого перетягивания и так далее.
Молниеносный отклик пользователю
С JavaScript вы можете убедиться, что пользователи получают молниеносный ответ. К примеру, представим, пользователь заполнил форму и оставил одно поле пустым. Без JavaScript проверки нужно будет ждать пока страница перезагрузится и только тогда окажется, что одно поле осталось незаполненным. В то время как JavaScript сообщим от этом сразу же.
Лёгкая трассировка
JavaScript – это интерпретируемый язык, что значит, что написанный код выполняется построчно. Если возникла ошибка, вы будете точно знать номер строки, в которой возникла проблема.
Вставка JavaScript в HTML
Есть два пути вставки JavaScript в HTML и их комбинация. Теперь, когда мы поговорили о JavaScript и рассмотрели его преимущества, давайте взглянем на пути сопряжения JavaScript и HTML.
Вставка JavaScript непосредственно в HTML-файл
Первый способ добавить JavaScript в HTML – прямой. Вы можете сделать это путём использования тэгов <script></script>, которые должны обрамлять весь код JS, который вы пишете. JS код может быть вставлен:
- между тэгами <head>
- между тегами <body>
В зависимости от того, где вы добавляете код JavaScript в вашем файле HTML, его загрузка будет отличаться. Рекомендуемой практикой является добавление его в разделе <head>, так он будет оставаться отдельно от самого кода файла HTML. Но размещение его в <body> может улучшить скорость загрузки, так как актуальный контент сайта будет загружен быстрее и только потом будет разобран код JavaScript. Для примера этого, давайте взглянем на следующий HTML-файл, который предполагает отображение времени:
В таком виде код, представленный выше не содержит JavaScript и поэтому не будет показывать текущее время. Мы можем добавить код, чтобы убедится верное ли отображается время:
Заключим этот код в тэги <script> и </script> и поставим его в заголовочной части кода HTML, чтобы быть уверенным в том, что независимо от того, загрузилась ли страница полностью, сообщение будет показывать текущее время для пользователя. Так файл HTML будет выглядеть после добавления кода:
Если же вы хотите расположить этот код в теле, вам нужно включить его внутри тэгов <body> HTML страницы. Вот так будет выглядеть код в этом случае:
А вот результат:
Вставка JavaScript в HTML из отдельного файла
Иногда добавление кода JavaScript в HTML напрямую не выглядит лучшим решением. Преимущественно, по причине того, что многие JS-скрипты используются на множестве страниц, код JavaScript лучше располагать в отдельном файле. Именно поэтому вариант вставки JavaScript в HTML путём импорта файла является наиболее подходящим. На эти файлы внутри документа HTML располагаются ссылки, на подобие того, как это делается для CSS-файлов. Некоторые преимущества подключения JS кода из внешнего файла:
- Когда код HTML и JavaScript отделены, сохраняется принцип структурного разделения, и это делает отдельные блоки более удобными для повторного использования и их функционирование более рациональным.
- Читаемость кода и его редактирование становится проще и удобнее.
- Кэширование файлов JavaScript повышает общую производительность путём снижения времени загрузки страницы.
Ссылку на файл JavaScript внутри файла HTML можно сделать так:
Содержимое файла myscript.js будет:
Примечание: Здесь предполагается, что файл myscript.js находится в каталоге js, который находится в том же каталоге, что и файл HTML.
Пример кода JavaScript для проверки адреса email
JavaScript позволяет вашему приложению осуществить проверку ввода данных на стороне пользователя. Один из параметров, который часто требует проверки – это email адрес. Эта функция JavaScript может помочь вам с проверкой введённого адреса email перед отправкой данных формы на сервер:
Чтобы прикрепить этот код к форме ввода можно использовать следующий html-код:
Вот результат, который вы получите после соединения всех компонентов вместе в файле HTML:
И если проверка не прошла, результат будет иной:
Поздравляем! Мы рассмотрели подключение JavaScript в HTML на нескольких простых примерах.
Заключение
В этой статье мы ведём речь о двух вариантах вставки JavaScript в HTML(англ.) код и, как только вы освоитесь, перед вами открываются безграничные возможности совместного использования двух языков программирования. JavaScript может быть использован в сочетании с HTML для придания современным веб-приложениям интерактивности, интуитивной понятности и дружелюбности. Применяя простую проверку на клиентской стороне можно избежать возрастания трафика на сервер и улучшить общую эффективность сайта.
Елена имеет профессиональное техническое образование в области информационных технологий и опыт программирования на разных языках под разные платформы и системы. Более 10 лет посвятила сфере веб, работая с разными CMS, такими как: Drupal, Joomla, Magento и конечно же наиболее популярной в наши дни системой управления контентом – WordPress. Её статьи всегда технически выверены и точны, будь то обзор для WordPress или инструкции по настройке вашего VPS сервера.
How to link JavaScript to HTML
When creating web pages there comes a time when you need to do a bit more than display content. You need to load JavaScript.
One of the first JavaScript files added is Google Analytics to track page loads and visitors.
But how do you link JavaScript to HTML?
In this tutorial, we are going to cover how to link JavaScript to HTML. We will look at:
- Adding JavaScript to a page
- Adding a JavaScript file to a page
- Adding JavaScript from a CDN
Let’s get started.
Adding JavaScript to a page
When you add JavaScript to a page you use a <script> tag. Sounds simple enough. Let’s look at an example.
We will start simple. Say that as soon as the web page loads we want to say “hello”. To do this we can use the alert() JavaScript function.
We will need a very basic HTML page and then load the script like this:
The above is all you would need to say hello when the page loads. The browser reads the page and processes the HTML line by line. When it reads the script tag it knows that this is JavaScript and it will run the code.
When it reads the line alert("hello") it can see we want to display the word “hello” in an alert:
This is a simple example but it shows how you can write JavaScript within an HTML page. This is “inline” JavaScript.
The script tag has some attributes that we can use. These are:
- async
- charset
- defer
- src
- type
For example, we could specify that the script is JavaScript by adding a type like this:
It used to be common to use more than one type of script but JavaScript won that battle. So now browsers default the type to Javascript. So the above code is the same as:
So there is no reason to use the type attribute anymore.
What about the other attributes, what do they do?
The other attributes only work when loading an external JavaScript file. Let’s look at this next.
Adding a JavaScript file to a page
To load an external JavaScript file we need to use the src attribute. src stands for source and it is the path to the script that you want to load. This attribute loads an external JavaScript file.
For example, say that we have a JavaScript file called main.js in the assets folder on your web server. The contents of this file are the same as before:
When the file loads it will alert with the word “hello”.
You would load the external file with this HTML:
Remember, we don’t need to include the type because the file is JavaScript. All we need is the src attribute which is the path to the file.
The HTML will load the script when it loads the page as it did before. When the browser reads that line it will fetch the JavaScript file and run it.
Now that we have an external script we can look at some of the other script attributes. Let’s start with async and defer .
When the browser finds a script tag in the HTML the page loading stops while the browser fetches the script. Once the file is ready the browser runs the code. Once the code has finished running the page will resume loading.
async and defer will improve web performance by allowing the page to continue to load. But they do it in different ways.
Let’s look at async first.
The async attribute tells the browser to download the file in the background. This allows the page to continue loading. As soon as the file has downloaded the browser will run the code.
This is how you would add the async attribute:
How does defer differ? This attribute tells the browser to download the file in the background like async . Yet, it will only run the code once the browser has finished processing loading the page.
This means that defer will not block the page at all. Whereas, async will only block the page when it runs the code. Both attributes mean that they will not block the page when the script is downloading.
Here is how you would use defer :
So which one do you choose and when?
The general rule is that you should use defer because it will never stop the page from loading. Also, if you have more than one script on the page defer will run them in order. With async the code runs as soon as they download and you cannot guarantee order.
There is one more attribute that we have not talked about. It is the charset attribute.
This attribute allows you to specify the encoding of the characters. Which can either be “UTF-8” or “ISO-8859-1”. In 20 years of creating web sites, I have never used this attribute. It is safe to say you can leave the default which is “ISO-8859-1”.
Where should you put your script tags? The general rule is to add them before the </body> tag. This is at the end of the page and means that most of the page has loaded.
This is what the HTML should look like:
The only time you might break this rule is if you have a large JavaScript file. This will take longer to download so you can move this to the <head> section of the page, like this:
With the defer attribute you know the page will not block and the script will download in the background.
We have loaded scripts from the local webserver but what if the file is on another server. One example of this is when you need to load a framework like JQuery.
Let’s look at this next.
Adding JavaScript using a CDN
The last thing that I want to teach you about is loading JavaScript from a CDN. You can load libraries such as JQuery from fast and free CDN’s. This will make your website faster.
Here are a few free options:
-
is an open source project to provide JavaScript files A much smaller selection but with all the power of Google Like Google this is also only a small selection of files but uses Microsoft servers Also an open source project this one can take the files from NPM
Each of these CDNs will allow you to load the latest JQuery. Here is the URL from each of these CDNs:
This is the same file from each of the providers. You only need to pick one. Remember, always use the minified version as it will download faster.
As an example this is what it would look like if we loaded JQuery from the Google CDN:
Key takeaway: If you are loading a common library or framework then use one of these CDN’s to do it.
Wrapping Up, How to link JavaScript to HTML
We have looked at how to link JavaScript to HTML. We have discussed three ways to do it:
- Adding the JavaScript code to the page inside a script tag
- Adding the JavaScript from your web server as an external script
- Adding the JavaScript from a CDN
If you are loading a JavaScript framework such as JQuery use the CDN option as it will load the fastest.
We have also looked at the script tag and some of the attributes that you can use: