Unobtrusive DOM script programming
Creating your code and compatible distribution based on a good testable core is the basic concept of Unobtrusive DOM scripting. Writing unobtrusive code means a complete separation from your HTML content: the data comes from the server, and JavaScript code is used to make it dynamic. The most important side effect of achieving this complete separation is that your code can be upgraded/downgraded perfectly between different browsers. Using this, you can provide advanced content to browsers that support it, and hide it calmly on unsupported browsers.
Writing modern, Unobtrusive code includes two aspects: Document Object Model (DOM) and JavaScript events. In this book, I will give an in-depth explanation of both aspects.
Document Object Model
DOM is a popular method for representing XML documents. It may not be the fastest, lightest, or easiest to use, but it is the most popular. Most web development languages (such as Java, Perl, PHP, Ruby, Python, and Javascript) support it. DOM is designed to provide developers with an intuitive way to navigate into the XML hierarchy.
Because valid HTML is only a subset of XML, maintaining a way to effectively parse and browse DOM documents is essential to simplify JavaScript development. Fundamentally, most of the interactions that appear in JavaScript occur between JavaScript and the different HTML elements contained in the page; DOM is an excellent tool to simplify this process. Programs 1-4 show some examples of using DOM to navigate within a page and find different elements and then manipulating them.
Program 1-4. Use the document object model to locate and manipulate different DOM elements
<html>
<head>
<title>Introduction to the DOM</title>
<script>
//We can't operate the DOM until the document is fully loaded
= function() {
//Find all <li> elements in the document
var li = ("li");
// Then add borders to them all
for ( var j = 0; j< ; j++ ) {
li[j]. = "1px solid #000";
}
//Locate the element with ID 'everywhere'
var every = ( "everywhere" );
// and remove it from the document
( every );
};
</script>
</head>
<body>
<h1>Introduction to the DOM</h1>
<p class="test">There are a number of reasons why the DOM is awesome,
here are some:</p>
<ul>
<li >It can be found everywhere.</li>
<li class="test">It's easy to use.</li>
<li class="test">It can help you to find what you want,
really quickly.</li>
</ul>
</body>
</html>
DOM is the first step in developing Unobtrusive JavaScript code. With the ability to navigate HTML documents quickly, all the JavaScript/HTML interactions that come with it will be so simple.
event
Events combine all user interactions within an application. In a well-designed JavaScript application, you will have the data source and its visual representation (inside the HTML DOM). In order to synchronize these two aspects, you have to monitor the user's interaction and try to update the user interface accordingly. The combination of DOM and JavaScript events is the basic combination that makes modern web applications work.
All modern browsers provide a series of events that are triggered as long as a specific interaction occurs, such as the user moving the mouse, typing the keyboard, or leaving the page, etc. Using these events, you can register the code to a specific event, and once that event occurs, your code will be executed. Programs 1-5 show an example of this interaction, where the <li> element in the webpage changes the background color as the user's mouse passes.
Program 1-5. Use DOM and events to provide some visual effects
<html>
<head>
<title>Introduction to the DOM</title>
<script>
//We can't operate the DOM until the document is fully loaded
= function(){
//Find all <li> elements, with event handler attached
var li = ("li");
for ( var i = 0; i < ; i++ ) {
//Move the mouse into the event handler to attach it to the <li> element,
//This program changes the background color to blue
li[i].onmouseover = function() {
= 'blue';
};
//Move the mouse out of the event handler to attach to the <li> element,
//This program changes the background color of <li> back to white
li[i].onmouseout = function() {
= 'white';
};
}
};
</script>
</head>
<body>
<h1>Introduction to the DOM</h1>
<p class="test">There are a number of reasons why the DOM is awesome,
here are some:</p>
<ul>
<li >It can be found everywhere.</li>
<li class="test">It's easy to use.</li>
<li class="test">It can help you to find what you want,
really quickly.</li>
</ul>
</body>
</html>
JavaScript events are complex and diverse. Most of the code or applications in this book exploit events in some way. Chapter 6 and affiliated B are completely focused on events and their interactions.
JavaScript and CSS
Dynamic HTML is based on the interaction between DOM and event. At the core level, dynamic HTML represents the interaction of JavaScript and CSS information attached to the DOM element.
Cascading style sheets (CSS) serve simple and unabashed web pages as the layout standard. While minimizing user-side compatibility issues, it provides developers with strong controllability. Fundamentally, dynamic HTML is about exploring what JavaScript and CSS can achieve when interacting with each other and how best to use the union to achieve impressive results.
More advanced interaction examples such as drag and drop elements and animation effects are shown in Chapter 7. There I will discuss them in depth.
Previous page123456Next pageRead the full text