The Strange Zen Of JavaScript

本頁 50 篇

• Why must we still close SCRIPT elements?

  I was wondering why in the world we still have to terminate SCRIPT elements with tags in 2011, fer Pete's sake. i.e. why does this work: but this:

  2011/2/18 07:00http://jszen.blogspot.com/2011/02/why-must-we-still-close-script-elements.html

• HTML 5 audio player demo

  To teach myself a little about HTML 5 and its built-in support for rich media, I built a proof-of-concept HTML5 audio player, written entirely in HTML 5, JQuery and CSS 3. It more or less replaces all the functionality of the Flash audio player on my music site. It took a little over two hours starting from nothing. Developed it in Safari 4.0 and works great with that browser. Haven't yet tested it in Firefox 3.5, which claims HTML 5 audio/video media support as well. (UPDATE: Firefox doesn't su

  2010/2/1 08:48http://jszen.blogspot.com/2010/01/html-5-audio-player-demo.html

• Using the "in" operator in conditionals

  Most of us are familiar with the for..in loop construct: for (var i in object) { /* some iterative action here */ } Less well-known is the use of "in" as an operator to test if a named property exists on an object: >>> var x = {foo:1, bar:2, baz:'cat'}; >>> ('foo' in x) true >>> ('bar' in x) true >>> ('qux' in x) false This works on methods, too: >>> ('toString' in x) true It's particularly neato for testing the existence of properties with values that could be interpreted as false: >>> var x =

  2009/10/29 06:30http://jszen.blogspot.com/2009/10/using-in-operator-in-conditionals.html

• IE conditional comment gotcha

  Here's one for the books: This will be ignored by IE. Why? Because IE doesn't like the whitespace between the comment delimiters and square brackets. Here's the correct way: Note the difference:

  2009/10/10 08:49http://jszen.blogspot.com/2009/10/ie-conditional-comment-gotcha.html

• HTML 5

  The recent buzz over HTML 5 this week at Google I/O could not have come at a better time. It reminds me of another time, back in 2005, when the economy was just starting to recover from the dotcom bust. Ajax made the scene (heavily backed by Google in the form of Suggest and Maps) and got people excited about doing cool things on the web again. Now the economy is in the crapper again, and here comes HTML 5 (again backed by Google in the form of Chrome and Wave). Looking at some of the demos, I f

  2009/5/31 02:05http://jszen.blogspot.com/2009/05/html-5.html

• Constraining elements to the browser window

  I recently worked on a demo that used tooltip-like "popover" menus that appeared when the mouse pointer hovered over certain page elements. The initial approach was pretty straightforward: find the offsetTop and offsetLeft of the target element, then move the menu to those coordinates. Two challenges: If an item was too close to the left or bottom edge of the browser window, the menu would appear partially offscreen. So I had to figure out how to constrain the menu to the visible window area. I

  2009/2/4 07:08http://jszen.blogspot.com/2009/02/i-recently-worked-on-app-that-used.html

• Does your website disappear in IE8?

  Mine did. I was recently given a pretty large redesign project, and during the planning stages I took the opportunity to add a long-missing DOCTYPE to the site. I chose a nice HTML 4.01 Transitional flavor because there was no way in hell the site was going to resemble anything close to XHTML anytime soon. At the very least, it would 1) get the site out of quirks mode, and 2) give us an eventual path to validation. (I'm including this info to illustrate: we had a proper DOCTYPE, and knew the sit

  2008/11/13 00:28http://jszen.blogspot.com/2008/11/does-your-site-disappear-in-ie8.html

• Missing form ACTIONs

  Say you want to disable a submit button when it's clicked, to prevent the user from submitting twice: On Windows, this works fine in IE but not in Firefox. Or so it appears. What's going on? Oops, you forgot an ACTION attribute in your form. (It's okay, this is common if you're planning an Ajax-style app.) Without it, IE just ignores the submit click, but Firefox uses the current page as the defau

  2008/7/17 23:00http://jszen.blogspot.com/2008/07/missing-form-actions.html

• Function reference vs. function call

  Here's a JavaScript function definition: function foo() { alert('foo!'); } You can refer to that function like this: foo And here is how to call (execute) the function: foo() Even experienced developers new to JS tend to get these confused. For example, jQuery's getJSON method allows you to specify a function to be executed once the operation is complete. Be careful not to plug in the function call when what you really need is a function reference: $.getJSON( "action.php", {data:'some data here'

  2008/7/17 02:30http://jszen.blogspot.com/2008/07/function-reference-vs-function-call.html

• A good enough addEvent

  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

  2008/4/17 01:00http://jszen.blogspot.com/2008/04/good-enough-addevent.html

• Some reader contributions to Calendar tutorial

  When I started SZOJ I promised myself I wouldn't abruptly shut down the blog if I lost interest; I'd just go radio silent until my interest was piqued again. That said, it's been a long while. So here are two things: Rory Parle wrote in to point out you can use Math.ceil to determine the number of rows you'd need to safely render a calendar: Math.ceil((monthLength + startingDay) / 7); Michiel van der Blonk suggested a way to determine the number of days in a month: var d = new Date(nYear, nMonth

  2007/7/2 10:31http://jszen.blogspot.com/2007/07/some-reader-contributions-to-calendar.html

• How to build a simple calendar with JavaScript

  While there are lots of JavaScript-based calendar widgets out there, there's not much in the way of explaining how they work for the JS acolyte. I recently had the opportunity of building one from memory (and best of all, for no particular reason), using none of the popular JS libraries. This is the tutorial I wish I had found five years ago. This series of posts will cover: how to create a simple calendar view with JavaScript how to tie the calendar to an HTML element for rendering how to add n

  2007/3/20 13:34http://jszen.blogspot.com/2007/03/how-to-build-simple-calendar-with.html

• The Mark Of The n00b

  When I'm debugging or otherwise vetting someone's JavaScript work, I tend to look for evidence that indicates: the author is new to JavaScript, and/or the author cut-and-pasted this code Neither of these are showstoppers, especially if the result is a neat-o web application or widget. But it does tend to drive me a little nuts sometimes. Case in point: using "javascript:" in HREFs, a pet peeve of mine. It's not technically incorrect and it "just works" almost all modern browsers. It's just "wron

  2007/3/8 05:15http://jszen.blogspot.com/2007/03/mark-of-n00b.html

• Return false to prevent jumping scrollbars

  I like what Harry Maugans is doing over at his site with his JavaScript how-tos. It's back-to-basics stuff, but judging from the number of Diggs he gets, people are interested in how this stuff works under the hood. In his tutorial "How To Create A Collapsible DIV with JavaScript and CSS," Harry writes regarding the use of the HREF attribute in anchors that trigger JS actions: Another common do-nothing insert to use for the href property is a pound sign (#), and while that will work, it'll also

  2007/3/8 04:43http://jszen.blogspot.com/2007/03/return-false-to-prevent-jumping.html

• How to parse HTML strings into DOM nodes without innerHTML

  Here's a way of parsing a string of HTML into a series of DOM nodes in Firefox and other Mozilla-similar ("mozimilar") browsers: var range = document.createRange(); range.selectNode(document.body); var parsedHTML = range.createContextualFragment(SomeStringOfHTML); document.body.appendChild(parsedHTML) The call to selectNode() is required as you have to point the empty range at something before you can use it; Firefox throws an exception without it. You can use other range positioning methods as

  2007/2/27 02:47http://jszen.blogspot.com/2007/02/how-to-parse-html-strings-into-dom.html

• SCRIPT and innerHTML: a losing combination

  One day you may be tempted to skip all the cumbersome creation of SCRIPT elements via DOM methods and just cram stuff into the page with innerHTML. Woe unto you. This does not work: var script = ''; document.body.innerHTML = script; In fact, this will produce an unterminated string error in IE6 and Firefox, because you still need to split up that closing like in ye olde days: var script = '

  2007/2/10 07:32http://jszen.blogspot.com/2007/02/script-and-innerhtml-losing.html

• Fix your login system, you freakin' idiots

  Don't say "username" when you want "email address" This is simple: if your app uses email addresses as usernames (ala OpenID or whatever), don't put "enter username" on the login page. That way I don't have to put a fist through the screen after "scottandrew" is rejected 99 times. Wrong username or password? Which is it? Did I type the wrong username? Did I misspell the password? Did I screw up both? Tell me. Don't get lazy and display "Incorrect username or password." What, do I get a prize if

  2007/2/9 03:22http://jszen.blogspot.com/2007/02/fix-your-login-system-you-freakin.html

• Dynamic SCRIPT elements and Safari 2.0

  Patrick Hunlock's excellent article Howto Dynamically Insert Javascript And CSS reminded me of a caveat I ran across last summmer: early 2.0 versions of Safari have a bug that prevents dynamic SCRIPT elements from loading JavaScript content. The bug was fixed in version 2.0.2. That's probably the edgiest of edge cases, but it had me slamming my forehead against the wall for a few days. I was forced to do version sniffing since dynamic SCRIPT insertion was the only way to perform the cross-domain

  2007/1/30 05:57http://jszen.blogspot.com/2007/01/dynamic-script-elements-and-safari-20.html

• IE6 SELECT value gotcha

  Consider the following HTML and JavaScript snippet, which attempts to grab the selected value of a SELECT element: Seattle Tacoma Bellingham var s = document.getElementById("citySelector"); var v = s.options[s.selectedIndex].value; alert(v); In Firefox the result will be the string of selected city ("Tacoma"). IE6 however will return a blank string. Why? Look at the HTML. None of t

  2007/1/26 06:30http://jszen.blogspot.com/2007/01/ie6-select-value-gotcha.html

• Non-attachment

  When Kitano Gempo, abbot of Eihei temple, was twenty-eight he studied Chinese calligraphy and poetry. He grew so skillful in these arts that his teacher praised him. Kitano mused: "If I don't stop now, I'll be a poet, not a Zen teacher." So he never wrote another poem. — Zen Flesh, Zen Bones

  2006/3/9 03:08http://jszen.blogspot.com/2006/03/non-attachment.html

• Happy birthday "Ajax"

  Well, almost. February 18th is the official one-year anniversary of Jesse James Garrett's essay that coined the term "Ajax" to describe what applications like Google Maps were using under the hood. Thus rekindling interest in what some longtime web developers have pooh-poohed as old news: DHTML. But man. Books. Articles and tutorials. Conferences! Workshops! And the prime indicator that a concept has gained serious traction, haters! Not bad for something once considered just a few short years ag

  2006/2/16 05:35http://jszen.blogspot.com/2006/02/happy-birthday-ajax.html

• Y! Design Pattern Library

  While it's awesome that Yahoo! has released a suite of JS tools, I'm actually more enamored of the Yahoo! Design Pattern Library. The Yahoo! Design Pattern Library is an evolving set of sophisticated design guidelines for building web pages and applications. Our design patterns do not require the Yahoo! UI Library components, although using our UI Library can help you more easily implement the patterns described in these pages. Very cool.

  2006/2/15 03:50http://jszen.blogspot.com/2006/02/y-design-pattern-library.html

• Safari quirk: Copying innerHTML

  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." Foo span 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.getE

  2006/2/15 03:36http://jszen.blogspot.com/2006/02/safari-quirk-copying-innerhtml.html

• Automatic JavaScript documentation generation

  I'm looking for some recommendations for auto-generating API docs for JS libraries. There doesn't seem to be a lot of info out there on Google, so let's build a list here. I'm interested in everything from mods to existing packages like DocBook, JavaDocs, etc. to Perl scripts you've stitched together back in 1999. Have at it! Non-Blogger members can email me and I'll post your link.

  2006/1/17 04:43http://jszen.blogspot.com/2006/01/automatic-javascript-documentation.html

• Tip: the MS Script Debugger

  I'm surprised that more JavaScript developers don't know (or maybe have forgotten) about the Microsoft Script Debugger. If you're weary of IE script errors that report "Line 324: Object expected" and no filename when you have 500K of script divided over 12 files, install this beastie, then open IE and go to Tools > Internet Options > Advanced and uncheck "Disable Script Debugging (Internet Explorer)." Restart IE and the next time you encounter a JS error, a dialog box should pop up asking you if

  2006/1/13 17:53http://jszen.blogspot.com/2006/01/tip-ms-script-debugger.html

• Follow-up: Safari and String.replace() caveat

  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.)

  2005/12/20 03:12http://jszen.blogspot.com/2005/12/follow-up-safari-and-stringreplace.html

• MacIE's numbered days

  MSFT is officially pulling the plug IE5 for the Mac: In accordance with published support lifecycle policies, Microsoft will end support for Internet Explorer for Mac on December 31st, 2005, and will provide no further security or performance updates. Additionally, as of January 31st, 2006, Internet Explorer for the Mac will no longer be available for download from Mactopia. It is recommended that Macintosh users migrate to more recent web browsing technologies such as Apple's Safari. So long, o

  2005/12/20 02:47http://jszen.blogspot.com/2005/12/macies-numbered-days.html

• Y! JavaScript Dev Center

  Yahoo!'s JavaScript Developer Center looks pretty sweet.

  2005/12/17 01:36http://jszen.blogspot.com/2005/12/y-javascript-dev-center.html

• Safari and the String.replace() method

  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 "c

  2005/12/15 13:46http://jszen.blogspot.com/2005/12/safari-and-stringreplace-method.html

• Safari and DOM 2 HTML

  Does Safari support a HTML element hierarchy/interface, similar to Firefox's support of the DOM 2 HTML interface? It does not appear to be so. Or if it does, it doesn't expose it to scripting. True or false? Google is silent on the matter. Links and pointers welcome. Okay, some clarification: there's DOM 2 Core, which is the node/element interface we know and love, which allows us to express a document as a hierarchy of objects. On top of this is DOM 2 HTML which goes a step further by defining

  2005/11/9 03:58http://jszen.blogspot.com/2005/11/safari-and-dom-2-html.html

• Got ActiveX?

  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.

  2005/10/25 04:32http://jszen.blogspot.com/2005/10/got-activex.html

• Kickass form assistance

  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?

  2005/10/25 02:39http://jszen.blogspot.com/2005/10/kickass-form-assistance.html

• "Samy" explained

  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

  2005/10/25 02:21http://jszen.blogspot.com/2005/10/samy-explained.html

• The Ghost of NS4

  There are times when you simply have to throw in the towel and do something evil. Such as, oh, make Firefox behave like Netscape 4. A widely-used utility script was causing fatal errors in Firefox. These errors were halting the JS interpreter completely, which shut down my own code before it could even be executed. Closer examination revealed that the utility script jammed all browsers into the IE4 or NS4 category, and made extensive use of NS4-only properties like document.layers, layer.clip an

  2005/9/29 02:29http://jszen.blogspot.com/2005/09/ghost-of-ns4.html

• Del.icio.us with Blogspot blogs?

  I thought I'd be able to use del.icio.us links in conjunction with this blog (not as a sidebar, but the handy daily automated post feature), but it's been a long while since I used the Blogger API, and there doesn't seem to be a target URI for posting that I know of. Anyone out there know how I can get this working? Or am I just hosed?

  2005/9/27 08:09http://jszen.blogspot.com/2005/09/delicious-with-blogspot-blogs.html

• addEvent() recoding contest

  Peter-Paul Koch has put together a contest to recreate my addEvent() and removeEvent() utilities in a way that compensates for its inherent shortcomings: Write your own version of addEvent() and removeEvent(), submit it by adding a comment to this page, and win JavaScript fame. Entries will be judged by a panel consisting of Scott Andrew LePera, Dean Edwards and myself on script quality, simplicity and portability, and the clarity of your explanation. I'll also update the original tutorial that

  2005/9/8 22:22http://jszen.blogspot.com/2005/09/addevent-recoding-contest.html

• A treasure trove of quirks

  If you're not already reading Hallvord R. M. Steen's Miscoded Blog, you probably should be. Hallvord's a JavaScript QA tester for Opera Software, and uses his blog to record many of the JS and browser quirks and caveats he comes across. Some sample posts: IE's event transparency logic document.all offers another IE quirk meetup.com captures events by mistake (addEvent() strikes again!) Good stuff. Read it.

  2005/9/5 01:38http://jszen.blogspot.com/2005/09/treasure-trove-of-quirks.html

• Know your (event) sources

  A loooong time ago I wrote this tutoral on JavaScript events, in which I included a cross-browser event handling script called addEvent. Today, Peter-Paul Koch: addEvent Considered Harmful. And he's right, you can get into all kinds of headaches using IE's attachEvent method, as my own addEvent snippet does. Be sure to read the ensuing comment thread for some interesting alternative approaches. Caveat implementor, my friends. PS: I'm rather pleased that something I wrote merits a "considered har

  2005/8/31 07:15http://jszen.blogspot.com/2005/08/know-your-event-sources.html

• Firefox document.all caveat

  document.all is a proprietary feature of Microsoft Internet Explorer; a JavaScript-accessible collection of all page elements and precursor to the W3C document.getElementById() method. Firefox doesn't support document.all. Or does it? Beware: Firefox does sport a document.all when a page is in quirks mode. In fact, you can see it with the DOM Inspector tool. It doesn't have any child elements so I suspect it's some sort of wrapper for getElementById. Try referencing it from code and you may get

  2005/8/27 05:05http://jszen.blogspot.com/2005/08/firefox-documentall-caveat.html

• Google Talk

  Raise your hand if you were underwhelmed by Google Talk not only being Windows-only, but a desktop app. ::raises hand:: I'm sure I'm not the only one scratching my head over Google's decision to do a desktop app as opposed to a web client. It's not like it hasn't been done before — AOL's AIM Express is, as far as I can tell, a pure DHTML IM client although I can't tell for sure if it's a persistent connection or polling. Actually, I don't care; AIM Express rocks. It does the job, works in Moz, '

  2005/8/26 15:08http://jszen.blogspot.com/2005/08/google-talk.html

• Here come the Ajax books

  It's only been six months since Jesse James Garrett neatly rechristened the combination of JavaScript, DOM and behind-the-scenes HTTP requests as "Ajax," and there are already three books available for preorder at Amazon: Ajax in Action Foundations of AJAX Professional Ajax I've also heard rumblings of books from O'Reilly, Sitepoint, etc. Are you working on an Ajax book? Hit us with a comment.

  2005/8/15 11:58http://jszen.blogspot.com/2005/08/here-come-ajax-books.html

• Beware of false falses, or something like that

  This is a really, really common gotcha that trips up even expert webdevs. When you're checking for the existence of an object or property, make sure what you're testing is not going to return an unexpected value. For example. if (document.documentElement.scrollTop) {...} Right away, we're in trouble. Why? Because the default value of scrollTop is zero (for a page that hasn't been scrolled yet). In JavaScript (and many other "real" programming languages), zero is the same as false. So in the abov

  2005/8/14 09:25http://jszen.blogspot.com/2005/08/beware-of-false-falses-or-something.html

• The dark despair of DOCTYPEs

  It bears repeating: the use of different DOCTYPEs can change the DOM interface in unexpected ways. It shouldn't, but it does. To wit: document.body.scrollTop becomes document.documentElement.scrollTop...depending on which DOCTYPE is used. (The former property doesn't disappear, but stops being updated, returning 0 (zero) no matter how much you scroll). This seems to be true for both IE6 and Firefox. So be sure to test for both if your web app depends on accurately measuring the scroll offset of

  2005/8/4 14:56http://jszen.blogspot.com/2005/08/dark-despair-of-doctypes.html

• IE style rule gotcha

  I've been busy with massive project at the day job (launching soon, hope to mention it in detail here), and soon I'll be preoccupied with a C++ course, so I don't expect to be posting with any regular frequency here for the remainder of the summer. I will share this, though: just because you can set style properties with a string: elm.style.fontSize = "12px"; ...doesn't mean IE will accept any old string: elm.style.fontSize = "12px !important"; /* causes 'invalid argument' error in IE */ Firefox

  2005/8/3 14:58http://jszen.blogspot.com/2005/08/ie-style-rule-gotcha.html

• MS rolling out Ajax toolkit

  Looks like Microsoft will be rolling out an Ajax-enabling toolkit called Atlas. Microsoft's Atlas is a "Web client framework" designed to make the job of building AJAX-style applications simpler, said Charles Fitzgerald, the company's general manager for platform technologies. "People who do (AJAX development) are rocket scientists," Fitzgerald said. "In some ways, this papers over the mess that is JavaScript development. It's easy-to-build 'spaghetti' code." Atlas--which is a downloadable piece

  2005/6/29 00:43http://jszen.blogspot.com/2005/06/ms-rolling-out-ajax-toolkit.html

• Don't do these anymore

  Six JavaScript features we do not need any longer. I still see plenty of instances of "javascript:" in modern JS code. My favorite is seeing it used in an event handler, like this: Do This! With capitalization, even. Hello?

  2005/6/25 01:11http://jszen.blogspot.com/2005/06/dont-do-these-anymore.html

• Spot The WTF: JavaScript edition

  The Daily WTF has a doozy of a JavaScript challenge: the most jaw-dropping test for alphanumeric characters, evar. Wow.

  2005/6/24 08:07http://jszen.blogspot.com/2005/06/spot-wtf-javascript-edition.html

• I made some science

  2005/6/23 00:20http://jszen.blogspot.com/2005/06/i-made-some-science.html

• TiddlyWiki hack: exporting tiddler HTML

  I was trying to figure out how to export rendered HTML from a TiddlyWiki tiddler so I could paste it into an MS Word document. Since there doesn't seem to be a supported way to do this in TiddlyWiki, I found two methods that seem to work: If you're using Firefox, just highlight the tiddler text, then right-click your selection and choose "View Selection Source." I dunno why this works, but it does. Otherwise, I threw together the Ugliest TiddlyWiki Hack Ever! I may be reinventing the wheel here,

  2005/6/17 00:05http://jszen.blogspot.com/2005/06/tiddlywiki-hack-exporting-tiddler-html.html

• Proposed event sourcing in HTML 5

  From the Ajaxian blog, a rundown of proposed HTML 5 features from WHAT-WG. They also link to Hixie's slides, which don't work in Firefox. Feh. There's a lot of interesting stuff that walks the line between semantic vs. presentational, etc. My favorite, though, is this the proposal for event sources: This is exciting to me because mod-pubsub comes extremely close to this implementation with their JavaScript/DOM engine, which allowed HTML e

  2005/6/12 04:53http://jszen.blogspot.com/2005/06/proposed-event-sourcing-in-html-5.html