DEV Community

Devwares profile image Sampson Ovuoba
Sampson Ovuoba for Devwares

Posted on • Originally published at devwares.com on

Tutorial: How Javascript Works

#javascript #webdev #programming #codenewbie

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:

<script>document.getElementById("demo").innerHTML = "My First JavaScript";</script>
Enter fullscreen mode Exit fullscreen mode

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:

<!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>
Enter fullscreen mode Exit fullscreen mode

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:

<!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>
Enter fullscreen mode Exit fullscreen mode

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:

<script src="myScript.js"></script>
Enter fullscreen mode Exit fullscreen mode

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:

<script src="https://www.devwares.com/js/myScript1.js"></script>
Enter fullscreen mode Exit fullscreen mode

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

Code:

<script src="/js/myScript1.js"></script>
Enter fullscreen mode Exit fullscreen mode

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

Code:

<script src="myScript1.js"></script>
Enter fullscreen mode Exit fullscreen mode

Contrast Bootstrap UI Kit

Resources

You may find the following resources useful:

Top comments (0)

Read next

sam45 profile image

looking forward to meeting senior frontend developers

samsandhu -

adeleyeayodeji profile image

How to Stop Spam Comments on WordPress WITHOUT Any Plugin

Adeleye Ayodeji -

kachkolasa profile image

Laravel Application Security

Kachkol Asa -

yogini16 profile image

Any() vs Count, Which one to choose??

yogini16 -