Javascript Usage

Windframe ResourcesBlog Contact

Tutorial: How Javascript Works

By Emmanuel Chinonso

Web Developer

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>

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:

<!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:

<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:

<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:

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

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

Code:

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

Build modern projects using Bootstrap 5 and Contrast

Trying to create components and pages for a web app or website from scratch while maintaining a modern User interface can be very tedious. This is why we created Contrast, to help drastically reduce the amount of time we spend doing that. so we can focus on building some other aspects of the project.

Contrast Bootstrap PRO consists of a Premium UI Kit Library featuring over 10000+ component variants. Which even comes bundled together with its own admin template comprising of 5 admin dashboards and 23+ additional admin and multipurpose pages for building almost any type of website or web app.
See a demo and learn more about Contrast Bootstrap Pro by clicking here.

Basics of Javascript

Javascript statement, syntax and comments

Comments

...