JS In HTML

JavaScript — Placement in HTML File

In the following section, we will see how we can place JavaScript in an HTML file in different ways.

JavaScript in . section

If you want to have a script run on some event, such as when a user clicks somewhere, then you will place that script in the head as follows −

This code will produce the following results −

JavaScript in . section

If you need a script to run as the page loads so that the script generates content in the page, then the script goes in the portion of the document. In this case, you would not have any function defined using JavaScript. Take a look at the following code.

This code will produce the following results −

JavaScript in and Sections

You can put your JavaScript code in and section altogether as follows −

This code will produce the following result −

JavaScript in External File

As you begin to work more extensively with JavaScript, you will be likely to find that there are cases where you are reusing identical JavaScript code on multiple pages of a site.

You are not restricted to be maintaining identical code in multiple HTML files. The script tag provides a mechanism to allow you to store JavaScript in an external file and then include it into your HTML files.

Here is an example to show how you can include an external JavaScript file in your HTML code using script tag and its src attribute.

To use JavaScript from an external file source, you need to write all your JavaScript source code in a simple text file with the extension «.js» and then include that file as shown above.

For example, you can keep the following content in filename.js file and then you can use sayHello function in your HTML file after including the filename.js file.

Источник

3 Ways To Include Javascript In HTML (Simple Examples)

Welcome to a tutorial on how to include Javascript in HTML. So you have just started with Javascript and wondering how to properly “put Javascript” into an HTML file?

1. External Javascript, load a Javascript file –
2. Internal Javascript, add a block of code in the HTML document itself –
3. Inline Javascript, directly add Javascript to an HTML element –

That covers the quick basics, but there are more things to take note of. Read on for more examples!

TLDR – QUICK SLIDES

TABLE OF CONTENTS

INCLUDE JAVASCRIPT IN HTML

All right, let us now get into the examples of how to include Javascript in HTML.

1) EXTERNAL JAVASCRIPT FILE

• We can load the same script twice, it will run twice.
• Absolute URL refers to a “full address” with the host, path, and file name.
• Relative URL refers to a “short address” with the path and file name only, it will be resolved based on the current URL. For example, if the current URL is http://site.com/pages/ , the above will resolve to http://site.com/pages/1a-external.js .

Be careful when using relative URLs, beginners commonly confuse themselves with “script is not loading”. E.G. The script is placed in http://site.com/1a-external.js , but the relative URL resolves to http://site.com/pages/1a-external.js .

2) INTERNAL JAVASCRIPT

Captain Obvious once again, internal Javascript is simply a block of Javascript code within the HTML file itself.

3) INLINE JAVASCRIPT

• onclick – When the user clicks on the element.
• onhover – As the mouse cursor hovers over the element.
• onkeypress – When the user presses a key.

4) SCRIPT IN THE HEAD OR BODY?

      function demoB () 
Demo A
 
Demo B
  

The next million-dollar question is – Shall we put the tags in the or section of the HTML? Well, tags can actually be put into both sections. But please take note that there is a difference where you put them and the order of the scripts does matter.

5) LOADING ORDER

     
Demo A
 
Demo B
 

• We place the critical scripts at the top.
• Place non-critical Javascript at the bottom to speed up the loading.
• The loading order does matter. Common beginner mistakes – Use library functions when the library itself is not loaded. Try to get an HTML element when it is not loaded.

Follow up with “How Javascript Files Load” in the extra links below if you are interested.

DOWNLOAD & NOTES

Here is the download link to the example code, so you don’t have to copy-paste everything.

SUPPORT

600+ free tutorials & projects on Code Boxx and still growing. I insist on not turning Code Boxx into a «paid scripts and courses» business, so every little bit of support helps.

EXAMPLE CODE DOWNLOAD

Click here for the source code on GitHub gist, just click on “download zip” or do a git clone. I have released it under the MIT license, so feel free to build on top of it or use it in your own project.

EXTRA BITS & LINKS

That’s all for the tutorial, and here is a small section on some extras and links that may be useful to you.

A BLAST FROM THE PAST

If you have poked around the various tutorials all over the Internet, you might have spotted a few tags with the type or language attribute. That is actually something from the past, where we have to define the type of script being used. But with today’s standards, we can safely omit it and browsers will automatically assume it is Javascript by default.

LINKS & REFERENCES

TUTORIAL VIDEO

INFOGRAPHIC CHEAT SHEET

THE END

Thank you for reading, and we have come to the end. I hope that it has helped you to better understand, and if you want to share anything with this guide, please feel free to comment below. Good luck and happy coding!

Источник

HTML-импорт — include для веба: часть 1

