JavaS­cript adds a breath of fresh air to a static HTML file. You can embed JavaS­cript directly or as an external file in HTML. We’ll show you what the ad­vant­ages and dis­ad­vant­ages are to inserting JavaS­cript into HTML.

Why should you embed JavaS­cript in HTML?

HTML, CSS, and JavaS­cript are the three basic pillars of the modern world wide web. If you want to create a modern, in­ter­act­ive website, you can hardly avoid en­liven­ing HTML text files by in­cor­por­at­ing CSS and JavaS­cript. HTML files are plain text documents for creating and struc­tur­ing website content. HTML is easy to learn, and you can get by without format­ting. It’s also user-friendly thanks to free code editors such as Notepad++ or Kate. On the other hand, cre­ativ­ity is provided by CSS text files embedded in HTML embedded CSS text files, which define the layout, colour scheme, ty­po­graph­ies, and other design elements of a website.

A website only becomes truly in­ter­act­ive with JavaS­cript elements, which add dynamic behaviour to the content. JavaS­cript files embedded in HTML, for example, enable the active modi­fic­a­tion of website content such as automatic date display, day-dependent colouring, or auto­mat­ic­ally displayed messages when the website is visited. With enabled JavaS­cript, JavaS­cript content can be executed directly in most browsers. This saves pro­cessing power and improves the loading speed of in­ter­act­ive content and an­im­a­tions on a website.

What options are there for embedding JavaS­cript?

You can note or reference JavaS­cript elements in HTML source code as script elements as follows. 

<script> </codesnippet></script>
JavaScript-Element

Script elements are usually embedded in the body or head area of an HTML document.

Depending on how you include JavaS­cript in HTML, you can choose from the following options:

  • Note JavaS­cript directly in an HTML page: Direct notation in HTML is done in the head element and ensures that JavaS­cript files load as quickly as possible via direct notation. The downside is that direct notations must be made for each HTML document on a website to load content.
  • Ref­er­en­cing JavaS­cript as an external file in HTML: Embedding an external JavaS­cript file ref­er­ences the JavaS­cript file in the HTML text. Embedding as a reference allows ex­tern­ally noted JavaS­cript files to be loaded on multiple pages without having to note them directly as verbose JavaS­cript elements in HTML files.
Tip

Including JavaS­cript elements is es­pe­cially easy with special JavaS­cript frame­works. JS frame­works group together pre­defined JavaS­cript objects and state­ments and make pro­gram­ming easier.

How to embed JavaS­cript in HTML: practical examples

You can choose between two different methods to include JavaS­cript. We’ll introduce you to both.

Embedding JavaS­cript in HTML directly

To load JavaS­cript elements as quickly as possible, place the script element in the HTML head or body. In new browsers, a re­l­at­ively simple JS source code is suf­fi­cient. In the following example, the message ‘Hello friend’ is written on a website via JavaS­cript in­teg­ra­tion:

<!DOCTYPE html>
<html>
<head>
    <title>JavaScript: Hello Friend</title>
    <script>
        alert(“Hwllo Friend!“);
    </script>
</head>
<body>
    <p>This website only displays a message box.</p>
</body>
</html>

Complex visu­al­isa­tions, an­im­a­tions, or in­ter­act­ive elements can also be noted directly in HTML. The advantage of direct embedding is that JavaS­cript elements are edited directly in the HTML file. The dis­ad­vant­age is that you have to note JavaS­cript functions sep­ar­ately in the source code for each HTML document. This leads to increased effort when main­tain­ing the source code.

Embedding JavaS­cript as an external file

It’s more efficient and more common to note down JavaS­cript as an external file and reference it in the HTML document. In this way, JavaS­cript can be included in HTML as if the file were noted directly in the source code.

In the HTML document it looks like this:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Include external JavaScript file</title>
    <script src="filename.js"></script>
</head>
</body>

Embedding JavaS­cript as an external file offers the advantage that only the link to the external file is ref­er­enced. So, all desired HTML pages with a cor­res­pond­ing reference can access the file and load it faster. In addition, the source code is easier to maintain, since it’s not several HTML documents, but only one JavaS­cript file.

Tip

JavaS­cript elements have been a sort of non-plus-ultra for in­ter­act­ive content on websites and in browsers. However, since even JavaS­cript doesn’t always load fast enough, the open standard WebAssembly is now being used more and more as a JavaS­cript sup­ple­ment.

Special features in different HTML versions

When embedding JavaS­cript in HTML, note that older browsers require more verbose source code. Instead of the simpler HTML 5 <script>...</script> tag, the JavaS­cript inclusion would look like this:

<script type="text/javascript">
JavaScript-Element
</script>

</script>

If you want to display a place­hold­er message for visitors who have JavaS­cript disabled, use the following noscript tag:

<head>
    <script>
        JavaScript-Element
    </script>
    <noscript>
        Please enable JavaScript to see the JavaScript element.    
    </noscript>
</head>
Go to Main Menu