Agregator RSS - Tutoriale DOM, JS - Strona 1 z 2

function foo() {
  alert('foo!');
}

foo

foo()

$.getJSON( "action.php", {data:'some data here'}, foo() );

$.getJSON( "action.php", {data:'some data here'}, foo );

<form name="myform">
  <input type="submit" value="Submit">        
</form>

O HAI, this blog is nearly dead these days. But before it truly shuffles off into the sunset, allow me to point you to filosofo's "good enough" addEvent. Austin gets around PPK's pesky requirements by ignoring one of them (namely, having a corresponding removeEvent).

I love this solution because it mirrors much of my recent experiences with JavaScript. Honestly, I can't remember the last time I needed anything more than some variation of toggle() and I can count on one hand the number of times I've need to detach an event since 1998.

Kudos to Austin for thinking differently.

Here's a detailed examination of the MySpace Samy/JS.Spacehero worm, a JavaScript hack that enabled one MySpace user to automatically add himself to the "friends" lists of thousands of MySpace members and add the line "Samy is my hero" to their profiles.

Looks like the perp found a way to execute JavaScript by stuffing a "javascript:" pseudo-protocol inside a CSS background:url(...) rule, then used XMLHTTP to execute a series of POSTs. Much of the code looks pretty IE-specific in this case.

Mmmm, Ajax badness.

So have you seen Remember The Milk yet? It's a to-do list service that has some very next-gen features, including some Ajaxy stuff to speed things like form entry and validation:

Remember The Milk checks to see if the username I've selected is available as I type it and puts little checkmarks next to completed fields. I'm totally in love with this approach. How many times have you filled out a form with a kabillion fields, only to be forced to do it again because one or two fields were invalid?

To use PassAlong's digital distribution service, you must have ActiveX installed. Got Firefox? No worries, there's a plug-in just for you.

Yuck.

JavaScript strings have a cool method called replace() which allows you to supply a regular expression and replace the matched bits of the string with another string.

var str = "my dog has fleas";
str = str.replace(/dog/, "cat");

Output:

my cat has fleas

One of the cooler things about this is you can provide an expression as the second argument. This can be a variable:

var str = "my dog has fleas";
var str2 = "cat"
str = str.replace(/dog/, str2);

...or even a function:

function Cat() {
  return "cat";
}
str = str.replace(/dog/, Cat);

This works great in IE, and Firefox on both Windows and OS X.

But Safari? Not so much. Here's the output of that last example in Safari:

my function Cat() {return "cat";} has fleas

Ugh, what happened? It appears that when given a function in this context, Safari does not evaluate it as an expression, but instead calls the toString() method of the function, casting it into a string.

I haven't found a workaround. Have you?

Yahoo!'s JavaScript Developer Center looks pretty sweet.

Following up on the Safari and String.replace() issue, it looks like this is a known bug that is fixed in the Webkit CVS tree but not yet part of any public release of Safari. So, if you're a junkie for nightly builds, you should be golden. (Your customers, on the other hand, are probably not so golden.)

Here's a fun one. Given the following HTML, let's attempt to copy the contents of div1 to div2, then grab a reference to the SPAN element "foo."

<div>
  <span>Foo span</span>
</div>

<div></div>

The easy way out is to just copy innerHTML from one element to the other, then destroy the contents of the original element:

document.getElementById('div2').innerHTML = 
    document.getElementById('div1').innerHTML;
document.getElementById('div1').innerHTML = '';
alert(document.getElementById('foo'));

In most browsers, the alert dialog displays "Element SPAN" or something similar. But in Safari 1.3 and above, the dialog displays null. Why?

For a brief moment, when we copy the innerHTML, we create two SPANs with identical IDs of "foo." Even after we destroy the contents of div1 (leaving only the one SPAN), the DOM is screwed up enough to confuse Safari, which continues to return null even after the DOM is "fixed." By contrast, Firefox for OS X is far more forgiving.

The solution seems to be: duh, don't copy from element to element. Instead, hold the contents in a variable until it's safe to reinsert them into the page:

var tempHTML = document.getElementById('div1').innerHTML;
document.getElementById('div1').innerHTML = '';
document.getElementById('div2').innerHTML = tempHTML;
alert(document.getElementById('foo'));

The dialog should now display "Object SPAN" in Safari. Of course, astute JS developers would probably prefer to skip using innerHTML altogether