Type to search

3 Secret Ways To Link JavaScript To Html

Programming

3 Secret Ways To Link JavaScript To Html

Share

If you are a new student of any Javascript course, the first set of questions you will have to answer will include how to link Javascript to HTML.

It isn’t a bad thing to look for the answer too even if you aren’t a student. And I count the question to be a good start into the amazing world of Javascript and its frameworks.

You will learn how to link any javascript file or code to an HTML file on this page.

 

Link Javascript To Html

Place script tag in the head section of the HTML and give it src and type attribute.

You should be familiar with linking to another file in the head section of HTML if you are learning Javascript because that is the way external CSS file is referenced.

And

I think it is best to know CSS before delving into Javascript. Anyways, it isn’t bad to start from Javascript too.

What you will put in the head will look like:

<script type = “text/javascript” src = “script.js”></script>

Where type indicates the type of file, in this case, text/javascript. And src points to the location of the file.

The above code will use the script.js file you specified but you can as well put the script on the body section of your HTML code.

That is referred to as an internal script and you do by placing the script tag <script> </script> in the body.

READ ALSO ABOUT  Tags In HTML (With Code Example)

 

Link Javascript To Html (External)

In the external way you use:

<script type = “text/javascript” src = “http://hotlegit.com/script.js”></script>

It is just the location that will change from. You link to a file in your website folder for internal linking, and in external, you will link to the location of the file on another website.

Link Jquery To HTML (Internal)

As you might have known that JQuery is a little different from Javascript. Linking it to HTML is different to how you link Javascript to HTML.

In JQuery you will get the Library from the official site and you link to it from your HTML code.

The code below is an internal way of linking to JQuery in HTML you can use a similar way for Javascript too.

Some programmers don’t recommend this way due to some reasons that I will explain soon.

<!DOCTYPE html>

<html>

<head>

<script type=”text/javascript” src=”jQuery-1.8.3.js”></script>

<script type=”text/javascript”>

   $(function(){

      alert(“This Is JQuery”);

   });

</script>

</head>

<body>

<p>More Content Will Go Here</p>

</body>

</html>

 

Link JQuery To HTML (External)

The other way to link JQuery to HTML is using an external source:

<script type=”text/javascript” src=”jQuery-1.8.3.js”></script>

<script src=”script/external.js”></script>

Note that there are two src in each line of code. The top links to the JQuery library while the second links to your actual JQuery code located in script folder.

Whenever you want to use JQuery always load the library file before the script you wrote.

You can use this as well in both internal and external because JQuery can start with either $ or jQuery.

READ ALSO ABOUT  5 Tips: How To Be Good Programmer

jQuery.each(arr, function(i) { console.log(i); });

 

On a final note.

You should always put your script at the bottom part of the HTML body so as to allow all the libraries and HTML on the page to load before the script.

Javascript works on HTML and if the HTML hasn’t load before the script starts working, you know there will be nothing to work on for the script.

Save yourself the time writing the same Javascript code on all the pages by putting the code in separate .js file and link to it from all the pages.

Link Javascript To Html

Leave a Comment

Your email address will not be published. Required fields are marked *

error: