postImage

Tutorial: How Javascript Works

blogImage

By Emmanuel Chinonso

Web Developer

How JavaScript is placed in our projects

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

Contrast Bootstrap UI Kit

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:

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

1<!DOCTYPE html>
2<html>
3 <head>
4 <script>
5 function myFunction() {
6 document.getElementById('example-1').innerHTML = 'Paragraph changed.';
7 }
8 </script>
9 </head>
10 <body>
11 <h1>A Web Page</h1>
12 <p id="example-1">A Paragraph</p>
13 <button type="button" onclick="myFunction()">Try it</button>
14 </body>
15</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:

1<!DOCTYPE html>
2<html>
3<body>
4 <h1>A Web Page</h1>
5 <p id="demo">A Paragraph</p>
6 <button type="button" onclick="myFunction()">Try it</button>
7 <script>
8 function myFunction() {
9 document.getElementById("demo").innerHTML = "Paragraph changed.";
10 }
11 </script>
12
13</body>
14</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:

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

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

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

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

Code:

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

Contrast Bootstrap UI Kit

Create Stunning websites and web apps

Trying to build out all user interfaces and components for your website or web app from scratch can become a very tedious task. A huge reason why we created Contrast Bootstrap to help 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 UI Kit featuring over 10000+ component variants. Together with a template of 5 admin dashboards and 23+ additional multipurpose pages template for building almost any type of website or web app. You can view a demo and learn more about Contrast by clicking here.Try contrast pro

ad-banner

Contrast Bootstrap PRO was built using the most popular CSS framework Bootstrap to help build your next landing, admin SAAS, prelaunch etc project with a clean, prebuilt and well documented template and UI components.Learn more about Contrast

Related Posts

Comments

...