Как работает javascript в html

Использование JavaScript на веб-страницах

Клиентский JavaScript-код может встраиваться в HTML-документы четырьмя способами:

встроенные сценарии между парой тегов <script> и </script>;

из внешнего файла, заданного атрибутом src тега <script>;

в обработчик события, заданный в качестве значения HTML-атрибута, такого как onclick или onmouseover;

как тело URL-адреса, использующего специальный спецификатор псевдопротокола JavaScript:.

В следующих далее подразделах описываются все четыре способа встраивания программного кода на языке JavaScript. Следует отметить, что HTML-атрибуты обработчиков событий и адреса URL с псевдопротоколом javascript: редко используются в современной практике программирования на языке JavaScript (они были более распространены на раннем этапе развития Всемирной паутины).

Встроенные сценарии (в тегах <script> без атрибута src) также стали реже использоваться по сравнению с прошлым. Согласно философии программирования, известной как ненавязчивый JavaScript (unobtrusive JavaScript), содержимое (разметка HTML) и поведение (программный код на языке JavaScript) должны быть максимально отделены друг от друга. Следуя этой философии программирования, сценарии на языке JavaScript лучше встраивать в HTML-документы с помощью элементов <script>, имеющих атрибут src.

Элемент <script>

Клиентские JavaScript-сценарии могут встраиваться в HTML-файлы между тегами <script> и </script>:

В языке разметки XHTML содержимое тега <script> обрабатывается наравне с содержимым любого другого тега. Если JavaScript-код содержит символы поддерживает атрибут src, который определяет URL-адрес файла, содержащего JavaScript-код. Используется он следующим образом:

Файл JavaScript-кода обычно имеет расширение .js и содержит JavaScript-код в «чистом виде» без тегов <script> или любого другого HTML-кода.

Тег <script> с атрибутом src ведет себя точно так, как если бы содержимое указанного файла JavaScript-кода находилось непосредственно между тегами <script> и </script>. Обратите внимание, что закрывающий тег </script> обязателен, даже когда указан атрибут src и между тегами отсутствует JavaScript-код. В разметке XHTML в подобных случаях можно использовать единственный тег <script/>.

При использовании атрибута src любое содержимое между открывающим и закрывающим тегами <script> игнорируется. При желании в качестве содержимого в тег <script> можно вставлять описание включаемого программного кода или информацию об авторском праве. Однако следует заметить, что инструменты проверки соответствия разметки требованиям стандарта HTML5 будут выдавать предупреждения, если между тегами <script src=»»> и </script> будет находиться какой-либо текст, не являющийся пробельными символами или комментариями на языке JavaScript.

Использование тега с атрибутом src дает ряд преимуществ:

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

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

Если сценарий на языке JavaScript используется сразу несколькими страницами, он будет загружаться браузером только один раз, при первом его использовании — последующие страницы будут извлекать его из кэша браузера.

Атрибут src принимает в качестве значения произвольный URL-адрес, поэтому JavaScript-программа или веб-страница с одного веб-сервера может воспользоваться кодом (например, из библиотеки подпрограмм), предоставляемым другими веб-серверами. Многие рекламодатели в Интернете используют этот факт.

Возможность загружать сценарии с других сайтов еще больше увеличивает выгоды, получаемые от кэширования: компания Google продвигает использование стандартных, хорошо известных URL-адресов для часто используемых клиентских библиотек, что позволяет браузерам хранить в кэше единственную копию, совместно используемую многими сайтами в Веб. Привязка сценариев JavaScript к серверам компании Google может существенно уменьшить время запуска веб-страниц, поскольку библиотека наверняка уже будет храниться в кэше браузера пользователя, но при этом вы должны доверять стороннему программному коду, который может оказаться критически важным для вашего сайта. За дополнительной информацией обращайтесь по адресу: code.google.com/apis/ajaxlibs/.

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

Таким образом, политика общего происхождения в данном случае неприменима: JavaScript-код может взаимодействовать с документами, в которые он встраивается, даже если этот код получен из другого источника, нежели сам документ. Включая сценарий в свою веб-страницу с помощью атрибута src, вы предоставляете автору сценария (или веб-мастеру домена, откуда загружается сценарий) полный контроль над своей веб-страницей.

Обработчики событий в HTML

