Free Essay

Document Model Prototypes


Submitted By joshua50
Words 3453
Pages 14
Document Object Model Prototypes, Part 1: Introduction

This article is the first installment of a two-part series that introduces advanced JavaScript techniques in Windows Internet Explorer 8.
Web applications have come a long way since the birth of the static Web page. Today, Web developers need improved programming functionality, flexibility, and features to enable them to build the next generation of Web applications. The Internet Explorer Web platform provides many of the features and functionality necessary to build those applications. Where the Web platform's built-in support ends, JavaScript, the principle scripting language used on the Web, is often used to code innovative new features that supplement the Web platform, cater to Web site specific scenarios, normalize differences between browsers, and so on.
To further empower Web developers with the programming tools necessary to build new JavaScript scenarios that innovate, extend, and build-upon the Web platform, Internet Explorer 8 offers a collection of features that extend some of JavaScript's advanced functionality into the Document Object Model (DOM). This article provides an overview of JavaScript prototype inheritance and introduces the DOM prototypes feature available in Internet Explorer 8; Part 2 introduces a new type of JavaScript property called an accessor property (or getter/setter property).
Prototypes in JavaScript
To begin a discussion of DOM prototypes, it is crucial to understand the JavaScript notion of "prototypes." Simply put, a prototype is like a class object in other languages—it defines the properties shared by all instances of that class. However, unlike a class, a prototype can be retrieved and changed at runtime. New properties can be added to a prototype or existing properties can be removed. All changes are reflected instantaneously in objects that derive from that prototype. How does this work? JavaScript is a dynamic language; rather than compiling the properties that exist on prototypes into static tables prior to execution, JavaScript must dynamically search for properties each time they are requested. For example, consider a basic inheritance scenario where a prototype "A.prototype" inherits from another prototype "B.prototype" and object "a" is an instance of prototype "A.prototype". If a property is requested on the instance object "a", then JavaScript performs the following search: 1. JavaScript first checks object "a" to see if the property exists on that object. It does not; therefore, JavaScript goes to Step 2. 2. JavaScript then visits "A.prototype" (the prototype of object "a") and looks for the property. It still doesn't find it so JavaScript goes on Step 3. 3. JavaScript finally checks "B.prototype" (the prototype of "A") and finds the property. This process of visiting each object's prototype continues until JavaScript reaches the root prototype. This series of links by prototype is called the "prototype chain".
Given the following code: console.log( );
The "property" property does not exist on the object "a" directly, but because JavaScript checks the prototype chain, it will locate "property" if it is defined somewhere in the chain (on "B.prototype" for example, as shown in the following figure).
Figure 1: A Prototype Chain
In JavaScript, an object's prototype cannot be directly accessed programmatically as drawn in the previous figure. The "links" from object "a" to prototype "A" to prototype "B" are generally hidden from the developer and only maintained internally by the JavaScript engine (some implementations may reveal this as a proprietary property). In this article, I will call this link the "private prototype", or use the syntax "[[prototype]]". For the programmer, JavaScript exposes prototype objects through a "constructor" object with a "prototype" property, as shown in the following figure. The constructor object's name is like the name of a class in other programming languages, and in many cases is also used to "construct" (create) instances of that object through the JavaScript new operator. In fact, whenever a JavaScript programmer defines a function: function A() { /* Define constructor behavior here */ }
Two objects are created: a constructor object (named "A"), and an anonymous prototype object associated with that constructor ("A.prototype"). When creating an instance of that function: var a = new A();
JavaScript creates a permanent link between the instance object ("a") and the constructor's prototype ("A.prototype"). This is the "private prototype" illustrated in the previous figure.
The prototype relationship exists for all of JavaScript's objects, including built-in objects. For example, JavaScript provides a built-in "Array" object. "Array" is the name of the constructor object. The "Array" constructor object's "prototype" property is an object that defines properties that are "inherited" by all Array instances (because the instance objects will include that prototype in their prototype chain). The Array.prototype object may also be used to customize or extend the built-in properties of any Array instances (e.g., the "push" property) as I will describe shortly. The following code illustrates the arrangement of constructor, prototype, and instance objects for "Array": var a = new Array(); // Create an Array instance 'a'
a.push('x'); // Calls the 'push' method of Array's prototype object
The following figure illustrates these relationships.
Figure 2: The relationship between an Array instance, its constructor, and its prototype
For each Array instance, when a property is requested (like "push"), JavaScript first checks the instance object to see if it has a property called "push"; in this example it does not, so JavaScript checks the prototype chain and finds the property on the Array.prototype object.
Web developers can add, replace, or "shadow" (override by causing a property to be found earlier in the prototype chain) any of the built-in properties in JavaScript because all built-in constructors have prototypes that are fully accessible. For example, to modify the behavior of the "push" built-in property for all Array instances, the developer simply needs to replace the "push" property in one location, the Array's prototype object:
Array.prototype.push = function () { /* Replaced functionality here */ };
At this point, all instances of Array will use the replaced functionality by default. To create a special case and specify alternate behavior for specific instances, define "push" locally on the instance to "shadow" the default "push" behavior:
a.push = function() { /* Specific override for instance "a" */ };
In some scenarios, the Web developer may not explicitly know the name of the constructor object for a given instance, yet may want to reach that instance's prototype. For this reason, JavaScript provides a "constructor" property that points to the constructor object used to create it. The following two lines of code are semantically equivalent:
Array.prototype.push = function () { /* Custom behavior here */ };
a.constructor.prototype.push = function () { /* Custom behavior here */ };
The capability to add to and modify prototypes is very powerful.
I like to think of the relationship between constructor, prototype, and instance as a triangle. Instances point to constructors via the "constructor" property. Constructors point to prototype via the "prototype" property. Prototypes are linked to instances via the internal [[prototype]], as shown in the following figure.
Figure 3: The relationship between constructors, prototypes, and instances.
DOM Prototypes
The prototype behavior just described has existed in Internet Explorer for a long time. For the first time. However, Internet Explorer 8 extends this semantic capability into the Document Object Model (DOM). When Web developers want to interact with a Web page through JavaScript, they must use and interact with DOM objects, which are not part of the core JavaScript language. In previous versions of Internet Explorer, the DOM only provided object "instances" to the JavaScript programmer. For example, the DOM property createElement creates and returns an element instance: var div = document.createElement('DIV'); // Returns a new instance of a DIV element
This 'div' instance (much like the Array instance 'a') is derived from a prototype that defines all of the properties that are available to that instance. Prior to Internet Explorer 8, the JavaScript constructor and prototype objects for 'div' instances (and all other instances), were not available to the Web developer. Internet Explorer 8 (when running in document mode: IE8) reveals the constructor and prototype objects to JavaScript—the same objects used internally in this and previous versions of the browser. In addition to allowing the customization of DOM object instances by way of their prototypes as described in the previous section, it also helps to clarify the internal representation of the DOM and its unique hierarchy in Internet Explorer (unique compared to other browsers).
DOM prototypes and constructors are similar but not identical to the built-in JavaScript prototypes and constructors as previously described. To help clarify these differences, I will refer to the DOM analog of a JavaScript constructor object as an "interface object"; prototype objects in the DOM I will call "interface prototype objects," and I will call instance objects in the DOM "DOM instances." For comparison, let me reuse the triangle relationship diagram I presented earlier for JavaScript prototypes. DOM instances point to interface objects via the "constructor" property. Interface objects point to interface prototype objects via the "prototype" property. Interface prototype objects are linked to DOM instances through the same internal [[prototype]].
Figure 4: The relationship between interface objects, interface prototype objects, and DOM instances.
With Internet Explorer 8 running in IE8 standards mode, each DOM instance (such as window, document, event, and so on) has a corresponding interface object and interface prototype object. However, these objects differ from their JavaScript analogs in the following ways: • Interface objects • o Interface objects generally do not have "constructor" functionality (cannot create a new DOM instance by using the JavaScript new operator). Exceptions include a few interface objects shipped in previous versions of Internet Explorer: ▪ Option (alias for HTMLOptionElement) ▪ Image (alias for HTMLImageElement) ▪ XMLHttpRequest ▪ XDomainRequest, which is new to Internet Explorer 8 o The "prototype" property of interface objects may not be replaced (changed). An interface object's prototype property cannot be assigned a different interface prototype object at run-time. • Interface prototype objects • o Interface prototype objects define the properties available to all DOM instances, but these built-in properties cannot be permanently replaced (e.g., the JavaScript delete operator will not remove built-in properties).
Other subtle but important differences are called out near the end of this article.
DOM Prototype Inheritance
As suggested by the W3C DOM specs and formalized by the W3C WebIDL draft standard (as of this writing), interface objects that describe the DOM are organized hierarchically in an inheritance tree by using prototypes. This tree structure conceptually places common characteristics of HTML/XML documents into the most generic type of interface prototype object (such as "Node"), and introduces more specialized characteristics into interface prototype objects that "extend" (via prototypes) that basic functionality. DOM instances returned by various DOM operations (such as createElement) will have a constructor property that generally refers to an interface objects at a leaf-node in this hierarchy. The following figure illustrates part of the DOM hierarchy as specified by the W3C DOM L1 Core specification; this represents only a fraction of the interface objects supported by Web browsers (many of which are not yet specified by W3C standards).
Figure 5: The DOM Hierarchy Specificed by the W3C DOM L1 Core Specification.
Internet Explorer 8 reveals a DOM prototype hierarchy that is dramatically simpler than the arrangement shown above; primarily because Internet Explorer's object model predates the standardization of the DOM hierarchy as shown. We opted to present the object model to Web developers as-is rather than put up a veneer that gives the appearance of conforming to the DOM hierarchy exactly. This way, we can better articulate and prepare Web developers for future standards-compliance changes to the DOM. The following figure illustrates the unique DOM prototype hierarchy of Internet Explorer 8 using only the interface objects included in the previous illustration. Again, this represents only a fraction of the interface objects supported by Internet Explorer 8:
Figure 6: Partial DOM Hierarchy Supported By Internet Explorer 8.
Note that the common ancestor "Node" is missing. Also note how comments "inherit" from Element (this makes sense when you consider that Internet Explorer still supports the deprecated "" element).
Customizing the DOM
With an understanding of the Internet Explorer 8 DOM prototype hierarchy, Web developers can begin to explore the power of this feature. To get your creative juices flowing, I will present two real-world examples. In this first example, a Web developer wants to supplement the Internet Explorer 8 DOM with a feature from HTML5 that is not yet available (as of this writing). The HTML5 draft's getElementsByClassName is a convenient way to find an element with a specific CSS class defined. The following short code example implements this functionality by leveraging the Selectors API (new to Internet Explorer 8) and the HTMLDocument and Element interface prototype objects: function _MS_HTML5_getElementsByClassName(classList)
var tokens = classList.split(" "); // Pre-fill the list with the results of the first token search. var staticNodeList = this.querySelectorAll("." + tokens[0]); // Start the iterator at 1 because the first match is already collected. for (var i = 1; i < tokens.length; i++) { // Search for each token independently var tempList = this.querySelectorAll("." + tokens[i]); // Collects the "keepers" between loop iterations var resultList = new Array(); for (var finalIter = 0; finalIter < staticNodeList.length; finalIter++) { var found = false; for (var tempIter = 0; tempIter < tempList.length; tempIter++) { if (staticNodeList[finalIter] == tempList[tempIter]) { found = true; break; // Early termination if found } } if (found) { // This element was in both lists, it should be perpetuated // into the next round of token checking... resultList.push(staticNodeList[finalIter]); } } staticNodeList = resultList; // Copy the AND results for the next token } return staticNodeList;
HTMLDocument.prototype.getElementsByClassName = _MS_HTML5_getElementsByClassName;
Element.prototype.getElementsByClassName = _MS_HTML5_getElementsByClassName;
Aside from being light on the parameter verification and error handling, I think the ease by which the Internet Explorer 8 DOM has been extended is clear.
In a second example, a Web developer wants to write a function to fix legacy script that has not yet been updated to support Internet Explorer 8. During development of Internet Explorer 8, the setAttribute/getAttribute APIs were fixed to correctly process the 'class' attribute name (among other fixes). Many scripts today use custom code to handle this legacy bug in previous versions of Internet Explorer. The following script catches any instances of this legacy code and fixes it up dynamically. Note that the Web developer leverages the Element interface object to change the behavior for getAttribute and setAttribute on every element (because setAttribute and getAttribute are defined on Element's interface prototype object): var oldSetAttribute = Element.prototype.setAttribute; var oldGetAttribute = Element.prototype.getAttribute;
// Apply the change to the Element prototype...
Element.prototype.setAttribute = function (attr, value) { if (attr.toLowerCase() == 'classname') { // Older scripts expect 'className' to work, don't // disappoint them. Avoiding creating a 'className' // attribute in IE8 standards mode attr = 'class'; } // TODO: Add other fix-up here (such as 'style'), attr, value); };
Element.prototype.getAttribute = function (attr) { if (attr.toLowerCase() == 'classname') { return, 'class'); } // TODO: Add other fix-up here (e.g., 'style') return, attr); };
When legacy script runs after this code, all calls to setAttribute or getAttribute (from any element) will have this fix-up applied.
Additional JavaScript/DOM integration improvements
To further round out the scenarios in which DOM prototypes might be used, we addressed several cross-browser interoperability issues regarding Internet Explorer's JavaScript/DOM interaction: • Handling of the JavaScript delete operator • Support for call and apply on DOM functions
Delete, the New "Property Undo Mechanism"
Internet Explorer 8 now supports JavaScript's delete operator to remove (or undo) properties dynamically added to DOM instances, interface objects, or interface prototype objects. In previous versions of Internet Explorer, removing any dynamic property from a DOM instance with the delete operator caused a script error; Internet Explorer 8 will now properly removes the dynamic property: document.newSimpleProperty = "simple"; console.log(document.newSimpleProperty); // Expected: "simple" try { delete document.newSimpleProperty; // Script error in Internet Explorer 7
console.log("delete failed w/error: " + e.message); document.newSimpleProperty = undefined; // Workaround for older versions
console.log(document.newSimpleProperty); // Expected: undefined
Delete also plays an important role for built-in DOM properties and methods that are overwritten by user-defined objects; in these cases delete removes the user-defined object, but does not remove the built-in property or method: var originalFunction = document.getElementById; // Cache a copy for IE 7 document.getElementById = function () { console.log("my function"); }; document.getElementById(); // This call now invokes the custom function try { delete document.getElementById; // Script error in IE 7
console.log("delete failed w/error: " + e.message); document.getElementById = originalFunction; // Workaround for IE 7
console.log(document.getElementById); // Expected: getElementById function
Calling Cached Functions
One interoperability issue with calling cached functions is now fixed in Internet Explorer 8 (a cached function is a DOM function object that is saved to a variable for later use). Consider the following JavaScript: var $ = document.getElementById; var element = $.call(document, 'id');
Conceptually, when the function "getElementById" is cached to "$" it could be considered officially severed from the object that originally "owned" it ("document" in this case). To correctly invoke a "severed" (cached) property, JavaScript requires the Web developer to be explicit in specifying the scope; for cached DOM properties, this is done by providing a DOM instance object as the first parameter to JavaScript's "call" or "apply" properties as shown in the previous code sample. For interoperability, we recommend the use of call/apply when invoking cached functions from any object.
With the introduction of DOM prototypes, it is also possible to cache properties defined on interface prototype objects, as illustrated in the example code for the getAttribute/setAttribute fix-up scenario previously described. Use of call or apply is required in these scenarios because function definitions on interface prototype objects have no implicit DOM interface scope.
Internet Explorer 8 continues to support a limited technique of invoking cached functions (primarily for backwards compatibility): var $ = document.getElementById; // Cache this function to the variable '$' var element = $('id');
Note that neither call nor apply is used; Internet Explorer "remembers" the object to which the function belonged and implicitly calls "$" from the proper scope (the document object). The preceding code is not recommended, as it will work only with Internet Explorer; also be aware that DOM functions cached from an interface prototype object in Internet Explorer 8 cannot be invoked by using this technique.
Known Interoperability Issues
The following are known interoperability issues with the Internet Explorer 8 implementation of DOM prototypes. We hope to address these issues in a future release; note these should not significantly influence core scenarios enabled by DOM prototypes.
Interface Objects • Constant properties (e.g., XMLHttpRequest.DONE) are not supported on any interface objects. • Interface objects do not include Object.prototype in their prototype chain.
Interface Prototype Objects • Interface prototype objects do not include Object.prototype in their prototype chain. • DOM instances and prototype objects currently only support the following properties from Object.prototype: "constructor", "toString", and "isPrototypeOf".
• Built-in DOM properties that are functions (such as functions on interface prototype objects) do not include Function.prototype in their prototype chain. • Built-in DOM properties that are functions do not support callee, caller, or length.
• The native JavaScript operator typeof is not properly supported for built-in DOM properties that are functions; the return value for typeof that would otherwise return "function" returns "object".
• Interface prototype objects include support for enumeration of their "own" built-in properties that are functions (a new feature of Internet Explorer 8). DOM instances include support for enumeration of all properties available in their prototype chain except properties that are functions (legacy Internet Explorer 7 behavior). For interoperability, to obtain a full enumeration of all properties available on a DOM instance we suggest the following code: • function DOMEnumProxy(element) • { • var cons; • for (x in element) • { • // x gets all APIs exposed on object less the • // methods (IE7 parity) • this[x] = 1; • } • try { cons = element.constructor; } • catch(e) { return; } • while (cons) • { • for (y in cons.prototype) • { • // y gets all the properties from the next level(s) in the prototype chain • this[y] = 1; • } • try • { • // Avoid infinite loop (e.g., if a String instance parameter is passed) • if (cons == cons.prototype.constructor) • return; • cons = cons.prototype.constructor; • } • catch(e) { return; } • } } This function constructs a simple proxy object with full property enumeration that is interoperable with the enumeration of other DOM prototype implementations: m = new DOMEnumProxy(document.createElement('div')); for (x in m) console.log(x);
In summary, DOM prototypes are a powerful extension of the JavaScript prototype model. They provide Web developers with the power and flexibility to create scenarios that innovate, extend, and build-upon Internet Explorer 8’s Web platform. Part 2 of this article introduces the getter/setter syntax supported on DOM objects.
Have a suggestion to improve MSDN Library?
Visit our UserVoice Page to submit and vote on ideas!

Similar Documents

Free Essay


...practices, but I want to highlight a feature that is not shown off as regularly, extending the document object model API. Introduction to AngularJS Dylan Stamat You will learn about some of the core concepts that make AngularJS shine, including binding data to you views, built-in filtering, and some of the interesting architectural decisions behind this MVC framework. We will build a very simple application with local data that show some of these concepts. Diving into Angular Josh Kuhn In this tutorial we’re going to create a barebones Twitter-like application called Pipr. Pipr allows you to create “pips” which are short 100 character or less “pips” that show up on the page in reverse chronological order. You can add tags to your pips, and you can post them with any name you like. In addition, you can delete your pips. AngularJS 101: A Beginner’s Tutorial Karmen Blake This tutorial on AngularJS will guide you through the fundamentals of the framework. You will explore the exciting benefits of using a client-side JavaScript framework to create dynamic and modern web applications. JEDI SENATUS: an italian open source project aims towards the systematic software reuse in organizations Ciro D’Urso, Alberto Persello, David Visicchio JEDI is a J2EE application that provides a centralized service aiming at significantly simplifying the generation of data driven documents in an enterprise environment. JUnit Test Should Include...

Words: 22760 - Pages: 92

Free Essay

Software Quality Assurance

...two can be advantageous. In this paper, we propose to (1) mine the human knowledge present in the form of input values, event sequences, and assertions, in the human-written test suites, (2) combine that inferred knowledge with the power of automated crawling, and (3) extend the test suite for uncovered/unchecked portions of the web application under test. Our approach is implemented in a tool called Testilizer. An evaluation of our approach indicates that Testilizer (1) outperforms a random test generator, and (2) on average, can generate test suites with improvements of up to 150% in fault detection rate and up to 30% in code coverage, compared to the original test suite. these interactions at runtime is manifested through the Document Object Model (DOM) and presented to the end-user in the browser. To avoid dealing with all these complex interactions separately, many developers treat the web application as a black-box and test it via its manifested DOM, using testing frameworks such as Selenium [6]. These DOMbased test cases are written manually, which is a tedious process with an incomplete result. On the other hand, many automated testing techniques [13, 19, 28, 31] are...

Words: 10932 - Pages: 44

Free Essay


...other tools to create, process, and manipulate XML documents. Best of all, every tool discussed here is freely available at IBM’s alphaWorks site ( and other places on the Web. About the author Doug Tidwell is a Senior Programmer at IBM. He has well over a seventh of a century of programming experience and has been working with XML-like applications for several years. His job as a Cyber Evangelist is basically to look busy, and to help customers evaluate and implement XML technology. Using a specially designed pair of zircon-encrusted tweezers, he holds a Masters Degree in Computer Science from Vanderbilt University and a Bachelors Degree in English from the University of Georgia. 1 Section 1 – Introduction Tutorial – XML Programming in Java Section 1 – Introduction About this tutorial Our previous tutorial discussed the basics of XML and demonstrated its potential to revolutionize the Web. In this tutorial, we’ll discuss how to use an XML parser to: • • • Process an XML document Create an XML document Manipulate an XML document We’ll also talk about some useful, lesser-known features of XML parsers. Best of all, every tool discussed here is freely available at IBM’s alphaWorks site ( and other places on the Web. What’s not here There are several important programming topics not discussed here: • • • Using visual tools to build XML applications Transforming an XML document from one vocabulary to another Creating interfaces...

Words: 13605 - Pages: 55

Free Essay

Rough Draft

...There are many important elements to successful, functional and dynamic web pages. In order to make sure that your web page is truly dynamic, you must have a working knowledge of a few elements such as JavaScript, XHTML, CSS, and DOM (Document Object Model). DHTML refers to Dynamic HTML, which is a combination of technologies that make a web page dynamic. Dynamic web pages mean having interactive forms, quizzes or games, or even something simple like a fly out navigation menu. DOM is the core of DHTML. DOM represents the HTML or XML of a web page. DOM or Document Object Models contains methods to dynamically generate web pages and manipulate elements. There are several different objects that belong to the category DOM, some of which are the DOM Document, DOM Elements, DOM Attributes, and DOM Events. DOM Elements represents the HTML element. The element consists of four different nodes; child nodes, element nodes, comment nodes, or text nodes. When you use the different methods for elements, they typically look like element.tagName or element.textContent. Element.tagName returns the tag name of an element. Element.textContent returns the text content of an element. The other common DOM Object is the Events Object. The Events object allows JavaScript to register different event handlers on elements in HTML. You will usually see functions combined with event objects. The function is called by the event handler. For example, an onClick event handler will call a specific function...

Words: 370 - Pages: 2

Premium Essay

The Document Object Model

...Document Object Model May 8, 2011 IT/238 Van Hook The Document Object Model (DOM) is an important part of creating animation and making web pages interactive. The Document Object Model is used with Dynamic HTML to help accomplish the interactive web pages that are used today. “Dynamic HTML(DHTML) refers to a combination of technologies that make Web pages dynamic…a combination of JavaScript, XHTML, CSS, and the Document Object Model” (Gosselin, 2008, pg. 485). The Document object Model is all the HTML that is displayed on a web page from the web browser. Each of the many elements contained in the web page are considered objects and can be controlled and changed by using JavaScript. The Document object Model gives you the ability to change these elements without the web page needed to be reloaded. The HTML DOM can be used to dynamically change the document object and to change and control elements like images, which can themselves be considered the image object. The Document object and the image object both contain methods and properties that can be used to dynamically change the web page. The methods used with the document object are close, open, getElementById, getElementsByName, getElementsByTagName, write and writeIn. The open method creates a new window or a frame. The close method closes the document that was opened with the open method. The getElementById method retrieves an element by the specified ID. The getElementsByName method retrieves an...

Words: 685 - Pages: 3

Free Essay


...effects such as sliding and fading. It has advanced UX features in UI library, which includes more effects and is as well as interactivity features such as drag and drop, resizing, and sorting. JQuery UI also includes some widgets or components that make the development of attractive interfaces much easier. At present, these components include Accordion, Datepicker, Dialog, Progressbar, Slider, and Tabs. These widgets are completely themable, and jQuery UI includes a wide range of themes that can be used to fit the components to your own particular Web site or Web application. JQuery is a cross-platform JavaScript library designed to simplify the client-side scripting of HTML. jQuery's syntax is designed to make it easier to navigate a document, select DOM elements, create animations, handle events, and develop Ajax applications. JQuery also provides capabilities for developers to create plug-ins on top of the JavaScript library. This enables developers to create abstractions for low-level interaction and animation, advanced effects and high-level, theme-able widgets. The modular approach to the jQuery library allows the creation of powerful dynamic web pages and web applications. One of its application is jQuery EasyUI framework. The purpose of this application is to build web pages easily. Enhances the site in building for the class in that: • Easyui is a collection of user-interface plugin based on jQuery. • Easyui provides essential functionality for building modern, interactive...

Words: 335 - Pages: 2

Free Essay


...LESSON 8: Absolute Positioning Because you already have an understanding of the box model, you now can visualize how each block element are stacked on top of one another. The inline elements go with the flow. If you resized the browser, they would simply reflow to their new position without breaking the line. However, this flow can be broken by using the CSS position property. The position property can take on any of the following values: * relative * absolute * static * flixed Positioning can make use of the offsets top, bottom, left, and right to position the box with specific values. When position property is not set, it defaults to static LESSON 10: HTML Event Handle AttributesAttributes HTML elements can have optional attributes, called event-handlers to allow the element to respond to user-interactions. Different element-handlers work with different HTML elements. So what are event-handlers? Event handlers are javascripts that respond to actions from the browser and the user. Each event handler is associated with a particular browser object, and you can specify the event handler in the HTML tag that defines the object. You specify the event handler as an attribute to the HTML tag and include the JavaScript statement to handle the event within the quotation marks. Each HTML tag can comprise more than one event handlers. Event handlers are executed when their events happen. Example : * <a href="#" onClick="alert('Hello');"> Try Me </a> ...

Words: 782 - Pages: 4

Premium Essay

The Model

...The Document Object Model (DOM) is an important part of creating animation and making web pages interactive. The Document Object Model is used with Dynamic HTML to help accomplish the interactive web pages that are used today. “Dynamic HTML(DHTML) refers to a combination of technologies that make Web pages dynamic…a combination of JavaScript, XHTML, CSS, and the Document Object Model” (Gosselin, 2008, pg. 485).     The Document object Model is all the HTML that is displayed on a web page from the web browser. Each of the many elements contained in the web page are considered objects and can be controlled and changed by using JavaScript. The Document Object Model gives you the ability to change these elements without the web page needed to be reloaded. The HTML DOM can be used to dynamically change the document object and to change and control elements like images, which can themselves be considered the image object. The Document object and the image object both contain methods and properties that can be used to dynamically change the web page.     The methods used with the document object are close, open, getElementById, getElementsByName, getElementsByTagName, write and writeIn. The open method creates a new window or a frame. The close method closes the document that was opened with the open method. The getElementById method retrieves an element by the specified ID. The getElementsByName method retrieves an array of elements that have a specific name. The getElementsByTagName...

Words: 286 - Pages: 2

Free Essay


...1) An ATM SRS has a requirement to allow for cash withdrawals in $20, $10, and/or $5 denominations. a) Name the stakeholders for this system. (10 pts) Below are all the possible stakeholders from the beginning of the development phase to the end phase. ATM Engineer - Maintenance of the equipment by the bank’s engineers. This action may be initiated by the engineer on a routine basis. It may also be initiated by the equipment that can call the engineer when it detects an internal fault. Property / Shop Owners: Unloading of deposits and loading of cash by officials of the ATM owner. These actions occur either on a scheduled basis or when the central computer determines that the cash supply is low or the deposit receptacle is liable to be getting full. This stakeholder group concerns people who might live next to or close to an ATM machine. For example, many ATM machines can be found on the high street and perhaps only a few floors above will be someone's property. This group also includes shop owners as many ATM machines can be found located next to a shop. Audit: An audit trail for all activities will be maintained and sent periodically to the bank’s central computer. It will be possible for the maintenance engineer to save a copy of the audit trail to a diskette for transporting to the central computer. System Test Engineer – Bothe dialup and leased line support will be provided. The ATM will continue to provide services to customers when communications with the central...

Words: 3425 - Pages: 14

Free Essay

Business Information Systems

...Waterfall Software Development Life Cycle Model The simplest software development life cycle model is the waterfall model, which states that the phases are organized in a linear order. A project begins with feasibility analysis. On the successful demonstration of the feasibility analysis, the requirements analysis and project planning begins. The design starts after the requirements analysis is done. And coding begins after the design is done. Once the programming is completed, the code is integrated and testing is done. On succeeful completion of testing, the system is installed. After this the regular operation and maintenance of the system takes place. The following figure demonstrates the steps involved in waterfall life cycle model.   The Waterfall Software Life Cycle Model With the waterfall model, the activities performed in a software development project are requirements analysis, project planning, system design, detailed design, coding and unit testing, system integration and testing. Linear ordering of activities has some important consequences. First, to clearly identify the end of a phase and beginning of the others. Some certification mechanism has to be employed at the end of each phase. This is usually done by some verification and validation. Validation means confirming the output of a phase is consistent with its input (which is the output of the previous phase) and that the output of the phase is consistent with overall requirements of the system. The...

Words: 2323 - Pages: 10

Free Essay

Applying Usability

...possible to the natural way of interviewing another person. Selected Focus Areas from project “Recruitment Tool – Intelliview” We have selected the following 2 focus areas from our contextual design project to prototype for usability purposes: Focus Area#1: Record Answers & Ratings (for a specific question) 1. (Interviewer) Select a question, and ask the candidate 2. (Candidate) Answer question using the AnyBot 3. (Interviewer) Enters a summary of the candidates answer in the iPad 4. (Interviewer) Enters a rating of the candidates answer in the iPad for the particular question 5. (Interviewer) Select next question from list, to ask the next question 6. (Interviewer) Select Add new question to record a colleague’s question Focus Area#2: Add questions from colleagues 1. (Interviewer) Adds a new question one of the colleagues asked the candidate, driving the AnyBot to the iPad application 2. (Interviewer) Add answers and rating to the new question in the iPad application 3. (Interviewer) Select next question from list to ask the next question 4. (Interviewer) Select Add new question to record a colleague’s question Prototype #1 Figure 1 - Prototype #1, Focus Area #1: Record Answers & Ratings for a Specific Question Figure 2 - Prototype #1, Focus Area #2: Add Questions From Colleagues Assumption: The operation of this application relies on the availability and proper operation of the video and...

Words: 2205 - Pages: 9

Free Essay

Methodology of Information System Development

...1 1.3 Types of Software developing life cycles (SDLC) 2 1. Waterfall Model 2 2. V-Shaped Model 4 3. Evolutionary Prototyping Model 5 4. Spiral Method (SDM) 7 5. Iterative and Incremental Method 8 6. Extreme programming (Agile development) 10 1.4 CASE (computer-aided software engineering) 11 1.5 Conclusion 16 Introduction System development methodology is a standard process followed in an organization to conduct all the steps necessary to analyze, design, implement, and maintain information systems. Organizations use a standard set of steps, called system development methodology to develop and support their information systems. Like many processes, the development of information systems often follows a life cycle. For example, a commercial product such as a Nike sneaker or a Honda car follows a life cycle; it is created, tested and introduced to the market. Its sales increase, peak and decline. Finally, the product is removed from the market and is replaced with something else. Many options exist for developing information systems, but the most common methodology for system development in many organizations is system development life cycle. However, it is important to know other alternative development methodology available in order to maximize the development process. there are four important terminologies in information systems, namely methodology, model, tools and techniques. Methodology Methodology in information system refers to...

Words: 2577 - Pages: 11

Free Essay

Rapid Application Development vs Waterfall Method

...E. (1989). A Formal Model for Software Project Management. IEEE Transactions on Software Engineering,15(10), 1280-1293. An Old Waterfall The waterfall model is one of the oldest software development processes often cited in project management. It has been over 40 years since it was first formally described by Winston W. Royce. The model was viewed in the same regard as real life waterfalls because of how the model was presented. The development process of the waterfall model is a linear sequential process just like a waterfall flowing from top to bottom. It is very interesting to me, that often at times the waterfall model can also show backward pointing arrows contrary to a true waterfall where once water flows down, it cannot flow back up. This tells me that the original waterfall model was not perfect nor is any other type of project management process. In Royce’s original model he lists six phases in its model: requirements, preliminary designs, interface designs, final designs, testing and integration; before advancing to any following phase it must be verified. This verification can be considered milestones and is used as a tracking mechanism of the progress of the project. The waterfall model provides the map for developers to follow and use for explanation. Originally, Royce’s waterfall model was strictly shown as step by step sequential series of tasks in order to complete the project, but has changed over the time. Presently, waterfall models typically shown with...

Words: 2489 - Pages: 10

Premium Essay

System Development

...laws of each country associated with an article * Search engine for searching for articles * Link to other university libraries * Reports on user activity * Stimulus and response activities * Require conformity to copyright law for each article searched * Assign privileges to various users per role * Check for account validity upon login Question 1 1.1. Prototyping Prototyping allows the systems developer access to a quick and promptly built working version of the system being developed. It involves a continuous process of analyzing, designing, modeling, and testing to achieve an ideal prototype. It is very crucial to include users actively at every stage of the development life cycle. User input can be solicited through feedback sections, input, and testing. Prototyping enables the users to have a practical feel of a model...

Words: 1878 - Pages: 8

Free Essay

Research Study to Apply Information Technology to Sri Lankan Museum System

...Rational A museum is an institution that cares for (conserves) a collection of artefacts and other objects of scientific, artistic, cultural, or historicalimportance and makes them available for public viewing through exhibits that may be permanent or temporary.Most large museums are located in major cities throughout the world and more local ones exist in smaller cities, towns and even the countryside. Museums have varying aims, ranging from serving researchers and specialists to serving the general public. Early museums began as the private collections of wealthy individuals, families or institutions of art and rare or curious natural objects and artefacts. The oldest public museums in the world opened in Rome during the Renaissance. However, many significant museums in the world were not founded until the 18th century and the Age of Enlightenment The Colombo Museum was established on January 1, 1877. The founder is Mr. William Henry Gregory, who was the British Governor of Sri Lanka at the time. JG Smither was the architect of the Public Works Department and was able to prepare the plans for the new structure based on Italianate architecture(Colombo National Museum). In 1876 Kandy Museum was established by Sri WicramaRajasinha and it was called “PalleVahala”.This is used as a place somewhere in the queen of king lived. Was used to deposit the types of historical value made by the art association established in 1832.this Kandy museum has more than 5,000 goals that represents...

Words: 3756 - Pages: 16