1. Tech

Your suggestion is on its way!

An email with a link to:

http://javascript.about.com/library/bljshtml.htm

was emailed to:

Thanks for sharing About.com with others!

JavaScript and HTML

Join the Discussion

Questions? Comments?

There are four different ways to attach JavaScript into HTML. Let's look at these four alternatives and consider how appropriate each is and when it should be used.

<script type="text/javascript" src="myscript.js"></script>

This is a pure HTML solution to connecting JavaScript into your HTML. With this method of attaching JavaScript to HTML, all of the JavaScript is in a separate file (in the example myscript.js and there is no JavaScript whatsoever in the HTML.

When your visitor uses a browser that either doesn't support JavaScript or has JavaScript disabled, this method of attaching your JavaScript to the HTML will simply result in this code being ignored and the javaScript code will not even be downloaded. This makes this method of linking JavaScript to HTML the most efficient way of doing so as it removes the overhead of the JavaScript almost completely for the browsers that can't use it.

If you place all of your JavaScript into external files and link them into the head of your page uusing commands like this you will end up with as complete a separation of content (HTML) and behaviour (JavaScript) as can be done. This is sometimes referred to as unobtrusive JavaScript as it results in no JavaScript whatever obtruding into the HTML.

<script type="text/javascript">
/* <![CDATA[ */
alert('JavaScript alert');
/* ]]> */
</script>

This is a hybrid solution where the JavaScript code is embedded into the HTML file itself. The JavaScript code in this instance is enclosed entirely within the script element and so it is still obvious what is HTML and what is JavaScript.

If you are using XHTML then enclosing the JavaScript inside of a CDATA tag is essential in order to ensure that the content of the JavaScript doesn't get confused with the XHTML. With HTML the content of the script tag is treated as CDATA and so the tag identifying the content as such is not required but does not do any hharm.

The one thing to avoid when embbedding JavaScript into the HTML like this iis to make sure that the JavaScript is not enclosed within an HTML comment. Doing that was essential when Netscape 1 and IE2 were still in common use but today the only effect doing that has is to hide your JavaScript from content management systems and XHTML so that it is as if the JavaScript doesn't exist if you use either of those two options. The only effect that it has with static HTML is to make the page slightly larger for no reason.

This solution provides a simple way of combining the HTML and JavaScript into one file while you are testing the page while making it easy to separate the JavaScript out into its own file once testing is completed.

onclick="alert('javascript alert');"

This code is pure JavaScript that can be attached into any HTML tag in order to attach processing to handle the specified event for that tag.

Mixing JavaScript like this inside of your HTML used to be the only way of attaching events to HTML but the modern DOM techniques make jumbling JavaScript like this into your HTML page unnecessary. In addition, having the JavaScript and HTML jumbled together makkes your web page harder to maintain and will result in your having to change a lot more code if you need to change a JavaScript that is used in a large number of pages.

The name of the event handler on the front of this command when the command is embedded into HTML is the only instance where JavaScript is not case sensitive. Because the JavaScript and HTML is jumbled together when you code like this the event handler name can be capitalized however you like in this one instance. Specifying it in all lowercase is the best way of coding it since that makes it easier to extract that JavaScript out of the HTML and move it into a separate JavaScript file where the event handler name must be specified in all lowercase.

<a href="javascript:alert('JavaScript alert');">

This way of incorporating JavaScript directly into an HTML attribute should be avoided at all times. Not only is the HTML and JavaScript jumbled together with this way of coding but the code is written in such a way as to break the HTML when JavaScript is not available. Also attaching JavaScript like this means that the JavaScript is not being processed by an event handler which may affect whether the javaScript is able to work properly even when JavaScript is enabled in the browser.

See More About
Related Video
Create Tables in HTML
Using PHP With HTML

©2014 About.com. All rights reserved.