JavaScript-код, расположенный в теге <script>, исполняется один раз, когда содержащий его HTML-файл считывается в веб-браузер. Для обеспечения интерактивности программы на языке JavaScript должны определять обработчики событий — JavaScript-функции, которые регистрируются в веб-браузере и автоматически вызываются веб-браузером в ответ на определенные события (такие как ввод данных пользователем).

JavaScript-код может регистрировать обработчики событий, присваивая функции свойствам объектов Element (таким как onclick или onmouseover), представляющих HTML-элементы в документе.

Свойства обработчиков событий, такие как onclick, отражают HTML-атрибуты с теми же именами, что позволяет определять обработчики событий, помещая JavaScript-код в HTML-атрибуты. Например:

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

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

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

JavaScript в URL

Еще один способ выполнения JavaScript-кода на стороне клиента — включение этого кода в URL-адресе вслед за спецификатором псевдопротокола javascript:. Этот специальный тип протокола обозначает, что тело URL-адреса представляет собою произвольный JavaScript-код, который должен быть выполнен интерпретатором JavaScript. Он интерпретируется как единственная строка, и потому инструкции в ней должны быть отделены друг от друга точками с запятой, а для комментариев следует использовать комбинации символов /* */, а не //.

«Ресурсом», который определяется URL-адресом javascript:, является значение, возвращаемое этим программным кодом, преобразованное в строку. Если программный код возвращает значение undefined, считается, что ресурс не имеет содержимого.

URL вида javascript: можно использовать везде, где допускается указывать обычные URL: в атрибуте href тега <a>, в атрибуте action тега <form> и даже как аргумент метода, такого как window.open(). Например, адрес URL с программным кодом на языке JavaScript в гиперссылке может иметь такой вид:

Некоторые браузеры (такие как Firefox) выполняют программный код в URL и используют возвращаемое значение в качестве содержимого нового отображаемого документа. Точно так же, как при переходе по ссылке http:, браузер стирает текущий документ и отображает новое содержимое. Значение, возвращаемое примером выше, не содержит HTML-теги, но если бы они имелись, браузер мог бы отобразить их точно так же, как любой другой HTML-документ, загруженный в браузер.

Другие браузеры (такие как Chrome и Safari) не позволяют URL-адресам, как в примере выше, затирать содержимое документа — они просто игнорируют возвращаемое значение. Однако они поддерживают URL-адреса вида:

Когда загружается такой URL-адрес, браузер выполняет JavaScript-код, но, т.к. он не имеет возвращаемого значения (метод alert() возвращает значение undefined), такие браузеры, как Firefox, не затирают текущий отображаемый документ. (В данном случае URL-адрес javascript: служит той же цели, что и обработчик события onclick. Ссылку выше лучше было бы выразить как обработчик события onclick элемента <button> — элемент <a> в целом должен использоваться только для гиперссылок, которые загружают новые документы.)

Если необходимо гарантировать, что URL-адрес javascript: не затрет документ, можно с помощью оператора void обеспечить принудительный возврат значения undefined:

Без оператора void в этом URL-адресе значение, возвращаемое методом Window.open(), было бы преобразовано в строку и (в некоторых браузерах) текущий документ был бы затерт новым документом.

Подобно HTML-атрибутам обработчиков событий, URL-адреса javascript: являются пережитком раннего периода развития Веб и не должны использоваться в современных HTML-страницах. URL-адреса javascript: могут сослужить полезную службу, если использовать их вне контекста HTML-документов. Если потребуется проверить работу небольшого фрагмента JavaScript-кода, можно ввести URL-адрес javascript: непосредственно в адресную строку браузера. Другое узаконенное применение URL-адресов javascript: — создание закладок в браузерах.

HTML JavaScript

JavaScript makes HTML pages more dynamic and interactive.

Example

My First JavaScript

The HTML <script> Tag

The HTML <script> tag is used to define a client-side script (JavaScript).

The <script> element either contains script statements, or it points to an external script file through the src attribute.

Common uses for JavaScript are image manipulation, form validation, and dynamic changes of content.

To select an HTML element, JavaScript most often uses the document.getElementById() method.

This JavaScript example writes "Hello JavaScript!" into an HTML element with >

Example

Tip: You can learn much more about JavaScript in our JavaScript Tutorial.

A Taste of JavaScript

