Using JavaScript in an HTML document usually happens in two ways: by embedding the code within the HTML document or by referencing a separate JavaScript file.

The first way to include JavaScript code in an HTML document is to use the 

 tag. This tag contains the JavaScript code that is executed when the HTML document is loaded. The tag is shown in the example in the head section, but it doesn't have to be exactly there. The head is loaded before the body, so if you want the script to be loaded only after the rest of the HTML has already been loaded, it is recommended to place it at the end of the body.

Another way to use JavaScript in an HTML document is to refer to a separate JavaScript file. The JavaScript file is attached to the HTML document using the 

 tag, with the file location written in the 

 attribute. The script can be located at the application's own address (in which case it can be referred to with just the filename without a complete URL) or anywhere on the Internet.

Note that functions in a separate JavaScript file are available in all parts of the HTML document as long as they are correctly linked to the HTML file.

HTML DOM event handlers are an important feature of JavaScript that allow us to define what happens when a user interacts with a webpage. DOM events can include mouse clicks, keyboard presses, or page loading.


Browsers also support DOM event handlers, which are defined in the attributes of HTML elements. This means that you can define an event handler directly in HTML instead of defining it in JavaScript code.

Here is an example of HTML code that defines an onclick event handler for a button element:

In this example, an onclick event handler is assigned to a button element using an attribute. When the user clicks the button, the browser displays an alert window with the text "You pressed the button!".

Here is another example of HTML code that defines an onmouseenter event handler for a div element:

Using JavaScript in an HTML document usually happens in two ways: by embedding the code within the HTML document or by referencing a separate JavaScript file.

## Inline scripts

The first way to include JavaScript code in an HTML document is to use the **<script>** tag. This tag contains the JavaScript code that is executed when the HTML document is loaded. The tag is shown in the example in the head section, but it doesn't have to be exactly there. The head is loaded before the body, so if you want the script to be loaded only after the rest of the HTML has already been loaded, it is recommended to place it at the end of the body.

```javascript
<!DOCTYPE html><html><head><title>Using JavaScript in an HTML document</title><script>
        alert("Hei maailma!");
    </script></head></html>
```

---

## External scripts

Another way to use JavaScript in an HTML document is to refer to a separate JavaScript file. The JavaScript file is attached to the HTML document using the **<script>** tag, with the file location written in the **src** attribute. The script can be located at the application's own address (in which case it can be referred to with just the filename without a complete URL) or anywhere on the Internet.

### HTML Document:

```html
<!DOCTYPE html><html><head><title>Using JavaScript in an HTML document</title><script src="scripts.js"></script></head><body> <button onclick="tervehdi()">Say hello</button></body></html>
```

### JavaScript file (scripts.js):

```javascript
function greet() {
  alert("Hello world!");
}
```

Note that functions in a separate JavaScript file are available in all parts of the HTML document as long as they are correctly linked to the HTML file.

---

## DOM event handlers

HTML DOM event handlers are an important feature of JavaScript that allow us to define what happens when a user interacts with a webpage. DOM events can include mouse clicks, keyboard presses, or page loading.

Browsers also support DOM event handlers, which are defined in the attributes of HTML elements. This means that you can define an event handler directly in HTML instead of defining it in JavaScript code.

Here is an example of HTML code that defines an onclick event handler for a button element:

```html
<!DOCTYPE html><html><head><title>DOM event handler</title></head><body> <button onclick="alert('Painoit nappia!')">Press me!</button></body></html>
```

In this example, an onclick event handler is assigned to a button element using an attribute. When the user clicks the button, the browser displays an alert window with the text "You pressed the button!".

Here is another example of HTML code that defines an onmouseenter event handler for a div element:

```html
<!DOCTYPE html><html><head><title>DOM event handler</title></head><body><div onmouseenter="alert('Hiiri on nyt sisällä!')"> This is a div element</div></body></html>
```

---

## Practice

@embed 71123ce2c099


Use of JavaScript in an HTML Document

This course is an introduction to web development and focuses on the basics of HTML, CSS, JavaScript and backend systems. The aim of the course is to provide students with the necessary skills and knowledge to design, develop and understand simple web applications.

This course is an introduction to web development and focuses on the basics of building websites, namely HTML, CSS, JavaScript, and fundamentals of backend systems. The goal of the course is to provide you with the necessary skills and knowledge to design and develop simple full-stack web applications, as well as understand web applications made by others.

In the first part, HTML is studied, which is a markup language used in building websites.


The second part covers the basics of CSS, such as the use of style sheets, rules, selectors, and formatting. It also covers advanced features of CSS, such as animations and responsive design.

In the third part, we will study JavaScript, which is currently an incredibly important tool in both frontend and backend development, and thus also in cybersecurity and ethical hacking.

In the final part, we will learn how to build back-end systems using the Python Flask framework. You will learn the basics of back-end systems, such as using databases, authentication, session management, and access control.

You can do the course exercises on your own computer if you want, but each code example has a button that allows you to directly run the code in the browser and see what the page looks like or what the script prints. So you do not need to install anything, but you can if you want.

It is recommended but optional to create an account on replit.com service. In that case, you can just click "Fork" on the code examples to make a copy for yourself to play with

Use of JavaScript in an HTML Document

Inline scripts

Learn to hack — start here