Learn HTML,CSS, Python etc from the foundation

Thursday, February 14, 2019

EXEMPLARY GUIDE ON HOW TO EMBED JAVASCRIPT TAGS IN HTML DOCUMENT

No comments :

Hi, in this lesson, I’m going to take you by hand and walk you through the two major ways by which you can embed JavaScript tags in the HTML document tree. Just like Cascading Style Sheet, you can confidently attach JavaScript file either externally or internally in HTML document.  The only slight difference here is that the internal placement of JavaScript into the HTML document can be done in two different ways depending on the programmer intention.  Shortly let me show you how to do all of these in with the aid of illustrative examples.
HOW TO EMBED JAVASCRIPT TAGS IN HTML DOCUMENT
1.    EXTERNAL METHOD
One of the best ways to place your JavaScript in HTML document is by using an external method. This means that you can place your JS code in an external folder and then reference it between the SCRIPT tags of the HTML document using the compulsory “ .js ” extension immediately after the file name. For you to reference the source inside the SCRIPT tags, you must include the “ SRC “ attribute followed by an equal sign ( = ) and then the file path which points to the location of the JavaScript.
Look below for clarity
<HEAD>
<TITLE>CODING LEGIT</TITLE>
  <SCRIPT LANGUAGE = “Javascript”
                      SRC = “scripts/Javascript_file_name.js”>
  </SCRIPT>
</HEAD>

Closely looking at the above code, you will observe that I added the following lines to our opening script
SRC = “scripts/Javascript_file_name.js”>
SRC stands for the source or rather, file source. The equal sign (=) you see immediately after “SRC” is simply an indicator. It tells us that whatever comes after it is the source of our JavaScript we intend to embed in the HTML document.  Notice the double quotation marks, it is very important. Miss it, your code will display nothing.

2.    INTERNAL METHOD
Internally method of JavaScript placement can be done in two ways as I have stipulated in the introductory part of this lesson.  
2a. In Body Section
You can directly write your JS codes between the BODY tags of the HTML document like this:
<BODY>
     <!HTML codes if any, then JS below
            <SCRIPT LANGUAGE = “Javascript”>
                           Confirm(“BOY OR GIRL”)
            </SCRIPT>
</BODY>
The reason why you need to put the HTML codes first before the JS code is simply because the web page itself will have to load first before the scripts can be read.
2b. In Head Section
You can also place your JS codes in the HEAD section of your HTML document but you have to do an important thing before any HTML or CSS element can be loaded. That important thing you have to do is parsing the script codes. Without parsing the scripts, it will be very difficult to be read.
Nonetheless, your JS format in the HEAD section  of the HTML document will look like this:
<HEAD>
<TITLE>CODING LEGIT</TITLE>
            <SCRIPT LANGUAGE = “Javascript”>
                           Confirm (“BOY OR GIRL”)
            </SCRIPT>
</HEAD>

WRAPPING UP

In our next lesson, we are going to be looking at an interesting topic. Till then, keep practicing.

No comments :

Post a Comment