Online javascript lessons for beginners - embedding javascript in html - javascript and html

Main navigation tabs of the web site:

Embedding JavaScript in HTML - Online JavaScript lessons for Beginners

JavaScript tutorial

Web development tutorials

Homepage

Main navigation links of JavaScript Tutorial section

Embedding JavaScript in HTML - Online JavaScript lessons for Beginners

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.

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  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.

Page contents: Online javascript lessons for beginners - embedding javascript in html - javascript and html

Page URL: http://www.webdevelopersnotes.com/tutorials/javascript/ embedding_javascript_html_web_pages.php3

50+ web hosting FAQs

Search engine for your website

Free software from Google - The Google Pack Collection

Create your own search engine

Search WebDevelopersNotes.com