Here are some examples of what JavaScript can do:

Example

JavaScript can change content:

Example

JavaScript can change styles:

Example

JavaScript can change attributes:

The HTML <noscript> Tag

The HTML <noscript> tag defines an alternate content to be displayed to users that have disabled scripts in their browser or have a browser that doesn’t support scripts:

Example

HTML Exercises

HTML Script Tags

Tag	Description
<script>	Defines a client-side script
<noscript>	Defines an alternate content for users that do not support client-side scripts

For a complete list of all available HTML tags, visit our HTML Tag Reference.

How to Call a JavaScript function in HTML

In this tutorial, you’ll learn how to call JavaScript functions from HTML pages to make them interactive.

The HTML and CSS can structure a web, can give a web its appearance and responsiveness. JavaScript helps a web page interact with users and guide them to the right information. You can use JavaScript functions to build websites that respond to common user events such as clicks, keypresses, page load, mouseover.

We’ll go step-by-step to help you grasp the core Web Development concepts with easy-to-follow code samples.

Using JS functions with HTML event attributes

You can use event attributes in an HTML control to call a Javascript function when an event occurs.

HTML provides a set of such event attributes to cover a wide range of events.

Few common examples — onclick , onchange , onload , onmouseover , onmouseout and onkeydown .

Please bear in mind that HTML event attributes work with actionable controls only. Buttons and links are few examples of such controls.

This is arguably the simplest approach to call a JavaScript function from an HTML element.

How to call a JavaScript function using HTML event attributes

Let’s develop a web page that will accept the names of its users. Once a user clicks the submit button, the website will display a greetings message to the user.

We will use an HTML event attribute onclick , to make a function call when the user clicks the button. This function will greet the user with an alert message.

You will need to create an HTML and a JavaScript file to try out the example. Let’s create index.html for the HTML source code and scripts.js for JavaScript source code. We will use these source codes for later examples too with minimal changes.

The HTML source code

You can write or copy the below source code into your index.html file. This HTML source code shows a text box and a submit button. Users can enter a name in the text box.

The above example makes use of onclick event attribute within the markup for submit button. The browser calls showAlert() function if a user clicks the submit button.

The JavaScript source code

Let’s write the below source code in the scripts.js file —

This function searches for an HTML text box with id as “fullName”. It fetches the user’s input and uses that to display a message.

Expected output

When in action, the web page asks end-users to enter the user’s full name. If you enter “John Collins”, the system shows a message, “Hello John Collins!”.

Using JS functions with JavaScript event handlers

JavaScript provides a set of event handler properties capable of making function calls. You can use them with JavaScript objects to call functions in an event of an HTML control.

Each of these properties corresponds to a specific event. Few common examples — onload , onclick , onmouseover , onmouseout and onkeydown . You can get a complete list from many websites on the Internet.

JavaScript event handlers work for non-actionable HTML elements too. This means you can turn even an <div> element into a clickable control using an event handler.

JavaScript event handlers can call only one function in an event for an HTML element. This is a limitation that paves the path for Javascript event listeners to come into the picture.

How to call a JavaScript function using event handlers in HTML

We will develop a web page that will accept the names of its users. Once a user clicks the submit button, the website will display a greetings message to the user.

Here we will use a JavaScript event handler property, onclick to call a JavaScript function when a user clicks the submit button.

The HTML source code

You can write or copy below HTML source code in your HTML document, index.html . This HTML source code shows a text box and a submit button. Users can enter a name in the text box.

The JavaScript source code

You can write or copy below source code in your JavaScript file, scripts.js

In this example, the onclick event handler calls showAlert() function. This function call happens when you click the HTML submit button.

Expected output

If you enter the name “John” and click the submit button, the system shows the message — “Hello Jhon!”.

How to use event listeners to call a JavaScript function in HTML

You can leverage JavaScript event listeners to listen to events and call functions.

An event listener method attaches an event listener with an object and calls the desired function when you trigger a particular event on the object.

This is the most powerful yet flexible approach to call functions from HTML.

JavaScript offers below two event listener methods can be used with JavaScript objects-

• addEventListener() — Adds an event handler to an HTML element and calls functions in a specified event.
• removeEventListener() — Removes an event handler from an HTML element.

You have to pass the below parameters to these JavaScript event listener methods —

