How to link Javascript to html

How to Link Javascript to HTML

In this article, we will learn how to link javascript to HTML and some interesting codes for example to show.

A Javascript (Js) is the most popular programming language in web Technologies. Javascript is used to create a dynamic web page and modern browsers are support javascript specifications and continue to update or adapt by browsers.

Javascript is everywhere in the website you just create a page you want to show some slider image, pop up, sticky top button code should be in javascript.

The web developer has become one of the most open and opportunities in javascript. Most commonly using HTML, CSS, and js can embed code within the web page using HTML script tag and to execute the code in browsers. In general, web developers choose Js for code embedded.

Place of the script tag

In the HTML script tag are allow in either <head> tag or <body> tag elements, and should tag to place in . and most the web developer are recommended to place the script tags in before body closing tag</body>

Because the javascript is might depends on Html elements on the page.if the javascript script placed in the head tag means it loaded and executed before all of the Html files on the page.

Sometimes you are using a slider means it should be taking time to load and slow the website.

External JavaScript Example

  
<!DOCTYPE html>
<html>
<head>
<title>External JavaScript Example</title>

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

</head>
<body>

<button onClick="linkjs()">Click Me</button>

</body>
</html>

linkjs script

  
function linkjs()
{
alert("embedded js script into the html file...");
}

Inline Javascript Example

  
<!DOCTYPE html>
<html>
<head>
<title>Inline Javascript Example</title>

<script>

function linkjs() {
	alert("inline js script into the html file...")
	}
</script>

</head>
<body>

<button onClick="linkjs()">Click Me</button>

</body>
</html>

This demo helps you to use javascript or JSON file fetch from the folder or API function using URL to your website. Here is the code below.

First I create the JSON separate file and saved it in the folder.

And then some Html code was used to create tables and data fetch from JSON files and the design using Bootstrap open-source.

JSON File save extension .json

File.json

  
  {
   
   "data": [
      {
         "id": 1,
         "email": "kumar.chandra@dailyaspirans.com",
         "first_name": "kumar",
         "last_name": "chandra"
		
      },
      {
         "id": 2,
         "email": "ravi.varma@dailyaspirans.com",
         "first_name": "ravi",
         "last_name": "varma"
         
      },
      {
         "id": 3,
         "email": "professor.serigo@dailyaspirans.com",
         "first_name": "professor",
         "last_name": "serigo"
         
      },
      {
         "id": 4,
         "email": "Tokyo.dam@dailyaspirans.com",
         "first_name": "Tokyo",
         "last_name": "dam"
         
      },
      {
         "id": 5,
         "email": "raman.krishna@dailyaspirans.com",
         "first_name": "Raman",
         "last_name": "Krishna"
         
      },
      {
         "id": 6,
         "email": "priya.ramkumar@dailyaspirans.com",
         "first_name": "Priya",
         "last_name": "Ramkumar"
          
      }
   ]
   
}

jsonfile.html

  
<!DOCTYPE html>
<html>
<head>
<title>How to link json file </title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>


$(document).ready(function(){

$.ajax({
    type: "GET",
    url: "http://localhost/jsonfiles/file.json",
    dataType: 'json',
    success: function (data) {
    $.each(data.data,function(d,results){
     //console.log(data);

 $("#jsonData").append(
                        "<tr>"
                          +"<td>"+results.first_name+"</td>"
                          +"<td>"+results.last_name+"</td>"
                          +"<td>"+results.id+"</td>"
                          +"<td>"+results.email+"</td>"
                          
                          +"</tr>" )
                    })
 } 
});
});
</script>
</head>
<body>
<div class="container">
  <table id="jsonTable"  class="table">

        <thead class="thead-dark">
            <tr>
            <th scope="col">Firstname</th>
            <br>
            <th scope="col">Lastname</th>
            <br>
            <th scope="col">ID</th>
            <br>
            <th scope="col">Email</th>
        </tr>
        </thead>
        <tbody id="jsonData"></tbody>    
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.min.js" integrity="sha384-cn7l7gDp0eyniUwwAZgrzD06kc/tftFf19TOAs2zVinnD/C7E91j9yyk5//jjpt/" crossorigin="anonymous"></script>
</body>
</html>

Now you will know how to link javascript to Html and I hope you will learn sometime in these codes and start to code and enjoy ...!

How to link Javascript to html