Tutorial: How Javascript Works
Tags: javascript, webdev, programming, codenewbie
Published: 2022-01-31 09:44:46

---
title: Tutorial: How Javascript Works
published: true
date: 2021-01-10 01:16:04 UTC
tags: [javascript, webdev, programming, codenewbie]
canonical_url: https://www.devwares.com/blog//javascript-how-it-works
---

## How JavaScript is placed in our projects

They are several ways JavaScript can be placed in our projects.


The `<script>` Tag

JavaScript code is placed between the `<script>`and `<script>`tags in HTML. This is one of the ways JavaScript can be placed in our codes.

**Code:**

```html
<script>document.getElementById("demo").innerHTML = "My First JavaScript";</script>

```

JavaScript in `<head>`

JavaScript can also be included in the `<head>` tag. A JavaScript function is placed in the `<head>` section of an HTML page in this example. When a button is pressed, the function is activated (called):

**Code:**

```html
<!DOCTYPE html>
<html>
  <head>
    <script>
      function myFunction() {
        document.getElementById('example-1').innerHTML = 'Paragraph changed.';
      }
    </script>
  </head>
  <body>
    <h1>A Web Page</h1>
    <p id="example-1">A Paragraph</p>
    <button type="button" onclick="myFunction()">Try it</button>
  </body>
</html>

```

Most of the time, the best place to put JavaScript code is at the bottom of the ,`<body>` element. Because script compilation slows down the display, placing scripts at the bottom of the `<body>` element increases display speed.

JavaScript in `<body>`JavaScript can also be included in the HTML code's body. In this example, a JavaScript function is placed in the `<body>` portion of an HTML page. When a button is pressed, the function is activated (called).

**Code:**

```html
<!DOCTYPE html>
<html>
<body>
    <h1>A Web Page</h1>
    <p id="demo">A Paragraph</p>
    <button type="button" onclick="myFunction()">Try it</button>
    <script>
    function myFunction() {
      document.getElementById("demo").innerHTML = "Paragraph changed.";
    }
    </script>

</body>
</html>

```

**External JavaScript files**

Scripts can also be inserted in external files: External scripts are useful when the same code is used in multiple web pages. The file extension.js is used for JavaScript files. To use an external script, enter the name of the script file in the src (source) property of a `<script>` tag:

**Code:**

```html
<script src="myScript.js"></script>

```

External file: myScript.js

**External JavaScript Advantages** There are some advantages of storing scripts in external files:

- It separates HTML and code
- It makes HTML and JavaScript easier to read and manage
- Cache JavaScript files aid in page loading speed.
- Adding many script files to a single page.

**External References** External scripts can be accessed through a full URL or a path relative to the currently displayed web page. This example utilizes a full URL to link to a script:

**Code:**

```html
<script src="https://www.devwares.com/js/myScript1.js"></script>

```

The following example employs a script located in a specific folder on the current website:

**Code:**

```html
<script src="/js/myScript1.js"></script>

```

The following example points to a script in the same folder as the current page:

**Code:**

```html
<script src="myScript1.js"></script>

```