• Event Name — You need to pass the actual HTML DOM event name. Example of few common events — click, change, focus, mousemove, etc.
• Function Name — You have to pass the function name here. The browser calls this function in response to the above event on the object.
• You can assign any number of event listeners to an object. Thus, you can make multiple function calls in a single event of an HTML control.

A coding sample for calling JavaScript function using event listeners

We will develop a web page that will accept the names of its users. Once a user clicks the submit button, the website will display a greetings message to the user.

Here we will use a JavaScript event listener to call a JavaScript function when a user clicks the submit button.

The HTML source code

You can write or copy below HTML source code in your HTML document, index.html . This HTML source code shows a text box and a submit button. Users can enter a name in the text box.

The JavaScript source code

The external JavaScript file, scripts.js should have below source code —

When a user clicks the submit button, the browser makes two function calls. The functions are, showAlert() and showWelcomeMessage() .

Expected output

If you enter John as input and click the submit button, the system should display two messages back to back:

• Hello John!
• Welcome, John!

Conclusion

To sum it up, here are the things you have learned in this tutorial:

• You can use HTML event attributes, JavaScript event handlers to call functions. These can call a single function in a single event of a particular control.
• The HTML event attributes work only with actionable HTML elements.
• The JavaScript event handlers work both with actionable and non-actionable controls.
• JavaScript event listener methods accept HTML DOM events. Thus they give you the flexibility to listen to a wide range of events. In addition to it, they enable you to call many functions in a single event of a control.
• The thumb rule here is, you should use an event handler property when you need to call a single function in an event of a control. In case you need many function calls in a single event, event listener methods are the things you should choose.

Get my free e-book to prepare for the technical interview or start to Learn Full-Stack JavaScript

Как подключить JavaScript к HTML — 3 способа

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

Если вы только начинаете разбираться в JavaScript, рекомендуем прочитать статью по ссылке, в которой мы подробно рассказали о фишках языка.

Способ 1: JavaScript в HEAD

Если ранее вы изучали CSS для оформления страниц, то знаете, что его можно подключать напрямую или через link и только в теге HEAD. JS в этом плане удобнее, т. к. разработчик может интегрировать код как в начале HTML-страницы, так и в ее конце.

Чтобы в HTML-разметку добавить блоки кода, воспользуйтесь парным тегом script. Его необходимо использовать в начале и конце вставляемого фрагмента. В противном случае невозможно будет определить границы функции.

Данная функция срабатывает после клика на кнопку.

Не рекомендуем в HEAD собирать несколько скриптов, т. к. это усложняет загрузку страницы. А увеличение времени ожидания позже негативно скажется на SEO-продвижении, т. к. поисковые системы строго относятся к удобству пользования сайтами.

Также при интеграции кода непосредственно в разметку тяжелее читать код. Если программист работает в команде, он должен сделать написанные строки понятными для коллег. В примере использовано всего 3 строки, не учитывая теги, но в случаях, когда написано более 20 строк, воспринимать JavaScript-код станет проблематично.

Способ 2: JavaScript в тексте страницы

Подключение JavaScript в тело страницы, т. е. внутри тега body, формально ничем не отличается. Программист также должен расставить парные теги script, чтобы оповестить браузер о начале и конце кода скрипта.

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

Рекомендуем во время разработки страниц всегда помнить о времени загрузки на устройствах с разной скоростью интернета. Если учесть это, то у пользователей точно не возникнут сложности из-за компиляции скриптов.

Способ 3: Подключаемый JS файл через внешний источник

Небольшие и уникальные сценарии удобнее интегрировать непосредственно в HTML-разметку. Это быстрее и не требует дополнительных инструментов.

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

Чтобы подключить внешний файл, вам снова потребуется конструкция

Только теперь вместо программы между тегами указывается путь к файлу с расширением .js.

Разрабатывая страницу для этой статьи, мы сначала сохранили готовый скрипт в файл loft.js, а во время работы прописали путь с атрибутом src=»». В результате получилось:

Также при желании можно использовать более подробную ссылку:

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

Важно! Нельзя использовать в границах одной конструкции с парным тегом script ссылку на сторонний файл и непосредственно программный код. В подобном случае они не сработают. Если нужно добавить два и более скрипта подряд, создайте разные блоки, выделенные script.

