|
MollyPages.org
"You were wrong case. To live here is to live." |
function x() {
var id = 0;
return function() { return id++; }
}
var makeid = x();
var i = makeid();
var j = makeid();
id has effectively private access, via (and only) via
the closure makeid() function.
foo() {
var req = xmlhttp();
req.onreadystatechange = function() { /*closure created here*/
if (req.readyState == 4) {
...
}
}
}
Even though the onreadystatechange is a property/method of
req, it is not invoked *via* req by the request handling
(browser) thread. Since t needs access to itself and can either
use a global variable (essentially window.req) or a closure
to hold/access a reference to it.
See also: http://ncyoung.com/entry/493#
x = elements('a')
for (var i = 0; i < 10; i++)
x[i].onclick = function{ ...use x[i]..}
}
All onclick function will refer to x[10], the final/latest
value of the the closed variable i
A) new and function definition combined
var obj = new function() {
/* stuff */
}
B) object literal
var obj = {
/* stuff */
}
function MyObj() {}
MyObj.prototype = {
foo: function () {
alert(this);
}
...etc..
}
var my1 = new MyObj();
my1.foo();
var elem = getElement('elem');
elem.style.display = '';
use display: '' as opposed to display: block
(this uses the default "none" type which can differ from block or
table-row or whatever, but in all cases, makes the element
visible properly.
However, setting elem.style.display = ''
to just removing the inline style. If a document
level css style declaration also exists and applies to the element,
then the element will be still be rendered instead with that
declaration (since elem.style.display only affects the inline
declaration). So either:
See: http://tobielangel.com/2006/12/31/why-the-css-display-property-sucks
//inline style elem.style.xxx = ... //classname elem.className = ...Either inline styles or className can be used.
elem.className = 'foo;;Use
className and not class (since
class can be a reserved word)
<form> <button onclick="myfunc()"></button> </form> <script> alert(button.onclick); </script>classic event handlers (like button.onclick = ... ) are methods of the corresponding DOM button object
var table = document.getElementById('mytable');
var rows = table.getElementsByTagName('tr');
for (var i = 0; i < rows.length; i++) {
if(i%2) {
rows[i].className += " even";
}
}
Programmatically adding a class to a table to
achieve a zebra stripes effect. JS functions for
onmouseover/onmouseout can also be added this way.
$('foo').related = $('bar');
Add properties to dom objects itself to refer to other
related dom objects (this causes no memory leaks in IE since
we are staying within the DOM).
window.resizeBy(0,1) window.resizeBy(0, -1)This forces css relayout and rendering updates.
$('x').style.foo
foo is only available if:
$('x').style.foo = 4
foo is not available.
This is a common issue when accessing left and
top style properties on a div (where the default
left/top are not available since they were not set in a inline
style). The solution is to set these initially, either inline
or via JS.
Working example (in the right column):
<style>
#x, #y, #z {
border: 1px solid #ccc;
margin: 5px;
}
#y {
font-size: 2em;
left: 30px;
position: relative;
}
#z {
font-size: 2em;
position: relative;
}
</style>
<script>
function show(name) {
var div = document.getElementById(name);
alert("left="+div.style.left +
"\nfontSize="+div.style.fontSize);
}
</script>
<div onclick="show('x')" id=x
style="font-size: 2em;">x-div</div>
<div style="position: relative">
<div onclick="show('y')" id=y>y-div</div>
</div>
<div style="position: relative">
<div onclick="show('z')" id=z
style="left: 60px;">z-div</div>
</div>
|
x-div
y-div
z-div
|
<a href="javascript:showImg()"> <img title="my image" name='sunset'> </a>A simple slide show whereby moving over a href shows a corresponding image in a image area. The title and name attributes of the img tag can be easily used to achieve this (and other custom attributes can be used as well, although the page will not "validate" if that's the case, but no big deal).
Another example:
<input type=text pattern="^\w+$" required=true>At page load time, JS code walks through all form fields, and if the pattern/required attributes are present, adds a validate function that validates the contents of the text field conform to the regex pattern before the form is submitted.
---|
-----|
--------|
-----------|
simple animation of a progress bar: keep increasing the width
of a div or img.
function progress()
{
var img = ..the img..
if (img.width < 200) {
img.width += 5;
//to not autosize height along with width
img.height = 5;
}
else
img.width = origwidth;
}
setInterval("progress()", 500);
document.write("< img src='foo.jpg?" + Math.random() + "' />");
We change the URL harmlesslessly (as long as
the stuff after "?" is ignored by the server) and prevent
browser caching of the image
document.createElement('div')div in this example)document.createTextNode()document.createDocumentFragment()
document.getElementById()document.getElementsByTagName("h1")getElementsByTagName("*") gets all child elements of the
specified elements/document (but this may not work in IE)
element.getElementsByTagName("h1")document.getElementsByClassName("myclass")JS libraries like prototype, jquery etc., implement a full CSS2/CSS3 selector mechanism, so not only can we get elements by classname but many more CSS3 ways as well.
node.nodeTypenode.nodeValuenode.nodeNamenode.getAttribute()getAttribute("href")
node.setAttribute()node.setAttribute("href", "http://bar.com");firstChild, lastChild, childNodesnextSibling, previousSiblingparentNoderemoveChild(), appendChild()insertBefore(newnode, someOtherChild)var node = ..some_element.. node.parentNode.removeChild(node);
var list; var newnode; list.insertBefore(newnode, list.firstChild);
var node = ... var newnode = node.cloneNode(true|false); true=deep copy, else shallow
var list; var newnode; list.replaceChild(newnode, list.oldchild)