[![Contrast Bootstrap UI Kit](https://www.devwares.com/static/6b149e3d75b230f7e8452ace9e21bb05/587b0/banner-ad-1.png "Contrast Bootstrap UI Kit")](https://www.devwares.com/product/bootstrap-contrast-pro)


## Resources

You may find the following resources useful:


- [Contrast Bootstrap 5 UI Kit](https://www.devwares.com/product/bootstrap-contrast/)
- [Tutorial: Javascript Data Output](https://www.devwares.com/blog/javascript-display)
- [Tutorial: Javascript Loop](https://www.devwares.com/blog/javascript-for-loop)
- [Tutorial: Javascript Functions](https://www.devwares.com/blog/javascript-functions)
- [Tutorial: Javascript Array Iteration](https://www.devwares.com/blog/javascript-iteration)
- [Contrast Installation](https://www.devwares.com/docs/contrast/react/Installation/)
- [Charts](https://www.devwares.com/docs/contrast/react/chart/)
- [Accordion](https://www.devwares.com/docs/contrast/react/components/accordion/)
- [Alert](https://www.devwares.com/docs/contrast/react/components/alert/)
- [Animation](https://www.devwares.com/docs/contrast/react/components/animations/)
- [Autocomplete](https://www.devwares.com/docs/contrast/react/components/autocomplete/)
- [Badges](https://www.devwares.com/docs/contrast/react/components/badge/)
- [Box](https://www.devwares.com/docs/contrast/react/components/box/)
- [Breadcrumb](https://www.devwares.com/docs/contrast/react/components/breadcrumb/)
- [ButtonGroup](https://www.devwares.com/docs/contrast/react/components/buttonGroup/)
- [ButtonToolbar](https://www.devwares.com/docs/contrast/react/components/buttonToolbar/)
- [Button](https://www.devwares.com/docs/contrast/react/components/buttons/)
- [Card](https://www.devwares.com/docs/contrast/react/components/card/)
- [Carousel](https://www.devwares.com/docs/contrast/react/components/carousel/)
- [Checkbox](https://www.devwares.com/docs/contrast/react/components/checkbox/)
- [Collapse](https://www.devwares.com/docs/contrast/react/components/collapse/)
- [DropDown](https://www.devwares.com/docs/contrast/react/components/dropdown/)
- [Footer](https://www.devwares.com/docs/contrast/react/components/footer/)
- [Icon](https://www.devwares.com/docs/contrast/react/components/icon/)
- [Iframe](https://www.devwares.com/docs/contrast/react/components/iframe/)
- [Input](https://www.devwares.com/docs/contrast/react/components/input/)
- [InputGroup](https://www.devwares.com/docs/contrast/react/components/inputgroup/)
- [ListGroup](https://www.devwares.com/docs/contrast/react/components/listgroup/)
- [Mask](https://www.devwares.com/docs/contrast/react/components/mask/)
- [Modal](https://www.devwares.com/docs/contrast/react/components/modal/)
- [Multiselect](https://www.devwares.com/docs/contrast/react/components/multiselect/)
- [Notification](https://www.devwares.com/docs/contrast/react/components/notification/)
- [Pane](https://www.devwares.com/docs/contrast/react/components/pane/)
- [Panel](https://www.devwares.com/docs/contrast/react/components/panels/)
- [Progress](https://www.devwares.com/docs/contrast/react/components/progress/)
- [Radio](https://www.devwares.com/docs/contrast/react/components/radio/)
- [Rating](https://www.devwares.com/docs/contrast/react/components/rating/)
- [Select](https://www.devwares.com/docs/contrast/react/components/select/)
- [Select 2](https://www.devwares.com/docs/contrast/react/components/select2/)
- [SmoothScroll](https://www.devwares.com/docs/contrast/react/components/smoothscroll/)
- [Slider](https://www.devwares.com/docs/contrast/react/components/slider/)
- [Spinner](https://www.devwares.com/docs/contrast/react/components/spinner/)
- [Stepper](https://www.devwares.com/docs/contrast/react/components/stepper/)
- [Switch](https://www.devwares.com/docs/contrast/react/components/switch/)
- [Navbar](https://www.devwares.com/docs/contrast/react/navigation/navbar/)
- [Pagination](https://www.devwares.com/docs/contrast/react/navigation/pagination/)
- [Sidebar](https://www.devwares.com/docs/contrast/react/navigation/sidebar/)
- [Tab](https://www.devwares.com/docs/contrast/react/navigation/tabs/)
- [Date Picker](https://www.devwares.com/docs/contrast/react/sections/datepicker/)
- [FileUploader](https://www.devwares.com/docs/contrast/react/sections/fileuploader/)
- [Time Picker](https://www.devwares.com/docs/contrast/react/sections/timepicker/)
- [Editable Table](https://www.devwares.com/docs/contrast/react/table/editabletable/)
- [Table](https://www.devwares.com/docs/contrast/react/table/table/)
- [Data Table](https://www.devwares.com/docs/contrast/react/table/datatables/)
- [Widgets]
(https://www.devwares.com/docs/contrast/react/widgets/)
- [Forms]
(https://www.devwares.com/docs/contrast/react/forms/)