Отложенный и асинхронный вывод JS

Активное использование интерактивных элементов на сайте может приводить к проблемам SEO-оптимизации и разработки сайтов, т. к. время загрузки страниц становится больше, а юзабилити ухудшается.

JavaScript блокирует работу парсера, т. е. разбор самого HTML-файла. Когда парсер доходит до скрипта, он останавливается и запускает его. Такая логика страницы создает сложности для пользователя, т. к. отрисовка ухудшается, даже если HTML-документ не зависит от кода на JavaScript.

Разберем проблему на примере:

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

Стандартный метод обработки кода

Если у человека слабый интернет, такой подход станет проблемой, поэтому разработчики чаще используют атрибуты async и defer для асинхронной и отложенной обработки JavaScript-кода.

Атрибут async

Его используют для того, чтобы сказать браузеру: скрипт должен выполняться асинхронно, т. е. без остановки обработки HTML во время извлечения JS-кода. Пример конструкции:

Асинхронный метод разбора

Парсер прекращает читать HTML только в момент выполнения скрипта. Благодаря этому можно ускорить загрузку страницы в 2–2,5 раза, поэтому данным атрибутом не стоит пренебрегать.

Для справки! Async работает только с внешними файлами. Он не доступен для блоков кода, интегрированных в HTML-разметку напрямую.

Атрибут defer

Он указывает браузеру, что скрипт должен выполняться только после того, как HTML-документ будет полностью разобран. Для этого программисты используют конструкцию:

Отложенный алгоритм разбора

Это удобный вариант для скриптов, которые не должны сразу же срабатывать. Если вы хотите добавить, например, просто кнопку в тело страницы, стоит использовать defer. Пока пользователь читает текст, скрипт запустится. В результате человеку не придется ждать, благодаря чему работать со страницей станет удобнее.

Какой алгоритм выполнения выбрать

Нельзя точно сказать, какой вариант лучше, т. к. выбор решения зависит от конкретной задачи и условий. Чтобы вам было проще определиться, мы подготовили 3 вопроса, которые нужно себе задать. Ответы на них помогут найти оптимальный алгоритм:

• Где находится скрипт? — Если он расположен в конце HTML-документа, т. е. прямо перед закрывающим тегом /body, то выбирайте стандартный метод выполнения. В таком случае парсер уже точно разберет основную часть страницы и скрипт не повлияет на юзабилити. Асинхронный или отложенный вариант уместен, когда JS-код стоит в начале страницы.
• Скрипт является самодостаточным? — Для файлов, не зависящих друг от друга, желательно использовать атрибут async, т. к. последовательность выполнения для них неважна.
• Полагается ли скрипт на DOM? — Часто разработчики добавляют на страницу функции, взаимодействующие с объектной моделью документа. Подобные блоки должны разбираться после полной обработки HTML. Их размещают внизу страницы либо в других частях и используют атрибут defer.

Также стоит учитывать размер скрипта. При работе с небольшими вариантами можно не задумываться об алгоритме, т. к. они существенно не повлияют на скорость загрузки. А в случае со скриптами, зависимыми друг от друга, пригодится стандартный способ разбора.

Как правильно подключить JS к HTML

Хотя технически нет ограничений на размещение тегов script, мы советуем подключать скрипты именно в body, а не head. Исключениями являются только страницы, которые без кода Javascript не отображаются, или необходимо сначала что-то показать посетителю перед отображением основного контента.

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

Если же говорить о лучшем способе подключить JavaScript, то мы рекомендуем отдать предпочтение внешним библиотекам с JS-скриптами. Даже крупные веб-приложения будут запускаться быстро, особенно когда пользователь зайдет повторно, потому что файлы JavaScript сохраняются в кеше.

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

Заключение

Теперь вы знаете, как подключать скрипты на HTML-страницу. Это несложно, т. к. JavaScript и HTML имеют простой синтаксис, а благодаря гибкости JS можно интегрировать код веб-приложения в любую часть документа. Главное — не забывать о времени загрузки страницы и юзабилити.

Для справки! Идеальной считается длительность ожидания до 0,5 секунд, а оптимальным — до 3 секунд. Если в ходе проверки вы обнаружили, что загрузка занимает больше времени, попробуйте другой алгоритм выполнения или удалите малозначимые скрипты.