Перевод статьи «HTML Imports #include for the web», Eric Bidelman.

От переводчика

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

Для чего нужен HTML-импорт?

Начало работы

В наборе стандартов Web Components есть стандарт HTML Imports, который позволяет подключение HTML-документов друг в друга. В подключаемых HTML-документах разрешается Javascript и CSS, словом, все что .html обычно содержит. Это замечательный инструмент для загрузки пакетов HTML/CSS/JS кода.

Основы

Указанный URL, это расположение импорта(import location). Чтобы использовать импорт с другого домена, его расположение должно позволять междоменное разделение ресурсов(CORS):

Примечание: браузеры игнорируют повторные запросы на один и тот же URL. Это значит, что из одного адреса будет выполнена только одна загрузка сколько бы ни было подключений на странице

Проверка на поддержку браузером

function supportsImports() < return 'import' in document.createElement('link'); >if (supportsImports()) < // Good to go! >else < // Use other libraries/require systems to load files. >

Браузерная поддержка пока на ранней стадии(прим. переводчика: оригинал статьи опубликован 11 ноября 2013, теперь, наверное, другая ситуация с поддержкой). Chrome 31 первый браузер поддерживающий HTML-импорт. Chrome 36 обновлен до последней спецификации этой фичи. Вы можете включить поддержку импорта, отметив флаг «Включить экспериментальные функции веб-платформы» по адресу

в Chrome Canary. Для других браузеров это пока не работает.

Примечание: Включение экспериментальных функций позволит использовать и другие полезные фичи веб-компонентов

Бандлинг ресурсов

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

Вы сможете экспортировать целые пакеты веб содержимого всего одной линкой.

Bootstrap это хороший пример того, как мог бы пригодиться импорт компонентов. Бутстрап состоит из различных файлов (bootstrap.css, bootstrap.js и др.), использует JQuery (как импортируемый компонент), а в результате выдает инструменты для верстки. Разработчикам нравится возможность подключать те или иные модули, по мере необходимости. Но обычно мы идем простым путем, подключая все модули бутстрапа сразу.

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

Нужно всего лишь добавить один линк импорта. Больше не нужно подключать кучу файлов, вместо этого весь Bootstrap завернут в файл bootstrap.html:

События load/error

Импорт всегда загружается сразу же, в порядке нахождения тега

 function handleLoad(e) < console.log('Loaded import: ' + e.target.href); >function handleError(e)

Примечание: обработчики событий загрузки/ошибки нужно объявлять перед импортом, так как браузер загружает импорт в тот момент, когда встречает тег импорта. Если на момент импорта нет обработчика загрузки, в консоли выведется ошибка undefined function.

Вы, также, можете динамически создавать импорт:

var link = document.createElement('link'); link.rel = 'import'; link.href = 'file.html' link.onload = function(e) ; link.onerror = function(e) ; document.head.appendChild(link); 

Использование содержимого импорта

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

Вот он момент прозрения, импорт, это всего-лишь документ. На самом деле, содержимое импорта так и называется документ импорта(import document). А использовать результат импорта вы можете стандартными средствами DOM API!

link.import

var content = document.querySelector('link[rel="import"]').import; 

• Браузер не поддерживает импорт.
• У элемента нет атрибута rel=»import» .
  Объект не добавлен в DOM.
  Или был удален из DOM
  Ресурс не поддерживает CORS.

Полный пример

Допустим у нас есть страница warnings.html :

 
 h3 
Warning!
 
This page is under construction
 
 
Heads up!
 
This content may be out of date
 
 

Вы можете использовать только необходимую вам часть импортированной страницы:

  .   

Скрипты в импорте

Импорт работает не совсем, как часть документа, который его использует. Но вы, все же, можете работать с подключившей его страницей. Из импортированной страницы можно работать, как с внутренним DOM, так и с главным документом:

Пример — import.html добавляет один из своих стилей главному документу

   /* Примечание: Внутренние стили, по умолчанию применяются к импортирующему документу. Их не нужно явно добавлять в главную страницу. */ #somecontainer .  

document.currentScript.ownerDocument

мы получаем доступ к внутреннему элементу-корню импортированного документа и добавляем его кусок в главный документ (

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

Скрипты внутри импорта могут как сами исполнять код, так и предоставлять функции для выполнения в главном документе. Это похоже на модули в Питоне.

• Код импорта выполняется в контексте содержащего его документа. Из этого исходят две удобные вещи:
  • Функции объявленные в импорте содержатся в главном объекте window .
  • Вам не нужно делать действий вроде добавления в главный документ тегов

  Источник