Unobtrusive JavaScript is a set of techniques and principles for writing code that's separated from your web page's structure.
It's best to learn about unobtrusive JavaScript by way of example.
In this example, you'll see JavaScript code that works perfectly fine but doesn't adhere to unobtrusive JavaScript principles. The script contains a function called mouseClick()
that, when triggered, opens up an alert dialog box with the message, You clicked me!.
The HTML markup is a simple unordered list of links. The hyperlinks<a>
are assigned an onclick
attribute which triggers the mouseClick()
function when you click on them.
<html>
<head>
<script type="text/javascript">
// A simple function that opens an alert dialog box with a message
function mouseClick()
{
alert( 'You clicked me!' );
}
</script>
</head>
<body>
<ul id="nav">
<li><a onclick="javascript:mouseClick...