"Dry" JavaScript DOM programming Art Learning Note 4-6

Iv. Case Study: JavaScript picture library

Js:

function Showpic (whichpic) {

Get links

var source=whichpic.getattribute ("href");

Get bitmap

var Placeholder=document.getelementbyid ("placeholder");

Change the placeholder bitmap src attribute

Placeholer.setattribute ("src", source);

Get a text description

var text=whichpic.getattibute ("title");

Get placeholder text

var Description=document.getelementbyid ("description");

Change placeholder text values

Description.firstchild.nodevalue=text;

}

Called in HTML:

<a onclick= "Showpic (this); return false; " ></a>

Note:

NodeValue property: The value of the Node.nodevalue node, which is usually used to get the text value, but note that in <p id= "description" >text</p>, The value of description is NULL, and the value of the first child node FirstChild is the text

NodeType Property: The NodeType property of the node returns a number with a total of 12 values, where the element node is 1, the attribute node is 2, and the text node is 3.

ChildNodes property: Returns all types of nodes, not just element nodes.

V. Best practices

Use the class attribute of the element to detach the event handler from the HTML.

Window.onload=preparelinks;

function Preparelinks () {

//Get all links

var links=document.getelementsbytagname ("a");

Traverse All Links

for (var i=0; i<links.length; i++) {

Find links to corresponding classes

if (Links[i].getattribute ("class") = = = "Popup") {

Execute event handler for the link of the corresponding class

Links[i].onclick=function () {

PopUp (This.getattribute ("href"));

return false;

}

}

}

}

function PopUp (winurl) {

Opens a new window showing winurl, window named popup, Width 320, height 480

window.open (Winurl, "popup", "width=320,height=480");

}

Note:

Smooth degradation graceful degradation: some browsers that do not support javacript can also perform basic operations smoothly. For example, if there is an event handler function, set a href to the real URL in the link. For example, the search robot Searchbot Basic can not understand the JavaScript code, if not smooth degradation, the search rankings will be damaged.

Progressive enhancement: With some additional information to wrap the original data, pages created in accordance with the progressive enhancement principle will almost always degrade smoothly. The CSS code is responsible for information about the representation, and the JavaScript code is responsible for the behavior of the information, and they should all behave as an additional instruction layer.

Why use Window.onload to execute a function instead of executing it directly: whether the JS code is placed on the head or tail, it is possible that the document is incomplete while the script is loading, and some methods do not work properly. While the document object is a property of the Window object, the Document object already exists when the window object triggers the OnLoad event.

Backwards compatibility: Object Detection objects Detection If you don't understand this method, please leave. if (!document.getelementbyid) return false;

Performance considerations: Minimize access to the DOM and minimize the number of tokens; merging and placing scripts, merging the code into a single JS file, reduces the number of requests that are sent when the page is loaded. In addition, files placed in the head will cause the browser to be unable to load other files in parallel, usually placed at the end of the document before the body can make the page faster; compression scripts, there are many compression tools, reference compressed version, and another is to add comments as a copy.

Vi. Case Study: Photo Gallery improved version

The event handlers for picture library cases are detached from HTML and object detection is added to ensure smooth degradation.

function Preparegallery () {

Object detection

if (!document.getelementsbytagname) return false;

if (!document.getelementbyid) return false;

if (!document.getelementbyid ("Imagegallery")) return false;

Get Picture link big frame

var Gallery=document.getelementbyid ("Imagegallery");

Get a picture link

var links=getelementsbytagname ("a");

Traverse Links

for (var i=0; i<links.length; i++) {

Performs an onclick event on each link, in the placeholder showpic

Links[i].onclick=function () {

Showpic execution succeeded returning false to block the default behavior. If it fails, returns True, continuing with the default behavior, to the link address

Return Showpic (this)? False:true;

}

}

}

function Showpic (whichpic) {

Object detection

if (!document.getelementbyid ("placeholder")) return false;

Remove the linked href

var source=whichpic.getattribute ("href");

Acquiring a bitmap element

Placeholder=document.getelementbyid ("placeholder");

Detects if a placeholder element is a picture element

if (placeholder.nodenname!= "IMG") return false;

Change the placeholder bitmap address to a linked picture

Placeholder.setattribute ("src", source);

var Description=document.getelementbyid ("description");

Continue execution with text-describing elements

if (description) {

Null assignment if the link Title property does not exist

var text=whichpic.getattribute ("title")? Whichpic.getattribute ("title"): "";

Change the text expression to the title of the link

Description.firstchild.nodevalue=text;

}

Returns True if the function executes successfully

return true;

}

Note:

This: is the element link that is associated when the onclick of the event handler is executed

OnLoad event: If there is only one function, window.onload=function1 it directly; In this case, add a function to the window.onload=function2; only the last one will be actually executed. So if multiple words to integrate a addloadevent, so that each time you want to increase the function of the words only add a statement: Addloadevent (FUNC2);

function Addloadevent (func) {

Deposit the existing processing function value into Oldonload

var oldonload=window.onload;

If no function has been bound, add func to it

if (!typeof oldonload!= "function") {

Window.onload=func;

}

If the function is already bound, the new function is appended to the end

else{

Window.onload=function () {

Oldonload ();

Func ();

}

}

}

DOM Core and Html-dom:

getElementById getElementsByTagName getattribute setattribute are Dom Core, they are not specifically JavaScript, and any DOM-enabled language can be used In addition, their use is not limited to dealing with Web pages and can handle documents written in any one markup language.

Html-dom are usually shorter, using a point such as document.forms instead of document.getElementsByTagName ("a"), with placeholder.src= SOURC to replace Placeholder.setattribute ("src", source)

"Dry" JavaScript DOM programming Art Learning Note 4-6