WDN Logo

home-icon Home / JavaScript / Embedding JavaScript in HTML – Online JavaScript lessons for Beginners

Embedding JavaScript in HTML – Online JavaScript lessons for Beginners

Embedding JavaScript in HTML

The first Javascript lesson for the beginner

As I mentioned in the introduction, these online javascript lessons have been developed keeping the beginner in mind. Hence we start with the basics – how to embed JavaScript in an HTML document.

Since JavaScript started off as a client-side language (it is now extensive used in Microsoft’s ASP technology for server-side scripting), we need to understand how we can include it on web pages so that browsers (clients) can read it.

Sponsored Links

JavaScript works with HTML to bring interactivity to otherwise static documents and can be embedded inside HTML documents in three ways:

  • The code is placed between <SCRIPT> – </SCRIPT> tags.
  • Code is included inside an HTML tag.
  • The entire code is placed in another file, which is called through the SRC attribute of the <SCRIPT> tag.

Using the <SCRIPT> tags

JavaScript code is most commonly included between <SCRIPT> – </SCRIPT> tags. For example:

<HTML>
<HEAD>
<TITLE>Page title</TITLE>
</HEAD>
<BODY>
<SCRIPT LANGUAGE="JAVASCRIPT" TYPE="TEXT/JAVASCRIPT">
<!--

some javascript code

//-->
</SCRIPT>
</BODY>
</HTML>

The LANGUAGE attribute explicitly informs the browser that the enclosed code is JavaScript. The TYPE specifies that the code is in TEXT format.
The <!– and //–> are placed around the code and hide it from browsers that do not understand JavaScript. I advise you to always use these “code hiding” tags since their inclusion is harmless; however if you leave them, the document display is completely ruined in non-JavaScript browsers.

JavaScript code inside HTML tags

To make interactive pages you need to catch or recognise user actions (also called events). The events generated by the user may be mouse clicks, mouse movement etc. To capture these events, we employ small JavaScript code that is placed right inside an HTML tag. Such code is called an event handler.

<A HREF="http://www.webdevelopersnotes.com" 
onmouseover="alert('Go back to Home Page')">
Home Page</A>

Here we have an anchor tag that surrounds some text (‘Home page’). Don’t worry if you can’t understand the code (you are not supposed to at this stage). Just take a note of how the code is embedded inside the anchor tag. onmouseover is an event handler and as its name suggests, it manages a mouse over action. In this case, onmouseover event handler triggers some response whenever the user moves the mouse cursor over the text enclosed between the anchor tags.

Placing JavaScript code in another file

Another common practice is to place the entire JavaScript code in another file. This external file can then be called using the SRC attribute of <SCRIPT> tag.

<SCRIPT LANGUAGE="JAVASCRIPT" SRC="mycode.js"
TYPE="TEXT/JAVASCRIPT">
<!--

//-->
</SCRIPT>

Note that the external file containing the JavaScript code has .js extension. It is included in the HTML document through the SRC attribute that takes the URL of the file as its value.

There are three main advantages in using this technique. Firstly, you don’t need to place the code in all HTML documents, secondly, if a change is required you have to modify only one file instead of several and thirdly, it protects (though partly!) precious code. However, the main disadvantage is that the server has to locate and open one more file.

Equipped with this basic knowledge, let’s move towards creating your first script.

Sponsored Links

Search

Your comments
Star icon IMPORTANT Have a question / problem? Click here to ask an expert.

Sponsored Links

Tips

How do I view a deleted web page?
Is there a way to view a deleted web page - one that is no longer available? Yes there is and the solution is quite simple. [more...]

Fact

In an attempt to push sales of its digital books, Amazon, offers the Kindle application which runs on a variety of platforms, both desktop and mobile. This is in addition to their hardware Kindle e-book readers. [more...]

Share on Whats app Share on Facebook Share on Twitter Share on Google plus