Compare Revisions
Last modification
- Rev 45 2015-12-12 19:43:58
- Author: PointedEars
- Log message:
Added historic FAQ posting script
| /trunk/.project |
| File deleted |
|
|
| Property changes: |
| Deleted: svn:mime-type |
| ## -1 +0,0 ## |
| -text/plain |
| \ No newline at end of property |
| Index: .buildpath |
| =================================================================== |
| --- .buildpath (revision 45) |
| +++ .buildpath (nonexistent) |
| @@ -1,5 +0,0 @@ |
| -<?xml version="1.0" encoding="UTF-8"?> |
| -<buildpath> |
| - <buildpathentry kind="src" path=""/> |
| - <buildpathentry kind="con" path="org.eclipse.php.core.LANGUAGE"/> |
| -</buildpath> |
| Index: cljs/example/jsuri/index.html |
| =================================================================== |
| --- cljs/example/jsuri/index.html (revision 45) |
| +++ cljs/example/jsuri/index.html (nonexistent) |
| @@ -1,49 +0,0 @@ |
| -<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" |
| -"http://www.w3.org/TR/html4/loose.dtd"> |
| -<html lang="en"> |
| -<head> |
| -<title>javascript pseudo-protocol errors</title> |
| -<meta http-equiv="refresh" content="10; url=pseudoGifTest.html"> |
| -<link rel="index" href="http://jibbering.com/faq/"> |
| -<script type="text/javascript"> |
| -var loadTime; |
| -function init(){ |
| - loadTime = +new Date |
| - showTime(); |
| - setInterval(showTime, 100); |
| - |
| -} |
| -window.onbeforeunload = function() { |
| - document.getElementById("bNotifier").value = "beforeonload handler called"; |
| -}; |
| - |
| -function showTime(){ |
| - document.forms['f'].elements['t'].value = (((new Date()).getTime() - loadTime)/1000) |
| -} |
| -</script> |
| -</head> |
| -<body onload="init()"> |
| -<h1>javascript: uri problems demo</h1> |
| -<p> |
| - <img src="waveAnim.gif" alt="animated wave"> |
| -</p> |
| - |
| -<form action="" onsubmit="return false;" name="f"> |
| - <input type="text" value="" name="t" size="20"> |
| - <input type="text" value="" id="bNotifier" size="30"> |
| -</form> |
| - |
| -<h3>javascript: uri as href</h3> |
| -<p> |
| -<a href="javascript:void 0;">javascript:void 0;</a> |
| -</p> |
| - |
| -<h3>Actual link to invalid URL</h3> |
| - <a href="http://bogus.example.com/v.html">http://bogus.example.com/</a> |
| - |
| -<h3>javascript: uri with syntactially invalid code</h3> |
| -<p> |
| - <a href="javascript:void();">javascript:void();</a> |
| -</p> |
| -</body> |
| -</html> |
| /cljs/example/jsuri/index.html |
| Property changes: |
| Deleted: svn:mime-type |
| ## -1 +0,0 ## |
| -text/plain |
| \ No newline at end of property |
| Index: cljs/example/jsuri/waveAnim.gif |
| =================================================================== |
| Cannot display: file marked as a binary type. |
| svn:mime-type = application/octet-stream |
| /cljs/example/jsuri/waveAnim.gif |
| Property changes: |
| Deleted: svn:mime-type |
| ## -1 +0,0 ## |
| -application/octet-stream |
| \ No newline at end of property |
| Index: cljs/example/postMessage.html |
| =================================================================== |
| --- cljs/example/postMessage.html (revision 45) |
| +++ cljs/example/postMessage.html (nonexistent) |
| @@ -1,60 +0,0 @@ |
| -<!doctype html> |
| -<html> |
| -<head> |
| -<title>window postMessage</title> |
| - |
| -<body> |
| -<h1>Ask the 8-Ball</h1> |
| -<iframe src="http://dhtmlkitchen.com/jstest/postMessage/receiver.html" id="iframe" |
| - style="width: 90%; height: 10em;"></iframe> |
| -<form id="posterForm"> |
| - <textarea id="msg" placeholder="Ask the 8 ball" cols="30" rows="5"></textarea> |
| - <input type="submit"> |
| - <pre id="responseMessage">-</pre> |
| -</form> |
| -<script type="text/javascript"> |
| -window.onload = function() { |
| - |
| - var DOMAIN_RECEIVER = "http://dhtmlkitchen.com", |
| - win = document.getElementById("iframe").contentWindow, |
| - responseMessage = document.getElementById("responseMessage"), |
| - form = document.getElementById("posterForm").onsubmit = postDataToWin; |
| - |
| - |
| - |
| - function postDataToWin(ev){ |
| - win.postMessage( |
| - document.getElementById("msg").value, |
| - DOMAIN_RECEIVER |
| - ); |
| - return false; |
| - } |
| - |
| - // Listen for message back from dhtmlkitchen. |
| - addCallback(self, "message", messageReceivedBackHandler); |
| - |
| - function messageReceivedBackHandler(ev) { |
| - ev = ev || self.event; |
| - var ACCEPT_DOMAIN = "http://dhtmlkitchen.com", |
| - origin = ev.origin, |
| - messageEl = document.getElementById("m"); |
| - |
| - // Allow only accepted domain. |
| - if(origin !== ACCEPT_DOMAIN) { |
| - return; |
| - } |
| - |
| - responseMessage.firstChild.data = ev.data; |
| - } |
| - |
| - function addCallback(o, type, cb){ |
| - if(o.addEventListener) { |
| - o.addEventListener(type, cb, false); |
| - } else { |
| - o.attachEvent("on" + type, cb); |
| - } |
| - } |
| -}; |
| -</script> |
| -</body> |
| -</html> |
| /cljs/example/postMessage.html |
| Property changes: |
| Deleted: svn:mime-type |
| ## -1 +0,0 ## |
| -text/plain |
| \ No newline at end of property |
| Index: cljs/example/functionStatement.html |
| =================================================================== |
| --- cljs/example/functionStatement.html (revision 45) |
| +++ cljs/example/functionStatement.html (nonexistent) |
| @@ -1,54 +0,0 @@ |
| -<!doctype html> |
| -<html lang="en"> |
| -<head> |
| -<meta charset="iso-8859-15"> |
| -<link rel="DCTERMS.isReferencedBy" href="http://jibbering.com/faq/#functionStatement"> |
| - |
| -<title>Function Statement Example - FAQ - comp.lang.javascript</title> |
| - |
| -<style type="text/css"> |
| -pre { |
| - background: #fefefe; |
| - padding: 1ex; |
| - border: 1px dashed #eee; |
| -} |
| -</style> |
| -</head> |
| - |
| -<body style="background: #f9f9f9"> |
| -<h1>Function Statement Example - FAQ : "What is a function statement?"</h1> |
| -<h2>Example Code</h2> |
| -<pre> |
| -try { |
| - x; // ReferenceError: x is not defined. |
| - function Fze(a, b) {a.unselectable = b} |
| -} catch(e) { } |
| - |
| -document.write("typeof Fze: ", typeof Fze, "\ntypeof e: ", typeof e); |
| -</pre> |
| - |
| -<h2>Result</h2> |
| -<pre> |
| -<script type="text/javascript"> |
| -try { |
| - x; // ReferenceError: x is not defined. |
| - function Fze(a, b) {a.unselectable = b} |
| -} catch(e) { } |
| - |
| -document.write("typeof Fze: ", typeof Fze, "\ntypeof e: ", typeof e); |
| -</script> |
| -</pre> |
| - |
| -<p> |
| -Expected outcome for <code>typeof Fze</code> is not specified by ECMA-262. |
| -</p> |
| -If <code>typeof Fze</code> results <code>"function"</code>, then <code>Fze</code> was interpreted |
| -as a FunctionDeclaration. Otherwise if <code>typeof Fze</code> resulted <code>"undefined"</code>, |
| -then <code>Fze</code> was not reached as a Statement; the preceeding statement - <code>x;</code> - |
| -would trigger a ReferenceError, making it unreachable. |
| -</p> |
| -<p> |
| -Expected outcome for <code>typeof e</code> is <code>"undefined"</code>. |
| -</p> |
| -</body> |
| -</html> |
| /cljs/example/functionStatement.html |
| Property changes: |
| Deleted: svn:mime-type |
| ## -1 +0,0 ## |
| -text/plain |
| \ No newline at end of property |
| Index: cljs/example/addcslashes.php |
| =================================================================== |
| --- cljs/example/addcslashes.php (revision 45) |
| +++ cljs/example/addcslashes.php (nonexistent) |
| @@ -1,10 +0,0 @@ |
| - |
| -<pre> |
| -$str: " ' \ |
| -
-</pre> |
| - |
| -<pre> |
| -addcslashes($str,"\\\'\"\n\r"): |
| -\" \' \\ \n\r |
| -</pre> |
| \ No newline at end of file |
| Index: cljs/auto-poster.pl |
| =================================================================== |
| --- cljs/auto-poster.pl (revision 45) |
| +++ cljs/auto-poster.pl (nonexistent) |
| @@ -1,354 +0,0 @@ |
| -#!/usr/bin/perl |
| - |
| -#################################################################### |
| -# comp.lang.javascript FAQ - Daily sendout to Usenet based upon # |
| -# XML feed in defined format. # |
| -#------------------------------------------------------------------# |
| -# Message headers can only contain 7bit ASCII chars (RFC2822). # |
| -# I'm using ISO-8859-1 in the message bodies for maximum # |
| -# compatibility with all kinds of newsreaders. # |
| -#------------------------------------------------------------------# |
| -# Code by Bart Van der Donck - www.dotinternet.be - Aug 2006. # |
| -#------------------------------------------------------------------# |
| -# This program is free software released under the GNU/GPL; you # |
| -# can redistribute it and/or modify it under the GNU/GPL terms. # |
| -#################################################################### |
| - |
| -#################################################################### |
| -# Load modules & locale for English formatted date. # |
| -# These modules should be present in default Perl 5.6+ installs. # |
| -#################################################################### |
| - |
| -use strict; |
| -use warnings; |
| -use POSIX; |
| -use Net::NNTP; |
| -use LWP::UserAgent; |
| -use HTML::Parser; |
| -use HTML::Entities; |
| -use XML::Parser; |
| -use XML::Simple; |
| - |
| -setlocale(LC_ALL, 'English (UK)'); |
| - |
| - |
| -#################################################################### |
| -# Configuration area. # |
| -#################################################################### |
| - |
| -# account on news server (leave both blanco if no authentication |
| -# is needed) |
| -my $account = 'javas...@dotinternet.be'; |
| -my $password = 'secret'; |
| - |
| -# server and newsgroup |
| -my $server = 'news.sunsite.dk'; |
| -my $ng = 'comp.lang.javascript'; |
| - |
| -# sender data |
| -my $sendername = 'FAQ server'; |
| -my $senderaddress = 'javas...@dotinternet.be'; |
| - |
| -# where is the XML file to load ? |
| -my $xml_file = 'http://www.jibbering.com/faq/index.xml'; |
| - |
| -# footer of the message |
| -my $footer = <<FOOT |
| --- |
| - Postings as these are automatically sent once a day. Their goal |
| - is to answer repeated questions, and to offer the content to the |
| - community for continuous evaluation/improvement. The complete |
| - comp.lang.javascript FAQ is at http://www.jibbering.com/faq/. |
| - The FAQ workers are a group of volunteers. |
| -FOOT |
| -; |
| - |
| -# where is writable file that keeps track of the counter |
| -# (path must be absolute or relative to this script) |
| -my $writablefile = 'entry2post.cnt'; |
| -my $fc; |
| - |
| -# misc. header settings, these should be left untouched |
| -my $mime_version = '1.0'; |
| -my $charset = 'iso-8859-1'; |
| -my $content_type = 'text/plain'; |
| -my $trans_enc = '8bit'; |
| -my $organization = 'comp.lang.javascript FAQ workers'; |
| -my $date = strftime "%a, %d %b %Y %H:%M:%S +0000", gmtime; |
| - |
| -# which regexes for nice Usenet layout |
| -my %regexes = ( |
| - "p" => "\n", |
| - "/p" => "\n", |
| - "em" => "_", |
| - "/em" => "_", |
| - "url" => "\n\n", |
| - "/url" => "\n\n", |
| - "ul" => "\n", |
| - "/ul" => "\n", |
| - "li" => "* ", |
| - "/li" => "", |
| - "moreinfo" => "\n\n", |
| - "/moreinfo" => "\n\n", |
| - "resource" => "\n\n", |
| - "/resource" => "\n\n", |
| - "icode" => "`` ", |
| - "/icode" => " ''", |
| - "code" => "\n\n", |
| - "/code" => "\n\n", |
| - ); |
| - |
| -# run options |
| -my $sendout = 1; # 1 = send to Usenet, 0 = print to screen. |
| -my $printnrs = 0; # 1 = include FAQ chapter & entry nr, |
| - # 0 = exclude. CAUTION! as it takes this |
| - # data not from XML feed but from this |
| - # porgram's internal counting. |
| - |
| -#################################################################### |
| -# Get XML file. # |
| -#################################################################### |
| - |
| -# fetch XML file |
| -my $ua = new LWP::UserAgent; |
| -$ua->agent("AgentName/0.1 " . $ua->agent); |
| -my $req = new HTTP::Request GET => $xml_file; |
| -$req->content_type('text/xml'); |
| -my $res = $ua->request($req); |
| -unless ($res->is_success) { |
| - die "Error: couldn't get $xml_file: $!\n"; |
| -} |
| - |
| -# is XML file well-formed ? |
| -my $xml = $res->content; |
| -eval { XML::Parser->new(ErrorContext=>1)->parse($xml) }; |
| -if ($@) { |
| - die "Error: $xml_file is not well-formed XML\n"; |
| -} |
| - |
| -#################################################################### |
| -# Regexes on XML feed. # |
| -#################################################################### |
| - |
| -# regex the mentionned tags to Usenet layout format |
| -while ( my ($key, $val) = each %regexes ) { |
| - $xml =~ s/<\Q$key\E(?:[^>'"]*|(['"]).*?\1)*>/$val/gsi; |
| -} |
| - |
| -# regex out all other tags except CONTENTS, CONTENT, FAQ, TITLE |
| -my $result_xml = ''; |
| -my @report_tags = qw(content contents faq title); |
| -HTML::Parser->new(api_version => 3, |
| - start_h => [\&tag, 'tokenpos, text'], |
| - process_h => ['', ''], |
| - comment_h => ['', ''], |
| - declaration_h => [\&decl, 'tagname, text'], |
| - default_h => [\&text, 'text'], |
| - report_tags => \@report_tags, |
| - ) |
| - ->parse( $xml ); |
| - |
| -# check for well-formedness |
| -eval { XML::Parser->new(ErrorContext=>1)->parse($result_xml) }; |
| -if ($@) { |
| - die "Error: XML file not well-formed after Usenet format regexes"; |
| -} |
| - |
| -#################################################################### |
| -# Decide which subject/body part we need. # |
| -#################################################################### |
| - |
| -# tie xml to vars |
| -my $xml_ref = XMLin($result_xml, ForceArray => 1); |
| - |
| -# load counter file |
| -open my $F, '<', $writablefile |
| - || die "Error: can't open $writablefile: $!"; |
| -flock($F, 1) || die "Error: can't get LOCK_SH on $writablefile: $!"; |
| -$fc = $_ while <$F>; |
| -close $F || die "Error: can't close $writablefile: $!"; |
| -my ($chap, $cnt) = split /\|/, $fc; |
| - |
| -# lookup subject/body in hashed structure |
| -unless ($xml_ref->{CONTENTS}->[0] |
| - ->{CONTENT}->[$chap] |
| - ->{CONTENT}->[$cnt]) { |
| - save4next ( $chap, $cnt ); |
| - die "Error: FAQ entry ".($chap+1).".".($cnt+1).". doesn't exist"; |
| -} |
| - |
| -my $part = $xml_ref->{CONTENTS}->[0] |
| - ->{CONTENT}->[$chap] |
| - ->{CONTENT}->[$cnt]; |
| -my %hash_deref = %$part; |
| -my $subject = $hash_deref{TITLE}; |
| -my $body = $hash_deref{content}; |
| - |
| - |
| -#################################################################### |
| -# Regexes on $body and $subject and compile final $message # |
| -#################################################################### |
| - |
| -# decode num/char HTML entities in subject and in message |
| -$subject = HTML::Entities::decode($subject); |
| -$body = HTML::Entities::decode($body); |
| - |
| -# take care of Euro sign towards ISO-8859-1, just in case |
| -s//Euro/ig for ($body, $subject); |
| - |
| -# don't allow EOLs and successive blancs in subject lines |
| -$subject =~ s/\n/ /g; |
| -$subject =~ s/\s+/ /g; |
| - |
| -# remove 1-6 initial blanks from begin + all from end |
| -my @splitbody = split /\n/, $body; |
| -for (@splitbody) { |
| - s/\s+$//; |
| - s/^\s{1,6}//; |
| - s/^\s+http:/http:/g; # issue with leading http on line |
| -} |
| -$body = join "\n", @splitbody; |
| - |
| -# remove more than three EOLs |
| -$body =~ s/\n{3,}/\n\n/gs; |
| - |
| -# remove all EOLs from begin and end of $body |
| -for ($body) { |
| - s/^\n+//; |
| - s/\n+$//; |
| -} |
| - |
| -# should we add the FAQ entry chapter/number ? (own counting) |
| -if ($printnrs==1) { |
| -$subject = 'FAQ ' . $chap . '.' . $cnt . '. - ' . $subject ; |
| -} |
| -else { |
| -$subject = 'FAQ - ' . $subject; |
| -} |
| - |
| -# format full body |
| -$body = "\x2D" x 71 . "\n" . $subject . "\n" . "\x2D" x 71 |
| - . "\n" x 2 . $body . "\n" x 3 . $footer; |
| - |
| -# remove lines that consist only of 1 dot |
| -$body =~ s/\n\.\n/\n/g; |
| - |
| -# compute & store which entry is to send next time |
| -save4next ( $chap, $cnt ); |
| - |
| -# compile complete message |
| -my $message = <<EOM; |
| -Reply-To: "$sendername" <$senderaddress> |
| -From: "$sendername" <$senderaddress> |
| -Date: $date |
| -Newsgroups: $ng |
| -Subject: $subject |
| -Organization: $organization |
| -Mime-Version: $mime_version |
| -Content-Type: $content_type; charset="$charset" |
| -Content-Transfer-Encoding: $trans_enc\n |
| -$body |
| -EOM |
| - |
| -# should we send the message to Usenet or print to screen ? |
| -if ($sendout != 1) { |
| - print $message; |
| - exit; |
| -} |
| - |
| - |
| -#################################################################### |
| -# Fire off the message. # |
| -#################################################################### |
| - |
| -# do some final checks |
| -if ( !$message || $message eq '' || !$body || $body eq '' |
| - || !$subject || $subject eq '') { |
| - die "Error: didn't send message due to malformed data"; |
| -} |
| - |
| -# send action (heavy error checking) |
| -my $nntp = Net::NNTP->new( $server ) |
| - || die "Error: can't connect to $server: $!\n"; |
| - |
| -$nntp->authinfo( $account, $password ) |
| - || die "Error: Net::NNTP->authinfo() failed: $!\n" |
| -if ( defined $account && defined $password |
| - && $account ne '' && $password ne ''); |
| - |
| -$nntp->postok() || die "Error: $server said: not allowed to post\n"; |
| - |
| -$nntp->post( $message ) |
| - || die "Error: can't send message: $!\n"; |
| -$nntp->quit; |
| - |
| - |
| -#################################################################### |
| -# HTML::Parser and $chap/$cnt counting routines. # |
| -#################################################################### |
| - |
| -sub tag { |
| - my ($pos, $text) = @_; |
| - if (@$pos >= 4) { |
| - my ($k_offset, $k_len, $v_offset, $v_len) = @{$pos}[-4 .. -1]; |
| - my $next_attr = $v_offset?$v_offset+$v_len:$k_offset+$k_len; |
| - my $edited; |
| - while (@$pos >= 4) { |
| - ($k_offset, $k_len, $v_offset, $v_len) = splice @$pos, -4; |
| - $next_attr = $k_offset; |
| - } |
| - $text =~ s/^(<\w+)\s+>$/$1>/ if $edited; |
| - } |
| - $result_xml.=$text; |
| -} |
| - |
| -sub decl { |
| - my $type = shift; |
| - $result_xml.=shift if $type eq 'doctype'; |
| -} |
| - |
| -sub text { |
| - $result_xml.= shift; |
| -} |
| - |
| -sub save4next { |
| - my ($ch, $cn) = @_; |
| - |
| - # next entry in same chapter exists ? |
| - if ($xml_ref->{CONTENTS}->[0] |
| - ->{CONTENT}->[$ch] |
| - ->{CONTENT}->[$cn+1]) { |
| - writefile( $ch . '|' . ($cn+1) ); |
| - return |
| - } |
| - |
| - # first entry in next chapter exists ? |
| - if ($xml_ref->{CONTENTS}->[0] |
| - ->{CONTENT}->[$ch+1] |
| - ->{CONTENT}->[0]) { |
| - writefile( ($ch+1).'|0' ); |
| - return |
| - } |
| - |
| - # reset entries if we're at the last entry of the last chapter |
| - if ($xml_ref->{CONTENTS}->[0] |
| - ->{CONTENT}->[1] |
| - ->{CONTENT}->[0]) { |
| - writefile( '1|0' ); |
| - return |
| - } |
| - |
| - # last resort: no entry found => reset counter and die |
| - writefile( '1|0' ); |
| - die "Error: couldn't find next entry for FAQ ".($ch+1).".".($cn+1) |
| - ."; next time I'll take the first entry again"; |
| -} |
| - |
| -sub writefile { |
| - open WR, '>', $writablefile |
| - || die "Error: can't open $writablefile: $!"; |
| - print WR shift; |
| - close WR || die "Error: can't close $writablefile: $!"; |
| -} |
| - |
| -__END__ |
| Index: cljs/index.xsl |
| =================================================================== |
| --- cljs/index.xsl (revision 45) |
| +++ cljs/index.xsl (nonexistent) |
| @@ -1,293 +0,0 @@ |
| -<?xml version="1.0" encoding="UTF-8"?> |
| -<!DOCTYPE xsl:stylesheet [ |
| - <!ENTITY nbsp " "><!-- no-break space = non-breaking space, |
| - U+00A0 ISOnum --> |
| -]> |
| -<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"> |
| - <xsl:output method="html" |
| - doctype-public="-//W3C//DTD HTML 4.01//EN" |
| - doctype-system="http://www.w3.org/TR/html4/strict.dtd"/> |
| - |
| - <xsl:variable name="checkURLs" select="false"/> |
| - <xsl:variable name="previous_url">http://jibbering.com/faq/</xsl:variable> |
| - <xsl:variable name="previous_maintainer">Garrett Smith</xsl:variable> |
| - <xsl:variable name="previous_maintainer_website">http://personx.tumblr.com/</xsl:variable> |
| - |
| - <xsl:variable name="maintainer">Thomas 'PointedEars' Lahn</xsl:variable> |
| - <xsl:variable name="maintainer_email"><![CDATA[cljs@PointedEars.de]]></xsl:variable> |
| - <xsl:variable name="maintainer_website">http://PointedEars.de/</xsl:variable> |
| - |
| - <xsl:variable name="version" select="/FAQ/@VERSION"/> |
| - <xsl:template match="/FAQ"> |
| - <xsl:variable name="revision_length" select="string-length('$Revision: ')"/> |
| - <xsl:variable name="revision" select="substring(@revision, $revision_length, string-length(@revision) - $revision_length - 1)"/> |
| - <xsl:variable name="updated" select="@DATE"/> |
| - |
| - <html lang="en"> |
| - <head> |
| - <meta http-equiv="Content-Type" content="text/html; UTF-8"/> |
| - <title><xsl:value-of select="TITLE"/></title> |
| - <meta name="DCTERMS.language" scheme="RFC1766" content="en"/> |
| - <meta name="DC.title" content="FAQ for comp.lang.javascript"/> |
| - <meta name="DCTERMS.subject" |
| - content="Frequently asked questions in the Usenet newsgroup comp.lang.javascript"/> |
| - <meta name="DC.format" content="text/html"/> |
| - <meta name="DC.type" content="Text"/> |
| - <meta name="DC.creator" content="Jim Ley"/> |
| - <meta name="DC.publisher" content="{$maintainer}"/> |
| - <meta name="DC.Publisher.Address" |
| - content="{$maintainer_email}"/> |
| - <meta name="DCTERMS.modified" content="{$updated}"/> |
| - <meta name="DCTERMS.audience" content="Programmers, web developers"/> |
| - <meta name="DC.description" content="Frequently Asked Questions about JavaScript and other ECMAScript implementations"/> |
| - <meta name="DC.identifier" content="http://PointedEars.de/scripts/faq/cljs/"/> |
| - <meta name="DC.source" |
| - content="http://www.ecma-international.org/publications/standards/Ecma-262.htm"/> |
| - <meta name="DC.source" content="news:comp.lang.javascript"/> |
| - <meta name="DC.source" content="https://developer.mozilla.org/en/JavaScript"/> |
| - <meta name="DC.source" content="http://msdn.microsoft.com/en-us/library/hbxc2t98%28VS.85%29.aspx"/> |
| - <meta name="DC.source" content="http://msdn.microsoft.com/en-us/library/ms533050%28VS.85%29.aspx"/> |
| - <meta name="DC.rights" content="copyright contributors, comp.lang.javascript"/> |
| - <link rel="StyleSheet" href="faq.css" type="text/css" media="screen"/> |
| - </head> |
| - <body> |
| - <h1><xsl:value-of select="TITLE"/></h1> |
| - |
| - <p><!-- Revision <xsl:value-of select="$revision"/> |
| - -->by <a href="{$maintainer_website}"><xsl:value-of select="$maintainer"/></a> |
| - and <a href="#contributors">contributors</a><br/> |
| - Based on the <a href="{$previous_url}">comp.lang.javascript FAQ</a>, |
| - version <xsl:value-of select="$version"/> |
| - of <xsl:value-of select="$updated"/>, |
| - by <a href="{$previous_maintainer_website}"><xsl:value-of select="$previous_maintainer"/></a> |
| - and contributors.</p> |
| - |
| - <ul style="list-style: none; margin-left: 0; padding-left: 0"> |
| - <li><tt><xsl:value-of select="@id" /></tt></li> |
| - <li><tt>$Id$</tt></li> |
| - </ul> |
| - |
| - <div> |
| - <ul class="horizontal"> |
| - <li><a |
| - href="http://PointedEars.de/wsvn/FAQs/trunk/cljs/?op=log&isdir=1&showchanges=1" |
| - >Changelog</a></li> |
| - <li><a |
| - href="http://PointedEars.de/wsvn/FAQs/trunk/cljs/" |
| - title="Subversion repository browser" |
| - >SVN</a></li> |
| - </ul> |
| - </div> |
| - |
| - <xsl:variable name="faq_uri">http://PointedEars.de/scripts/faq/cljs/</xsl:variable> |
| - <p style="clear: left; text-align: left"> |
| - Available online at <a |
| - href="{$faq_uri}" |
| - ><xsl:value-of select="$faq_uri"/></a> |
| - </p> |
| - |
| - <hr/> |
| - |
| - <h2 id="toc">Table of contents</h2> |
| - |
| - <div id="nav"><a href="notes/">FAQ Notes</a></div> |
| - |
| - <xsl:apply-templates select="CONTENTS" mode="toc"/> |
| - |
| - <hr/> |
| - |
| - <xsl:apply-templates select="CONTENTS"/> |
| - </body> |
| - </html> |
| - </xsl:template> |
| - |
| - <xsl:template match="CONTENTS" mode="toc"> |
| - <ul id="faqList"> |
| - <xsl:apply-templates select="CONTENT" mode="toc"/> |
| - </ul> |
| - </xsl:template> |
| - |
| - <xsl:template match="CONTENTS"> |
| - <xsl:apply-templates select="CONTENT"/> |
| - </xsl:template> |
| - |
| - <xsl:template match="CONTENT" mode="toc"> |
| - <li><xsl:value-of select="position()"/> |
| - <xsl:text> </xsl:text> |
| - <a href="#{@ID}"><xsl:value-of select="@TITLE"/></a> |
| - |
| - <xsl:if test="CONTENT"> |
| - <ul> |
| - <xsl:apply-templates select="CONTENT" mode="subtoc"> |
| - <xsl:with-param name="section" select="position()" /> |
| - </xsl:apply-templates> |
| - </ul> |
| - </xsl:if></li> |
| - </xsl:template> |
| - |
| - <xsl:template match="CONTENT" mode="subtoc"> |
| - <xsl:param name="section"/> |
| - |
| - <li><xsl:value-of select="$section"/>.<xsl:value-of select="position()"/> |
| - <xsl:text> </xsl:text><a href="#{@ID}"><xsl:value-of select="@TITLE"/></a></li> |
| - </xsl:template> |
| - |
| - <xsl:template match="CONTENT"> |
| - <div id="{@ID}" class="section"> |
| - <xsl:element name="h2"> |
| - <xsl:call-template name="getOldId"> |
| - <xsl:with-param name="node" select="."/> |
| - </xsl:call-template> |
| - |
| - <xsl:value-of select="position()"/> |
| - <xsl:text> </xsl:text> |
| - <xsl:value-of select="@TITLE"/> |
| - </xsl:element> |
| - |
| - <!-- introduction; TODO: use separate element --> |
| - <xsl:for-each select="*"> |
| - <xsl:if test="local-name(.) != 'CONTENT'"> |
| - <xsl:apply-templates select="."/> |
| - </xsl:if> |
| - </xsl:for-each> |
| - |
| - <xsl:variable name="section" select="position()"/> |
| - <xsl:for-each select="CONTENT"> |
| - <xsl:apply-templates select="." mode="subsection"> |
| - <xsl:with-param name="section" select="concat($section, '.', position())"/> |
| - </xsl:apply-templates> |
| - </xsl:for-each> |
| - </div> |
| - </xsl:template> |
| - |
| - <xsl:template name="getOldId"> |
| - <xsl:param name="node"/> |
| - <xsl:if test="$node/@NUMID"> |
| - <xsl:attribute name="id">FAQ<xsl:value-of select="$node/@NUMID"/></xsl:attribute> |
| - </xsl:if> |
| - </xsl:template> |
| - |
| - <xsl:template match="CONTENT" mode="subsection"> |
| - <xsl:param name="section"/> |
| - |
| - <div id="{@ID}" class="section"> |
| - <xsl:element name="h3"> |
| - <xsl:call-template name="getOldId"> |
| - <xsl:with-param name="node" select="."/> |
| - </xsl:call-template> |
| - <xsl:value-of select="$section"/><xsl:text> </xsl:text> |
| - <xsl:value-of select="@TITLE"/> |
| - </xsl:element> |
| - |
| - <xsl:apply-templates /> |
| - </div> |
| - </xsl:template> |
| - |
| - <xsl:template match="VER"> |
| - <xsl:value-of select="$version"/> |
| - </xsl:template> |
| - |
| - <xsl:template match="UPDATED"> |
| - <xsl:value-of select="$updated"/> |
| - </xsl:template> |
| - |
| - <xsl:template match="URL"> |
| - <!-- TODO: Link check, see process.wsf --> |
| - <xsl:element name="a"> |
| - <xsl:variable name="uri" select="text()"/> |
| - <xsl:attribute name="href"><xsl:value-of select="$uri"/></xsl:attribute> |
| - <xsl:if test="$checkURLs"> |
| - <xsl:choose> |
| - <xsl:when test="starts-with($uri, 'http://')"> |
| - <xsl:variable name="response" select="document($url)"/> |
| - <xsl:if test="not($response) or contains($url, 'microsoft') and contains($response, 'Page Cannot')"> |
| - <xsl:attribute name="class">nolink</xsl:attribute> |
| - </xsl:if> |
| - </xsl:when> |
| - <xsl:otherwise> |
| - <xsl:variable name="response" select="document(concat('http://www.google.com/search?q=cache:', $url), '/')"/> |
| - <xsl:choose> |
| - <xsl:when test="$response"> |
| - <xsl:attribute name="class">cached</xsl:attribute> |
| - </xsl:when> |
| - <xsl:otherwise> |
| - <xsl:attribute name="class">nolink</xsl:attribute> |
| - </xsl:otherwise> |
| - </xsl:choose> |
| - <xsl:attribute name="class">nolink</xsl:attribute> |
| - </xsl:otherwise> |
| - </xsl:choose> |
| - </xsl:if> |
| - |
| - <xsl:value-of select="@LINKTEXT|text()"/> |
| - </xsl:element> |
| - </xsl:template> |
| - |
| - <xsl:template match="NEWSGROUP"> |
| - <a href="news:{.}'"><xsl:value-of select="."/></a> |
| - </xsl:template> |
| - |
| - <xsl:template match="MAILTO"> |
| - <a href="mailto:{.}'"><xsl:value-of select="."/></a> |
| - </xsl:template> |
| - |
| - <xsl:template match="MOREINFO"> |
| - <ul class="linkList"> |
| - <xsl:for-each select="*"> |
| - <li><xsl:apply-templates select="."/></li> |
| - </xsl:for-each> |
| - </ul> |
| - </xsl:template> |
| - |
| - <xsl:template match="CODE"> |
| - <pre><code><xsl:apply-templates/></code></pre> |
| - </xsl:template> |
| - |
| - <xsl:template match="ICODE"> |
| - <code><xsl:apply-templates /></code> |
| - </xsl:template> |
| - |
| - <xsl:template match="LIST"> |
| - <xsl:if test="@TITLE"> |
| - <xsl:element name="h4"> |
| - <xsl:if test="@ID"> |
| - <xsl:attribute name="id"><xsl:value-of select="@ID"/></xsl:attribute> |
| - </xsl:if> |
| - <xsl:value-of select="@TITLE"/> |
| - </xsl:element> |
| - </xsl:if> |
| - |
| - <xsl:variable name="type"> |
| - <xsl:choose> |
| - <xsl:when test="@TYPE"><xsl:value-of select="@TYPE"/></xsl:when> |
| - <xsl:otherwise>ul</xsl:otherwise> |
| - </xsl:choose> |
| - </xsl:variable> |
| - |
| - <xsl:element name="{$type}"> |
| - <xsl:if test="not(@TITLE) and @ID"> |
| - <xsl:attribute name="id"><xsl:value-of select="@ID"/></xsl:attribute> |
| - </xsl:if> |
| - |
| - <xsl:for-each select="*"> |
| - <xsl:apply-templates select="."/> |
| - </xsl:for-each> |
| - </xsl:element> |
| - </xsl:template> |
| - |
| - <xsl:template match="P"> |
| - <xsl:copy> |
| - <!-- NOTE: do not copy invalid attributes --> |
| - <xsl:apply-templates select="@*[local-name() != 'HTMLONLY']"/> |
| - <xsl:apply-templates/> |
| - </xsl:copy> |
| - </xsl:template> |
| - |
| - <!-- standard copy template --> |
| - <xsl:template match="@*|node()"> |
| - <xsl:copy> |
| - <xsl:apply-templates select="@*"/> |
| - <xsl:apply-templates/> |
| - </xsl:copy> |
| - </xsl:template> |
| -</xsl:stylesheet> |
| \ No newline at end of file |
| /cljs/index.xsl |
| Property changes: |
| Deleted: svn:keywords |
| ## -1 +0,0 ## |
| -Id |
| \ No newline at end of property |
| Deleted: svn:mime-type |
| ## -1 +0,0 ## |
| -text/plain |
| \ No newline at end of property |
| Index: cljs/index.php |
| =================================================================== |
| --- cljs/index.php (revision 45) |
| +++ cljs/index.php (nonexistent) |
| @@ -1,39 +0,0 @@ |
| -<?php |
| - |
| -$encoding = 'UTF-8'; |
| -header("Content-Type: text/html" . ($encoding ? "; charset=$encoding" : "")); |
| - |
| -$modi = max( |
| - array_map('filemtime', |
| - array_diff( |
| - array_merge( |
| - scandir(__DIR__), |
| - array_map( |
| - function ($e) { |
| - return 'sections' . DIRECTORY_SEPARATOR . $e; |
| - }, |
| - scandir('sections') |
| - ) |
| - ), |
| - array('.', '..') |
| - ) |
| - ) |
| -); |
| - |
| -header('Last-Modified: ' . gmdate('D, d M Y H:i:s', $modi) . ' GMT'); |
| - |
| -/* Cached resource expires in HTTP/1.1 caches 0 (-24-) h after last retrieval */ |
| -header('Cache-Control: max-age=0, s-maxage=0, must-revalidate, proxy-revalidate'); |
| - |
| -/* Cached resource expires in HTTP/1.0 caches 0 (-24-) h after last retrieval */ |
| -header('Expires: ' . gmdate('D, d M Y H:i:s', time() /*+ 86400*/) . ' GMT'); |
| - |
| -$doc = new DOMDocument(); |
| -$doc->substituteEntities = true; |
| -$xsl = new XSLTProcessor(); |
| - |
| -$doc->load('index.xsl'); |
| -$xsl->importStyleSheet($doc); |
| - |
| -$doc->load('index.xml'); |
| -echo $xsl->transformToXML($doc); |
| \ No newline at end of file |
| /cljs/index.php |
| Property changes: |
| Deleted: svn:keywords |
| ## -1 +0,0 ## |
| -LastChangedDate LastChangedRevision LastChangedBy Id |
| \ No newline at end of property |
| Index: cljs/faq.css |
| =================================================================== |
| --- cljs/faq.css (revision 45) |
| +++ cljs/faq.css (nonexistent) |
| @@ -1,229 +0,0 @@ |
| -/* |
| -Updated 2009-06-14 Garrett Smith |
| -*/ |
| - |
| - |
| -a { |
| - text-decoration: none; |
| - color: #002288; |
| - background: none; |
| -} |
| - |
| -a:hover { |
| - text-decoration: underline; |
| -} |
| - |
| -a[href^="http:"], |
| -a[href^="https:"], |
| -a[href^="news:"] |
| -{ |
| - padding-right: 13px; |
| - background: transparent url(/media/video/img/external.png) no-repeat right center; |
| -} |
| - |
| -a[href^="http://PointedEars.de/"], |
| -a[href^="https://PointedEars.de/"] |
| -{ |
| - padding-right: 0; |
| - background: none; |
| -} |
| - |
| -html { |
| - font-family: sans-serif; |
| - font-size: 90%; |
| - background: #F6f6f6; |
| - color : #000; |
| -} |
| - |
| -body { |
| - margin: 1em; |
| - border-bottom: 1px solid #ccc; |
| -} |
| - |
| -.preSample { |
| - background-color : #f9eff0; |
| - line-height : 200%; |
| - border : #bb7799 1px solid; |
| -} |
| - |
| -pre { |
| - font-family : monospace; |
| - background-color : #fFF9f9; |
| - border : #bb7799 1px solid; |
| - color : #440011; |
| - font-size : 100%; |
| - padding : 5px 5px 5px 10px; |
| -} |
| - |
| -h1 { |
| - font-size : 160%; |
| -} |
| - |
| -h2 { |
| - font-size : 140%; |
| -} |
| - |
| -h3 { |
| - font-size : 113%; |
| -} |
| - |
| -h2 a, h3 a, h2 a:hover, h3 a:hover { |
| - color: inherit; |
| - text-decoration: none; |
| -} |
| - |
| -.section h3 { |
| - margin-top: 0; |
| -} |
| - |
| -h4 { |
| - font-size : 110%; |
| -} |
| - |
| -h5 { |
| - font-size : 100%; |
| -} |
| - |
| -code { |
| - color : #550011; |
| - font-family : monospace; |
| - margin: 0em 0.1em; |
| -} |
| - |
| -/** EcmaScript Code Examples */ |
| -/* keywords, if, with, var, et c */ |
| -.keyword { |
| - color: #00f; |
| - font-weight: 800; |
| -} |
| - |
| -/* string literals */ |
| -.q { |
| - color: #900; |
| -} |
| - |
| -ul.linkList { |
| - background-color : #eeeeee; |
| - border : #999999 1px solid; |
| - color : #000000; |
| - font-size : 100%; |
| - padding : 0.2em; |
| - list-style: none; |
| -} |
| - |
| -ul.linkList li { |
| - margin: .2em; |
| -} |
| - |
| -ul.horizontal { |
| - float: left; |
| - margin: 0 0 1em 0; |
| - padding-left: 0; |
| - list-style: none; |
| -} |
| - |
| -ul.horizontal li { |
| - float: left; |
| - margin-left: 0; |
| - margin-right: 0.5em; |
| -} |
| - |
| -#faqList { |
| - font-size: 120%; |
| - list-style: none; |
| - padding-left: 0; |
| - margin-left: 0; |
| -} |
| - |
| -#faqList li { |
| - margin-top: .3em; |
| - margin-bottom: .3em; |
| -} |
| - |
| -#faqList ul { |
| - font-size: 83%; |
| - list-style: none; |
| - padding-left: 0; |
| - padding-top: 0; |
| - margin-left: 1em; |
| - color: #333; |
| -} |
| - |
| -.linkListSample { |
| - background-color : #eeeeff; |
| - line-height : 200%; |
| - border : #9999bb 1px solid; |
| -} |
| - |
| -dd { |
| - margin: 3px 2em; |
| - padding: 0; |
| -} |
| - |
| -#nav { |
| - clear: both; |
| -} |
| - |
| -#readerViewToggle { |
| - margin-left: 34%; |
| - text-align: center; |
| - position: absolute; |
| - margin-top: -3em; |
| - background: #fff; |
| - border: 1px solid #CCC; |
| - padding: 0.1em 0.2em; |
| -} |
| - |
| -#readerViewToggle * { |
| - cursor: pointer; |
| - display: block; |
| - white-space: nowrap; |
| -} |
| - |
| -#readerViewToggle img { |
| - font-size: 24px; |
| - height: 33px; |
| - width: 27px; |
| - margin: auto; |
| -} |
| - |
| -.readerView #faqList { |
| - width: 40%; |
| - background: #fcfcfc; |
| - border: 1px solid #eee; |
| - -moz-border-radius: 4px; |
| - -webkit-border-radius: 4px; |
| - padding: 8px; |
| - float: left; |
| - margin-right: 22px; |
| -} |
| - |
| -.section { |
| - padding-top: 1.2em; |
| -} |
| - |
| -.readerView .section { |
| - display: none; |
| - float: left; |
| - width:56%; |
| -} |
| - |
| -#builtInsList dd { |
| - margin-right: 0; |
| - margin-left: 1em; |
| - display: inline; |
| -} |
| - |
| -#builtInsList dt { |
| - font-weight: 700; |
| -} |
| - |
| -#pageWarning { |
| - background-color: #fff3dd; |
| - color: #321; |
| - border: 1ex solid #fc9; |
| - font-size: larger; |
| - font-weight: bold; |
| - padding: 1em; |
| - margin: 1em 3em; |
| -} |
| /cljs/faq.css |
| Property changes: |
| Deleted: svn:mime-type |
| ## -1 +0,0 ## |
| -text/plain |
| \ No newline at end of property |
| Index: cljs/faq_notes/misc.html |
| =================================================================== |
| --- cljs/faq_notes/misc.html (revision 45) |
| +++ cljs/faq_notes/misc.html (nonexistent) |
| @@ -1,287 +0,0 @@ |
| -<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> |
| -<html lang="en"><head><title>Miscellaneous Tricks and Tips</title> |
| -<meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1"> |
| -<link href="../faq.css" rel="stylesheet" type="text/css"> |
| -<link href="faq_notes.css" rel="stylesheet" type="text/css"> |
| -</head> |
| -<body> |
| - |
| -<h1><a name="mtHead" id="mtHead">Miscellaneous Tricks and Tips.</a></h1> |
| - |
| -<ol> |
| - <!-- <li><a href="#mtSort">Sorting Arrays of objects by one of properties of those objects.</a></li> --> |
| - <li><a href="#mtCSSUn">Setting the top and left values of positioned elements with <span class="initialism" title="Cascading Style Sheet"><abbr title="Cascading Style Sheet">CSS</abbr></span> units, when needed</a></li> |
| - <li><a href="#mtSetTI">Using function references with setTimeout and setInterval</a></li> |
| -</ol> |
| -<!-- |
| -<h2><a name="mtSort" id="mtSort">Sorting Arrays of objects by one of properties of those objects.</a></h2> |
| - |
| -<p id="mtSort_1"> |
| -Given an <code>Array</code> of like objects it may be necessary to sort |
| -that <code>Array</code> based on the value of one of the properties of |
| -those objects. The following functions are based on the results of a |
| -discussion between Evertjan and Lasse Reichstein Nielsen and are |
| -probably the shortest possible formulations of <code>"comparefn"</code> |
| -functions (as per ECMA 262 page 94) for use with the |
| -<code>Array.prototype.sort</code> method when sorting Arrays of objects |
| -by values held in one of their properties. |
| -</p> |
| - |
| -<pre id="mtSort_ex1"> |
| -<span class="commentJS">/* These example function use the value of a property of the objects |
| - called "x". That property name would have to be changed if the |
| - sorting was to be done by the value held under any other named. If |
| - the object to be sorted are other Arrays then the dot notation |
| - accessors - a.x - and - b.x - would have to be exchanged for Array |
| - accessors - a[n] - and - b[n] - where - n - is the integer index of |
| - the element being accessed. |
| -*/</span> |
| -<span class="commentJS">/* The object who's property holds the smallest value is placed first |
| - in the Array returned by the Array.prototype.sort method: |
| - a.x < b.x returns +1 |
| - b.x < a.x retains -1 |
| - a.x == b.x returns 0 |
| -*/</span> |
| -function sortSmallFirst(a, b){ |
| - <span class="commentJS">/* If a.x == b.x then (a.x < b.x) is false and (a.x > b.x) is |
| - false, the subtraction type converts false to zero and the |
| - return value is (0 - 0) which is zero. If a.x < b.x then |
| - (a.x < b.x) is true, and (a.x > b.x) is false, the |
| - subtraction type-converts them into the numbers one and zero |
| - respectively and the return value is (1 - 0) which is plus |
| - one. Finally, if a.x > b.x then (a.x < b.x) is false, and |
| - (a.x > b.x) is true, the subtraction type converts them to |
| - the numbers zero and one respectively and the return value |
| - is (0 - 1) which is minus one. |
| - */</span> |
| - return (a.x < b.x) - (a.x > b.x); |
| -} |
| - |
| -<span class="commentJS">/* The object who's property holds the largest value is placed first |
| - in the Array returned by the Array.prototype.sort method: |
| - a.x < b.x returns -1 |
| - b.x < a.x retains +1 |
| - a.x == b.x returns 0 |
| -*/</span> |
| -function sortLargeFirst(a, b){ |
| - return (a.x > b.x) - (a.x < b.x); |
| -} |
| - |
| -<span class="commentJS">/* usage:- |
| - var unsortedObjectArray = [ |
| - {x:2, y:'apple', z:5}, |
| - {x:3, y:'orange', z:7}, |
| - {x:89, y:'strawberry', z:9}, |
| - {x:45, y:'peach', z:3}, |
| - {x:8, y:'banana', z:9}, |
| - {x:1, y:'lemon', z:34} |
| - ]; |
| - |
| - var sortedObjectArray = unsortedObjectArray.sort(sortLargeFirst); |
| -*/</span> |
| -</pre> |
| - --> |
| - |
| - |
| -<h2><a name="mtCSSUn" id="mtCSSUn">Setting the top and left values of positioned |
| - elements with <span class="initialism" title="Cascading Style Sheet"><abbr title="Cascading Style Sheet">CSS</abbr></span> units, when needed</a></h2> |
| - |
| -<p id="mtCSSUn_1"> |
| -When setting the position of a positioned element by assigning values |
| -to the <span class="initialism" title="Cascading Style Sheet"><abbr title="Cascading Style Sheet">CSS</abbr></span> <code>top</code> and <code>left</code> properties of the |
| -element's <code>style</code> object it is necessary to provide the |
| -value as a string with the units of the length (usually "px") |
| -following the value. Modern standards compliant browsers require this, |
| -older and more tolerant browsers may assume that values without units |
| -represent "px" units but they can handle string values which |
| -include the <span class="initialism" title="Cascading Style Sheet"><abbr title="Cascading Style Sheet">CSS</abbr></span> units. Unfortunately some browsers want the |
| -<code>top</code> and <code>left</code> values provided as numbers and |
| -complain (or don't react) if they are provided as strings with units. |
| -</p> |
| - |
| -<p id="mtCSSUn_2"> |
| -A technique for handling this requirement is based on the observation |
| -that when a browser expects the <code>top</code> and <code>left</code> |
| -values to be set as a number of pixels a <code>typeof</code> test of |
| -either the <code>top</code> or <code>left</code> properties will return |
| -"number" while if that same test returns "string" |
| -the browser either will require the <span class="initialism" title="Cascading Style Sheet"><abbr title="Cascading Style Sheet">CSS</abbr></span> units to be appended to the |
| -values set as a string or it will successfully handle a value in that |
| -format. |
| -</p> |
| - |
| -<p id="mtCSSUn_3"> |
| -Once the object on which the <code>top</code> and <code>left</code> |
| -values are to be set is available one of its <code>top</code> or |
| -<code>left</code> properties can be tested with <code>tyoeof</code> |
| -and an appropriately scoped variable set to either the string |
| -<code>"px"</code> or the number zero. |
| -</p> |
| - |
| -<pre id="mtCSSUn_ex1"> |
| -var cssUnitsOrZero = (typeof styleObjectRef.top == 'string')?'px':0; |
| -</pre> |
| - |
| -<p id="mtCSSUn_4"> |
| -Then when the position has been calculated (as a number) it can be |
| -assigned to the appropriate property with the value derived as the |
| -result of the test applied to it using the <code>+</code> operator. |
| -Because the <code>+</code> operator is a duel role addition and |
| -string concatenation operator, and decides which action it will take |
| -based on its operands, the application of the <code>+</code> operator |
| -to a position value as a number will depend on the type of the value |
| -derived from the preceding <code>typeof</code> test on the |
| -<code>top</code> or <code>left</code> properties. |
| -</p> |
| - |
| -<pre id="mtCSSUn_ex2"> |
| -styleObjectRef.top = numericPosition + cssUnitsOrZero; |
| - |
| -<span class="commentJS">/* If the - numericPosition - value was 125, for example, and - |
| - cssUnitsOrZero - was zero, the value assigned would be:- |
| - |
| - styleObjectRef.top = (125 + 0); |
| - |
| - - which is the number 125. If - cssUnitsOrZero - was "px" then |
| - the assignment would be:- |
| - |
| - styleObjectRef.top = (125 + "px"); |
| - |
| - - which is the string "125px". |
| -*/</span> |
| -</pre> |
| - |
| -<p id="mtCSSUn_5"> |
| -If the tested top property was not a string <code>cssUnitsOrZero</code> |
| -will be the number zero and the <code>+</code> operator will have two |
| -numeric operands and will perform numeric addition, assigning a numeric |
| -value to the property, unmodified by the addition of zero. But if the |
| -tested property was a string, so <code>cssUnitsOrZero</code> was |
| -assigned the string value <code>"px"</code>, the |
| -<code>+</code> operator will recognise that one of its operands is a |
| -string and type-convert the other (the calculated position value) into |
| -a string and perform concatenation, appending the |
| -<code>"px"</code> <span class="initialism" title="Cascading Style Sheet"><abbr title="Cascading Style Sheet">CSS</abbr></span> units string to the string |
| -representation of the calculated position and then assign that value to |
| -the property. |
| -</p> |
| - |
| -<p id="mtCSSUn_6"> |
| -This fulfils the requirement to provide <span class="initialism" title="Cascading Style Sheet"><abbr title="Cascading Style Sheet">CSS</abbr></span> units where needed while |
| -providing the vlaues in numeric form whenever that is the type of value |
| -expected. It is inefficient to perform the <code>typeof</code> test on |
| -a relevant property whenever a value is to be assigned, it is better to |
| -perform the test once and then re-use the same |
| -<code>cssUnitsOrZero</code> variable for all subsequent assignments. |
| -</p> |
| - |
| - |
| - |
| -<h2><a name="mtSetTI" id="mtSetTI">Using function references with setTimeout and setInterval</a></h2> |
| - |
| -<p id="mtSetTI_1"> |
| -The <code>setTimeout</code> and <code>setInterval</code> functions |
| -provided by web browsers are commonly used with a string of javascript |
| -source code as their first argument, frequently a string that does no |
| -more than call a separately defined function:- |
| -</p> |
| - |
| -<pre id="mtSetTI_ex1"> |
| -function invokedWithSetTimeout(){ |
| - ... <span class="commentJS">// do something.</span> |
| -} |
| -... |
| -var timer = setTimeout("invokedWithSetTimeout()", 100); |
| -</pre> |
| - |
| -<p id="mtSetTI_2"> |
| -The string argument is interpreted and executed after the interval |
| -specified as the second argument (in milliseconds). In the preceding |
| -code the <code>invokeWithSetTimout</code> function would be called. |
| -</p> |
| - |
| -<p id="mtSetTI_3"> |
| -On more recent browsers (easily the majority these days) the first |
| -argument to the<code> setTimeout</code> and <code>setInterval</code> |
| -functions can be a reference to a function. Instead of having to |
| -interpret and execute a string of javascript source code the function |
| -referred to is just executed after the interval. That will be more |
| -efficient as considerably smaller overhead would be involved in the |
| -execution of the function. |
| -</p> |
| - |
| -<pre id="mtSetTI_ex2"> |
| -var timer = setTimeout(invokedWithSetTimeout, 100); |
| -</pre> |
| - |
| -<p id="mtSetTI_4"> |
| -Unfortunately a number of older browsers such as IE 4 and Opera 5 do |
| -not understand the function reference versions of |
| -<code>setTimeout</code> and <code>setInterval</code>, leaving the use |
| -of string arguments as apparently the best method for cross-browser |
| -support. However, it is in the nature of loosely typed javascript that |
| -when a native code function such as <code>setTimeout/Interval</code> is |
| -expecting a string argument but is instead passed a value of another |
| -type that value will be type-converted into a string. That doesn't help |
| -much when the process of type-converting a function into a string |
| -results in an implementation dependent representation of the function, |
| -as is normally the case. |
| -</p> |
| - |
| -<p id="mtSetTI_5"> |
| -Type-converting of a function to a string is done with the |
| -function's <code>toString</code> method, usually |
| -<code>Function.prototype.toString</code>. Methods of a |
| -<code>prototype</code> can be overridden by methods of the function |
| -object itself and an overriding <code>toString</code> method can return |
| -any value its creator desires. That fact provides a means of using the |
| -more efficient function reference arguments with |
| -<code>setTimeout/Interval</code> and still supporting browsers that can |
| -only handle string arguments, by assigning a custom |
| -<code>toString</code> method to the function that is referred to in the |
| -argument to <code>setTimeout/Interval</code>. That custom method would |
| -return the string that would have been used in the |
| -<code>setTimeout/Interval</code> function call. If the function |
| -reference is type-converted to a string that string represents the |
| -javascript source code that would be needed to invoke the function. If |
| -it is not type-converted then <code>setTimeout/Interval</code> can |
| -invoke the function directly (and without the overhead involved in |
| -interpreting and executing the string of source code). |
| -</p> |
| - |
| -<pre id="mtSetTI_ex3"> |
| -function invokedWithSetTimeout(){ |
| - ... <span class="commentJS">// do something.</span> |
| -} |
| -<span class="commentJS">/* Assign a function expression to a toString property of the function |
| - object referred to by the identifier - invokeWithSetTimeout -, |
| - overriding - Funciton.prototype.toString -. The new toString |
| - function returns the javascript source code needed to invoke a call |
| - to the function. |
| -*/</span> |
| -invokedWithSetTimeout.toString = function(){ |
| - return "invokedWithSetTimeout();"; |
| -} |
| -... |
| -var timer = setTimeout(invokedWithSetTimeout, 100); |
| -<span class="commentJS">/* If the browser will only recognise string values as the first |
| - argument to - setTimeout - then the function referred to by the |
| - identifier - invokeWithSetTimeout - will be type-converted to a |
| - string by calling its - toString - method, which will return the |
| - string " invokedWithSetTimeout();" and that string will |
| - be employed by the setTimeout function. Efectivly the same as |
| - calling the setTimeout function as:- |
| - |
| -var timer = setTimeout("invokedWithSetTimeout()", 100); |
| -*/</span> |
| -</pre> |
| - |
| - |
| - |
| - |
| -<p id="rToc"> |
| -<a href="faq_notes.html#toc">comp.lang.javascript FAQ notes T.O.C.</a> |
| -</p> |
| - |
| -</body> |
| -</html> |
| \ No newline at end of file |
| /cljs/faq_notes/misc.html |
| Property changes: |
| Deleted: svn:mime-type |
| ## -1 +0,0 ## |
| -text/plain |
| \ No newline at end of property |
| Index: cljs/faq_notes/cookies.html |
| =================================================================== |
| --- cljs/faq_notes/cookies.html (revision 45) |
| +++ cljs/faq_notes/cookies.html (nonexistent) |
| @@ -1,120 +0,0 @@ |
| -<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> |
| -<html lang="en"><head><title>Cookies</title> |
| -<meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1"> |
| -<link href="../faq.css" rel="stylesheet" type="text/css"> |
| -<link href="faq_notes.css" rel="stylesheet" type="text/css"> |
| -</head> |
| -<body> |
| - |
| -<h1><a name="cookies" id="cookies">Cookies</a></h1> |
| - |
| -<ul> |
| - <li><a href="#proxIs">Privacy filters on proxies</a></li> |
| -</ul> |
| - |
| -<h2><a name="proxIs" id="proxIs">Privacy filters on proxies</a></h2> |
| - |
| -<p id="proxIs_1"> |
| -<a href="http://www.w3schools.com/js/js_cookies.asp">The page |
| -referenced</a> from <a href="http://jibbering.com/faq/#FAQ4_4">section 4.4 of |
| -the FAQ</a> describes a generally sound strategy for using cookies but suffers from |
| -an additional issue relating to "privacy" filters employed by content |
| -inserting/re-writing proxies. |
| -</p> |
| - |
| -<p id="proxIs_2"> |
| -The problem is that some of these filters identify the character sequence |
| -"cookie" within Javascript source code and replace it with an |
| -alternative string. <a href="http://groups.google.com/groups?threadm=41ebaba2.0306240406.1fdff5ef%40posting.google.com"> |
| -A c.l.j. thread describing an occurrence of this problem</a> had |
| -"cookie" replaced by "ignore" by ZoneAlarm, and |
| -Proximatron has a similar filter available (but not active) by default. |
| -</p> |
| - |
| -<p id="proxIs_3"> |
| -The effect of changing occurrences of <code>document.cookie</code> |
| -into <code>document.ignore</code> within source code is that attempts |
| -to write to the property just result in a new string property being |
| -assigned to the document object, but no cookie is created. And reading |
| -from the property returns the same string, or an undefined value |
| -if nothing has yet been written to the property. |
| -</p> |
| - |
| -<p id="proxIs_4"> |
| -The problem with the irt.org code is that the <code>Get_Cookie</code> |
| -and <code>Set_Cookie</code> functions are |
| -not written with a consideration that <code>document.cookie</code> may |
| -not refer to a string. |
| -</p> |
| - |
| -<p id="proxIs_5"> |
| -<code>Get_Cookie</code> will error if "cookie" has been replaced with |
| -"ignore" because it treats the <code>document.cookie</code> |
| -value as if it was a string. But changing that one function so that it |
| -does not attempt to read <code>document.cookie</code> if the value is |
| -not a string may prevent the error but would still undermine that strategy used. |
| -</p> |
| - |
| -<p id="proxIs_6"> |
| -However, the problem can be completely avoided by wrapping the content |
| -of the <code>Get_Cookie</code> and <code>Set_Cookie</code> functions |
| -in <code>typeof</code> tests and only executing the rest of the |
| -function if <code>typeof</code> returns <code>"string"</code>. |
| -</p> |
| - |
| - |
| -<pre id="proxIs_ex1"> |
| -function Get_Cookie(name) { |
| - if(typeof document.cookie == "string"){ |
| - var start = document.cookie.indexOf(name+"="); |
| - var len = start+name.length+1; |
| - if ((!start)&& |
| - (name != document.cookie.substring(0,name.length))){ |
| - return null; |
| - } |
| - if (start == -1) return null; |
| - var end = document.cookie.indexOf(";",len); |
| - if (end == -1) end = document.cookie.length; |
| - return unescape(document.cookie.substring(len,end)); |
| - }else{ |
| - <span class="commentJS">/* document.cookie is not a string so return an |
| - empty string. When tested this will type-convert to |
| - boolean false (accurately) giving the impression that |
| - client-side cookies are not available on this system:- |
| - */</span> |
| - return ""; |
| - } |
| -} |
| - |
| -function Set_Cookie(name,value,expires,path,domain,secure) { |
| - if(typeof document.cookie == "string"){ |
| - document.cookie = name + "=" +escape(value) + |
| - ( (expires) ? ";expires=" + expires.toGMTString() : "") + |
| - ( (path) ? ";path=" + path : "") + |
| - ( (domain) ? ";domain=" + domain : "") + |
| - ( (secure) ? ";secure" : ""); |
| - }<span class="commentJS">//else document.cookie is not a string so do not write to it.</span> |
| -} |
| - |
| -function Delete_Cookie(name,path,domain) { |
| - if (Get_Cookie(name)) document.cookie = name + "=" + |
| - ( (path) ? ";path=" + path : "") + |
| - ( (domain) ? ";domain=" + domain : "") + |
| - ";expires=Thu, 01-Jan-70 00:00:01 GMT"; |
| - } |
| -} |
| -</pre> |
| - |
| -<p id="proxIs_7"> |
| -Cookie reading and writing is unlikely to be done sufficiently often that |
| -the extra overhead of the tests will impact on the performance of |
| -the resulting script. |
| -</p> |
| - |
| -<p id="rToc"> |
| -<a href="faq_notes.html#toc">comp.lang.javascript FAQ notes T.O.C.</a> |
| -</p> |
| - |
| - |
| -</body> |
| -</html> |
| \ No newline at end of file |
| /cljs/faq_notes/cookies.html |
| Property changes: |
| Deleted: svn:mime-type |
| ## -1 +0,0 ## |
| -text/plain |
| \ No newline at end of property |
| Index: cljs/faq_notes/contributors.html |
| =================================================================== |
| --- cljs/faq_notes/contributors.html (revision 45) |
| +++ cljs/faq_notes/contributors.html (nonexistent) |
| @@ -1,93 +0,0 @@ |
| -<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> |
| -<html lang="en"><head><title>Notes on the comp.lang.javascript FAQ</title> |
| -<meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1"> |
| -<link href="../faq.css" rel="stylesheet" type="text/css"> |
| -<link href="faq_notes.css" rel="stylesheet" type="text/css"> |
| -<style type="text/css"> |
| -.nameList, .nameList UL { |
| - list-style-type:none; |
| -} |
| -</style> |
| -</head> |
| -<body> |
| - |
| -<h1>Contributors</h1> |
| -<!-- listed by Date --> |
| -<h2>Editors:</h2> |
| -<ul class="nameList"> |
| - <li><span class="person">Jim Ley</span>. - Jan 2004</li> |
| - <li><span class="person">Richard Cornford</span>. Jan 2004 - </li> |
| -</ul> |
| -<!-- Alphabetical list by surname or username if not an individual's name --> |
| -<h2>Contributors:</h2> |
| -<ul class="nameList"> |
| - <li><span class="person">Richard Cornford</span>: |
| - <ul> |
| - <li>2 Author - Posting Questions and replies to comp.lang.javascript</li> |
| - <li>4.4.1 Author - Privacy filters on proxies</li> |
| - <li>4.13.1 Author - Referencing Forms and Form Controls</li> |
| - <li>4.15.1 Author - An Alternative DynWrite function</li> |
| - <li>4.21.1 Author - Javascript Type-Conversion</li> |
| - <li>4.26.1 Author - Browser Detecting (and what to do Instead)</li> |
| - <li>4.39.1 Author - Javascript Square Bracket Notation</li> |
| - <li>Misc 2 Author - Javascript Closures</li> |
| - <li>Misc 3 Author - How to Include Scripts in HTML Documents</li> |
| - </ul> |
| - </li> |
| - <li><span class="person">Martin Honnen</span>: |
| - <ul> |
| - <li>Misc 2 Suggestions and corrections</li> |
| - </ul> |
| - </li> |
| - <li><span class="person">Jim Ley</span>: |
| - <ul> |
| - <li>Author - The comp.lang.javascript FAQ version 7.9</li> |
| - </ul> |
| - </li> |
| - <li><span class="person">Lasse Reichstein Nielsen</span>: |
| - <ul> |
| - <li>4.13.1 Suggestions of content</li> |
| - <li>4.39.1 Technical corrections</li> |
| - <li>Misc 2 Definition of Closure</li> |
| - </ul> |
| - </li> |
| - <li><span class="person">Michael Winter</span>: |
| - <ul> |
| - <li>FAQ General suggestions and corrections</li> |
| - </ul> |
| - </li> |
| - <li><span class="person">Yann-Erwan Perio (Yep)</span>: |
| - <ul> |
| - <li>4.39.1 Code testing and suggestions</li> |
| - <li>Misc 2 Suggestions and corrections</li> |
| - </ul> |
| - </li> |
| - <li><span class="person">Mike Scirocco</span>: |
| - <ul> |
| - <li>Misc 2 Corrections</li> |
| - </ul> |
| - </li> |
| - <li><span class="person">Dr John Stockton</span>: |
| - <ul> |
| - <li>2 Additional material, suggestions and corrections</li> |
| - <li>4.15.1 Code testing and suggestions</li> |
| - <li>4.21.1 Regular expression examples and additional suggestions</li> |
| - <li>4.26.1 Suggestions and corrections</li> |
| - <li>4.39.1 Suggestions and corrections</li> |
| - <li>Misc 2 Suggestions and corrections</li> |
| - </ul> |
| - </li> |
| - <li><span class="person">Randy Webb (HikksNotAtHome)</span>: |
| - <ul> |
| - <li>4.13.1 Suggestions of content and technical corrections</li> |
| - <li>4.15.1 The first getElementById emulation for IE 4 listed</li> |
| - </ul> |
| - </li> |
| -</ul> |
| - |
| -<p> |
| -<a href="faq_notes.html#toc">comp.lang.javascript FAQ notes T.O.C.</a> |
| -</p> |
| - |
| -</body> |
| -</html> |
| \ No newline at end of file |
| /cljs/faq_notes/contributors.html |
| Property changes: |
| Deleted: svn:mime-type |
| ## -1 +0,0 ## |
| -text/plain |
| \ No newline at end of property |
| Index: cljs/faq_notes/faqNotes.zip |
| =================================================================== |
| Cannot display: file marked as a binary type. |
| svn:mime-type = application/octet-stream |
| /cljs/faq_notes/faqNotes.zip |
| Property changes: |
| Deleted: svn:mime-type |
| ## -1 +0,0 ## |
| -application/octet-stream |
| \ No newline at end of property |
| Index: cljs/faq_notes/square_brackets.html |
| =================================================================== |
| --- cljs/faq_notes/square_brackets.html (revision 45) |
| +++ cljs/faq_notes/square_brackets.html (nonexistent) |
| @@ -1,369 +0,0 @@ |
| -<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> |
| -<html lang="en"><head><title>Square Bracket Notation</title> |
| -<meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1"> |
| -<link href="../faq.css" rel="stylesheet" type="text/css"> |
| -<link href="faq_notes.css" rel="stylesheet" type="text/css"> |
| -</head> |
| -<body> |
| -<h1>Javascript Square Bracket Notation</h1> |
| -<ul> |
| - <li><a href="#intro">Introduction</a></li> |
| - <li><a href="#sBs">Square Bracket Syntax</a></li> |
| - <li><a href="#vId">String Variables as Identifiers</a></li> |
| - <li><a href="#eId">String Expressions as Identifiers</a></li> |
| - <li><a href="#aVa">Global Variable access with the Square Bracket Notation</a></li> |
| - <li><a href="#illc">Illegal characters in Identifier-strings</a></li> |
| -</ul> |
| -<h2><a name="intro" id="intro">Introduction</a></h2> |
| - |
| -<p id="intro_1">To be useful javascript needs to be able to access the properties of |
| -objects. It is impossible to learn javascript without understanding the |
| -dot notation that is normally used to access the properties of objects. |
| -</p> |
| - |
| -<p id="intro_2">Javascript also offers an alternative property accessor notation |
| -using square brackets in a way that is similar to the way in which the |
| -indexed members of an Array are accessed, except that a string is used |
| -between the square brackets. This alternative notation is extremely |
| -powerful and useful but gets very little coverage in most books on |
| -javascript and that seems to leave novice javascript programmers |
| -unaware that they even have this option.</p> |
| - |
| -<p id="intro_3">The coverage in javascript books can be very poor. Looking back at |
| -some of the books that I first used to learn javascript, one devotes |
| -exactly one paragraph to property accessors and another actually states |
| -that the square bracket notation can only be used with integer indexes |
| -to access Arrays and array-like structures.</p> |
| - |
| -<p id="intro_4">With an understanding of dot notation and few clues that an |
| -alternative exists, novice (and a few surprisingly experienced) |
| -javascript programmers often turn to the <code>eval</code> function, |
| -constructing a string that represents a dot notation accessor |
| -(frequently retrieving the property names from javascript variables) |
| -and then passing it to the <code>eval</code> function in order to |
| -access the object property that it refers to. The <code>eval</code> |
| -function is just not needed to perform this type of property access |
| -and it is a relatively inefficient way of doing so (plus, some embedded |
| -browsers lack the resources to implement an <code>eval</code> function). |
| -</p> |
| - |
| -<h2><a name="sBs" id="sBs">Square Bracket Syntax</a></h2> |
| -<p id="sBs_1">If you can access the property of an object using dot |
| -notation, such as:-</p> |
| - |
| -<pre id="sBs_ex1">document.body</pre> |
| - |
| -<p id="sBs_2">- you can also use the square bracket notation:-</p> |
| - |
| -<pre id="sBs_ex2">document['body']</pre> |
| - |
| -<p id="sBs_3">- in which the dot and the identifier to the right of the dot are |
| -replaced with a set of square brackets containing a string that |
| -represents the identifier that was to the right of the dot.</p> |
| - |
| -<p id="sBs_4">The Property Accessors section of javascript language specification |
| -(ECMA 262) makes it clear that the dot notation and the square bracket |
| -notation are parallel ways of accessing the properties of objects.</p> |
| - |
| -<blockquote cite="http://www.ecma-international.org/publications/files/ecma-st/Ecma-262.pdf"> |
| -<dl> |
| - <dt>ECMA 262 3rd Edition. Section 11.2.1 Property Accessors</dt> |
| - <dd> |
| - Properties are accessed by name, using either the dot notation: |
| -<pre > |
| -MemberExpression.Identifier |
| -CallExpression.Identifier |
| -</pre> |
| - or the bracket notation: |
| -<pre> |
| -MemberExpression[ Expression ] |
| -CallExpression[ Expression ] |
| -</pre> |
| - The dot notation is explained by the following syntactic conversion: |
| - <pre>MemberExpression.Identifier</pre> |
| - is identical in its behaviour to |
| - <pre>MemberExpression[ <identifier-string> ]</pre> |
| - and similarly |
| - <pre>CallExpression.Identifier</pre> |
| - is identical in its behaviour to |
| - <pre >CallExpression[ <identifier-string> ]</pre> |
| - where <code><identifier-string></code> is a string literal |
| - containing the same sequence of characters as the Identifier. |
| - <dd> |
| -</dl> |
| -</blockquote> |
| - |
| -<p id="sBs_5">In the following simple <span class="initialism" title="HyperText Mark-up Language"><abbr title="HyperText Mark-up Language">HTML</abbr></span> page:-</p> |
| - |
| -<pre id="sBs_ex3"> |
| -<html> |
| - <head> |
| - <title></title> |
| - </head> |
| - <body> |
| - <form name="formName" action="#"> |
| - <input type="text" name="inpName" value="Example value text"> |
| - </form> |
| - </body> |
| -</html> |
| -</pre> |
| - |
| -<p id="sBs_6">- which contains a form named <code>"formName"</code> with |
| -one input element named <code>"inpName"</code>. Various forms |
| -of dot notation property accessor can be used to reference the |
| -<code>"value"</code> property of the input element. One of |
| -the simplest is:-</p> |
| - |
| -<pre id="sBs_ex4"> |
| -var stringOfValue = document.formName.inpName.value; |
| -</pre> |
| - |
| -<p id="sBs_7">This dot notation has three dots, so there are three points at which |
| -the square bracket notation could be used in place of the dot notation |
| -(these are all equivalent).</p> |
| - |
| -<pre id="sBs_ex5"> |
| -var stringOfValue = document["formName"].inpName.value; |
| - |
| -var stringOfValue = document.formName["inpName"].value; |
| - |
| -var stringOfValue = document.formName.inpName["value"]; |
| -</pre> |
| - |
| -<p id="sBs_8">The following combinations are also all equivalent to the original |
| -dot notation:-</p> |
| - |
| -<pre id="sBs_ex6"> |
| -var stringOfValue = document["formName"].inpName["value"]; |
| - |
| -var stringOfValue = document["formName"]["inpName"].value; |
| - |
| -var stringOfValue = document["formName"]["inpName"]["value"]; |
| - |
| -var stringOfValue = window["document"]["formName"]["inpName"]["value"]; |
| -</pre> |
| - |
| -<p id="sBs_9">Where the dot notation follows the dot with the identifier for the |
| -property that is to be accessed, the square bracket notation replaces |
| -the dot and identifier with square brackets that contain a string that |
| -represents the identifier for the property (the property name).</p> |
| - |
| -<h2><a name="vId" id="vId">String Variables as Identifiers</a></h2> |
| - |
| -<p id="vId_1">The string used within the square brackets does not need to be a |
| -string literal. It can be any expression that results in a string. |
| -This is where the square bracket notation becomes most useful as the |
| -expression could be a reference to a string variable that holds the |
| -property name as its value, or a function call that returns a string, |
| -or an expression that concatenates two strings, or any combination of |
| -these.</p> |
| - |
| -<p id="vId_2">This means that the identifier needed to access a property does not |
| -need to be coded into a javascript. Consider the following simple |
| -function:-</p> |
| - |
| -<pre id="vId_ex1"> |
| -function setPropertyToValue(oObj, sPropName, value){ |
| - oObj[sPropName] = value; |
| -} |
| -</pre> |
| - |
| -<p id="vId_3">- provided with a reference to an object (<code>oObj</code>), the |
| -name of a property (<code>sPropName</code>) and a value for that |
| -property (<code>value</code>), it will set the value of the property |
| -without needing to know what the name of the property that it is |
| -setting is. Called as |
| -<code>setPropertyToValue(document.formName.inpName, "value", "new value")</code> |
| -it will set the value of the field in the example form above to the |
| -string <code>"new value"</code>. However, called as |
| -<code>setPropertyToValue(window, "location", "http://www.google.com")</code> |
| -and the same function will navigate a web browser to the URL provided |
| -as the final parameter. Although this is a forced example you should be |
| -able to see that the square bracket notation offers considerable power |
| -and flexibility.</p> |
| - |
| -<p id="vId_4">Any variable that holds a string value can be used between the |
| -square brackets to form a property accessor. Variables that hold |
| -non-strings will have their value internally type converted into a |
| -string and that string will be used as the property name. This is not very |
| -useful, especially if the variables contain references to objects or |
| -functions, as the returned string is likely to be implementation |
| -dependent.</p> |
| - |
| -<h2><a name="eId" id="eId">String Expressions as Identifiers</a></h2> |
| - |
| -<p id="eId_1">The ability to build the string used as the property name can be |
| -very useful in loops and with dynamically generating web pages (server |
| -side) that have variable length content. The strings can be the result |
| -of expressions that concatenate string literals with variables |
| -(particularly loop counters).</p> |
| - |
| -<p id="eId_2">Given the form:-</p> |
| - |
| -<pre id="eId_ex1"> |
| -<form name="formName" action="#"> |
| - <input type="text" name="field_1"> |
| - <input type="text" name="field_2"> |
| - <input type="text" name="field_3"> |
| -</form> |
| -</pre> |
| - |
| -<p id="eId_3">- the following loop will clear the value property of each element |
| -it turn:-</p> |
| - |
| -<pre id="eId_ex2"> |
| -for(var c = 1;c < 4;c++){ |
| - document.forms["formName"].elements["field_"+c].value = ""; |
| -} |
| -</pre> |
| - |
| -<p id="eId_4">If a server side process had created the <span class="initialism" title="HyperText Mark-up Language"><abbr title="HyperText Mark-up Language">HTML</abbr></span> form with |
| -<code>n</code> elements, named <code>field_1, field_2 ... field_n</code> |
| -, then all the server side process would have to do to have the loop |
| -clear each and every input element would be to change the <code>4</code> |
| -in the example to the value of <code>n+1</code>.</p> |
| - |
| -<p id="eId_5">Concatenation is the most common type of expression used with the |
| -square bracket notation but any javascript expression could be used. |
| -A function that returned a string could be used.</p> |
| - |
| -<p id="eId_6">In the following (rather contrived) example :-</p> |
| - |
| -<pre id="eId_ex3"> |
| -function getRootElName(){ |
| - if(document.compatMode && (document.compatMode == "CSS1Compat")){ |
| - return "documentElement"; |
| - }else{ |
| - return "body"; |
| - } |
| -} |
| - |
| -var verticalScroll = document[getRootElName()].scrollTop; |
| -</pre> |
| -<p id="eId_7">- the <code>scrollTop</code> value is read from either the |
| -<code>document.body</code> or <code>document.documentElement</code> |
| -depending on the value of <code>document.compatMode</code>. Passing |
| -strings about is far from the best way of achieving what the code |
| -above does but there will be circumstances when returning a string |
| -from a function call for use in a property accessor is potentially |
| -useful.</p> |
| - |
| -<h2><a name="aVa" id="aVa">Global Variable access with the Square Bracket Notation</a></h2> |
| - |
| -<p id="aVa_1">The square bracket notation requires that there be some sort of |
| -object reference to the left of the brackets.</p> |
| - |
| -<pre id="aVa_ex1">["document"] <span class="commentJS">//Array literal, not a Property Accessor!</span></pre> |
| - |
| -<p id="aVa_2">-will produce an error if an attempt is made to assign a value to it, |
| -as it will be treated as an Array literal, if an attempt to read from |
| -it is made the one element array containing the string within the |
| -brackets is returned. Global variables are normally referenced by their |
| -one identifier alone. This would seem to exclude global variables from |
| -the possibility of being referenced using a string that held their |
| -identifier name or an expression that built, or returned, their name. |
| -However, javascript global variables (and global function names for |
| -that matter) are properties of a global object. Any identifier that |
| -holds a reference to the global object can be used to the left of the |
| -square brackets to form a property accessor that refers to a global |
| -variable.</p> |
| - |
| -<p id="aVa_3">In a web browser the global object is the window (or frame) in which |
| -the script is running. Each window (or frame) object contains a number |
| -of properties, at least two of which are references to the window |
| -(global object) itself. These properties are 'window' and 'self'. |
| -These property names can be used as the identifier to the left of the |
| -square brackets when referring to global variables. So given a global |
| -variable defined as:-</p> |
| - |
| -<pre id="aVa_ex2"> |
| -var anyName = 0; |
| -</pre> |
| - |
| -<p id="aVa_4">- that global variable can be referenced as:-</p> |
| - |
| -<pre id="aVa_ex3"> |
| -window["anyName"] |
| -</pre> |
| - |
| -<p id="aVa_5">As with any other use of the square bracket notation, the string |
| -within the brackets can be held in a variable or constructed/returned |
| -by an expression.</p> |
| - |
| -<p id="aVa_6">Code that is executing in the global context, the code within global |
| -functions (except Object constructors invoked with the <code>new</code> |
| -keyword) and inline code outside of any functions, could also use the |
| -<code>this</code> keyword to refer to the global object. The |
| -<code>this</code> keyword refers to an object depending on the |
| -execution context. For code executing in the global context |
| -<code>this</code> is the global object (on a web browser, the window |
| -object). As a result, the above variable could be referred to as |
| -<code>this["anyName"]</code>, but only in code that is |
| -executing in the global context.</p> |
| - |
| -<p id="aVa_7">However, using the <code>this</code> keyword is very likely to be |
| -confusing, especially in scripts that include custom javascript objects |
| -where the methods (and constructors) of those objects would be using |
| -<code>this</code> to refer to their own object instances.</p> |
| - |
| -<p id="aVa_8">Some javascript implementations do not have a property of the global |
| -object that refers to the global object. Rather than trying to use the |
| -<code>this</code> keyword to access global variables it is possible to |
| -create your own global variable that refers to the global object.</p> |
| - |
| -<pre id="aVa_ex4"> |
| -var myGlobal = this; |
| -</pre> |
| - |
| -<p id="aVa_9">- executed as inline code at the start of a script will assign a |
| -reference to the global object (<code>this</code> in that context). |
| -From then on all global variables can be referenced with square bracket |
| -notation as:-</p> |
| - |
| -<pre id="aVa_ex5"> |
| -myGlobal["anyName"]; |
| -</pre> |
| - |
| -<p id="aVa_10">- and expect <code>myGlobal</code> to refer to the global object |
| -from any execution context.</p> |
| - |
| -<h2><a name="illc" id="illc">Illegal characters in Identifier-strings</a></h2> |
| - |
| -<p id="illc_1">One advantage of the square bracket notation over dot notation is |
| -the ability to use characters in identifier-strings that are not legal |
| -identifier characters. It is generally best to avoid giving javascript |
| -properties names and <span class="initialism" title="HyperText Mark-up Language"><abbr title="HyperText Mark-up Language">HTML</abbr></span> elements names/IDs that are not made up |
| -entirely of characters that are legal in the relevant context. However, |
| -it is not always possible to avoid referencing elements with names that |
| -include characters that would be illegal in a javascript identifier. |
| -PHP offers an example of this, multiple form elements given the same |
| -name followed with empty square brackets, such as |
| -<code>name="inpEl[]"</code>, are made available on the server |
| -as an array.</p> |
| - |
| -<p id="illc_2">The square bracket notation would allow an element with such a name |
| -to be referenced as <code> document.forms["formName"].elements["inpEl[]"][0]</code> |
| -for example (the final <code>[0]</code> reflects the fact that |
| -multiple elements with the same name, when accessed by name, generate |
| -collections of elements and individual elements within that collection |
| -need to be referenced by index).</p> |
| - |
| -<p id="illc_3"> |
| -<a href="faq_notes.html#toc">comp.lang.javascript FAQ notes T.O.C.</a> |
| -</p> |
| - |
| -<ul style="list-style-type:none;margin-top:2.5em;"> |
| - <li>Written by <span class="person">Richard Cornford</span>. March 2003.</li> |
| - <li>With technical corrections and suggestions by:-<br> |
| - <ul style="list-style-type:none;"> |
| - <li><span class="person">Yann-Erwan Perio (Yep)</span>. (Also, thanks for testing the use |
| - of <code>this</code> to reference the global object in WSH |
| - and ASP2.) |
| - </li> |
| - <li><span class="person">Lasse Reichstein Nielsen</span>.</li> |
| - <li><span class="person">Dr John Stockton</span>.</li> |
| - </ul> |
| - </li> |
| -</ul> |
| -</body> |
| -</html> |
| \ No newline at end of file |
| /cljs/faq_notes/square_brackets.html |
| Property changes: |
| Deleted: svn:mime-type |
| ## -1 +0,0 ## |
| -text/plain |
| \ No newline at end of property |
| Index: cljs/faq_notes/faq_notes.html |
| =================================================================== |
| --- cljs/faq_notes/faq_notes.html (revision 45) |
| +++ cljs/faq_notes/faq_notes.html (nonexistent) |
| @@ -1,196 +0,0 @@ |
| -<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> |
| -<html lang="en"><head><title>Notes on the comp.lang.javascript FAQ</title> |
| -<meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1"> |
| -<meta name="ROBOTS" content="NOINDEX NOFOLLOW"> |
| -<link href="../faq.css" rel="stylesheet" type="text/css"> |
| -<link href="faq_notes.css" rel="stylesheet" type="text/css"> |
| -<style type="text/css"> |
| -.tocEn { |
| - margin-bottom:0.5em; |
| -} |
| -</style> |
| -</head> |
| -<body> |
| -<div id="pageWarning"> |
| - The documents under <kbd>faq_notes/</kbd> are unmaintained. An up-to-date version |
| - of this document may be available at |
| - <a href="/faq/notes/">/faq/notes/</a>. |
| -</div> |
| - |
| -<h1>Notes on the comp.lang.javascript FAQ</h1> |
| -<h2><a name="toc" id="toc">Table of Contents</a></h2> |
| - |
| -<ul id="contTable"> |
| - <li class="tocEn"><a href="#fnIntro">Introduction to the Notes</a> |
| - <li class="tocEn"> |
| - <a name="FAQN2" id="FAQN2">2 comp.lang.javascript tips</a> |
| - <ol> |
| - <li><a href="clj_posts.html">Posting Questions and Replies to comp.lang.javascript</a></li> |
| - </ol> |
| - </li> |
| - <li class="tocEn"> |
| - <a name="FAQN4_4" id="FAQN4_4">4.4 How can I see in javascript if a web browser accepts cookies?</a> |
| - <ol> |
| - <li><a href="cookies.html">Privacy filters on proxies</a></li> |
| - </ol> |
| - </li> |
| - <li class="tocEn"> |
| - <a name="FAQN4_12" id="FAQN4_12">4.12 Why does parseInt('09') give an error?</a> |
| - <ol> |
| - <li>See: <a href="type_convert.html#tcPrIntRx">4.21.1 Javascript Type-Conversion - parseInt with a radix argument</a> |
| - </li> |
| - </ol> |
| - </li> |
| - <li class="tocEn"> |
| - <a name="FAQN4_13" id="FAQN4_13">4.13 How do I get the value of a form control?</a> |
| - <ol> |
| - <li><a href="form_access.html#faHead">Referencing Forms and Form Controls.</a> |
| - <ul> |
| - <li><a href="form_access.html#faInt">Introduction</a> |
| - <ul> |
| - <li><a href="form_access.html#faInF">Forms</a></li> |
| - <li><a href="form_access.html#faInC">Form Controls</a></li> |
| - </ul> |
| - </li> |
| - <li><a href="form_access.html#faShrt">Shortcut Accessors</a></li> |
| - <li><a href="form_access.html#faComMis">The Most Common Mistake</a></li> |
| - <li><a href="form_access.html#faAnon">Anonymous Form References</a></li> |
| - <li><a href="form_access.html#faBut">Radio Button and Other Control Collections</a></li> |
| - <li><a href="form_access.html#faEff">Efficient use of Form Accessors</a></li> |
| - </ul> |
| - </li> |
| - </ol> |
| - </li> |
| - <li class="tocEn"> |
| - <a name="FAQN4_15" id="FAQN4_15">4.15 How do I modify the current page in a browser?</a> |
| - <ol> |
| - <li><a href="alt_dynwrite.html#alDynWr">An Alternative DynWrite function</a> |
| - <ul> |
| - <li><a href="alt_dynwrite.html#DynWr">The DynWrite function.</a></li> |
| - <li><a href="alt_dynwrite.html#getEl">Element retrieval given the element ID as a string.</a></li> |
| - <li><a href="alt_dynwrite.html#innHTest">innerHTML Testing Strategy.</a></li> |
| - <li><a href="alt_dynwrite.html#AltDynWr">Alternative DynWrite function.</a></li> |
| - </ul> |
| - </li> |
| - </ol> |
| - </li> |
| - <li class="tocEn"> |
| - <a name="FAQN4_21" id="FAQN4_21">4.21 Why does 1+1 equal 11? or How do I convert a string to a number?</a> |
| - <ol> |
| - <li><a href="type_convert.html">Javascript Type-Conversion</a> |
| - <ul> |
| - <li><a href="type_convert.html#tcInt">Introduction.</a></li> |
| - <li><a href="type_convert.html#tcBool">Converting to Boolean.</a></li> |
| - <li><a href="type_convert.html#tcString">Converting to String.</a></li> |
| - <li><a href="type_convert.html#tcNumber">Converting to Number.</a></li> |
| - <li><a href="type_convert.html#tcParse">Parsing to Number.</a> |
| - <ul> |
| - <li><a href="type_convert.html#tcParseFl">parseFloat</a></li> |
| - <li><a href="type_convert.html#tcParseIn">parseInt</a></li> |
| - <li><a href="type_convert.html#tcPrIntRx">parseInt with a radix argument</a></li> |
| - </ul> |
| - </li> |
| - <li><a href="type_convert.html#tcToInt32">ToInt32.</a></li> |
| - <li><a href="type_convert.html#tcUserIn">Converting User Input.</a> |
| - <ul> |
| - <li><a href="type_convert.html#tcRegEx">Regular expression examples.</a></li> |
| - </ul> |
| - </li> |
| - </ul> |
| - </li> |
| - </ol> |
| - </li> |
| - <li class="tocEn"> |
| - <a name="FAQN4_25" id="FAQN4_25">4.25 My element is named myselect[] , how do I access it?</a> |
| - <ol> |
| - <li>See: <a href="square_brackets.html#illc">4.39.1 Javascript Square Bracket Notation - Illegal characters in Identifier-strings</a> |
| - </li> |
| - </ol> |
| - </li> |
| - <li class="tocEn"> |
| - <a name="FAQN4_26" id="FAQN4_26">4.26 How do I detect Opera/Netscape/IE?</a> |
| - <ol> |
| - <li><a href="not_browser_detect.html#bdTop">Browser Detecting (and what to do Instead)</a> |
| - |
| - <ul> |
| - <li><a href="not_browser_detect.html#bdIntro">Introduction</a></li> |
| - <li><a href="not_browser_detect.html#bdValid">Avoiding structural differences in the browser DOMs</a></li> |
| - <li><a href="not_browser_detect.html#bdDif">Browsers Differences</a></li> |
| - <li><a href="not_browser_detect.html#bdFailS">Failed Strategies: Browser Detecting</a> |
| - <ul> |
| - <li><a href="not_browser_detect.html#bdUAS">Assumptions Based on navigator.userAgent</a></li> |
| - <li><a href="not_browser_detect.html#bdOI">Assumptions Based on DOM Objects: Object inference</a></li> |
| - </ul> |
| - </li> |
| - <li><a href="not_browser_detect.html#bdFD">A Strategy That Works: Object/Feature Detecting.</a> |
| - <ul> |
| - <li><a href="not_browser_detect.html#bdGEID">Example 1: IDed Element Retrieval</a></li> |
| - <li><a href="not_browser_detect.html#bdScroll">Example 2: Scroll Values</a></li> |
| - <li><a href="not_browser_detect.html#bdReplace">Example 3: String.prototype.replace</a></li> |
| - </ul> |
| - </li> |
| - <li><a href="not_browser_detect.html#bdDesPb">The Javascript Design Problem</a></li> |
| - </ul> |
| - |
| - |
| - </li> |
| - </ol> |
| - </li> |
| - <li class="tocEn"> |
| - <a name="FAQN4_39" id="FAQN4_39">4.39 How do I access the property of an object using a string?</a> |
| - <ol> |
| - <li><a href="square_brackets.html">Javascript Square Bracket Notation</a> |
| - <ul> |
| - <li><a href="square_brackets.html#intro">Introduction</a></li> |
| - <li><a href="square_brackets.html#sBs">Square Bracket Syntax</a></li> |
| - <li><a href="square_brackets.html#vId">String Variables as Identifiers</a></li> |
| - <li><a href="square_brackets.html#eId">String Expressions as Identifiers</a></li> |
| - <li><a href="square_brackets.html#aVa">Global Variable access with the Square Bracket Notation</a></li> |
| - <li><a href="square_brackets.html#illc">Illegal characters in Identifier-strings</a></li> |
| - </ul> |
| - </li> |
| - </ol> |
| - </li> |
| - <li class="tocEn"> |
| - <a name="FAQN4_41" id="FAQN4_41">4.41 Why doesn't the global variable "divId" always refer to the element with id="divId"?</a> |
| - <ol> |
| - <li>See: <a href="alt_dynwrite.html#getEl">4.15.1 An Alternative DynWrite function - Element retrieval given the element ID as a string</a></li> |
| - <li>See: <a href="not_browser_detect.html#bdGEID">4.26.1 Browser Detecting (and what to do Instead) - Example 1: IDed Element Retrieval</a></li> |
| - </ol> |
| - </li> |
| - <li>Miscellaneous |
| - <ol> |
| - <li class="tocEn"><a href="cljs_charter.html">The comp.lang.javascript Charter</a></li> |
| - <li class="tocEn"><a href="closures.html">Javascript Closures</a></li> |
| - <li class="tocEn"><a href="script_tags.html">How to Include Scripts in <span class="initialism" title="HyperText Mark-up Language"><abbr title="HyperText Mark-up Language">HTML</abbr></span> Documents</a></li> |
| - <li class="tocEn"><a href="misc.html">Tricks and Tips</a></li> |
| - </ol> |
| - </li> |
| - <li class="tocEn"><a href="contributors.html">Contributors</a></li> |
| - <li class="tocEn"><a href="faqNotes.zip">The complete FAQ and Notes in ZIP format (174KB)</a></li> |
| -</ul> |
| - |
| -<h2><a name="fnIntro" id="fnIntro">Introduction to the Notes</a></h2> |
| - |
| -<p> |
| -Because the <a href="http://jibbering.com/faq/">comp.lang.javascript |
| -FAQ</a> is posted to the group regularly |
| -there are practical constraints on how much can be included in it. At |
| -the same time it is often felt that it should contain more (or more |
| -in-depth) information on some of its topics. The FAQ is largely |
| -designed to provide URLs of other resources that provide that |
| -additional information, but where no additional resource is available |
| -or it is felt that those resources omit important information. These |
| -notes are intended to provide an opportunity for those additional |
| -resources to be created. |
| -</p> |
| - |
| -<p> |
| -It is intended that anyone who wishes to contribute notes should be |
| -able to do so (under editorial control) and that some of the more |
| -in-depth postings to the group should become notes, or be |
| -incorporated within them. |
| -</p> |
| - |
| -</body> |
| -</html> |
| /cljs/faq_notes/faq_notes.html |
| Property changes: |
| Deleted: svn:mime-type |
| ## -1 +0,0 ## |
| -text/plain |
| \ No newline at end of property |
| Index: cljs/faq_notes/script_tags.html |
| =================================================================== |
| --- cljs/faq_notes/script_tags.html (revision 45) |
| +++ cljs/faq_notes/script_tags.html (nonexistent) |
| @@ -1,949 +0,0 @@ |
| -<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> |
| -<html lang="en"><head><title>How to Include Scripts in HTML Documents</title> |
| -<meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1"> |
| -<link href="../faq.css" rel="stylesheet" type="text/css"> |
| -<link href="faq_notes.css" rel="stylesheet" type="text/css"> |
| -<style type="text/css"> |
| -BLOCKQUOTE PRE { |
| - background-color:#EEEEFF; |
| - color:#000000; |
| - border:#EEEEFF 0px none; |
| - margin:0; |
| - padding:0; |
| -} |
| -BLOCKQUOTE H5 { |
| - margin-left:0; |
| -} |
| -CODE { white-space:nowrap; } |
| -.elContent { |
| - background-color:#EEEEFF; |
| - color:#900000; |
| -} |
| -</style> |
| -</head> |
| -<body> |
| - |
| -<h1><a name="hsHead" id="hsHead">How to Include Scripts in <span class="initialism" title="HyperText Mark-up Language"><abbr title="HyperText Mark-up Language">HTML</abbr></span> Documents</a></h1> |
| - |
| -<ul> |
| - <li><a href="#hsIntro">Introduction</a></li> |
| - <li><a href="#hsSE">SCRIPT Elements</a> |
| - <ul> |
| - <li><a href="#hsAt">Attributes</a> |
| - <ol> |
| - <li><a href="#hsAtch">charset</a></li> |
| - <li><a href="#hsAtty">type</a></li> |
| - <li><a href="#hsAtln">language</a></li> |
| - <li><a href="#hsAtsc">src</a></li> |
| - <li><a href="#hsAtdf">defer</a></li> |
| - </ol> |
| - </li> |
| - </ul> |
| - </li> |
| - <li><a href="#hsStFm">The Standard Formulations</a></li> |
| - <li><a href="#hsPrCn">Permissible Contexts for Script Elements</a></li> |
| - <li><a href="#hsCt">The Content of Script Elements</a> |
| - <ul> |
| - <li><a href="#hsOld">Hiding Scripts from Older Browsers</a></li> |
| - <li><a href="#hsETO">Closing Script Tags and "</" (end-tag open delimiter)</a></li> |
| - </ul> |
| - </li> |
| - <li><a href="#hsExF">External Javascript Files</a> |
| - <ul> |
| - <li><a href="#hsExC">The content of External Javascript Files.</a></li> |
| - </ul> |
| - </li> |
| - <li> |
| - <a href="#hsMix">Script Elements that Import Javascript Files and Have Contents</a> |
| - </li> |
| - <li><a href="#hsEh">Event Handling Attributes: Intrinsic Events</a> |
| - <ul> |
| - <li><a href="#hsEhD">The Default Language for Intrinsic Events</a></li> |
| - </ul> |
| - </li> |
| - <li><a href="#hsNs">NOSCRIPT Elements</a></li> |
| -</ul> |
| - |
| -<h2><a name="hsIntro" id="hsIntro">Introduction</a></h2> |
| - |
| - |
| -<p> |
| -There are three ways of including scripts in <span class="initialism" title="HyperText Mark-up Language"><abbr title="HyperText Mark-up Language">HTML</abbr></span> documents:- |
| -</p> |
| - |
| -<ol> |
| - <li>As the string value provided for an event handling attribute such as onclick (intrinsic events).</li> |
| - <li>As the contents of a SCRIPT element (between opening and closing script tags in certain permissible locations within <span class="initialism" title="HyperText Mark-up Language"><abbr title="HyperText Mark-up Language">HTML</abbr></span> source code.</li> |
| - <li>As a separate script file imported into an <span class="initialism" title="HyperText Mark-up Language"><abbr title="HyperText Mark-up Language">HTML</abbr></span> page by having the URL of the file assigned to the SRC attribute of a SCRIPT element, again at certain permissible locations within the <span class="initialism" title="HyperText Mark-up Language"><abbr title="HyperText Mark-up Language">HTML</abbr></span> source.</li> |
| -</ol> |
| - |
| -<h2><a name="hsSE" id="hsSE">SCRIPT Elements</a></h2> |
| - |
| -<p> |
| -The current <span class="initialism" title="HyperText Mark-up Language"><abbr title="HyperText Mark-up Language">HTML</abbr></span> version is 4.01. The <span class="initialism" title="HyperText Mark-up Language"><abbr title="HyperText Mark-up Language">HTML</abbr></span> 4.01 transitional DTD |
| -defines a script element with:- |
| -</p> |
| - |
| -<blockquote cite="http://www.w3.org/TR/html4/loose.dtd" style="font-family:Courier, monospace;"> |
| -<!ELEMENT SCRIPT <span class="elContent">- -</span> %Script; -- script statements --><br> |
| -<!ATTLIST SCRIPT<br> |
| -<pre> |
| - charset %Charset; #IMPLIED - char encoding of linked resource - |
| - type %ContentType; #REQUIRED - content type of script language - |
| - language CDATA #IMPLIED - predefined script language name - |
| - src %URI; #IMPLIED - URI for an external script - |
| - defer (defer) #IMPLIED - UA may defer execution of script - |
| - event CDATA #IMPLIED - reserved for possible future use - |
| - for %URI; #IMPLIED - reserved for possible future use - |
| - </pre> |
| - > |
| -</blockquote> |
| - |
| -<p> |
| -(The <span class="initialism" title="HyperText Mark-up Language"><abbr title="HyperText Mark-up Language">HTML</abbr></span> 4.01 strict DTD omits the <code>language</code> attribute |
| -as it is deprecated in the <span class="initialism" title="HyperText Mark-up Language"><abbr title="HyperText Mark-up Language">HTML</abbr></span> 4.01 standard.) |
| -</p> |
| - |
| -<p> |
| -Script elements are defined with opening and closing script tags. The |
| -two dashes after the element name in the DTD means that neither opening nor |
| -closing tag may be omitted, even when the element is importing a |
| -javascript file and has no contents. |
| -</p> |
| - |
| -<h3><a name="hsAt" id="hsAt">Attributes</a></h3> |
| - |
| -<h4><a name="hsAtch" id="hsAtch">charset</a></h4> |
| - |
| -<p> |
| -The <code>charset</code> attribute can declare the character encoding of an external |
| -javascript file that is being imported using the <code>src</code> attribute. In all |
| -cases it is preferable that the server sending the file provide |
| -character encoding information in Content-Type |
| -<span class="initialism" title="HyperText Transfer Protocol "> |
| -<abbr title=" Transfer Protocol ">HTTP</abbr></span> headers (with the |
| -slight problem that there was no official content-type for use with |
| -scripts; see the <code>type</code> attribute below). |
| -</p> |
| - |
| -<p> |
| -Javascript itself uses a very limited repertoire of characters but the |
| -content of string literals in non-Latin languages may necessitate an |
| -interest in character encodings with script files. That is not a |
| -problem that I have faced to date so I don't know how it should best |
| -be handled. I am yet to see a <code>charset</code> attribute used in |
| -a script tag. |
| -</p> |
| - |
| -<h4><a name="hsAtty" id="hsAtty">type</a></h4> |
| - |
| -<p> |
| -The <code>type</code> attribute is required in <span class="initialism" title="HyperText Mark-up Language"><abbr title="HyperText Mark-up Language">HTML</abbr></span> 4 but the <span class="initialism" title="HyperText Mark-up Language"><abbr title="HyperText Mark-up Language">HTML</abbr></span> 4 |
| -specification is not very helpful on the subject. It says:- |
| -</p> |
| - |
| -<blockquote cite="http://www.w3.org/TR/html4/interact/scripts.html#h-18.2.1"> |
| -<h5>type = content-type [CI]</h5> |
| -This attribute specifies the scripting language of the element's |
| -contents and overrides the default scripting language. The scripting |
| -language is specified as a content type (e.g., |
| -"text/javascript"). Authors must supply a value for this |
| -attribute. There is no default value for this attribute. |
| -</blockquote> |
| - |
| -<p> |
| -(The [CI] means that the attribute's value is case insensitive.) |
| -</p> |
| - |
| -<p> |
| -Pursuing the permissible values of content-type through the <span class="initialism" title="HyperText Mark-up Language"><abbr title="HyperText Mark-up Language">HTML</abbr></span> |
| -specification leads to a list of currently recognised content types |
| -(MIME or Media types). Up until mid 2005 that list did not include |
| -anything related to ECMAScript or javascript. So although the attribute |
| -is required, and so must have a value, there was no standardised |
| -content-type for that value. However, the HTML 4 specification did give |
| -text/javascript as an example (even though it was not a recognised |
| -standard content type) so it was that value that has traditionally been |
| -used with the <code>type</code> attribute when including or importing |
| -ECMAScript/javascript into an HTML page. |
| -</p> |
| - |
| -<p> |
| -The MIME types introduced in 2005 are application/ecmascript, |
| -application/javascript and text/javascript. The last of these, and the |
| -value that has traditionally been used; text/javascript, was official |
| -deprecated and so should be phased-out over time. However, at the point |
| -of officially recognising these new MIME types no browsers exist that |
| -will recognise either of application/ecmascript and application/javascript. |
| -This means that if either are actually used for the value of the <code>type</code> |
| -attribute the likelihood is that the script in question will never be |
| -executed. |
| -</p> |
| - |
| -<p> |
| -So for the present, and probably many years to come, text/javascript is |
| -the only viable value for use with the <code>type</code> attribute when using javascript. |
| -</p> |
| - |
| -<pre> |
| -type="text/javascript" |
| -</pre> |
| - |
| -<h4><a name="hsAtln" id="hsAtln">language</a></h4> |
| - |
| -<p> |
| -The <code>language</code> attribute is deprecated (and not allowed under |
| -the strict DTD) and it is unnecessary when the <code>type</code> attribute |
| -is required, as that attribute will determine the language used. |
| -</p> |
| - |
| -<p> |
| -The <code>language</code> attribute can be more specific than the |
| -<code>type</code> attribute because it can also specify the language |
| -version. In almost all respects specifying a language version is not |
| -helpful and even potentially dangerous. |
| -</p> |
| - |
| -<p> |
| -By default a web browser will execute a script using the latest version |
| -of the language that it supports. Generally all current (March 2004) |
| -browsers support all of the language features specified in ECMA 262 2nd |
| -edition (approximately JavaScript 1.3) and most fully support the 3rd |
| -edition. Restricting the language features used to those defined in |
| -ECMA 262 2nd edition (with additional care in some less used areas) |
| -should result in scripts that will happily execute on all current |
| -browsers without a need to specify a language version. |
| -</p> |
| - |
| -<p> |
| -Netscape initially attempted to tie the DOM features of their browser |
| -to the language version, which would have allowed a specified language |
| -version to imply the DOM features supported. That idea was abandoned |
| -because other browsers produced by their competitors introduced |
| -scripting with near identical languages but significantly different |
| -DOMs. DOM support should be determined independently of language |
| -version using object/feature detecting. |
| -</p> |
| - |
| -<p> |
| -The potential danger with specifying a language version comes with |
| -specifying version 1.2. Version 1.2 was an aberration. It deviated |
| -significantly from earlier versions of the language in anticipation |
| -of changes to the ECMA specification, but those changes were never |
| -made. Netscape had to reverse the changes it had made to version |
| -1.2 in version 1.3 in order to conform with what was eventually |
| -published as ECMA 262 2nd edition. The only browsers released for |
| -which version 1.2 was the default JavaScript version were Netscape |
| -4.00 to 4.05 (and you won't find many of those left in the wild). |
| -</p> |
| - |
| -<p> |
| -The problem is that if you specify version 1.2 in a <code>language</code> attribute |
| -you may actually get it, with all of its deviant characteristics, but |
| -at the same time most browsers will not exhibit those characteristics. |
| -It is always a bad idea to encourage the same code to be interpreted in |
| -two different ways, and certainly never without fully understanding how |
| -the language versions differ. The specific problem can be avoided by |
| -never specifying the language version as 1.2. The issue can be avoided |
| -by never providing the deprecated <code>language</code> attribute at all. |
| -</p> |
| - |
| -<h4><a name="hsAtsc" id="hsAtsc">src</a></h4> |
| - |
| -<p> |
| -The SRC attribute specifies the URL of an external javascript file that |
| -is to be imported by the script element. If no file is being imported |
| -by the element (the script is the element's contents) then the |
| -<code>src</code> attribute is omitted. |
| -</p> |
| - |
| -<h4><a name="hsAtdf" id="hsAtdf">defer</a></h4> |
| - |
| -<p> |
| -The <code>defer</code> attribute is specified as providing a |
| -"hint" to the browser as to whether it needs to process |
| -the script immediately (as it usually would), or whether it can carry |
| -on parsing the <span class="initialism" title="HyperText Mark-up Language"><abbr title="HyperText Mark-up Language">HTML</abbr></span> following the script element and leave the |
| -javascript interpreter to process the script in its own time. |
| -</p> |
| - |
| -<p> |
| -If a script uses the <code>document.write</code> method to insert |
| -content into the <span class="initialism" title="HyperText Mark-up Language"><abbr title="HyperText Mark-up Language">HTML</abbr></span> being processed then the script element |
| -containing that script must not be deferred as the inserted <span class="initialism" title="HyperText Mark-up Language"><abbr title="HyperText Mark-up Language">HTML</abbr></span> |
| -could end up at any point in the document (or even be inserted after |
| -the current document has closed, replacing it). If a script is |
| -deferred additional care must be taken before any part of it, such |
| -as a function it defines, is interacted with by other scripts (such |
| -as intrinsic events). |
| -</p> |
| - |
| -<p> |
| -It is unusual for a script element to have a <code>defer</code> |
| -attribute. And many browsers will not recognise/act upon a |
| -<code>defer</code> attribute even if one is present. |
| -</p> |
| - |
| -<h2><a name="hsStFm" id="hsStFm">The Standard Formulations</a></h2> |
| - |
| -<p> |
| -Leaving the <code>defer</code> and <code>charset</code> attributes |
| -aside, the normal formulation for a valid <span class="initialism" title="HyperText Mark-up Language"><abbr title="HyperText Mark-up Language">HTML</abbr></span> 4 script element that |
| -imports a javascript file is:- |
| -</p> |
| - |
| -<pre> |
| -<script type="text/javascript" |
| - src="http://example.com/scriptFile.js"></script> |
| - |
| -<span class="commentJS"><!-- or using an example relative URL --></span> |
| - |
| -<script type="text/javascript" src="../scripts/scriptFile.js"></script> |
| -</pre> |
| - |
| -<p> |
| -<span class="initialism" title="HyperText Mark-up Language"><abbr title="HyperText Mark-up Language">HTML</abbr></span> is case insensitive so the tag name and attribute names can be |
| -in upper or lower (or mixed) case (current practice tends to prefer |
| -lower case). |
| -</p> |
| - |
| -<p> |
| -The attribute values must be quoted because in both cases they include |
| -characters that are forbidden in unquoted attribute values (forbidden |
| -characters would be any character that is not: letters (a-z and A-Z), |
| -digits (0-9), hyphens (ASCII decimal 45), periods (ASCII decimal 46), |
| -underscores (ASCII decimal 95), and colons (ASCII decimal 58)). The |
| -quote characters used may be double quotes (<code>"</code>) or single quotes |
| -(<code>'</code>). Common practice prefers double quotes for <span class="initialism" title="HyperText Mark-up Language"><abbr title="HyperText Mark-up Language">HTML</abbr></span> attributes. |
| -</p> |
| - |
| -<p> |
| -Traditionally javascript files are given a two-letter extension of <code>.js</code>. |
| -That extension is not required, any valid URL to a resource that |
| -returns content that can be interpreted as valid javascript source |
| -code will work. In addition, browsers do not appear to be interested |
| -in any Content Type headers sent with the javascript source, which is |
| -probably a good thing as officially recognised content types have only |
| -just (mid 2005) been introduced. |
| -</p> |
| - |
| -<p> |
| -Script that is to be included in an <span class="initialism" title="HyperText Mark-up Language"><abbr title="HyperText Mark-up Language">HTML</abbr></span> page is placed as the content |
| -of a script element. Appearing between the opening and closing script |
| -tags:- |
| -</p> |
| - |
| -<pre> |
| -<script type="text/javascript"> |
| -function exampleFunctionDeclaration(n){ |
| - return (n * 4); |
| -} |
| -</sciprt> |
| -</pre> |
| - |
| -<p> |
| -The same case sensitivity and attribute value quoting considerations |
| -apply to this application of the script tags as applied to their use |
| -when importing external script files. |
| -</p> |
| - |
| - |
| -<h2><a name="hsPrCn" id="hsPrCn">Permissible Contexts for Script Elements</a></h2> |
| - |
| -<p> |
| -Script elements may not appear in all contexts in an <span class="initialism" title="HyperText Mark-up Language"><abbr title="HyperText Mark-up Language">HTML</abbr></span> document. |
| -They may be children of the <code>HEAD</code> element because the DTD |
| -defines the content of the <code>HEAD</code> element as including |
| -<code>%head_misc;</code> content which includes <code>SCRIPT</code> in |
| -its definition. Script elements may also appear within the |
| -<code>BODY</code> element in any context that is specified as |
| -<code>%flow;</code>, <code>%inline;</code>, <code>%special;</code> or |
| -specifically <code>SCRIPT</code> by the <span class="initialism" title="HyperText Mark-up Language"><abbr title="HyperText Mark-up Language">HTML</abbr></span> DTDs. This is because |
| -<code>%flow;</code> includes all elements defined as |
| -<code>%inline;</code>, which includes all elements defined as |
| -<code>%special;</code>, which includes <code>SCRIP</code> in its |
| -definition (among others). |
| -</p> |
| - |
| -<p> |
| -Reading the DTDs and looking out for these categories will indicate |
| -where script elements are allowed to appear. For example, the (<span class="initialism" title="HyperText Mark-up Language"><abbr title="HyperText Mark-up Language">HTML</abbr></span> |
| -4.01 transitional) DTD definition for the paragraph element reads:- |
| -</p> |
| - |
| -<blockquote cite="http://www.w3.org/TR/html4/loose.dtd"> |
| -<pre> |
| -<!ELEMENT P - O (<span class="elContent">%inline;</span>)* -- paragraph --> |
| -</pre> |
| -</blockquote> |
| - |
| -<p> |
| -The content for the <code>P</code> element is <code>%inline;</code> and |
| -<code>%inline;</code> encompasses <code>SCRIPT</code>. Similarly:- |
| -</p> |
| - |
| -<blockquote cite="http://www.w3.org/TR/html4/loose.dtd"> |
| -<pre> |
| -<!ELEMENT DD - O (<span class="elContent">%flow;</span>)* -- definition description --> |
| -</pre> |
| -</blockquote> |
| - |
| -<p> |
| -The <code>DD</code> element has <code>%flow;</code> defining its content so it is |
| -allowed <code>SCRIPT</code> as its content (or part of it). Whereas:- |
| -</p> |
| - |
| -<blockquote cite="http://www.w3.org/TR/html4/loose.dtd"> |
| -<pre> |
| -<!ELEMENT DL - - (<span class="elContent">DT|DD</span>)+ -- definition list --> |
| -</pre> |
| -</blockquote> |
| - |
| -<p> |
| -The <code>DL</code> element is only allowed <code>DT</code> and |
| -<code>DD</code> elements as its children. So a script element |
| -cannot appear as a child of a <code>DL</code> element in valid <span class="initialism" title="HyperText Mark-up Language"><abbr title="HyperText Mark-up Language">HTML</abbr></span> 4. |
| -</p> |
| - |
| -<p> |
| -The DTD for the particular flavour of <span class="initialism" title="HyperText Mark-up Language"><abbr title="HyperText Mark-up Language">HTML</abbr></span> being authored is the best |
| -guide as the where in a document script elements may appear, but note |
| -that the different versions of the DTD differ slightly in terms of the |
| -content defined for some elements. |
| -</p> |
| - |
| -<h2><a name="hsCt" id="hsCt">The Content of Script Elements</a></h2> |
| - |
| -<p> |
| -Script elements that have source code as their contents and appear on |
| -an <span class="initialism" title="HyperText Mark-up Language"><abbr title="HyperText Mark-up Language">HTML</abbr></span> page need some special consideration. |
| -</p> |
| - |
| -<h3><a name="hsOld" id="hsOld">Hiding Scripts from Older Browsers</a></h3> |
| - |
| -<p> |
| -When scripting was first introduced the preceding generations of |
| -browsers had no concept of what a script element was, and would treat |
| -the content of the unrecognised script tags in the way unrecognised |
| -tags are normally handled in <span class="initialism" title="HyperText Mark-up Language"><abbr title="HyperText Mark-up Language">HTML</abbr></span>. The content is treated as <span class="initialism" title="HyperText Mark-up Language"><abbr title="HyperText Mark-up Language">HTML</abbr></span> |
| -source, which, for a scripts, meant including it as text in a page. |
| -The results did not look good and a mechanism was provided to hide the |
| -script element contents from browsers that did not know how to handle |
| -script elements. |
| -</p> |
| - |
| -<p> |
| -Javascript has an end of line comment symbol consisting of two slashes |
| -(<code>//</code>). All characters between that symbol and the end of |
| -the line are treated as a comment and ignored. <span class="initialism" title="HyperText Mark-up Language"><abbr title="HyperText Mark-up Language">HTML</abbr></span> also provides a |
| -means of commenting out parts of its source, an opening comment |
| -tag <code><!--</code> and a closing comment tag |
| -<code>--></code> (strictly these are not opening and closing tags |
| -in HTML, it is the pairs of dashes that start and end a comment. The |
| -surrounding <code><!</code> and <code>></code> represent a |
| -processing instruction, which is the only context in which a comment |
| -is recognised in HTML.). |
| -</p> |
| - |
| -<p> |
| -The trick to hiding javascript source code from |
| -browsers that did not recognise the script element, so it would not |
| -be shown on the page, was to allow script included in an <span class="initialism" title="HyperText Mark-up Language"><abbr title="HyperText Mark-up Language">HTML</abbr></span> page to |
| -use an additional end of line comment symbol that corresponded with |
| -the <code><!--</code> opening comment tag used by <span class="initialism" title="HyperText Mark-up Language"><abbr title="HyperText Mark-up Language">HTML</abbr></span>. The script |
| -author would then place this tag/comment symbol at the start of the |
| -script source code (on a line of its own, so as not to comment out |
| -any javascript code) and then use the normal javascript end of line |
| -comment symbol to comment out (from the javascript interpreter) an |
| -<span class="initialism" title="HyperText Mark-up Language"><abbr title="HyperText Mark-up Language">HTML</abbr></span> end of comment tag. |
| -</p> |
| - |
| -<pre> |
| -<script type="text/javascript"> |
| -<span class="commentJS"><!--</span> |
| -function exampleFunctionDeclaration(n){ |
| - return (n * 4); |
| -} |
| -<span class="commentJS">// --></span> |
| -</sciprt> |
| -</pre> |
| - |
| -<p> |
| -A browser incapable of recognising the script element would treat its |
| -content as <span class="initialism" title="HyperText Mark-up Language"><abbr title="HyperText Mark-up Language">HTML</abbr></span> |
| -source and so it would interpret the script within the script element |
| -as effectively commented out, thus not displaying it on the page. |
| -</p> |
| - |
| -<p> |
| -When scripting was introduced the practice was necessary and highly |
| -recommended, but that was some time ago and browsers and <span class="initialism" title="HyperText Mark-up Language"><abbr title="HyperText Mark-up Language">HTML</abbr></span> versions |
| -have moved on two or three generations. We are now at a point where |
| -the oldest browsers in current use are already two generations into |
| -<span class="initialism" title="HyperText Mark-up Language"><abbr title="HyperText Mark-up Language">HTML</abbr></span> versions that formalised script elements. They all know what a |
| -script element is and how its contents should be handled. Even |
| -browsers that cannot execute scripts know that they are supposed to |
| -ignore the content of script elements. |
| -</p> |
| - |
| -<p> |
| -The practice of hiding scripts from "older" browsers has |
| -become an anachronism, no longer needed and no longer used by informed |
| -javascript authors. It is still often seen because it is recommended |
| -in out of date books and in out of date javascript tutorials on the |
| -web. And the readers of those books and tutorials continue to use and |
| -promote it, not realising that it no longer serves any real purpose. |
| -</p> |
| - |
| -<p> |
| -The existence of this additional comment syntax in javascript included |
| -in <span class="initialism" title="HyperText Mark-up Language"><abbr title="HyperText Mark-up Language">HTML</abbr></span> pages also lead to <span class="initialism" title="HyperText Mark-up Language"><abbr title="HyperText Mark-up Language">HTML</abbr></span> style comments being used extensively |
| -in on-page javascript. This was, and is, a very bad idea. Javascript |
| -has end of line and multi-line comment syntaxes and they should be used |
| -exclusively to comment javascript source code. |
| -</p> |
| - |
| -<h3><a name="hsETO" id="hsETO">Closing Script Tags and "</" (end-tag open delimiter)</a></h3> |
| - |
| -<p> |
| -When a script is included on an <span class="initialism" title="HyperText Mark-up Language"><abbr title="HyperText Mark-up Language">HTML</abbr></span> page the <span class="initialism" title="HyperText Mark-up Language"><abbr title="HyperText Mark-up Language">HTML</abbr></span> parser needs to |
| -decide how much of the page's source text to pass on to the javascript |
| -interpreter and where it should start processing other <span class="initialism" title="HyperText Mark-up Language"><abbr title="HyperText Mark-up Language">HTML</abbr></span> again. |
| -Officially an <span class="initialism" title="HyperText Mark-up Language"><abbr title="HyperText Mark-up Language">HTML</abbr></span> parser is required to take the first occurrence of |
| -the character sequence "<code></</code>" it finds after |
| -the opening script tag as marking the end of the script element. In |
| -practice browsers seem to be a lot more lax and only terminate the |
| -script section when they encounter the character sequence |
| -"<code></script></code>". |
| -</p> |
| - |
| -<p> |
| -That seems reasonable (if lax) but it does not eliminate all problems. |
| -Suppose that a script includes <span class="initialism" title="HyperText Mark-up Language"><abbr title="HyperText Mark-up Language">HTML</abbr></span> source in the form of a string |
| -literal, and that source includes a closing script tag, as might be |
| -the case when using <code>document.write</code> to write a new script |
| -element to the page:- |
| -</p> |
| - |
| -<pre> |
| -<script type="text/javascript"> |
| -document.write( |
| - '<script type="text/javascript" src="scriptFile.js"></script>'); |
| -</script> |
| -</pre> |
| - |
| -<p> |
| -That is an example simplified to the point of being futile but it |
| -should be obvious that if the <span class="initialism" title="HyperText Mark-up Language"><abbr title="HyperText Mark-up Language">HTML</abbr></span> parser considers the first |
| -occurrence of "<code></script></code>" as terminating |
| -the script element the results will be undesirable. |
| -</p> |
| - |
| -<p> |
| -The solution is to do something to make the character sequence within |
| -the javascript string of <span class="initialism" title="HyperText Mark-up Language"><abbr title="HyperText Mark-up Language">HTML</abbr></span> different from the sequence that will be |
| -recognised as the closing script tag. This is often done by splitting |
| -the string and using a concatenation operation to let the script |
| -produce the same output:- |
| -</p> |
| - |
| -<pre> |
| -<script type="text/javascript"> |
| -document.write( |
| - '<script type="text/javascript" src="scriptFile.js"></scr'+'ipt>'); |
| -</script> |
| -</pre> |
| - |
| -<p> |
| -This conceals the closing script tag from the <span class="initialism" title="HyperText Mark-up Language"><abbr title="HyperText Mark-up Language">HTML</abbr></span> parser but it is not |
| -a good idea because string concatenation is a surprisingly heavyweight |
| -operation and the same goal of disrupting the character sequence that |
| -the <span class="initialism" title="HyperText Mark-up Language"><abbr title="HyperText Mark-up Language">HTML</abbr></span> parser will mistake for a closing tag can be achieved by using |
| -the javascript escape character to escape any character in the closing |
| -script tag:- |
| -</p> |
| - |
| -<pre> |
| -<script type="text/javascript"> |
| -document.write( |
| - '<script type="text/javascript" src="scriptFile.js"></script\>'); |
| -</script> |
| -</pre> |
| - |
| -<p> |
| -The <span class="initialism" title="HyperText Mark-up Language"><abbr title="HyperText Mark-up Language">HTML</abbr></span> parser will now not find the character sequence |
| -"<code></script></code>" until it encounters the real |
| -closing script tag, but the internal representation of the string is not |
| -affected by the use of the escape character in the javascript source |
| -and no additional operations are needed. |
| -</p> |
| - |
| -<p> |
| -However, as I said, it is the character sequence |
| -"<code></</code>" that is officially to be taken as |
| -terminating a script element's contents. While no current browsers are |
| -known to be that strict it is entirely realistic that some browsers may |
| -exist (or be introduced) that takes the <span class="initialism" title="HyperText Mark-up Language"><abbr title="HyperText Mark-up Language">HTML</abbr></span> specifications to hart and |
| -treat "<code></</code>" as the end of the script content. |
| -But <span class="initialism" title="HyperText Mark-up Language"><abbr title="HyperText Mark-up Language">HTML</abbr></span> validaters already tend to take the <span class="initialism" title="HyperText Mark-up Language"><abbr title="HyperText Mark-up Language">HTML</abbr></span> specification |
| -seriously and will report many mark-up errors as a result of getting |
| -the impression that a script element has terminated sooner than a |
| -browser would think it had. |
| -</p> |
| - |
| -<p> |
| -The above use of the escape character may placate all known browsers |
| -but it will not address the requirements of the <span class="initialism" title="HyperText Mark-up Language"><abbr title="HyperText Mark-up Language">HTML</abbr></span> specification. |
| -But they can both be addressed by escaping a different character, |
| -specifically the forward slash:- |
| -</p> |
| - |
| -<pre> |
| -<script type="text/javascript"> |
| -document.write( |
| - '<script type="text/javascript" src="scriptFile.js"><\/script>'); |
| -</script> |
| -</pre> |
| - |
| -<p> |
| -Of course now it is not just the closing script tag that needs to be |
| -escaped but all occurrences of closing tags appearing in string |
| -literals. All occurrences of "<code></</code>" would need |
| -to be escaped to "<code><\/</code>" to completely avoid |
| -<span class="initialism" title="HyperText Mark-up Language"><abbr title="HyperText Mark-up Language">HTML</abbr></span> parser and validation problems. Alternatively the javascript |
| -source could be moved to an external file as then it is never |
| -examined by an <span class="initialism" title="HyperText Mark-up Language"><abbr title="HyperText Mark-up Language">HTML</abbr></span> parser or considered in <span class="initialism" title="HyperText Mark-up Language"><abbr title="HyperText Mark-up Language">HTML</abbr></span> validation. |
| -</p> |
| - |
| -<h2><a name="hsExF" id="hsExF">External Javascript Files</a></h2> |
| - |
| -<p> |
| -Placing javascript source code in external files has several |
| -advantages. For those who are required to use a browser that is |
| -javascript incapable/disabled it can significantly reduce download |
| -time as those browsers just will not bother getting the external file |
| -as they have no use for it, scripts on an <span class="initialism" title="HyperText Mark-up Language"><abbr title="HyperText Mark-up Language">HTML</abbr></span> page must be downloaded |
| -with the page if the <span class="initialism" title="HyperText Mark-up Language"><abbr title="HyperText Mark-up Language">HTML</abbr></span> is to be used. |
| -</p> |
| - |
| -<p> |
| -External javascript files can also be cached separately from <span class="initialism" title="HyperText Mark-up Language"><abbr title="HyperText Mark-up Language">HTML</abbr></span> pages |
| -so they may need to be downloaded less often even for the users of |
| -javascript capable/enabled browsers. |
| -</p> |
| - |
| -<p> |
| -They entirely remove the need to worry about script hiding (no longer |
| -needed anyway), escaping <span class="initialism" title="HyperText Mark-up Language"><abbr title="HyperText Mark-up Language">HTML</abbr></span> closing tags in strings or any other |
| -factors relating to the parsing of mark-up languages. |
| -</p> |
| - |
| -<p> |
| -Javascript imported by using the <code>src</code> attribute of a script element is |
| -used in place of the content for the script element that imported it. |
| -The position of that element in the page defines the |
| -"location" of the script in the document. If the file |
| -executes <code>document.write</code> then any content written will be |
| -inserted following the script element that imported the file, and any |
| -other elements on the page referenced by that script as it loads will |
| -need to have already been parsed by the <span class="initialism" title="HyperText Mark-up Language"><abbr title="HyperText Mark-up Language">HTML</abbr></span> parser at that point or |
| -they will not be found in the DOM. |
| -</p> |
| - |
| -<h3><a name="hsExC" id="hsExC">The Content of External Javascript Files.</a></h3> |
| - |
| -<p> |
| -Javascript files imported using the <code>src</code> attribute of script elements |
| -must contain <em>only</em> javascript source code. They must not contain any |
| -<span class="initialism" title="HyperText Mark-up Language"><abbr title="HyperText Mark-up Language">HTML</abbr></span>. It is a surprisingly common error for opening and closing script |
| -tags and/or the "hide from older browsers" <span class="initialism" title="HyperText Mark-up Language"><abbr title="HyperText Mark-up Language">HTML</abbr></span> comment |
| -tags to be included in external script files, in that context they are |
| -javascript syntax errors and nothing else. |
| -</p> |
| - |
| -<h2><a name="hsMix" id="hsMix">Script Elements that Import Javascript Files and Have Contents</a></h2> |
| - |
| -<p> |
| -Script elements may attempt to both import a file and contain script |
| -contents. The idea here is to provide some scripted action in the event |
| -that the external file cannot be loaded for some reason. Such a script |
| -element may look like:- |
| -</p> |
| - |
| -<pre> |
| -<script type="text/javascript" src="../scripts/scriptFile.js"> |
| - var externalScriptLoaded = false; |
| -</script> |
| -</pre> |
| - |
| -<p> |
| -The browser should handle this formulation of the script element by |
| -attempting to load the external file, but in the even of that attempt |
| -failing instead the contents of the script element are executed. So, in |
| -the example above, if the external file is loaded and executed the |
| -contents of the element would not be executed. That external file |
| -would itself define the <code>externalScriptLoaded</code> global |
| -variable and assign it a value of boolean <code>true</code>. If the |
| -file did not load the contents would be executed, again creating |
| -the <code>externalScriptLoaded</code> variable, but this time |
| -assigning it a <code>false</code> value. Another script on the page |
| -can then read the <code>externalScriptLoaded</code> variable as a |
| -means of determining whether the external script loaded successfully. |
| -</p> |
| - |
| -<p> |
| -The definition of failing to load an external script is centred |
| -around <span class="initialism" title="HyperText Transfer Protocol "> |
| -<abbr title=" Transfer Protocol ">HTTP</abbr></span>. If no connection |
| -to the server can be made, or an |
| -<span class="initialism" title="HyperText Transfer Protocol "> |
| -<abbr title=" Transfer Protocol ">HTTP</abbr></span> error response, |
| -such as <code>404</code>, is returned, then the external script has |
| -failed to load and the browser can execute the contents of the |
| -element. However, many servers are set up in such a way that they |
| -do not actually return the expected |
| -<span class="initialism" title="HyperText Transfer Protocol "> |
| -<abbr title=" Transfer Protocol ">HTTP</abbr></span> error responses, |
| -but instead return an <span class="initialism" title="HyperText Mark-up Language"><abbr title="HyperText Mark-up Language">HTML</abbr></span> page that is intended to inform the user |
| -of the error. This is fine for humans but from the point of view of |
| -the browser such a response is indistinguishable from a returned |
| -(but erroneous) javascript source file (This is in part because |
| -the browser disregards content-type headers sent with external |
| -javascript files so even if the <span class="initialism" title="HyperText Mark-up Language"><abbr title="HyperText Mark-up Language">HTML</abbr></span> error reporting page is sent |
| -with a text/html content type the browser will still assume that |
| -it contains javascript source). The browser attempts to |
| -execute the returned <span class="initialism" title="HyperText Mark-up Language"><abbr title="HyperText Mark-up Language">HTML</abbr></span> source as javascript and fails at the |
| -first inevitable syntax error. But erroring while executing what |
| -the browser thought was an external javascript file does not |
| -result in the execution of the code within the script element. |
| -</p> |
| - |
| -<p> |
| -In practice script elements are rarely used where an external |
| -file is imported and script contents are provided for the element. |
| -If a separate script wanted to verify that an externally imported |
| -script was available it would not need the mechanism demonstrated |
| -in the example above as javascript provides many ways of verifying |
| -the existence of javascript defined entities. So, for example, if |
| -the external script defined a function called <code>functionName</code>, the |
| -availability of that function could be verified as:- |
| -</p> |
| - |
| -<pre> |
| -if(typeof functionName == "function"){ |
| - functionName(); |
| -} |
| -</pre> |
| - |
| -<p> |
| -- and if a function defined in an external file is available then |
| -that external file must have been successfully loaded. |
| -</p> |
| - |
| -<h2><a name="hsEh" id="hsEh">Event Handling Attributes: Intrinsic Events</a></h2> |
| - |
| -<p> |
| -The final place where javascript can be included in an <span class="initialism" title="HyperText Mark-up Language"><abbr title="HyperText Mark-up Language">HTML</abbr></span> document is |
| -as the value strings provided for event handling attributes. |
| -</p> |
| - |
| -<p> |
| -The values of event handling attributes will almost certainly need to |
| -be quoted because it is nearly impossible to write a javascript |
| -statement that only uses the characters allowed in an unquoted |
| -attribute value. And quoting can get quite involved in attribute values |
| -because they need to be quoted in the <span class="initialism" title="HyperText Mark-up Language"><abbr title="HyperText Mark-up Language">HTML</abbr></span> source so whatever type of |
| -quote marks are used in the <span class="initialism" title="HyperText Mark-up Language"><abbr title="HyperText Mark-up Language">HTML</abbr></span> cannot be used within the javascript |
| -code provided as the value because the <span class="initialism" title="HyperText Mark-up Language"><abbr title="HyperText Mark-up Language">HTML</abbr></span> parser would take them as |
| -ending the string for the attribute value. While javascript string |
| -literals allow the use of double quotes or single quotes as delimiters |
| -and allow the type of quote not used as the delimiter to appear within |
| -the string literal unescaped. |
| -</p> |
| - |
| -<p> |
| -So, given a desire to assign the string <code>"don't do |
| -that"</code> to an element's value property in an onclick event, |
| -because of the single quote appearing in the string itself the attribute |
| -value <code>onclick='this.value = "don't do that";'</code> |
| -will not work because the <span class="initialism" title="HyperText Mark-up Language"><abbr title="HyperText Mark-up Language">HTML</abbr></span> parser will take the second single quote |
| -as ending the attribute value. It will not work to simply escape the |
| -single quote as <code>onclick='this.value = "don\'t do |
| -that";'</code> because the <span class="initialism" title="HyperText Mark-up Language"><abbr title="HyperText Mark-up Language">HTML</abbr></span> parser doesn't know anything about |
| -javascript escapes and still sees the second single quote in the middle |
| -of the javascript string. |
| -</p> |
| - |
| -<p> |
| -In this case escaping the single quote and reversing the quoting |
| -between the <span class="initialism" title="HyperText Mark-up Language"><abbr title="HyperText Mark-up Language">HTML</abbr></span> and the javascript |
| -<code>onclick="this.value = 'don\'t do that';"</code> or |
| -using a javascript hex escape (which the <span class="initialism" title="HyperText Mark-up Language"><abbr title="HyperText Mark-up Language">HTML</abbr></span> parser will not see as a |
| -quote) <code>onclick='this.value = "don\x27t do that";'</code> |
| -would solve the problem. But quotes in event handling attribute strings |
| -that define code that uses string literals often needs to be thought |
| -about. |
| -</p> |
| - |
| -<h3><a name="hsEhD" id="hsEhD">The Default Language for Intrinsic Events</a></h3> |
| - |
| -<p> |
| -All else being equal, web browsers seem to all default the scripting |
| -language used with intrinsic events to javascript (ECMAScript, in |
| -whichever implementation is provided) and there is no formal mechanism |
| -for associating a scripting language with individual event handling |
| -attributes (unlike script elements which must be provided with a |
| -<code>type</code> attribute). |
| -</p> |
| - |
| -<p> |
| -The <span class="initialism" title="HyperText Mark-up Language"> |
| -<abbr title="HyperText Mark-up Language">HTML</abbr></span> |
| -specification calls for a page wide default scripting language |
| -to be set, and that is the only specified way to set the scripting |
| -language for intrinsic events. |
| -</p> |
| - |
| -<p> |
| -To this end The <span class="initialism" title="HyperText Mark-up Language"><abbr title="HyperText Mark-up Language">HTML</abbr></span> specification proposes the inclusion in the |
| -<code>HEAD</code> section of a page of a <code>META</code> tag:- |
| -</p> |
| - |
| -<blockquote cite="http://www.w3.org/TR/html4/interact/scripts.html#h-18.2.2.1"> |
| -<pre> |
| -<meta http-equiv="Content-Script-Type" content="text/javascript"> |
| -</pre> |
| -</blockquote> |
| - |
| -<p> |
| -This is supposed to assert the default type of script language on a |
| -page (possibly overridden by the (required) <code>type</code> |
| -attributes provided for individual script elements). As a result it |
| -is <em>formally correct</em> to include this tag in <span class="initialism" title="HyperText Mark-up Language"><abbr title="HyperText Mark-up Language">HTML</abbr></span> 4.01 documents |
| -(or provide a corresponding <span class="initialism" title="HyperText Transfer Protocol "><abbr title=" Transfer Protocol ">HTTP</abbr></span> header when the page is served). |
| -</p> |
| - |
| -<p> |
| -However, there is no evidence that any current browsers pay any attention to |
| -this <code>META</code> element at all (or would have any interest in a corresponding |
| -<span class="initialism" title="HyperText Transfer Protocol "><abbr title=" Transfer Protocol ">HTTP</abbr></span> |
| -header), but then there are not many browsers that can execute any |
| -scripting language but javascript. This entire proposed mechanism |
| -has also been subject to criticism, and many recommend disregarding |
| -it entirely in favour of relying on the tendency of browsers to |
| -default to interpreting intrinsic event code as javascript. |
| -</p> |
| - |
| -<h2><a name="hsNs" id="hsNs">NOSCRIPT Elements</a></h2> |
| - |
| -<p> |
| -The general idea of a <code>NOSCRIPT</code> element is to provide a |
| -holder for <span class="initialism" title="HyperText Mark-up Language"><abbr title="HyperText Mark-up Language">HTML</abbr></span> marked-up content |
| -that will only be displayed when scripting is not enabled/available on |
| -a web browsers. At first sight this seems to be a useful idea, and a |
| -contribution towards providing clean degradation in circumstances where |
| -scripts cannot be executed. Showing content that would be a substitute |
| -for any content that would otherwise have been provided by a script. |
| -</p> |
| - |
| -<p> |
| -However, <code>SCRIPT</code> and <code>NOSCRIPT</code> elements are not |
| -actually directly substitutable in |
| -<span class="initialism" title="HyperText Mark-up Language"> |
| -<abbr title="HyperText Mark-up Language">HTML</abbr></span>. That is, you |
| -cannot use a <code>NOSCRIPT</code> element in all of the contexts in |
| -which you can use a <code>SCRIPT</code> element and produce valid |
| -<span class="initialism" title="HyperText Mark-up Language"> |
| -<abbr title="HyperText Mark-up Language">HTML</abbr></span> as a result. |
| -</p> |
| - |
| -<p> |
| -The <span class="initialism" title="HyperText Mark-up Language"> |
| -<abbr title="HyperText Mark-up Language">HTML</abbr></span> DTDs |
| -categories <code>SCRIPT</code> and <code>NOSCRIPT</code> differently: |
| -<code>SCRIPT</code> is an <code>%inline</code>, <code>%special</code> or <code>%head.misc</code> element, |
| -it may appear in the <code>HEAD</code> of a document (as a child of |
| -a <code>HEAD</code> element (<code>%head.misc</code>)), or in any context that |
| -allows inline or <code>%special</code> content (descendants of the <code>BODY</code> |
| -element, but not in all contexts). The <code>NOSCRIPT</code> element |
| -is categorised as <code>%block</code>, and as a result it cannot appear in the |
| -<code>HEAD</code> at all, and may only appear in the body in a context |
| -that allows <code>%block</code> content (<code>%flow</code> or <code>%block</code> but not <code>%inline</code>). This |
| -means that the one cannot always stand as a direct substitute for the |
| -other in a valid <span class="initialism" title="HyperText Mark-up Language"> |
| -<abbr title="HyperText Mark-up Language">HTML</abbr></span> document. |
| -</p> |
| - |
| -<p> |
| -<span class="initialism" title="HyperText Mark-up Language"> |
| -<abbr title="HyperText Mark-up Language">HTML</abbr></span> <code>NOSCRIPT</code> |
| -elements probably seemed like a good idea when they were first introduced. |
| -They were probably even viable at the time because so few browsers were |
| -able to execute javascript that a division between <code>SCRIPT</code> |
| -and <code>NOSCRIPT</code> could encompass all of the possibilities. The |
| -problem with them now is the diversity of javascript capable web |
| -browsers, with their differing object models and language implementations. |
| -</p> |
| - |
| -<p> |
| -While it remains the case that any browser on which scripting is disabled |
| -or unavailable will use any <code>NOSCRIPT</code> elements provided in |
| -an <span class="initialism" title="HyperText Mark-up Language"> |
| -<abbr title="HyperText Mark-up Language">HTML</abbr></span> page, it is not the |
| -case that all javascript supporting and enabled browsers will be able |
| -to successfully execute any script specified within (or imported by) a |
| -<code>SCRIPT</code> element. The browser may lack the features needed |
| -by the script, or just not be sufficiently dynamic to present any |
| -content that the script intends to insert into the document. |
| -</p> |
| - |
| -<p> |
| -Even browser features as seemingly universal as the |
| -<code>document.write</code> function are not universally supported |
| -(even on modern browsers), and anything even remotely dynamic is bound |
| -to fail somewhere. So instead of having to cope with two certain |
| -outcomes, successful execution and no script execution at all, it is |
| -actually necessary to cope with 3 possible outcomes, adding the |
| -possibility that scripting is supported by the browser but the features |
| -required by any individual script are not available. In that third |
| -case the script fails to provide what it was intended to provide, but |
| -the contents of the <code>NOSCRIPT</code> elements are not presented |
| -either. |
| -</p> |
| - |
| -<p> |
| -This effectively renders <code>NOSCRIPT</code> elements next to |
| -useless when it comes to providing clean degradation. They leave |
| -an unbridgeable gap between browsers unwilling or unable to execute |
| -scripts at all and browsers that will fully support any given script. |
| -And whatever content seemed to make sense within those |
| -<code>NOSCRIPT</code> elements must also make sense in the context |
| -of a javascript capable browser that does not support the features |
| -required by a script. |
| -</p> |
| - |
| -<p> |
| -Recognising a requirement for clean degradation in script design, |
| -and the inability of <code>NOSCRIPT</code> elements to contribute |
| -towards facilitating it, many recommend never using |
| -<code>NOSCRIPT</code> elements. Instead providing content that |
| -works in place of active script support within the |
| -<span class="initialism" title="HyperText Mark-up Language"> |
| -<abbr title="HyperText Mark-up Language">HTML</abbr></span> and then |
| -having their scripts remove, or transform by manipulation, that |
| -content only when the browser proves sufficiently supportive for |
| -the script to be viable. This technique allows the design to only |
| -consider two conditions; the browser fully supports the script |
| -and will execute it, or the browser does not support the scripts |
| -so whatever was originally included in the |
| -<span class="initialism" title="HyperText Mark-up Language"> |
| -<abbr title="HyperText Mark-up Language">HTML</abbr></span> will be |
| -what the user is exposed to. |
| -</p> |
| - |
| -<p id="rToc"> |
| -<a href="faq_notes.html#toc">comp.lang.javascript FAQ notes T.O.C.</a> |
| -</p> |
| - |
| -</body> |
| -</html> |
| \ No newline at end of file |
| /cljs/faq_notes/script_tags.html |
| Property changes: |
| Deleted: svn:mime-type |
| ## -1 +0,0 ## |
| -text/plain |
| \ No newline at end of property |
| Index: cljs/faq_notes/cljs_charter.html |
| =================================================================== |
| --- cljs/faq_notes/cljs_charter.html (revision 45) |
| +++ cljs/faq_notes/cljs_charter.html (nonexistent) |
| @@ -1,146 +0,0 @@ |
| -<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> |
| -<html lang="en"><head><title>CALL FOR VOTES -- comp.lang.javascript</title> |
| -<meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1"> |
| -<link href="../faq.css" rel="stylesheet" type="text/css"> |
| -<link href="faq_notes.css" rel="stylesheet" type="text/css"> |
| -</head> |
| -<body> |
| - |
| -<h1><a name="chT" id="chT">The comp.lang.javascript Charter</a></h1> |
| - |
| -<p> |
| -The following is the text of the last Call For Votes (CFV) that |
| -resulted in the creation of the comp.lang.javascript newsgroup |
| -(as extracted from the archives at google groups). It defines |
| -the Charter for the proposed group, and as the vote was successful |
| -the charter as stated below is the charter currently in force for |
| -the comp.lang.javascript. |
| -</p> |
| - |
| -<pre> |
| -LAST CALL FOR VOTES (of 2) |
| - unmoderated group comp.lang.javascript |
| - |
| -Newsgroups line: |
| -comp.lang.javascript Netscape Communications Corp.'s JavaScript language. |
| - |
| -Votes must be received by 23:59:59 UTC, 26 Jan 1996. |
| - |
| -This vote is being conducted by a neutral third party. Questions |
| -about the proposed group should be directed to the proponent. |
| - |
| -Proponent: Thomas Winzig <thomas.winzig@webcom.com> |
| -Votetaker: Steve Bonine <spb@ntrs.com> |
| - |
| -RATIONALE: comp.lang.javascript |
| - |
| -Since Netscape Communication Corp.'s release of the Java-complementary |
| -scripting language, JavaScript, there has been a steady increase in |
| -the amount of JavaScript related questions and discussion in the |
| -comp.lang.java usenet newsgroup. Since these two languages are |
| -distinctly different, and might draw discussion from two generally |
| -different 'crowds' (professional programmers and casual programmers), |
| -I formally propose the creation of comp.lang.javascript for discussion |
| -of everything related to the JavaScript scripting language. |
| - |
| -At this point in time, with JavaScript still in Beta test, the amount |
| -of JavaScript related postings to comp.lang.java is "acceptable" by |
| -most. However, as JavaScript reaches completion, there will need to be |
| -a place for it's separate discussion. |
| - |
| -Truthfully, the JavaScript newsgroup could fit into a number of UseNet |
| -heirarchies, but I think the moderator of comp.infosystems.www.announce |
| -(M. L. Grant) explained it best when he said: |
| - |
| -"...since javascript is different from java itself, it should be |
| -in its own hierarchy. A sixteenth comp.infosystems.www.* newsgroup |
| -is not needed; and putting it in the java groups will encourage the |
| -same confusion that comp.windows endures (HINT: the group is *not* |
| -about Microsoft operating systems)." |
| - |
| -CHARTER: comp.lang.javascript |
| - |
| -The proposed comp.lang.javascript will be open to discussion on all |
| -aspects of JavaScript, as it relates to HTML, Java, Perl, the World |
| -Wide Web in general, and other related languages. The scope of |
| -discussion will specifically exclude matters which are *solely* |
| -related to Sun Microsystems, Inc.'s Java language, which should be |
| -discussed in comp.lang.java. |
| - |
| -END CHARTER. |
| - |
| -HOW TO VOTE: |
| - |
| -Send E-MAIL (posts to a newsgroup are not votes) to: |
| - |
| - voting@ntrs.com |
| - |
| -Replying to this article should work, but check the address before you mail |
| -your vote. Your mail message must contain one and only one of the following |
| -vote statements for each group: |
| - |
| - I vote YES on comp.lang.javascript |
| - I vote NO on comp.lang.javascript |
| - |
| -Names are required for this vote. The counting software will extract your name |
| -from the mail message if your mailer is properly configured; if your mail |
| -software does not indicate your name, you must include the following statement: |
| - |
| - Voter name: Your name here |
| - |
| -You can also vote ABSTAIN or CANCEL. These votes are not counted in the |
| -results, and CANCEL removes your name from the vote listing in the result. |
| - |
| -Vote counting is automated. Failure to follow these directions may mean that |
| -your vote does not get counted. If you do not receive an acknowledgment of |
| -your vote within three days contact the votetaker about the problem. IT'S YOUR |
| -RESPONSIBILITY TO MAKE SURE YOUR VOTE IS REGISTERED CORRECTLY. |
| - |
| -If you wish to change your vote, simply vote again from the same account; |
| -duplicate votes are resolved in favor of the most recent vote. |
| - |
| -THIS IS NOT A SECRET VOTE. Names, addresses, and votes will be published in |
| -a RESULTS article in the same newsgroups in which this CFV appears. |
| - |
| -The purpose of a Usenet vote is to determine if there is sufficient interest in |
| -the Usenet community to create a new newsgroup. Soliciting votes from |
| -disinterested parties defeats this purpose. Please do not distribute this CFV; |
| -direct people to the CFV in news.announce.newgroups. Distributing pre-marked |
| -or edited copies of this CFV is prohibited, and votes from such sources will be |
| -removed from the final vote total. |
| - |
| -Standard Guidelines for voting apply. One person, one vote. Votes must be |
| -mailed directly from the voter to the votetaker. Anonymous, forwarded or proxy |
| -votes are not valid. Votes mailed by WWW servers are considered to be |
| -anonymous votes. |
| -</pre> |
| - |
| -<p> |
| -In my opinion the charter says little that isn't obvious, but it |
| -also exhibits symptoms of its historic origin; an attempt to avoid |
| -javascript questions being asked in comp.lang.java groups. 50% of |
| -the charter's text being devoted to excluding the discussion of the |
| -Java language |
| -</p> |
| - |
| -<p> |
| -In a modern context the subject of the group is interpreted as being |
| -all ECMAScript implementations as that is the standard that |
| -JavaScript (TM) now implements, and it is the implementation of that |
| -standard that allows other languages to be categorised as javascript. |
| -</p> |
| - |
| -<p> |
| -No applications of javascript/ECMAScript are excluded from discussion |
| -on the group, and the group's apparent bias towards web browser |
| -scripting for the Internet is a consequence of the historical origin |
| -of the language, and the fact that browser scripting remains its most |
| -common application. |
| -</p> |
| - |
| -<p id="rToc"> |
| -<a href="faq_notes.html#toc">comp.lang.javascript FAQ notes T.O.C.</a> |
| -</p> |
| - |
| -</body> |
| -</html> |
| \ No newline at end of file |
| /cljs/faq_notes/cljs_charter.html |
| Property changes: |
| Deleted: svn:mime-type |
| ## -1 +0,0 ## |
| -text/plain |
| \ No newline at end of property |
| Index: cljs/faq_notes/faq_notes.css |
| =================================================================== |
| --- cljs/faq_notes/faq_notes.css (revision 45) |
| +++ cljs/faq_notes/faq_notes.css (nonexistent) |
| @@ -1,51 +0,0 @@ |
| -P CODE, LI CODE { |
| - background-color:#FFFFDD; |
| - color:#000000; |
| - padding:0; |
| - margin:0; |
| -} |
| -BLOCKQUOTE { |
| - background-color:#EEEEFF; |
| - color:#000000; |
| - padding:0.5em; |
| -} |
| -BLOCKQUOTE DD PRE, BLOCKQUOTE DD CODE { |
| - background-color:#EEEEFF; |
| - color:#000000; |
| - border:#EEEEFF 0px none; |
| - margin:0.5em; |
| - padding:0; |
| -} |
| -BLOCKQUOTE DT { |
| - font-weight:bold; |
| - margin-bottom:0.5em; |
| -} |
| -.commentJS { |
| - background-color:#FFFFCC; |
| - color:#004800; |
| -} |
| -.person { |
| - font-weight:bold; |
| -} |
| -.fn { |
| - text-align:left; |
| - color:#B00000; |
| - } |
| -.ob { |
| - color:#AA6500; |
| -} |
| -.st { |
| - color:#0000DD; |
| -} |
| -.nm { |
| - color:#006000; |
| - } |
| -.bl{ |
| - color:#003444; |
| -} |
| -.un { |
| - color:#666666; |
| -} |
| -DL { |
| - MARGIN-TOP: 0.5em; FONT-SIZE: 100%; MARGIN-BOTTOM: 0.5em; MARGIN-LEFT: 2.5em |
| -} |
| \ No newline at end of file |
| /cljs/faq_notes/faq_notes.css |
| Property changes: |
| Deleted: svn:mime-type |
| ## -1 +0,0 ## |
| -text/plain |
| \ No newline at end of property |
| Index: cljs/faq_notes/alt_dynwrite.html |
| =================================================================== |
| --- cljs/faq_notes/alt_dynwrite.html (revision 45) |
| +++ cljs/faq_notes/alt_dynwrite.html (nonexistent) |
| @@ -1,569 +0,0 @@ |
| -<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> |
| -<html lang="en"><head><title>An Alternative DynWrite function</title> |
| -<meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1"> |
| -<link href="../faq.css" rel="stylesheet" type="text/css"> |
| -<link href="faq_notes.css" rel="stylesheet" type="text/css"> |
| -</head> |
| -<body> |
| - |
| -<h1><a name="alDynWr" id="alDynWr">An Alternative DynWrite function</a></h1> |
| - |
| -<ul> |
| - <li><a href="#DynWr">The DynWrite function.</a></li> |
| - <li><a href="#getEl">Element retrieval given the element ID as a string.</a></li> |
| - <li><a href="#innHTest">innerHTML Testing Strategy.</a></li> |
| - <li><a href="#AltDynWr">Alternative DynWrite function.</a></li> |
| -</ul> |
| - |
| - |
| -<h2><a name="DynWr" id="DynWr">The Original DynWrite function.</a></h2> |
| - |
| -<p id="DynWr_1"> |
| -<a href="http://jibbering.com/faq/#FAQ4_15">The quick answer in section |
| -4.15 of the FAQ</a> defines a function called <code>DynWrite</code> that will insert <span class="initialism" title="HyperText Mark-up Language"><abbr title="HyperText Mark-up Language">HTML</abbr></span> |
| -content into an <span class="initialism" title="HyperText Mark-up Language"><abbr title="HyperText Mark-up Language">HTML</abbr></span> page by writing a string of <span class="initialism" title="HyperText Mark-up Language"><abbr title="HyperText Mark-up Language">HTML</abbr></span> to the <code>innerHTML</code> |
| -property of an IDed element, but only on browsers that fully support |
| -the (Microsoft IE originated) <code>innerHTML</code> extension. |
| -</p> |
| - |
| -<p id="DynWr_2"> |
| -On browsers that do not provide a suitable mechanism for accessing the |
| -element, do not implement the <code>innerHTML</code> extension and browsers that |
| -implement <code>innerHTML</code> as a read-only property (along with Javascript |
| -incapable/disabled browsers) no content will be inserted with this |
| -function. |
| -</p> |
| - |
| -<p id="DynWr_3"> |
| -On browsers that lack the element retrieval mechanism the <code>DynWrite</code> |
| -function is created as a simple function that just returns false. That |
| -would allow code that called <code>DynWrite</code> to check the value returned from |
| -a call to <code>DynWrite</code> and, if it was false, know that there would be no |
| -point in continuing to use the function as content will never be |
| -inserted into the document. |
| -</p> |
| - |
| -<p id="DynWr_4"> |
| -Unfortunately the other branch, when an element retrieval mechanism is |
| -available, produces a function that will retrieve the element and write |
| -to its <code>innerHTML</code> property, returning true. On the browsers that do not |
| -implement, or fully implement, <code>innerHTML</code> this action should have no |
| -harmful side effects, merely creating a new <code>innerHTML</code> property on the |
| -element in browsers that do not implement the extension at all and |
| -leaving read-only <code>innerHTML</code> properties unchanged. But the true return |
| -value cannot be taken as an indicator of the success of the action. |
| -</p> |
| - |
| -<p id="DynWr_5"> |
| -Ideally the return value from <code>DynWrite</code> should be a reasonable |
| -indicator of the success of the attempt to insert contents into the |
| -<span class="initialism" title="HyperText Mark-up Language"><abbr title="HyperText Mark-up Language">HTML</abbr></span> as that would facilitate controlled degradation on un-supporting |
| -browsers. |
| -</p> |
| - |
| -<p id="DynWr_6"> |
| -However, it is necessary to have a reference to an element in order |
| -to examine it to see if it does support <code>innerHTML</code> and the testing |
| -would alter the contents of that element (though possibly only |
| -temporarily). As a page loads elements usually become available |
| -(or, at least, referencable) after their opening <span class="initialism" title="HyperText Mark-up Language"><abbr title="HyperText Mark-up Language">HTML</abbr></span> tag has been |
| -parsed, so code defined (or imported) in the HEAD section of a page |
| -could access the <code><span class="initialism" title="HyperText Mark-up Language"><abbr title="HyperText Mark-up Language">HTML</abbr></span></code> element and the <code>HEAD</code> element along with, |
| -possibly, the <code>TITLE</code> and any other preceding elements. |
| -</p> |
| - |
| -<p id="DynWr_7"> |
| -It would be theoretically possible acquire a reference to one of |
| -these elements and determine whether it has an <code>innerHTML</code> property |
| -and maybe then attempt to write to it to see if that had the desired |
| -effect. In reality there is at least one <code>innerHTML</code> supporting |
| -browser that will allow the dynamic modification of the content of |
| -any element within the BODY but generates run-time errors if an |
| -attempt is made to test, read or modify the <code>innerHTML</code> property of |
| -elements within the HEAD. That rules out examining the elements |
| -within the HEAD for <code>innerHTML</code> support and means that when <code>DynWrite</code> |
| -is initially configured it cannot know whether it is going to be |
| -effective or not. |
| -</p> |
| - |
| -<p id="DynWr_8"> |
| -It would, in principle, be possible to write the <code>DynWrite</code> functions |
| -so that it tests the element that it is asked to insert <span class="initialism" title="HyperText Mark-up Language"><abbr title="HyperText Mark-up Language">HTML</abbr></span> into |
| -prior to making the attempt so that it could act (or not) and then |
| -return true/false based on the result of those tests. But that would |
| -be inefficient as it would require that the test be carried out on |
| -every invocation of <code>DynWrite</code>. Iit may also be visually undesirable as |
| -the testing strategy (described below) involves setting the <code>innerHTML</code> |
| -to a test value resulting in two <span class="initialism" title="HyperText Mark-up Language"><abbr title="HyperText Mark-up Language">HTML</abbr></span> modification per write operation |
| -(which may become visually apparent). |
| -</p> |
| - |
| -<p id="DynWr_9"> |
| -An alternative is to exploit the flexibility of Javascript by |
| -initially assigning a function to <code>DynWrite</code> that could carry out |
| -the required tests and then re-assign <code>DynWrite</code> to a function that |
| -returned a true/false value that more accurately reflected the |
| -browser's support for the <code>innerHTML</code> extension. Allowing the tests |
| -to be performed on an element that should be available at the time |
| -of the test and the content of which is intended that it be replaced |
| -so it will not matter if it is replaced with the test value because |
| -if it was successfully replaced for the test it would then be |
| -re-replaced with the <span class="initialism" title="HyperText Mark-up Language"><abbr title="HyperText Mark-up Language">HTML</abbr></span> that was intended to be inserted. It also |
| -allows the test to only be performed once as success or failure on |
| -the first attempt should indicate the same outcome on subsequent |
| -attempts. |
| -</p> |
| - |
| -<p id="DynWr_10"> |
| -<code>DynWrite</code> is initially configured based on the browser's apparent |
| -ability to retrieve a reference to a DOM element given its ID in |
| -the form of a string. On modern browsers the document.getElementById |
| -function can be used to return a reference to an element given the |
| -ID as a string. Older browsers may not implement the getElementById |
| -function, but some may provide an alternative mechanism such as |
| -document.all. |
| -</p> |
| - |
| -<h2><a name="getEl" id="getEl">Element retrieval given the element ID as a string.</a></h2> |
| - |
| -<p id="getEl_1"> |
| -Several approaches can be taken towards maximising the ability |
| -to retrieve references to DOM elements. |
| -</p> |
| - |
| -<p id="getEl_2"> |
| -1. Writing a general element retrieval function such as:- |
| -</p> |
| - |
| -<pre id="getEl_ex1"> |
| -function getElementWithId(id){ |
| - var obj = null; |
| - if(document.getElementById){ |
| - <span class="commentJS">/* Prefer the widely supported W3C DOM method, if |
| - available:- |
| - */</span> |
| - obj = document.getElementById(id); |
| - }else if(document.all){ |
| - <span class="commentJS">/* Branch to use document.all on document.all only |
| - browsers. Requires that IDs are unique to the page |
| - and do not coincide with NAME attributes on other |
| - elements:- |
| - */</span> |
| - obj = document.all[id]; |
| - } |
| - <span class="commentJS">/* If no appropriate element retrieval mechanism exists on |
| - this browser this function always returns null:- |
| - */</span> |
| - return obj; |
| -} |
| -</pre> |
| - |
| -<p id="getEl_3"> |
| -2. Assigning one of many functions tailored to element retrieval on |
| -the current browser to a global variable that can then be used to |
| -call the element retrieval function. |
| -</p> |
| - |
| -<pre id="getEl_ex2"> |
| -var getElementWithId; |
| -if(document.getElementById){ |
| - <span class="commentJS">/* Prefer the widely supported W3C DOM method, if |
| - available:- |
| - */</span> |
| - getElementWithId = function(id){ |
| - return document.getElementById(id); |
| - } |
| -}else if(document.all){ |
| - <span class="commentJS">/* Branch to use document.all on document.all only |
| - browsers. Requires that IDs are unique to the page |
| - and do not coincide with NAME attributes on other |
| - elements:- |
| - */</span> |
| - getElementWithId = function(id){ |
| - return document.all[id]; |
| - } |
| -}else{ |
| - <span class="commentJS">/* No appropriate element retrieval mechanism exists on |
| - this browser. So assign this function as a safe dummy. |
| - Values returned form calls to getElementWithId probably |
| - should be tested to ensure that they are non-null prior |
| - to use anyway so this branch always returns null:- |
| - */</span> |
| - getElementWithId = function(id){ |
| - return null; |
| - } |
| -} |
| -</pre> |
| - |
| -<p id="getEl_4"> |
| -3. Using a feature of a browser to emulate getElementById on a browser |
| -that does not implement it. So that getElementById can be used as a |
| -general element reference retrieval method. |
| -</p> |
| - |
| -<pre id="getEl_ex3"> |
| -<span class="commentJS">/* Emulate getElementById on document.all only browsers. Requires |
| - that IDs are unique to the page and do not coincide with NAME |
| - attributes on other elements:- |
| -*/</span> |
| -if((!document.getElementById) && document.all){ |
| - document.getElementById = function(id){return document.all[id];}; |
| -} |
| -</pre> |
| - |
| -<p id="getEl_5"> |
| -The reason for the comment about the use of ID and NAME attributes is |
| -that the <code>document.all</code> collection does not have exactly |
| -analogous behaviour with the <code>document.getElementById</code> method. |
| -If multiple elements have the same ID (or share an ID with the NAME of |
| -other elements) then <code>document.all</code> returns a collection |
| -instead of an individual element, while <code>document.getElementById</code> |
| -only ever returns an individual element or <code>null</code>. However, |
| -ID attributes are supposed to be unique to an <span class="initialism" title="HyperText Mark-up Language"><abbr title="HyperText Mark-up Language">HTML</abbr></span> page if that page |
| -is valid <span class="initialism" title="HyperText Mark-up Language"><abbr title="HyperText Mark-up Language">HTML</abbr></span> 4 so multiple identical IDs should not be a problem. |
| -The issue with IDs coinciding with NAMEs remains, though it would not |
| -be good <span class="initialism" title="HyperText Mark-up Language"><abbr title="HyperText Mark-up Language">HTML</abbr></span> design to provoke that problem. |
| -</p> |
| - |
| -<p id="getEl_6"> |
| -Also, when a string used to refer to a property of the <code>document.all</code> |
| -collection does not refer to an element or a collection of elements |
| -<code>undefined</code> is returned by the above function. In most |
| -type-converting tests <code>undefined</code> and <code>null</code> |
| -behave the same (they both convert to boolean <code>false</code>) |
| -so the distinction is not necessarily important. |
| -</p> |
| - |
| -<p id="getEl_7"> |
| -However, a more cautious but slower getElementById emulation could be |
| -used. Including tests that ensure that its behaviour exactly matched |
| -the W3C getElementById method. |
| -</p> |
| - |
| -<pre id="getEl_ex4"> |
| -<span class="commentJS">/* Emulate getElementById on document.all only browsers. */</span> |
| -if((!document.getElementById) && document.all){ |
| - document.getElementById = function(id){ |
| - var tempEl = null, el = document.all[id]; |
| - if(el){ <span class="commentJS">//document.all returned something.</span> |
| - if((!el.id)||(el.id != id)){ |
| - <span class="commentJS">/* Either this is a collection or the only element |
| - available under the property name provided as the |
| - - id - parameter is a named element: |
| - */</span> |
| - if(el.length){ <span class="commentJS">//assume it is a collection.</span> |
| - <span class="commentJS">/* But it might be an element with a NAME |
| - corresponding with the id parameter that has |
| - collection-like behaviour such as a form or a |
| - select element so proceed with caution: |
| - */</span> |
| - for(var c = 0;c < el.length;c++){ |
| - if((el[c].id)&&(el[c].id == id)){ |
| - <span class="commentJS">/* Set tempEl to the first match and |
| - break out of the - for - loop: |
| - */</span> |
| - tempEl = el[c]; |
| - break; |
| - } |
| - } |
| - <span class="commentJS">/* el will be set to null if the loop did not |
| - find an element with the corresponding ID |
| - because the default null value of tempEl |
| - will not have changed: |
| - */</span> |
| - el = tempEl; |
| - }else{ <span class="commentJS">//only a named element is available for id.</span> |
| - <span class="commentJS">/* getElementById should not return named elements |
| - only an IDed element so set el to null: |
| - */</span> |
| - el = null; |
| - } |
| - } <span class="commentJS">//else we have our element (the ID matches).</span> |
| - }else{ <span class="commentJS">//el is undefined so make it null;</span> |
| - el = null; |
| - } |
| - <span class="commentJS">/* The returned value will be the first element confirmed as |
| - having the corresponding ID or it will be null: |
| - */</span> |
| - return el; |
| - }; |
| -} |
| -</pre> |
| - |
| -<p id="getEl_8"> |
| -One of the consequences of creating a function to emulate |
| -<code>getElementById</code> is that other scripts that use the |
| -existence of <code>document.getElementById</code> to infer the |
| -existence of features of the browser beyond the getElementById method |
| -may wrongly infer that a browser that is provided with the emulation |
| -may have features that it does not have (unless they have also been |
| -emulated). This should not be a problem as using a test on one feature |
| -to infer the existence of other features is a <strong>fatally flawed |
| -technique</strong>, the use of which <strong>is discouraged</strong>. |
| -</p> |
| - |
| -<p id="getEl_9"> |
| -I will be using the third approach, emulating the |
| -<code>document.getElementById</code> method, in the modified |
| -<code>DynWrite</code> function (with notes on what would differ |
| -with either of the first two). |
| -</p> |
| - |
| -<h2><a name="innHTest" id="innHTest">innerHTML Testing Strategy.</a></h2> |
| - |
| -<p id="innHTest_1"> |
| -Initially testing an element to see if <code>innerHTML</code> is supported simply |
| -involves using the <code>typeof</code> operator to see if it returns |
| -<code>"string"</code>. That test will identify browsers such as Opera 6, |
| -where the <code>innerHTML</code> property is undefined. |
| -</p> |
| - |
| -<p id="innHTest_2"> |
| -The second test is based on the fact that when the <code>innerHTML</code> property |
| -of an element is read on a supporting browser the value returned is |
| -normalised <span class="initialism" title="HyperText Mark-up Language"><abbr title="HyperText Mark-up Language">HTML</abbr></span> and not the literal <span class="initialism" title="HyperText Mark-up Language"><abbr title="HyperText Mark-up Language">HTML</abbr></span> source code. However, all |
| -browsers seem to take a different attitude when generating that |
| -normalised source. So given the original <span class="initialism" title="HyperText Mark-up Language"><abbr title="HyperText Mark-up Language">HTML</abbr></span> source:-<br><code><td |
| -CLASS="obj"><U>firstChild</U></td></code><br> |
| -the corresponding <code>innerHTML</code> of the parent element reads <br><code><TD |
| -CLASS='obj'><U>firstChild</U></TD></code><br> on |
| -Opera 7.11, <br><code><TD class=obj><U>firstChild</U></TD> |
| -</code><br> on IE 5.0 and <br><code><td |
| -class="obj"><u>firstChild</u></td> |
| -</code><br> on Mozilla 1.2. |
| -</p> |
| - |
| -<p id="innHTest_3"> |
| -None of these correspond with the original <span class="initialism" title="HyperText Mark-up Language"><abbr title="HyperText Mark-up Language">HTML</abbr></span> but they are also |
| -different from each other. What is needed for the test is <span class="initialism" title="HyperText Mark-up Language"><abbr title="HyperText Mark-up Language">HTML</abbr></span> |
| -source that all supporting browsers will return as different text |
| -from the source assigned. For that task a mixed case <span class="initialism" title="HyperText Mark-up Language"><abbr title="HyperText Mark-up Language">HTML</abbr></span> string with additional |
| -unnecessary whitespace characters is used. That test <span class="initialism" title="HyperText Mark-up Language"><abbr title="HyperText Mark-up Language">HTML</abbr></span> is appended |
| -to the original <code>innerHTML</code> value to ensure that the test string will |
| -never be equivalent to either the original <span class="initialism" title="HyperText Mark-up Language"><abbr title="HyperText Mark-up Language">HTML</abbr></span> or the normalised |
| -result of reading the innnerHTML property after the assignment, even |
| -by accident. The fact that the browser has normalised the source is |
| -taken as indicating that the browser supports the <code>innerHTML</code> extension. |
| -</p> |
| - |
| -<p id="innHTest_4"> |
| -After writing the test <span class="initialism" title="HyperText Mark-up Language"><abbr title="HyperText Mark-up Language">HTML</abbr></span> to the <code>innerHTML</code> property it is possible |
| -to determine whether the property is read only by comparing a stored |
| -copy of the original value against the retrieved value. This is also |
| -necessary because otherwise the fact that the returned <span class="initialism" title="HyperText Mark-up Language"><abbr title="HyperText Mark-up Language">HTML</abbr></span> does not |
| -correspond with the testHTML would be taken as indicating that |
| -it had been normalised. |
| -</p> |
| - |
| -<p id="innHTest_5"> |
| -Finally, it is necessary to determine whether inserting the test |
| -<span class="initialism" title="HyperText Mark-up Language"><abbr title="HyperText Mark-up Language">HTML</abbr></span> has added the element that it defines to the DOM for the page. |
| -</p> |
| - |
| -<p id="innHTest_6"> |
| -When those tests are passed correctly the <code>DynWrite</code> function can be |
| -replaced with a new function that does not bother repeating the tests |
| -for subsequent assignments to <code>innerHTML</code>. If the tests are failed |
| -then the <code>DynWrite</code> function replaces itself with one that does no |
| -more than return false to indicate its failure. |
| -</p> |
| - |
| -<h2><a name="AltDynWr" id="AltDynWr">Alternative DynWrite function.</a></h2> |
| - |
| -<p id="AltDynWr_1"> |
| -The modified, and commented, alternative <code>DynWrite</code> function |
| -incorporating these tests is as follows:- |
| -</p> |
| - |
| -<pre id="AltDynWr_ex1"> |
| -<span class="commentJS">/* As written here, to support older browsers like IE 4, the emulation |
| - of getElementById MUST HAVE BEEN EXECUTED _PRIOR_ TO THE FIRST CALL |
| - TO THIS FUNCTION. If either of the alternative element retrieval |
| - methods are to be used the noted changes also need to be made to |
| - this function and the alternative method MUST have been set-up |
| - prior to the first use of this function. |
| -*/</span> |
| -function DynWrite(id, S){<span class="commentJS"> //Generates a successor when first called!</span> |
| - <span class="commentJS">/* Define local variables:- |
| - */</span> |
| - var testH, newH, inH, testID; |
| - <span class="commentJS">/* Set the default value for the body text of the function that |
| - will be created to replace this function as the DynWrite |
| - function:- |
| - */</span> |
| - var funcBody = "return false;" |
| - <span class="commentJS">/* This ensures that getElementById is available (or emulated) |
| - on this browser prior to calling it:- |
| - */</span> |
| - var el = (document.getElementById)?document.getElementById(id):null; |
| - <span class="commentJS">/* If one of the other element retrieval strategies was used, |
| - creating a getElementWithId function, then because that function |
| - will return null when an element cannot be found, it is |
| - practical to just call that function as - |
| - var el = getElementWithId(id); |
| - - as subsequent tests result in an appropriate response. |
| - */</span> |
| - <span class="commentJS">/* This ensures that the referenced element has been successfully |
| - retrieved and tests to verify that its innerHTML property is |
| - a string (as opposed to being undefined):- |
| - */</span> |
| - if((el)&&(typeof el.innerHTML == 'string')){ |
| - <span class="commentJS">/* Arbitrary string to use as an ID for an element that |
| - should be created as a result of writing to the innerHTML |
| - value (The string itself and the result of concatenating it |
| - to itself (repeatedly) should follow the rules for valid |
| - <span class="initialism" title="HyperText Mark-up Language"><abbr title="HyperText Mark-up Language">HTML</abbr></span> ID attributes):- |
| - */</span> |
| - testID = "tSt"; |
| - <span class="commentJS">/* This ensures that the test ID is not in use on the page by |
| - modifying it until an element cannot be retrieved using it:- |
| - */</span> |
| - while(document.getElementById(testID)){ |
| - <span class="commentJS">/* If the getElementWithId function is being used instead |
| - of the getElementById emulation then the preceding test |
| - must also use that function. |
| - */</span> |
| - testID += testID; |
| - } |
| - inH = el.innerHTML; <span class="commentJS">//Read the original innerHTML value.</span> |
| - <span class="commentJS">/* The following mixed case <span class="initialism" title="HyperText Mark-up Language"><abbr title="HyperText Mark-up Language">HTML</abbr></span> string is _not_ an error. |
| - */ |
| - /* Note also that the STRONG element inserted in the page |
| - contains the text "test", which may momentarily be |
| - visible to the user. It would probably not be a good |
| - idea to have no contents in the STRONG at all but &nbsp; |
| - could be used to reduce the potential visual impact:- |
| - */</span> |
| - newH = inH+"<sTrOnG Id='"+testID+"' >test<\/StRoNg >"; |
| - el.innerHTML = newH; <span class="commentJS">//Assumes synchronous update of DOM.</span> |
| - testH = el.innerHTML; <span class="commentJS">//Read innerHTML back for examination.</span> |
| - if((testH != newH)&& <span class="commentJS">//Apparently normalised or unchanged.</span> |
| - (testH != inH)&& <span class="commentJS">//Not unchanged (Not read-only).</span> |
| - (document.getElementById(testID))){ <span class="commentJS">//Element found in DOM.</span> |
| - <span class="commentJS">/* If the getElementWithId function is being used instead |
| - of the getElementById emulation then the preceding test |
| - must also use that function. |
| - */</span> |
| - <span class="commentJS">/* TESTS PASSED! Replace the default function body string |
| - with code that will set the innerHTML property of the |
| - element and return true, based on the assumption that |
| - the assignment will be successful because this test was |
| - sucessful:- |
| - */</span> |
| - funcBody = |
| - "document.getElementById(id).innerHTML=S; return true"; |
| - <span class="commentJS">/* See additional notes[1] on the function body to use at |
| - this point. |
| - */</span> |
| - } |
| - } |
| - <span class="commentJS">/* Replace the DynWrite function with one determined by the results |
| - of the tests:- |
| - */</span> |
| - DynWrite = new Function("id", "S", funcBody); |
| - <span class="commentJS">/* Call the newly created DynWrite function and return its return |
| - value as the return value for this function call:- |
| - */</span> |
| - return DynWrite(id, S); |
| -} |
| -<span class="commentJS">/* [1] Notes on the body string to use if the tests are passed:- |
| - The existing function body string relies on the use of |
| - the getElementById emulation approach to retrieving DOM element |
| - with an ID. If the getElementWithId function was used the |
| - appropriate equivalent body string would be:- |
| - |
| -"getElementWithId(id).innerHTML = S;return true;" |
| - |
| - However, if the ID passed as a parameter to DynWrite does not |
| - correspond with an existing IDed element then either of these two |
| - options would result in a function that would generate run-time |
| - errors. For development that is probably a good thing as the |
| - resulting error should be corrected in either the <span class="initialism" title="HyperText Mark-up Language"><abbr title="HyperText Mark-up Language">HTML</abbr></span> or the |
| - script code by ensuring that the ID string provided does refer to a |
| - uniquely identified DOM element. On the other hand, having fully |
| - tested the code, the body string might be best swapped in deployed |
| - code to a more cautious version that checked the result of the |
| - element retrieval call to ensure that it is a non-null object:- |
| - |
| -"var el=document.getElementById(id);if(el){el.innerHTML=S;}return true;" |
| - |
| - - with the getElementById emulation or:- |
| - |
| -"var el=getElementWithId(id);if(el){el.innerHTML=S;}return true;" |
| - |
| - - with the getElementWithId function. |
| - |
| - These function body strings are still returning true. How |
| - suited that is to the situation would depend on how the code |
| - intended to respond to the return value. The inability to resolve |
| - one ID does not indicate that innerHTML would not available on |
| - others if they could be resolved so code that decides to stop |
| - attempting to write to innerHTML upon the first false return |
| - value might be better off using the previous strings. Code that |
| - wanted to fall-back based on each attempt to write to innerHTML |
| - would be better using a function body string that returned |
| - true/false based on the success of each individual attempt. For |
| - the body string that tests to ensure that the element reference |
| - is recovered a boolean return value based on the success of the |
| - element retrieval would be best suited. That is simplest achieved |
| - with a double NOT operator - return !!el; - . A null value of |
| - - el - would return boolean false and an element reference would |
| - return true due to type-converting forced by the NOT operator:- |
| - |
| -"var el=document.getElementById(id);if(el){el.innerHTML=S;}return !!el;" |
| - |
| - - with the getElementById emulation or:- |
| - |
| -"var el=getElementWithId(id);if(el){el.innerHTML=S;}return !!el;" |
| - |
| - - with the getElementWithId function. |
| - |
| -*/</span> |
| -</pre> |
| - |
| -<p id="AltDynWr_2"> |
| -This design of the function does not involve any configuration tests |
| -as the page loads. It is one simple function definition. In principle |
| -calling the function with appropriate parameters will always return |
| -false if the content inserting is not possible and true otherwise. |
| -With the tests being performed only on the first invocation of the |
| -function. |
| -</p> |
| - |
| -<p id="AltDynWr_3"> |
| -Given the <span class="initialism" title="HyperText Mark-up Language"><abbr title="HyperText Mark-up Language">HTML</abbr></span>: <code><div ID="anID">old |
| -<code>HTML</code></div></code> examples of usage might be:- |
| -</p> |
| - |
| -<pre id="AltDynWr_ex2"> |
| -if(!DynWrite("anID", "new <code>HTML<\/code>")){ |
| - ... <span class="commentJS">// Handle the failure of the call to DynWrite.</span> |
| -} |
| -</pre> |
| - |
| -<p id="AltDynWr_4"> |
| -- or - |
| -</p> |
| - |
| -<pre id="AltDynWr_ex3"> |
| -if(DynWrite("anID", "new <code>HTML<\/code>")){ |
| - ... <span class="commentJS">// Action following the success of the DynWrite call.</span> |
| -}else{ |
| - ... <span class="commentJS">// Handle the failure of the call to DynWrite.</span> |
| -} |
| -</pre> |
| - |
| -<p id="AltDynWr_5"> |
| -It has been observed that IE 4 errors if DynWrite is called before the |
| -onload event is triggered by the browser. So to maximise cross-browser |
| -support for this function it would be better not to use it prior to that |
| -point. |
| -</p> |
| - |
| -<p id="rToc"> |
| -<a href="faq_notes.html#toc">comp.lang.javascript FAQ notes T.O.C.</a> |
| -</p> |
| - |
| - |
| -</body> |
| -</html> |
| \ No newline at end of file |
| /cljs/faq_notes/alt_dynwrite.html |
| Property changes: |
| Deleted: svn:mime-type |
| ## -1 +0,0 ## |
| -text/plain |
| \ No newline at end of property |
| Index: cljs/names/names.js |
| =================================================================== |
| --- cljs/names/names.js (revision 45) |
| +++ cljs/names/names.js (nonexistent) |
| @@ -1,316 +0,0 @@ |
| -var names = [ |
| - // HTMLFormElement |
| - "elements","length", //readonly. |
| - "name", "acceptCharset", "action", "enctype", "method", "target", "submit", "reset", |
| - |
| - // HTMLElement |
| - "id", "title", "lang", "dir", "className", |
| - |
| - // Element. |
| - "tagName", "schemaTypeInfo", // readonly. |
| - "getAttribute", "removeAttribute", "getAttributeNode", |
| - "setAttributeNode", "removeAttributeNode", "getElementsByTagName", |
| - "getAttributeNS", "setAttributeNS", "removeAttributeNS", |
| - "getAttributeNodeNS", "setAttributeNodeNS", "getElementsByTagNameNS", |
| - "hasAttribute", "hasAttributeNS", "setIdAttribute", "setIdAttributeNS", |
| - "setIdAttributeNode", |
| - |
| - // Node. |
| - // Node constants. |
| - "ELEMENT_NODE", |
| - "ATTRIBUTE_NODE", |
| - "TEXT_NODE", |
| - "CDATA_SECTION_NODE", |
| - "ENTITY_REFERENCE_NODE", |
| - "ENTITY_NODE", |
| - "PROCESSING_INSTRUCTION_NODE", |
| - "COMMENT_NODE", |
| - "DOCUMENT_NODE", |
| - "DOCUMENT_TYPE_NODE", |
| - "DOCUMENT_FRAGMENT_NODE", |
| - "NOTATION_NODE", |
| - "DOCUMENT_POSITION_DISCONNECTED", |
| - "DOCUMENT_POSITION_PRECEDING", |
| - "DOCUMENT_POSITION_FOLLOWING", |
| - "DOCUMENT_POSITION_CONTAINS", |
| - "DOCUMENT_POSITION_CONTAINED_BY", |
| - "DOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC", |
| - |
| - // Readonly. |
| - "nodeName", |
| - "nodeType", |
| - "parentNode", |
| - "childNodes", |
| - "firstChild", |
| - "lastChild", |
| - "previousSibling", |
| - "nextSibling", |
| - "attributes", |
| - "ownerDocument", |
| - "namespaceURI", |
| - "localName", |
| - "baseURI", |
| - |
| - "nodeValue", |
| - "insertBefore", |
| - "replaceChild", |
| - "removeChild", |
| - "appendChild", |
| - "hasChildNodes", |
| - "cloneNode", |
| - "normalize", |
| - "isSupported", |
| - "prefix", |
| - "hasAttributes", |
| - "compareDocumentPosition", |
| - "textContent", |
| - "isSameNode", |
| - "lookupPrefix", |
| - "isDefaultNamespaceURI", |
| - "isEqualNode", |
| - "getFeature", |
| - "setUserData", |
| - "getUserData", |
| - |
| - // ElementCSSInlineStyle. |
| - "style", // readonly. |
| - |
| - // EventTarget. |
| - "addEventListener", |
| - "removeEventListener", |
| - "dispatchEvent", |
| - |
| - // Mouse Events |
| - "onclick", |
| - "onmousedown", |
| - "onmouseup", |
| - "onmouseover", |
| - "onmousemove", |
| - "onmouseout", |
| - "ondblclick", |
| - |
| - // MouseWheelEvent. |
| - "onmousewheel", |
| - "onmousemultiwheel", |
| - |
| - // Key Events. |
| - "onkeydown", |
| - "onkeyup", |
| - "onkeypress", |
| - |
| - // bubbled events? |
| - "onchage", |
| - "onabort", |
| - "onerror", |
| - "onselect", |
| - "onresize", |
| - "onscroll", |
| - |
| - // New Events for Element: |
| - "onfocus", |
| - "onblur", |
| - |
| - // Proprietary MSIE (also HTML 5/FF). |
| - "clientHeight", |
| - "clientWidth", |
| - "offsetHeight", |
| - "offsetWidth", |
| - "clientLeft", |
| - "clientTop", |
| - "contentEditable", |
| - "getBoundingClientRect", |
| - "getClientRects", |
| - "getElementsByClassName", |
| - "scrollIntoView", |
| - "scrollLeft", |
| - "scrollTop", |
| - "scrollWidth", |
| - "scrollHeight", |
| - "tabIndex", |
| - "encoding", |
| - "spellcheck", |
| - "innerHTML", |
| - "innerText", |
| - "children", |
| - |
| - "ariaBusy", |
| - "ariaChecked", |
| - "ariaControls", |
| - "ariaDescribability", |
| - "ariaDisabled", |
| - "ariaExpanded", |
| - "ariaFlowto", |
| - "ariaHaspopup", |
| - "ariaHidden", |
| - "ariaInvalid", |
| - "ariaLabelledby", |
| - "ariaLevel", |
| - "ariaMultiselect", |
| - "ariaOwns", |
| - "ariaPosinset", |
| - "ariaPressed", |
| - "ariaReadonly", |
| - "ariaRequired", |
| - "ariaSecret", |
| - "ariaSelected", |
| - "ariaSetsize", |
| - "ariaValuemax", |
| - "ariaValuemin", |
| - "ariaValuenow", |
| - |
| - "autocomplete", |
| - "blockDiraction", |
| - "canHaveChildren", |
| - "canHaveHTML", |
| - "hideFocus", |
| - "isContentEditable", |
| - "isDisabled", |
| - "isMultiLine", |
| - "isTextEdit", |
| - "language", |
| - "msBlockProgression", |
| - "msBoxSizing", |
| - "onOffBehavior", |
| - "outerHTML", |
| - "outerText", |
| - "parentTextEdit", |
| - "quotes", |
| - "role", |
| - "scopeName", |
| - "sourceIndex", |
| - "tagUrn", |
| - "uniqueID", |
| - |
| - "all", |
| - "behaviorUrns", |
| - |
| - "onactivate", |
| - "onbeforeactivate", |
| - "onbeforecopy", |
| - "onbeforecut", |
| - "onbeforedeactivate", |
| - "onbeforeeditfocus", |
| - "onbeforepaste", |
| - "oncontextmenu", |
| - "oncopy", |
| - "oncut", |
| - "ondeactivate", |
| - "ondrag", |
| - "ondragend", |
| - "ondragenter", |
| - "ondragleave", |
| - "ondragover", |
| - "onfocusin", |
| - "onfocusout", |
| - "onhelp", |
| - "onclosecapture", |
| - "onmouseenter", |
| - "onmouseleave", |
| - "onmove", |
| - "onmoveend", |
| - "onmovestart", |
| - "onpaste", |
| - "onpropertychange", |
| - "onreadystatechange", |
| - "onresizeend", |
| - "onresizestart", |
| - "onselectstart", |
| - "ontimeerror", |
| - |
| - // methods. |
| - "addBehavior", |
| - "applyElement", |
| - "attachEvent", |
| - "blur", |
| - "clearAttributes", |
| - "click", |
| - "componentFromPoint", |
| - "contains", |
| - "detachEvent", |
| - "dragDrop", |
| - "fireEvent", |
| - "focus", |
| - "getAdjacentText", |
| - "getExpression", |
| - "insertAdjacentElement", |
| - "insertAdjacentHTML", |
| - "insertAdjacentText", |
| - "item", |
| - "mergeAttributes", |
| - "namedItem", |
| - "querySelector", |
| - "querySelectorAll", |
| - "releaseCapture", |
| - "removeBehavior", |
| - "removeExpression", |
| - "removeNode", |
| - "replaceAdjacentText", |
| - "replaceNode", |
| - "setActive", |
| - "setCapture", |
| - "setExpression", |
| - "swapNode", |
| - "urns", |
| - |
| - // objects. |
| - "currentStyle", |
| - "runtimeStyle", |
| - |
| - // WF2.0 |
| - "accept", |
| - "checkValidity", |
| - "replace", |
| - "data", |
| - "resetFromData", |
| - "dispatchFormInput", |
| - "dispatchFormChange", |
| - "templateElements", |
| - |
| - // Proprietary Moz/HTML 5 |
| - "isDefaultNamespace", |
| - |
| - // Opera |
| - "childElementCount", |
| - "firstElementChild", |
| - "lastElementChild", |
| - "previousElementSibling", |
| - "repeatMin", |
| - "repeatStart", |
| - "repetitionBlocks", |
| - "repetitionIndex", |
| - "repetitionTemplate", |
| - "repetitionType", |
| - "repeatMax", |
| - "text", |
| - "unselectable", |
| - "addRepetitionBlock", |
| - "addRepetitionBlockByIndex", |
| - "moveRepetitionBlock", |
| - "removeRepetitionBlock", |
| - "selectNodes", |
| - "selectSingleNode", |
| - "addEventSource", |
| - "removeEventSource", |
| - |
| - // Webkit |
| - "oninput", |
| - "scrollByLines", |
| - "scrollByPages", |
| - "document", |
| - "onsearch", |
| - "onunload", |
| - |
| - // Scope chain for event handler attributes. |
| - "window", |
| - |
| - // Object.prototype |
| - "constructor", |
| - "toString", |
| - "toLocaleString", |
| - "valueOf", |
| - "hasOwnProperty", |
| - "isPrototypeOf", |
| - "propertyIsEnumerable", |
| - "watch", |
| - "unwatch" |
| -].sort(); |
| \ No newline at end of file |
| /cljs/names/names.js |
| Property changes: |
| Deleted: svn:mime-type |
| ## -1 +0,0 ## |
| -text/plain |
| \ No newline at end of property |
| Index: cljs/names/conclusion.html |
| =================================================================== |
| --- cljs/names/conclusion.html (revision 45) |
| +++ cljs/names/conclusion.html (nonexistent) |
| @@ -1,120 +0,0 @@ |
| -<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> |
| -<html lang="en"> |
| -<head> |
| - <title>Unsafe Names for HTML Form Controls - Conclusion</title> |
| - <meta http-equiv="content-type" content="text/html; charset=iso-8859-1"> |
| - <meta name="author" content="Garrett Smith"> |
| - <link rel="Start" href="./"> |
| - <link rel="stylesheet" href="../faq.css" type="text/css" media="all" charset="iso-8859-1"> |
| - <link rel="stylesheet" href="names.css" type="text/css" media="all" charset="iso-8859-1"> |
| -</head> |
| -<body> |
| - |
| - <h1>Unsafe Names for HTML Form Controls</h1> |
| - <h2>Conclusion</h2> |
| - |
| - <h3>Problem</h3> |
| - <p> |
| - Browser APIs and Web Standards are designed in such a way that |
| - element <code>id</code>s and <code>name</code>s, if not |
| - carefully chosen, may inadvertently pollute other objects |
| - with extra properties. This can cause problems. |
| - </p> |
| - |
| - <h3>Solution</h3> |
| - <p> |
| - There are several steps that you, as a page author, can take |
| - to avoid these problems. |
| - </p> |
| - |
| - <ul> |
| - <li> |
| - Be aware of the problem. |
| - </li> |
| - <li> |
| - Don't rely on the augmented scope chain to find properties of the <code>FORM</code>, |
| - <code>body</code>, or <code>document</code>. Instead, use fully qualified property lookups, |
| - e.g. <code>document.body</code>, <code>this.form.elements</code>. |
| - </li> |
| - <li> |
| - Avoid Event Handler Content Attributes. |
| - Events can be registered in the script (not in HTML). |
| - </li> |
| - <li> |
| - Use prefixed or "namespaced" names for |
| - <code>id</code> and <code>name</code> attribute values. |
| - </li> |
| - </ul> |
| - |
| - <h3>Do Web Standards Suck?</h3> |
| - <p> |
| - They are not without their problems. |
| - Most of the problems and <a href="extra_props.html#StandardWrong">misconceptions</a> |
| - would become self-evident if the standards bodies were to use a |
| - test-driven approach. The current approach is Big Up Front Design |
| - with the traditional analysis-documentation-implementation phases. |
| - The APIs are designed with a waterfall approach. |
| - </p> |
| - |
| - <p> |
| - Testing is informal and not part of the official process. This is something |
| - that needs to change in order to avoid unforseen pitfalls. Unfortunately, there has |
| - not been enough change in this direction and we can witness current problems |
| - with HTML 5 that build upon the mistakes of prior specifications and poor |
| - design of experimental implementations. |
| - </p> |
| - |
| - <p> |
| - A test-based process could have revealed the design problem |
| - with form-as-a-collection, as specified in HTML 5, or the issues |
| - with <code>body</code> event handler content attributes (e.g. |
| - <code>hashchange</code>). Multiple contributors |
| - to a test suite would make it hard for the author to ignore API design mistakes. |
| - </p> |
| - |
| - <h4>Normative References</h4> |
| - <ul id="controls-normref"> |
| - <li> [DOM1] |
| - <a href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-html.html#ID-40002357" |
| - >Document Object Model (HTML) Level 1</a>, Mike Champion, others. |
| - </li> |
| - <li> [DOM2] |
| - <a href="http://www.w3.org/TR/DOM-Level-2-HTML/ecma-script-binding.html" |
| - >Document Object Model (HTML) Level 2</a>, Johnny Stenback, others. |
| - </li> |
| - <li> |
| - [DOMEvents] |
| - <a href="http://www.w3.org/TR/DOM-Level-3-Events/events.html" |
| - >Document Object Model Events</a>, Philippe Le Hégaret, Tom Pixley |
| - </li> |
| - <li> |
| - [HTML 5] |
| - <a href="http://www.whatwg.org/specs/">HTML 5</a>, |
| - Ian Hickson |
| - </li> |
| - <li>[WebIDL] |
| - <a href="http://www.w3.org/TR/WebIDL/">Web IDL</a>, |
| - Cameron McCormack |
| - </li> |
| - </ul> |
| - |
| - <div id="toc"> |
| - <h4>Table of Contents</h4> |
| - <ul class="pagination linkList"> |
| - <li><a href="./index.html">Introduction</a></li> |
| - <li><a href="extra_props.html">Extra Properties: <code>FORM</code> Elements</a></li> |
| - <li><a href="extra_props_document.html">Extra Properties: <code>document</code></a></li> |
| - <li><a href="extra_props_global.html">Extra Properties: <code>global</code></a></li> |
| - <li><a href="event_handler.html">Event Handler Scope</a></li> |
| - <li><a href="api_design.html">API Design?</a></li> |
| - <li><a href="unsafe_names.html">Unsafe Names</a></li> |
| - <li>Conclusion</li> |
| - </ul> |
| - </div> |
| - <ul id="nextLink" class="linkList"> |
| - <li> |
| - <span class="prev">Previous:</span> <a href="unsafe_names.html">Unsafe Names</a> |
| - </li> |
| - </ul> |
| -</body> |
| -</html> |
| /cljs/names/conclusion.html |
| Property changes: |
| Deleted: svn:mime-type |
| ## -1 +0,0 ## |
| -text/plain |
| \ No newline at end of property |
| Index: cljs/names/map-like-nodelist.html |
| =================================================================== |
| --- cljs/names/map-like-nodelist.html (revision 45) |
| +++ cljs/names/map-like-nodelist.html (nonexistent) |
| @@ -1,34 +0,0 @@ |
| -<!doctype html> |
| -<html> |
| -<head> |
| -<title>Map-like NodeList Example</title> |
| -</head> |
| -<body> |
| -<h1>Map-like NodeList Example</h1> |
| -<div id="item"></div> |
| -<div id="length"></div> |
| -<pre> |
| -<script type="text/javascript"> |
| -var divs = document.getElementsByTagName('div'); |
| -document.writeln("divs.item.tagName = " + divs.item.tagName); |
| -document.writeln("divs.length.tagName = " + divs.length.tagName); |
| -</script> |
| -</pre> |
| -<hr> |
| -<h2>Opera, IE</h2> |
| -<pre> |
| -DIV DIV |
| -</pre> |
| - |
| -<h2>Safari 3</h2> |
| -<pre> |
| -DIV undefined |
| -</pre> |
| - |
| -<h2>Firefox</h2> |
| -<pre> |
| -undefined undefined |
| -</pre> |
| - |
| -</body> |
| -</html> |
| /cljs/names/map-like-nodelist.html |
| Property changes: |
| Deleted: svn:mime-type |
| ## -1 +0,0 ## |
| -text/plain |
| \ No newline at end of property |
| Index: cljs/names/event_handler.html |
| =================================================================== |
| --- cljs/names/event_handler.html (revision 45) |
| +++ cljs/names/event_handler.html (nonexistent) |
| @@ -1,305 +0,0 @@ |
| -<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> |
| -<html lang="en"> |
| -<head> |
| - <meta http-equiv="content-type" content="text/html; charset=iso-8859-1"> |
| - <title>Unsafe Names for HTML Form Controls - Unsafe Names</title> |
| - <meta name="author" content="Garrett Smith"> |
| - <link rel="Start" href="./"> |
| - <link rel="stylesheet" href="../faq.css" type="text/css" media="all" charset="iso-8859-1"> |
| - <link rel="stylesheet" href="names.css" type="text/css" media="all" charset="iso-8859-1"> |
| -</head> |
| -<body> |
| - |
| - <h1>Unsafe Names for HTML Form Controls</h1> |
| - <h2>Event Handler Scope</h2> |
| - <h3>Event Handler Content Attributes and Augmented Scope Chain</h3> |
| - <p> |
| - Event Handler Content Attributes are event handler attributes that appear in the HTML source. |
| - </p> |
| - |
| - <p> |
| - When an element has an event handler content attribute, the value |
| - of that attribute becomes the <code>FunctionBody</code> of a function that the browser calls when it fires that event. |
| - </p> |
| - <p> |
| - Modern browsers augment the <code>FunctionBody</code>'s scope chain with the element, the element's <code>FORM</code> |
| - (if it is a form control), and <code>document</code>. There is no official standard for this augmented scope chain. |
| - </p> |
| - <p> |
| - Older browsers, such as Safari 2, Mozilla 1.x, Opera 7, differ. Scope augmentation occurs for all |
| - event handler content attributes with the notable exception of the <code>body</code> element, for |
| - which event handler scope is not consistently augmented across event types and implementations. |
| - </p> |
| - |
| - <p> |
| - The context (<code>thisArg</code>) is (with the exception of <code>body</code>), the element |
| - itself. In the browsers that implement DOM Events [<a href="conclusion.html#controls-normref">DOMEvents</a>], |
| - the event handler function has a single parameter named <code>event</code>. |
| - </p> |
| - |
| - <p> |
| - Given the following markup: |
| - </p> |
| -<pre><p onclick="self.alert(event);"></p></pre> |
| - <p> |
| - The augmented scope chain, if written in ECMAScript, would look like: |
| - </p> |
| - |
| - <pre> |
| -<span class='keyword'>function</span> onclick(<var>event</var>) { |
| - <span class='keyword'>with</span>(document) { |
| - <span class='keyword'>with</span>(<span class='keyword'>this</span>.form) { |
| - <span class='keyword'>with</span>(<span class='keyword'>this</span>) { |
| - self.alert(<var>event</var>); |
| - } |
| - } |
| - } |
| -}</pre> |
| - <p> |
| - Note that some browsers will not supply an <code><var>event</var></code> parameter. |
| - </p> |
| - |
| - <h4>Example 3: Augmented Scope Chain</h4> |
| - <p> |
| - This example shows how <code>window</code> and <code>document</code> |
| - are shadowed: |
| - </p> |
| - <form action=""> |
| - <input type="hidden" name="document"> |
| - <button type="button" name="window" |
| - onclick="self.alert([window.tagName, document.tagName])" |
| - >self.alert([window.tagName, document.tagName])</button> |
| - </form> |
| - <strong>Source:</strong> |
| - <pre> |
| -<form action=""> |
| - <input type="hidden" name="document"> |
| - <button type="button" name="window" |
| - onclick="self.alert([window.tagName, document.tagName])">self.alert([window.tagName, document.tagName])</button> |
| -</form> |
| -</pre> |
| - <p> |
| - The augmented scope chain, if written in ECMAScript, would look like: |
| - </p> |
| - |
| - <pre> |
| -<span class='keyword'>function</span> onclick(<var>event</var>) { |
| - <span class='keyword'>with</span>(document) { |
| - <span class='keyword'>with</span>(<span class='keyword'>this</span>.form) { |
| - <span class='keyword'>with</span>(<span class='keyword'>this</span>) { |
| - self.alert([title, files, focus == window.focus]); |
| - <span class='keyword'>var</span> e = <var>event</var>||window.event; |
| - <span class='keyword'>if</span>(e && e.preventDefault) e.preventDefault(); |
| - e.returnValue = <span class='keyword'>false</span>; |
| - } |
| - } |
| - } |
| -}</pre> |
| - |
| - <p> |
| - For all intents and purposes, the browser's |
| - <code>window</code> property of the <code>global</code> object is |
| - an alias to the the <code>global</code> object itself. |
| - </p> |
| - |
| - <p> |
| - Relying on an augmented scope chain to resolve properties may |
| - have unexpected results in different environments (i.e. browsers). The following example |
| - shows how in at least two browsers, <code>files</code> is resolved as a property |
| - of an <code>input</code> element. |
| - </p> |
| - |
| - <script type="text/javascript"> |
| - var files = [1,2,3]; |
| - </script> |
| - |
| - <form action=""> |
| - <input onclick="self.alert([title, files, focus == window.focus]); |
| - var e = event||window.event; |
| - if(e && e.preventDefault) e.preventDefault();e.returnValue = false;" type="file"> |
| - </form> |
| - <pre> |
| -<script type="text/javascript"> |
| -<span class='keyword'>var</span> files = [1,2,3]; |
| -</script> |
| - |
| -<form action=""> |
| - <input onclick="self.alert([title, files, focus == window.focus]); |
| - var e = event||window.event; |
| - if(e && e.preventDefault) e.preventDefault(); |
| - e.returnValue = false;" type="file"> |
| -</form> |
| -</pre> |
| - <h3>Result</h3> |
| - Firefox 3, Safari 3: |
| - <pre>",[object FileList],false"</pre> |
| - Opera 9.5, IE7, IE8: |
| - <pre>",1,2,3,false"</pre> |
| - |
| - <p> |
| - The identifier <code>files</code> is resolved on the input element |
| - in Firefox 3 and Safari 3. In IE8 or Opera 9.5, <code>files</code> is |
| - resolved on the window object. |
| - </p> |
| - <p> |
| - A <a href="scope_aug_example.html">modified example</a> from c.l.js thread <a |
| - href="http://groups.google.com/group/comp.lang.javascript/browse_frm/thread/2d1bd03a4bc47add" |
| - >"Works in ie and opera not mozilla"</a>, by Richard Cornford. |
| - </p> |
| - <h4>Browsers Tested:</h4> |
| -<ul> |
| - <li>Opera 9.27, 9.63, 10a;</li> |
| - <li>Safari 3.2.1;</li> |
| - <li>Chrome 1.0.154.46;</li> |
| - <li>Firefox 2.0.0.18, 3.0.5;</li> |
| - <li>IE 7, 8.0RC1;</li> |
| - <li>IE 5.2 (Mac)</li> |
| - <li>Konqueror 4.1;</li> |
| - <li>Blackberry 4.7 (9500 model)</li> |
| - <li>MSIEMobile 6.0 (WinCE)</li> |
| -</ul> |
| - <h4>Results:</h4> |
| -<pre> |
| -ex0 = global |
| -ex1 = document #document |
| -ex2 = document #document |
| -ex3 = document #document |
| -ex4 = 4 FORM |
| -ex5 = 4 FORM |
| -ex6 = 4 FORM |
| -ex7 = 7 INPUT |
| -ex8 = 7 INPUT |
| -ex9 = 7 INPUT |
| - |
| -// First link |
| - |
| -ex0 = global |
| -ex1 = document #document |
| -ex2 = document #document |
| -ex3 = document #document |
| -ex4 = document #document |
| -ex5 = document #document |
| -ex6 = document #document |
| -ex7 = document #document |
| -ex8 = 8 A |
| -ex9 = 8 A |
| - |
| -// Second link |
| - |
| -ex0 = global |
| -ex1 = document #document |
| -ex2 = document #document |
| -ex3 = document #document |
| -ex4 = document #document |
| -ex5 = document #document |
| -ex6 = document #document |
| -ex7 = document #document |
| -ex8 = document #document |
| -ex9 = 9 A |
| -</pre> |
| - <p>Most of the above results were provided by Juriy Zaytsev on thread |
| - <a |
| - href="http://groups.google.com/group/comp.lang.javascript/browse_frm/thread/8e48b8520d359395/61b45f35fb76694f" |
| - >Cross-Browser Mouse Event Handling</a>. |
| - </p> |
| -<h4>Older Browsers</h4> |
| - <p> |
| - Less recent browsers, including Safari 2.0.4, Mozilla 1.x, |
| - and Opera 7, featured different scope chains. |
| - </p> |
| - |
| - <h4>Exception: The <code>BODY</code> Tag.</h4> |
| - <p> |
| - The <code>body</code> tag's event handler attributes are either mapped to |
| - <code>window</code> (which has no tag) or to the <code>BODY</code> element. |
| - Results vary based on the event and the browser. Do not use event handler |
| - attributes for the <code>body</code> element. |
| - </p> |
| - |
| - <h3>Problem</h3> |
| - |
| - <p> |
| - An augmented scope chain, combined with event handler content attributes, means that |
| - properties of the element itself, the element's form (if it is a form control), |
| - and document, may shadow properties of the window object. |
| - As explained in: <a href="http://groups.google.com/group/comp.lang.javascript/msg/3f5495216b3e9b67" |
| - >select?</a>, and |
| - <a href="http://lists.whatwg.org/htdig.cgi/whatwg-whatwg.org/2008-September/016184.html" |
| - >hashchange only dispatched in history traversal</a>, comments by Garrett Smith. Shortened code excerpt: |
| - </p> |
| - <pre> |
| -<img name='alert' alt="Alert!" src="alert.jpg"> |
| -<button onclick="self.alert(alert);">self.alert(alert);</button> |
| -</pre> |
| - |
| -<img name='alert' alt="Alert!" src="" style="z-index:-1;position:absolute"> |
| -<button onclick="self.alert(alert);">self.alert(alert);</button> |
| - |
| - <h4>Result</h4> |
| - <p> |
| - Alerts <samp>[object HTMLImageElement]</samp> (or similar implementation-dependent string). |
| - </p> |
| - |
| - <p> |
| - By using an unsafe name of <samp>"alert"</samp> for an <code>IMG</code>, |
| - The <code>window</code>'s <code>alert</code> property |
| - identifier is shadowed by <code>document</code>'s <code>alert</code> |
| - property identifier because |
| - <code>document</code> is in the event handler's augmented scope |
| - before <code>window</code>. |
| - </p> |
| - |
| - <p> |
| - By using event handler content attributes and unsafe names, |
| - <code>document</code> and <code>window</code>, the respective identifiers |
| - are resolved on the augmented scope chain. |
| - </p> |
| - |
| - <p> |
| - The augmented scope chain |
| - creates more ambiguity and increases the number of unsafe names. |
| - </p> |
| - <h3>Solution</h3> |
| - <ul> |
| - <li> |
| - Don't rely on the augmented scope chain to find properties of the <code>FORM</code>, |
| - <code>body</code>, or <code>document</code>. Instead, use fully qualified property lookups, |
| - e.g. <code>document.body</code>, <code>this.form.elements</code>. |
| - </li> |
| - <li> |
| - Avoid Event Handler Content Attributes. |
| - Registering event callbacks in the script (not in HTML) avoids |
| - the possibility of a property such as unqualified <code>alert</code> |
| - being resolved on an object other than <code>window</code>. |
| - </li> |
| - <li> |
| - Do not use Event Handler Content Attributes for <code>body</code>. |
| - </li> |
| - <li> |
| - Use prefixed names for all <code>id</code> or <code>name</code> attribute values. |
| - </li> |
| - </ul> |
| - |
| - <div id="toc"> |
| - <h4>Table of Contents</h4> |
| - <ul class="pagination linkList"> |
| - <li><a href="./index.html">Introduction</a></li> |
| - <li><a href="extra_props.html">Extra Properties: <code>FORM</code> Elements</a></li> |
| - <li><a href="extra_props_document.html">Extra Properties: <code>document</code></a></li> |
| - <li><a href="extra_props_global.html">Extra Properties: <code>global</code></a></li> |
| - <li>Event Handler Scope</li> |
| - <li><a href="api_design.html">API Design?</a></li> |
| - <li><a href="unsafe_names.html">Unsafe Names</a></li> |
| - <li><a href="conclusion.html">Conclusion</a></li> |
| - </ul> |
| - </div> |
| - <ul id="nextLink" class="linkList"> |
| - <li> |
| - <span class="prev">Previous:</span> <a href="extra_props_global.html">Extra Properties: global</a> |
| - </li> |
| - <li> |
| - <span class="next">Next:</span> <a href="api_design.html">API Design?</a> |
| - </li> |
| - </ul> |
| -</body> |
| -</html> |
| /cljs/names/event_handler.html |
| Property changes: |
| Deleted: svn:mime-type |
| ## -1 +0,0 ## |
| -text/plain |
| \ No newline at end of property |
| Index: cljs/names/scope_aug_example.html |
| =================================================================== |
| --- cljs/names/scope_aug_example.html (revision 45) |
| +++ cljs/names/scope_aug_example.html (nonexistent) |
| @@ -1,83 +0,0 @@ |
| -<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" |
| - "http://www.w3.org/TR/html4/loose.dtd"> |
| -<html lang="en"> |
| - <head> |
| - <title>Augmented Scope Chain in Event Handlers</title> |
| -<script type="text/javascript"> |
| - |
| -function setExpandos(){ |
| - setExs(window,0, 'global'); |
| - setExs(document,1, 'document'); |
| - setExOn(document.body,2, 'body'); |
| -} |
| - |
| -function setExOn(obj, depth, data){ |
| - if(obj.nodeType == 1){ |
| - setExs(obj,depth, data); |
| - var o = obj.children||obj.childNodes; |
| - for(var c = 0;c < o.length;c++){ |
| - setExOn(o[c], (depth+1), (depth+1)); |
| - } |
| - } |
| -} |
| - |
| -function setExs(obj,start, data){ |
| - for(var c = start;c < 10;c++){ |
| - obj['ex'+c] = data+((obj.nodeName)?(' '+obj.nodeName):''); |
| - } |
| -} |
| - |
| -var res = [ |
| -'chain results > ', |
| -'\nex0 = ','', //2 |
| -'\nex1 = ','', //4 |
| -'\nex2 = ','', //6 |
| -'\nex3 = ','', //8 |
| -'\nex4 = ','', //10 |
| -'\nex5 = ','', //12 |
| -'\nex6 = ','', //14 |
| -'\nex7 = ','', //16 |
| -'\nex8 = ','', //18 |
| -'\nex9 = ','' //20 |
| -]; |
| - |
| -</script> |
| -</head> |
| -<body onload="setExpandos();"> |
| -<div> |
| -<form action=""> |
| - <div> |
| - <p> |
| - <input type="button" value="Form Button" |
| - onclick="var a = res;a[2] = ex0;a[4] = ex1; |
| - a[6] = ex2;a[8] = ex3;a[10] = ex4; |
| - a[12] = ex5;a[14] = ex6;a[16] = ex7; |
| - a[18] = ex8;a[20] = ex9; |
| - alert(a.join(''));return false;"> |
| - </p> |
| - </div> |
| -</form> |
| -<table> |
| - <thead> |
| - <tr><th><a href="#" |
| - onclick="var a = res;a[2] = ex0;a[4] = ex1; |
| - a[6] = ex2;a[8] = ex3;a[10] = ex4; |
| - a[12] = ex5;a[14] = ex6;a[16] = ex7; |
| - a[18] = ex8;a[20] = ex9; |
| - alert(a.join(''));return false;"> |
| - thead</a></th></tr> |
| - </thead> |
| - <tbody> |
| - <tr><td><span> |
| - <a href="#" |
| - onclick="var a = res;a[2] = ex0;a[4] = ex1; |
| - a[6] = ex2;a[8] = ex3;a[10] = ex4; |
| - a[12] = ex5;a[14] = ex6;a[16] = ex7; |
| - a[18] = ex8;a[20] = ex9; |
| - alert(a.join(''));return false;"> |
| - tbody</a></span></td></tr> |
| - </tbody> |
| -</table> |
| -</div> |
| -</body> |
| -</html> |
| \ No newline at end of file |
| /cljs/names/scope_aug_example.html |
| Property changes: |
| Deleted: svn:mime-type |
| ## -1 +0,0 ## |
| -text/plain |
| \ No newline at end of property |
| Index: cljs/names/extra_props_global.html |
| =================================================================== |
| --- cljs/names/extra_props_global.html (revision 45) |
| +++ cljs/names/extra_props_global.html (nonexistent) |
| @@ -1,200 +0,0 @@ |
| -<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> |
| -<html lang="en"> |
| -<head> |
| - <title>Unsafe Names for HTML Form Controls - Extra Properties: Global</title> |
| - <meta http-equiv="content-type" content="text/html; charset=iso-8859-1"> |
| - <meta name="author" content="Garrett Smith"> |
| - <link rel="Start" href="./"> |
| - <link rel="stylesheet" href="../faq.css" type="text/css" media="all" charset="iso-8859-1"> |
| - <link rel="stylesheet" href="names.css" type="text/css" media="all" charset="iso-8859-1"> |
| -</head> |
| -<body> |
| - |
| - <h1>Unsafe Names for HTML Form Controls</h1> |
| - <h2>Extra Properties: <code>global</code></h2> |
| - |
| - <h3>Extra Properties: The Element Id Resolver Object</h3> |
| - <p> |
| - IE, Opera, Firefox, and Webkit |
| - seem to implement a non-standard <dfn>element id resolver</dfn> |
| - object. This object is used to retrieve the element. |
| - See comp.lang.javscript thread: |
| - <a href="http://groups.google.com/group/comp.lang.javascript/msg/aed8ecf1660e1dd1" |
| - >Why "window.alert()" over "alert()"?</a>, comment by Lasse Reichstein Nielsen. |
| - </p> |
| - |
| - <p> |
| - In some browsers, this behavior depends on the DOCTYPE used. |
| - </p> |
| - |
| - <p> |
| - This is a non-standard behavior of browsers that applies to <em>any</em> element with |
| - an <code>id</code>, not only form controls. |
| - </p> |
| - |
| - <p> |
| - Assigning to an undeclared identifier should result in a new global |
| - property being created, or, if the global/window object has a property with |
| - that name, its value should be replaced. However in some |
| - browsers, the assigment can result in an error. |
| - </p> |
| - |
| - <p> |
| - The properties of the "element resolver" may appear to be shadowed by |
| - properties of the global object, or vice-versa. |
| - </p> |
| - |
| -<h4>Property Assignment to Element</h4> |
| - <script type="text/javascript"> |
| -var globalVal; |
| -function addScript(id) { |
| - var script = document.createElement('script'), |
| - src = document.getElementById(id); |
| - script.text = src.firstChild.data; |
| - |
| - document.body.appendChild(script); |
| - document.getElementById(id+"Result").firstChild.data = globalVal; |
| -} |
| - </script> |
| - <p> |
| - The following example should result: <samp>undefined, 11</samp>. |
| - </p> |
| - |
| - <button id='b1' onclick="addScript('g1')">addScript('g1')</button> |
| - <code id='g1Result'> </code> |
| - <pre id="g1"> |
| -try { |
| - var b1; |
| - globalVal = [String(b1)]; // Should be "undefined". |
| - b1 = 11; |
| - globalVal = globalVal.concat(b1); // Should be ["undefined", 11] |
| -} catch(ex) { |
| - globalVal = ex.message; |
| -} |
| -</pre> |
| - <p> |
| - The following example does not declare a variable. The browser may optionally |
| - resolve the identifier <code>b2</code> on the <dfn>element id resolver</dfn> object. |
| - </p> |
| - <button id='b2' onclick="addScript('g2')">addScript('g2')</button> |
| -<code id='g2Result'> </code> |
| -<pre id="g2"> |
| -try { |
| - globalVal = [typeof b2]; |
| - b2 = 11; // undeclared assignment. |
| - globalVal = globalVal.concat(b2); |
| -} catch(ex) { |
| - globalVal = ex.message; |
| -} |
| -</pre> |
| - <p> |
| - The following example should result: <samp>undefined, 11</samp>. |
| - </p> |
| - <button id='b3' onclick="addScript('g3')">addScript('g3')</button> |
| -<code id='g3Result'> </code> |
| -<pre id="g3"> |
| -// remove element id. |
| -document.getElementById('b3').id = ''; |
| - |
| -try { |
| - globalVal = [typeof b3]; // should be "undefined". |
| - b3 = 11; // undeclared assignment. |
| - globalVal = globalVal.concat(b3); |
| -} catch(ex) { |
| - globalVal = ex.message; |
| -} |
| -</pre> |
| - <p> |
| - Declared variables that have not yet been assigned a value create a property |
| - on the Variable object with the value <code>undefined</code>. |
| - </p> |
| - <p> |
| - If the <dfn>element id resolver</dfn> object exists above the scope of |
| - the global object, the identifier will be shadowed by the global variable object. |
| - </p> |
| -<h3>Results</h3> |
| -<p>Firefox:</p> |
| -<ul> |
| - <li> |
| - <samp class="expected">undefined, 11</samp> |
| - </li> |
| - <li> |
| - <samp>object, 11</samp> |
| - </li> |
| - <li> |
| - <samp class="expected">undefined, 11</samp> |
| - </li> |
| -</ul> |
| -<p>Opera 9.5:</p> |
| -<ul> |
| - <li> |
| - <samp class="error">undefined, 11</samp> |
| - </li> |
| - <li> |
| - <samp>object, 11</samp> |
| - </li> |
| - <li> |
| - <samp class="expected">undefined, 11</samp> |
| - </li> |
| -</ul> |
| -<p>Safari 2.0.2, 3.1:</p> |
| -<ul> |
| - <li> |
| - <samp class="error">[object HTMLButtonElement], 11</samp> |
| - </li> |
| - <li> |
| - <samp>object, 11</samp> |
| - </li> |
| - <li> |
| - <samp class="expected">undefined, 11</samp> |
| - </li> |
| -</ul> |
| -<p>MSIE 7</p> |
| -<ul> |
| - <li> |
| - <samp>undefined, 11</samp> |
| - </li> |
| - <li> |
| - <samp>Object doesn't support this property or method</samp> |
| - </li> |
| - <li> |
| - <samp>undefined, 11</samp> |
| - </li> |
| -</ul> |
| -<p>MSIE 6</p> |
| -<ul> |
| - <li> |
| - <samp>undefined, 11</samp> |
| - </li> |
| - <li> |
| - <samp>Object doesn't support this property or method</samp> |
| - </li> |
| - <li> |
| - <samp>undefined, 11</samp> |
| - </li> |
| -</ul> |
| - |
| -<div id="toc"> |
| - <h4>Table of Contents</h4> |
| - <ul class="pagination linkList"> |
| - <li><a href="./index.html">Introduction</a></li> |
| - <li><a href="extra_props.html">Extra Properties: <code>FORM</code> Elements</a></li> |
| - <li><a href="extra_props_document.html">Extra Properties: <code>document</code></a></li> |
| - <li>Extra Properties: <code>global</code></li> |
| - <li><a href="event_handler.html">Event Handler Scope</a></li> |
| - <li><a href="api_design.html">API Design?</a></li> |
| - <li><a href="unsafe_names.html">Unsafe Names</a></li> |
| - <li><a href="conclusion.html">Conclusion</a></li> |
| - </ul> |
| -</div> |
| -<ul id="nextLink" class="linkList"> |
| - <li> |
| - <span class="prev">Previous:</span> <a href="extra_props_document.html">Extra Properties: <code>document</code></a> |
| - </li> |
| - <li> |
| - <span class="next">Next:</span> <a href="event_handler.html">Event Handler Scope</a> |
| - </li> |
| -</ul> |
| - |
| -</body> |
| -</html> |
| \ No newline at end of file |
| /cljs/names/extra_props_global.html |
| Property changes: |
| Deleted: svn:mime-type |
| ## -1 +0,0 ## |
| -text/plain |
| \ No newline at end of property |
| Index: cljs/names/names.css |
| =================================================================== |
| --- cljs/names/names.css (revision 45) |
| +++ cljs/names/names.css (nonexistent) |
| @@ -1,104 +0,0 @@ |
| -#toc ul.linkList { |
| - /* 160% * 62.5% = 100% */ |
| - font-size : 62.5%; |
| - margin: 0; |
| -} |
| - |
| -body { |
| - position: relative; |
| -} |
| - |
| -ul { |
| - margin : 1em 2.0em 1.5em 2.5em; |
| -} |
| -ul.linkList li { |
| - line-height: 120%; |
| - padding-top: 5px; |
| - padding-bottom: 5px; |
| -} |
| - |
| -#toc{ |
| - background: transparent; |
| - border: 0; |
| -} |
| - |
| -ul.linkList li { |
| - display: inline; |
| - margin: .4em; |
| - color: #334; |
| - white-space: nowrap; |
| -} |
| - |
| -ul.linkList li a code { |
| - color: inherit; |
| - padding: 0; |
| - font-size: 105%; |
| - font-weight: normal; |
| -} |
| - |
| -#toc { |
| - position: absolute; |
| - top: 2em; |
| - *top: 3em; |
| - font-size : 160%; |
| - padding: 0; |
| - width: 97.5%; |
| -} |
| - |
| -#toc h4 { |
| - font-size : 62.5%; |
| - margin-bottom: 0; |
| - display: none; |
| - } |
| - |
| -h1 { |
| - /* space for toc */ |
| - margin-bottom: 3em; |
| -} |
| - |
| -ul.linkList { |
| - margin-left: 0; |
| - margin-top: 0; |
| - font-weight: 800; |
| -} |
| - |
| -.next, .prev { |
| - font-style: italic; |
| - color: #334; |
| - margin-right: .1em; |
| - font-weight: 400; |
| -} |
| - |
| -div { |
| - padding: 0; |
| - margin: 0; |
| -} |
| - |
| -button.evaluator { |
| - margin-right: .4em; |
| -} |
| - |
| -ins { |
| - background: #ffc; |
| - border-bottom: 1px dotted #ec9; |
| - margin: 1px; |
| - text-decoration: none; |
| - padding: 1px; |
| -} |
| - |
| -ins[title]:before, del[title]:before { |
| - content: attr(title); |
| - display: block; |
| - background: #666; |
| - color: #fff; |
| - padding: 2px; |
| - font-style: italic; |
| -} |
| - |
| -body > ins, body > del { |
| - display: block; |
| -} |
| -del { |
| - background: #fdc; |
| - color: #333; |
| -} |
| /cljs/names/names.css |
| Property changes: |
| Deleted: svn:mime-type |
| ## -1 +0,0 ## |
| -text/plain |
| \ No newline at end of property |
| Index: cljs/names/form_dom_removal.html |
| =================================================================== |
| --- cljs/names/form_dom_removal.html (revision 45) |
| +++ cljs/names/form_dom_removal.html (nonexistent) |
| @@ -1,53 +0,0 @@ |
| -<!DOCTYPE HTML> |
| -<html> |
| -<head> |
| -<title>Test element Removal</title> |
| -<style type='text/css'> |
| - .fail { background: #F33; } |
| - .pass { background: #0f0; } |
| - b { display: none; padding: 1px 3px; |
| - font-family: monospace; white-space: pre;} |
| -</style> |
| -</head> |
| -<body> |
| -<form action=""> |
| -<input type="text" name="test"> |
| -</form> |
| - |
| -<b id="failElements" class="fail">FAIL</b> |
| -<b id="passElements" class="pass">PASS</b> |
| -<strong>form.elements.test is null?</strong> |
| - |
| -<div> |
| -<b id="passForm" class="pass">PASS</b> |
| -<b id="failForm" class="fail">FAIL</b> |
| -<strong>form.test is null?</strong> |
| -</div> |
| - |
| -<script type="text/javascript"> |
| -var d = document, |
| - form = d.forms[0], |
| - display = "inline-block", |
| - failElements = d.getElementById('failElements'), |
| - passElements = d.getElementById('passElements'), |
| - failForm = d.getElementById('failForm'), |
| - passForm = d.getElementById('passForm'); |
| - |
| -// comment the following line to hide bug: |
| -form.test; |
| - |
| -while(form.lastChild){ |
| - form.removeChild(form.lastChild); |
| -} |
| -if(document.forms[0].elements.test ) |
| - failElements.style.display = display; |
| -else |
| - passElements.style.display = display; |
| - |
| -if(document.forms[0].test ) |
| - failForm.style.display = display; |
| -else |
| - passForm.style.display = display; |
| -</script> |
| -</body> |
| -</html> |
| \ No newline at end of file |
| /cljs/names/form_dom_removal.html |
| Property changes: |
| Deleted: svn:mime-type |
| ## -1 +0,0 ## |
| -text/plain |
| \ No newline at end of property |
| Index: cljs/names/form_override_dom.html |
| =================================================================== |
| --- cljs/names/form_override_dom.html (revision 45) |
| +++ cljs/names/form_override_dom.html (nonexistent) |
| @@ -1,87 +0,0 @@ |
| -<!DOCTYPE HTML> |
| -<html lang="en"> |
| -<head> |
| - <title>FormElementCollection.html</title> |
| - <style type="text/css"> |
| - input { font-size: 8px; font-family: courier new, monospace; padding: 0 } |
| - #pass { display: none; background : #0f0; } |
| - #fail { display: none; background : #F33; } |
| - </style> |
| -</head> |
| -<body> |
| -<h1>Test: 290 Names not to give a FORM Control</h1> |
| -<form name="length" action="fail" title="fail"> |
| -<input type="submit" /> |
| -</form> |
| -<form name="title"></form> |
| - |
| -<pre id="pass">PASS - All Form Properties Replaced by an Element</pre> |
| -<pre id="fail">FAIL</pre> |
| -<pre> |
| -<script type='text/javascript' src="names.js"></script> |
| -<script type="text/javascript"> |
| - |
| -(function(){ |
| -var form = document.forms[0]; |
| -var input = document.createElement('input'), |
| - clone; |
| -var bugs = []; |
| - |
| -input.type = "text"; |
| - |
| -for(var i = names.length -1; i >= 0; i--) { |
| - try { |
| - if(names[i] == names[i-1]) { |
| - alert("found duplicate: " + names[i]); |
| - break; |
| - } |
| - else { |
| - clone = input.cloneNode(false); |
| - clone.name = clone.id = names[i]; |
| - clone.value = names[i]; |
| - form.appendChild(clone); |
| - } |
| - } catch(ex) { |
| - //("could not create input named: " + names[i]); |
| - } |
| -} |
| -// can't use form.elements, form.getElementsByTagName, et c |
| -// because they were replaced by an input. |
| - |
| -var actual, expected, msg, actualString; |
| -for(i = 0; i < names.length; i++) { |
| - |
| - actual = form[names[i]]; |
| - expected = document.getElementById(names[i]); |
| - if(actual != expected) { |
| - msg = names[i]; |
| - if(actual.toString && actual.toString.tagName) |
| - actualString = actual.toString.tagName; |
| - else |
| - actualString = String(actual); |
| - msg += " found: " + (((actualString + " ("+typeof actual+")")) || "(missing)"); |
| - bugs[bugs.length] = msg; |
| - } |
| -} |
| - |
| -if(bugs.length > 0) |
| - fail(bugs); |
| -else pass(); |
| - |
| -function fail(bugs) { |
| - var fail = document.getElementById('fail'); |
| - fail.firstChild.data += ': The following ' + bugs.length + |
| - ' form properties should have been an INPUT element:\n * ' + bugs.join('\n * '); |
| - fail.style.display = "inline-block"; |
| -} |
| - |
| -function pass() { |
| - var pass = document.getElementById('pass'); |
| - pass.style.display = "inline-block"; |
| -} |
| - |
| -//document.write(names.join("\n </li>\n <li>\n ")); |
| -})(); |
| -</script> |
| -</body> |
| -</html> |
| /cljs/names/form_override_dom.html |
| Property changes: |
| Deleted: svn:mime-type |
| ## -1 +0,0 ## |
| -text/plain |
| \ No newline at end of property |
| Index: cljs/names/simple-leak-form-input.html |
| =================================================================== |
| --- cljs/names/simple-leak-form-input.html (revision 45) |
| +++ cljs/names/simple-leak-form-input.html (nonexistent) |
| @@ -1,20 +0,0 @@ |
| -<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" |
| - "http://www.w3.org/TR/html4/loose.dtd"> |
| -<html lang="en"> |
| -<head><title></title></head> |
| -<body> |
| -<form action=""><input name="foo"><input name="bar"></form> |
| -<pre> |
| -<script type="text/javascript"> |
| -document.forms[0].foo; |
| -document.forms[0].elements.foo; |
| - |
| -// Clear out form's HTML. |
| -document.forms[0].innerHTML = ""; |
| -document.write('foo: ' + document.forms[0].foo+'<br>'); |
| -document.write('bar: '+document.forms[0].bar+'<br>'); |
| -document.write('elements.foo: '+document.forms[0].elements.foo); |
| -</script> |
| -</pre> |
| -</body> |
| -</html> |
| \ No newline at end of file |
| /cljs/names/simple-leak-form-input.html |
| Property changes: |
| Deleted: svn:mime-type |
| ## -1 +0,0 ## |
| -text/plain |
| \ No newline at end of property |
| Index: cljs/names/api_design.html |
| =================================================================== |
| --- cljs/names/api_design.html (revision 45) |
| +++ cljs/names/api_design.html (nonexistent) |
| @@ -1,169 +0,0 @@ |
| -<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> |
| -<html lang="en"> |
| -<head> |
| - <title>Unsafe Names for HTML Form Controls - API Design?</title> |
| - <meta http-equiv="content-type" content="text/html; charset=iso-8859-1"> |
| - <meta name="author" content="Garrett Smith"> |
| - <link rel="Start" href="./"> |
| - <link rel="stylesheet" href="../faq.css" type="text/css" media="all" charset="iso-8859-1"> |
| - <link rel="stylesheet" href="names.css" type="text/css" media="all" charset="iso-8859-1"> |
| -</head> |
| -<body> |
| - |
| - <h1>Unsafe Names for HTML Form Controls</h1> |
| - <h2>API Design?</h2> |
| - <h3>Form-as-a-collection Design Decision</h3> |
| - |
| - <p> |
| - Form-as-a-collection is problematic for implementors and should be a |
| - concern for developers (because bugs can occur when unsafe names are used). |
| - </p> |
| - |
| - <p> |
| - The idea of creating properties on a form creates |
| - a conflict. In Opera, the same key may appear twice in a for in loop. |
| - <a href="http://groups.google.com/group/comp.lang.javascript/browse_frm/thread/a27c626bd71f1f0/" |
| - >Opera, For In Loop, Same Key Appears Twice</a>. |
| - </p> |
| - |
| - <p> |
| - The elements collection is a safe alternative. |
| - By deprecating the non-standard mystery <code>"similar to a collection"</code> |
| - behavior of a form, authors would be discouraged from using it. |
| - </p> |
| - |
| - <p> |
| - Developers can still safely access the properties directly from the <code>elements</code> collection. |
| - There is no need to standardize this. |
| - </p> |
| - <h4>HTML 5</h4> |
| - <p> |
| - The HTML 5 draft has merged in much of the Web Forms 2.0 specification, |
| - which attempted to standardize some of the browser inconsistencies, strange behavior, |
| - and bugs. |
| - </p> |
| - |
| - <h4 id="controls-example-2">toString Example</h4> |
| - <p> |
| - This example contains a <code>FORM</code> element with two form controls, |
| - one named "length", the other "toString". A click callback is added to the |
| - <code>FORM</code>'s <code>length</code> property. The body of the function calls |
| - the <code>alert</code> function with the <code>FORM</code>. |
| - </p> |
| - <form action=";" id="form1" style="display:inline"> |
| - <input name="toString" type="hidden"> |
| - <input name="length" value="submit" type="submit"> |
| - </form> |
| - (Click the submit button to see what happens.) |
| - |
| - <script type="text/javascript"> |
| - (function (){ |
| - var form = document.getElementById('form1'); |
| - form.length.onclick = function(e) { |
| - try{ |
| - alert(form); |
| - } catch(ex) { |
| - alert("Error:\n" +ex.message); |
| - } finally { |
| - return false; |
| - } |
| - }; |
| - })(); |
| - </script> |
| - |
| - <p> |
| - <a onclick="toggleDisplay('controls-example-2-source', 'block', 'none'); return false;" |
| - href="">source...</a> |
| - </p> |
| - |
| - <pre id='controls-example-2-source' style="display:none"> |
| -<form action="" id="form1"> |
| -<input name="toString" type="hidden"/> |
| -<input name="length" value="submit" type="submit"/> |
| -</form> |
| -<script type="text/javascript"> |
| -(<span class='keyword'>function</span> (){ |
| - <span class='keyword'>var</span> form = document.getElementById(<span class='q'>'form1'</span>); |
| - form.length.onclick = <span class='keyword'>function</span>(e) { |
| - <span class='keyword'>try</span>{ |
| - alert(form); |
| - } <span class='keyword'>catch</span>(ex) { |
| - alert(<span class='q'>"Error:\n"</span> +ex.message); |
| - } <span class='keyword'>finally</span> { |
| - <span class='keyword'>return</span> <span class='keyword'>false</span>; |
| - } |
| - }; |
| -})();</script> |
| - </pre> |
| - |
| - <strong>Result</strong> |
| - <p> |
| - The callback tries to <code>alert</code> |
| - the <code>FORM</code> but throws an error when the <code>alert</code> function |
| - attempts to call the form's <code>toString</code> |
| - property, which was shadowed by a form control. |
| - </p> |
| - |
| - <h3>Callable Collections</h3> |
| - <p> |
| - Many browsers make <code>HTMLCollection</code> collection a callable object. |
| - When called, <code>document.forms(<var>x</var>)</code> returns a form element whose <code>name</code>, |
| - <code>id</code>, or <code>index</code> matches the supplied argument <code><var>x</var></code>. |
| - </p> |
| - <p> |
| - <a href="callable_example.html">Callable HTMLCollection Example</a> |
| - </p> |
| - <p> |
| - The DOM does not standardize collections to be callable. There isn't a good reason to call |
| - a collection. The property access operators provide a standard, cross-browser alternative. |
| - Callable collections are not implented in Mozilla. This feature does not appear to be considered for |
| - inclusion in HTML 5 or Web IDL. |
| - </p> |
| - |
| - <h3>Map-like NodeList Collections</h3> |
| - <p> |
| - Many browsers implement Map-like quality on <code>NodeList</code>. |
| - In these browsers, elements are accessible off the <code>NodeList</code> by their ID. |
| - </p> |
| - <p> |
| - <a href="map-like-nodelist.html">Map-like NodeList Example</a> |
| - </p> |
| - <p> |
| - This behavior is nonstandard and may be present, but should not be used. |
| - It is one innovation of Internet Explorer, |
| - copied in Safari, Opera, and perhaps elsewhere. |
| - </p> |
| - |
| - <p> |
| - Implementation developers and specifications authors must be aware of the permanence of |
| - API Design. We should all be cognizant of the impact that an API has on the future. |
| - </p> |
| - <div id="toc"> |
| - <h4>Table of Contents</h4> |
| - <ul class="pagination linkList"> |
| - <li><a href="./index.html">Introduction</a></li> |
| - <li><a href="extra_props.html">Extra Properties: <code>FORM</code> Elements</a></li> |
| - <li><a href="extra_props_document.html">Extra Properties: <code>document</code></a></li> |
| - <li><a href="extra_props_global.html">Extra Properties: <code>global</code></a></li> |
| - <li><a href="event_handler.html">Event Handler Scope</a></li> |
| - <li>API Design?</li> |
| - <li><a href="unsafe_names.html">Unsafe Names</a></li> |
| - <li><a href="conclusion.html">Conclusion</a></li> |
| - </ul> |
| - </div> |
| - <ul id="nextLink" class="linkList"> |
| - <li> |
| - <span class="prev">Previous:</span> <a href="event_handler.html">Event Handler Scope</a> |
| - </li> |
| - <li> |
| - <span class="next">Next:</span> <a href="unsafe_names.html">Unsafe Names</a> |
| - </li> |
| - </ul> |
| - <script type="text/javascript"> |
| - function toggleDisplay(id, d1, d2) { |
| - var s = document.getElementById(id).style; |
| - s.display = s.display === d2 ? d1 : d2; |
| - } |
| - </script> |
| -</body> |
| -</html> |
| /cljs/names/api_design.html |
| Property changes: |
| Deleted: svn:mime-type |
| ## -1 +0,0 ## |
| -text/plain |
| \ No newline at end of property |
| Index: cljs/names/extra_props_document.html |
| =================================================================== |
| --- cljs/names/extra_props_document.html (revision 45) |
| +++ cljs/names/extra_props_document.html (nonexistent) |
| @@ -1,86 +0,0 @@ |
| -<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> |
| -<html lang="en"> |
| -<head> |
| - <title>Unsafe Names for HTML Form Controls - Extra Properties: Document</title> |
| - <meta http-equiv="content-type" content="text/html; charset=iso-8859-1"> |
| - <meta name="author" content="Garrett Smith"> |
| - <link rel="Start" href="./"> |
| - <link rel="stylesheet" href="../faq.css" type="text/css" media="all" charset="iso-8859-1"> |
| - <link rel="stylesheet" href="names.css" type="text/css" media="all" charset="iso-8859-1"> |
| -</head> |
| -<body> |
| - |
| - <h1>Unsafe Names for HTML Form Controls</h1> |
| - <h2>Extra Properties: <code>document</code></h2> |
| - |
| - <h3>Non-Standard Named Properties</h3> |
| - <p> |
| - A browser may add a property to the <code>document</code> for each named |
| - (or <code>id</code>'d) FORM element, IMG, or possibly any other element. |
| - Alternatively, the same |
| - browser may implement a specialized <code>[[Get]]</code> method to find the property. |
| - </p> |
| - |
| - <form action="" id="testFormID" name="testFormName"> |
| - <pre> |
| -<form action="" id="testFormID" name="testFormName"> |
| -</form> |
| -</pre> |
| - <button class="evaluator" onclick="this.nextSibling.firstChild.data = eval(this.firstChild.data);return false" |
| - >'testFormID' in document</button |
| - ><span> </span> |
| - <button class="evaluator" onclick="this.nextSibling.firstChild.data = eval(this.firstChild.data);return false" |
| - >'testFormName' in document</button |
| - ><span> </span> |
| - <img name="testImgNAME" src="" alt="404" style="z-index: -1;position:relative;"> |
| -<pre> |
| -<img name="testImgNAME" src=""> |
| -</pre> |
| - |
| - <button class="evaluator" onclick="this.nextSibling.firstChild.data = eval(this.firstChild.data);return false" |
| - >'testImgNAME' in document</button |
| - ><span> </span> |
| - |
| - <a name='testLinkNAME' style="z-index: -1;position:relative;">link</a> |
| -<pre> |
| -<a name='testLinkNAME'>link</a> |
| -</pre> |
| - <button class="evaluator" onclick="this.nextSibling.firstChild.data = eval(this.firstChild.data);return false" |
| - >'testLinkNAME' in document</button |
| - ><span> </span> |
| - </form> |
| - |
| - <h3>Non Standard</h3> |
| - |
| - <p> |
| - Accessing objects from the <code>document</code> collection is not standard and unsafe. |
| - </p> |
| - |
| - <p> |
| - The extra properties added to <code>document</code> |
| - can cause problems with Event Handler Content Attributes as we will see later on. |
| - </p> |
| - |
| - <div id="toc"> |
| - <h4>Table of Contents</h4> |
| - <ul class="pagination linkList"> |
| - <li><a href="./index.html">Introduction</a></li> |
| - <li><a href="extra_props.html">Extra Properties: <code>FORM</code> Elements</a></li> |
| - <li>Extra Properties: <code>document</code></li> |
| - <li><a href="extra_props_global.html">Extra Properties: <code>global</code></a></li> |
| - <li><a href="event_handler.html">Event Handler Scope</a></li> |
| - <li><a href="api_design.html">API Design?</a></li> |
| - <li><a href="unsafe_names.html">Unsafe Names</a></li> |
| - <li><a href="conclusion.html">Conclusion</a></li> |
| - </ul> |
| - </div> |
| - <ul id="nextLink" class="linkList"> |
| - <li> |
| - <span class="prev">Previous:</span> <a href="extra_props.html">Extra Properties: <code>FORM</code> Elements</a> |
| - </li> |
| - <li> |
| - <span class="next">Next:</span> <a href="extra_props_global.html">Extra Properties: <code>global</code></a> |
| - </li> |
| - </ul> |
| -</body> |
| -</html> |
| /cljs/names/extra_props_document.html |
| Property changes: |
| Deleted: svn:mime-type |
| ## -1 +0,0 ## |
| -text/plain |
| \ No newline at end of property |
| Index: cljs/names/unsafe_names.html |
| =================================================================== |
| --- cljs/names/unsafe_names.html (revision 45) |
| +++ cljs/names/unsafe_names.html (nonexistent) |
| @@ -1,997 +0,0 @@ |
| -<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> |
| -<html lang="en"> |
| -<head> |
| - <meta http-equiv="content-type" content="text/html; charset=iso-8859-1"> |
| - <title>Unsafe Names for HTML Form Controls - Unsafe Names</title> |
| - <meta name="author" content="Garrett Smith"> |
| - <link rel="Start" href="./"> |
| - <link rel="stylesheet" href="../faq.css" type="text/css" media="all" charset="iso-8859-1"> |
| - <link rel="stylesheet" href="names.css" type="text/css" media="all" charset="iso-8859-1"> |
| -</head> |
| -<body> |
| - |
| - <h1>Unsafe Names for HTML Form Controls</h1> |
| - <h2>Unsafe Names</h2> |
| - <p> |
| - There are roughly three-hundred (300) names which a form control |
| - must not have. |
| - </p> |
| - |
| - <p> |
| - Unsafely named elements can be added to a <code>FORM</code> object after |
| - the form has been created, or can be included in the HTML source |
| - code. |
| - </p> |
| - |
| -<h3> |
| -Examples of Unsafe Form Control Names |
| -</h3> |
| - <p> |
| - Unsafe <code>FORM</code> |
| - control names can appear in three ways: |
| - </p> |
| - <ol> |
| - <li>In the <a href="form_override_html_source.html">HTML Source</a></li> |
| - <li><a href="form_override_dom.html">Added via the DOM</a></li> |
| - <li>From <a href="form_override_change_name.html">changing the <code>name</code> property</a></li> |
| - </ol> |
| - |
| - <p> |
| - Not all browsers behave the same when using unsafe |
| - <code>FORM</code> control names and a changing DOM. |
| - </p> |
| - |
| - <h3>Solution: Namespaced Form Controls</h3> |
| - <p> |
| - A naming system can help avoid unsafe names. |
| - </p> |
| - <p> |
| - Name the form controls starting with a special prefix. The prefix should be |
| - unique and represent the application. |
| - </p> |
| - |
| - <p> |
| - For example, an application named "VortexMail" could use the prefix <code>vtxmail_</code>. |
| - </p> |
| - |
| - <pre> |
| -<input name="vtxmail_fname" type="text"> |
| -<input name="vtxmail_data" type="file"> |
| -<input name="vtxmail_submit" type="submit"> |
| -</pre> |
| - <p> |
| - A prefix can also act as an identifying characteristic of your program or company, |
| - like a namespace. |
| - </p> |
| - |
| - <h4>Unsafe Names - Partial List</h4> |
| - <p> |
| - This list contains all the names that a form control should never have. It assumes |
| - that event handler attributes are never used and excludes some |
| - proposed properties from HTML 5 |
| - [<a href="conclusion.html#controls-normref">References</a>]. (e.g. |
| - <code>autofocus</code>, <code>min</code>, <code>max</code>, |
| - <code>height</code>, <code>labels</code>, <code>required</code>, <code>valid</code>, etc.). |
| - </p> |
| - |
| - <p> |
| - If event handler attributes are used, the list of unsafe names also includes |
| - every possible property name that exists on <code>document</code>, <code>window</code>, |
| - and the object of the tag that the event handler is declared on (could be any tag). |
| - This would bring the list to well over five-hundred (500) unsafe names, including |
| - <code>atob</code>, <code>bgColor</code>, <code>clear</code>, <code>close</code>, <code>opener</code>, |
| - <code>status</code>, <code>write</code>, etc. |
| - </p> |
| - |
| - <ol style="-moz-column-count: 2; |
| - -webkit-column-count: 2; |
| - column-count: 2; |
| - -moz-column-gap: 20px; |
| - -webkit-column-gap: 20px; |
| - column-gap: 20px; |
| - list-style-position:inside;"> |
| - <li> |
| - ATTRIBUTE_NODE |
| - </li> |
| - <li> |
| - CDATA_SECTION_NODE |
| - </li> |
| - <li> |
| - COMMENT_NODE |
| - </li> |
| - <li> |
| - DOCUMENT_FRAGMENT_NODE |
| - </li> |
| - <li> |
| - DOCUMENT_NODE |
| - </li> |
| - <li> |
| - DOCUMENT_POSITION_CONTAINED_BY |
| - </li> |
| - <li> |
| - DOCUMENT_POSITION_CONTAINS |
| - </li> |
| - <li> |
| - DOCUMENT_POSITION_DISCONNECTED |
| - </li> |
| - <li> |
| - DOCUMENT_POSITION_FOLLOWING |
| - </li> |
| - <li> |
| - DOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC |
| - </li> |
| - <li> |
| - DOCUMENT_POSITION_PRECEDING |
| - </li> |
| - <li> |
| - DOCUMENT_TYPE_NODE |
| - </li> |
| - <li> |
| - ELEMENT_NODE |
| - </li> |
| - <li> |
| - ENTITY_NODE |
| - </li> |
| - <li> |
| - ENTITY_REFERENCE_NODE |
| - </li> |
| - <li> |
| - NOTATION_NODE |
| - </li> |
| - <li> |
| - PROCESSING_INSTRUCTION_NODE |
| - </li> |
| - <li> |
| - TEXT_NODE |
| - </li> |
| - <li> |
| - accept |
| - </li> |
| - <li> |
| - acceptCharset |
| - </li> |
| - <li> |
| - action |
| - </li> |
| - <li> |
| - addBehavior |
| - </li> |
| - <li> |
| - addEventListener |
| - </li> |
| - <li> |
| - addEventSource |
| - </li> |
| - <li> |
| - addRepetitionBlock |
| - </li> |
| - <li> |
| - addRepetitionBlockByIndex |
| - </li> |
| - <li> |
| - all |
| - </li> |
| - <li> |
| - appendChild |
| - </li> |
| - <li> |
| - applyElement |
| - </li> |
| - <li> |
| - ariaBusy |
| - </li> |
| - <li> |
| - ariaChecked |
| - </li> |
| - <li> |
| - ariaControls |
| - </li> |
| - <li> |
| - ariaDescribability |
| - </li> |
| - <li> |
| - ariaDisabled |
| - </li> |
| - <li> |
| - ariaExpanded |
| - </li> |
| - <li> |
| - ariaFlowto |
| - </li> |
| - <li> |
| - ariaHaspopup |
| - </li> |
| - <li> |
| - ariaHidden |
| - </li> |
| - <li> |
| - ariaInvalid |
| - </li> |
| - <li> |
| - ariaLabelledby |
| - </li> |
| - <li> |
| - ariaLevel |
| - </li> |
| - <li> |
| - ariaMultiselect |
| - </li> |
| - <li> |
| - ariaOwns |
| - </li> |
| - <li> |
| - ariaPosinset |
| - </li> |
| - <li> |
| - ariaPressed |
| - </li> |
| - <li> |
| - ariaReadonly |
| - </li> |
| - <li> |
| - ariaRequired |
| - </li> |
| - <li> |
| - ariaSecret |
| - </li> |
| - <li> |
| - ariaSelected |
| - </li> |
| - <li> |
| - ariaSetsize |
| - </li> |
| - <li> |
| - ariaValuemax |
| - </li> |
| - <li> |
| - ariaValuemin |
| - </li> |
| - <li> |
| - ariaValuenow |
| - </li> |
| - <li> |
| - attachEvent |
| - </li> |
| - <li> |
| - attributes |
| - </li> |
| - <li> |
| - autocomplete |
| - </li> |
| - <li> |
| - baseURI |
| - </li> |
| - <li> |
| - behaviorUrns |
| - </li> |
| - <li> |
| - blockDiraction |
| - </li> |
| - <li> |
| - blur |
| - </li> |
| - <li> |
| - canHaveChildren |
| - </li> |
| - <li> |
| - canHaveHTML |
| - </li> |
| - <li> |
| - checkValidity |
| - </li> |
| - <li> |
| - childElementCount |
| - </li> |
| - <li> |
| - childNodes |
| - </li> |
| - <li> |
| - children |
| - </li> |
| - <li> |
| - className |
| - </li> |
| - <li> |
| - clearAttributes |
| - </li> |
| - <li> |
| - click |
| - </li> |
| - <li> |
| - clientHeight |
| - </li> |
| - <li> |
| - clientLeft |
| - </li> |
| - <li> |
| - clientTop |
| - </li> |
| - <li> |
| - clientWidth |
| - </li> |
| - <li> |
| - cloneNode |
| - </li> |
| - <li> |
| - compareDocumentPosition |
| - </li> |
| - <li> |
| - componentFromPoint |
| - </li> |
| - <li> |
| - constructor |
| - </li> |
| - <li> |
| - contains |
| - </li> |
| - <li> |
| - contentEditable |
| - </li> |
| - <li> |
| - currentStyle |
| - </li> |
| - <li> |
| - data |
| - </li> |
| - <li> |
| - detachEvent |
| - </li> |
| - <li> |
| - dir |
| - </li> |
| - <li> |
| - dispatchEvent |
| - </li> |
| - <li> |
| - dispatchFormChange |
| - </li> |
| - <li> |
| - dispatchFormInput |
| - </li> |
| - <li> |
| - document |
| - </li> |
| - <li> |
| - dragDrop |
| - </li> |
| - <li> |
| - elements |
| - </li> |
| - <li> |
| - encoding |
| - </li> |
| - <li> |
| - enctype |
| - </li> |
| - <li> |
| - fireEvent |
| - </li> |
| - <li> |
| - firstChild |
| - </li> |
| - <li> |
| - firstElementChild |
| - </li> |
| - <li> |
| - focus |
| - </li> |
| - <li> |
| - getAdjacentText |
| - </li> |
| - <li> |
| - getAttribute |
| - </li> |
| - <li> |
| - getAttributeNS |
| - </li> |
| - <li> |
| - getAttributeNode |
| - </li> |
| - <li> |
| - getAttributeNodeNS |
| - </li> |
| - <li> |
| - getBoundingClientRect |
| - </li> |
| - <li> |
| - getClientRects |
| - </li> |
| - <li> |
| - getElementsByClassName |
| - </li> |
| - <li> |
| - getElementsByTagName |
| - </li> |
| - <li> |
| - getElementsByTagNameNS |
| - </li> |
| - <li> |
| - getExpression |
| - </li> |
| - <li> |
| - getFeature |
| - </li> |
| - <li> |
| - getUserData |
| - </li> |
| - <li> |
| - hasAttribute |
| - </li> |
| - <li> |
| - hasAttributeNS |
| - </li> |
| - <li> |
| - hasAttributes |
| - </li> |
| - <li> |
| - hasChildNodes |
| - </li> |
| - <li> |
| - hasOwnProperty |
| - </li> |
| - <li> |
| - hideFocus |
| - </li> |
| - <li> |
| - id |
| - </li> |
| - <li> |
| - innerHTML |
| - </li> |
| - <li> |
| - innerText |
| - </li> |
| - <li> |
| - insertAdjacentElement |
| - </li> |
| - <li> |
| - insertAdjacentHTML |
| - </li> |
| - <li> |
| - insertAdjacentText |
| - </li> |
| - <li> |
| - insertBefore |
| - </li> |
| - <li> |
| - isContentEditable |
| - </li> |
| - <li> |
| - isDefaultNamespace |
| - </li> |
| - <li> |
| - isDefaultNamespaceURI |
| - </li> |
| - <li> |
| - isDisabled |
| - </li> |
| - <li> |
| - isEqualNode |
| - </li> |
| - <li> |
| - isMultiLine |
| - </li> |
| - <li> |
| - isPrototypeOf |
| - </li> |
| - <li> |
| - isSameNode |
| - </li> |
| - <li> |
| - isSupported |
| - </li> |
| - <li> |
| - isTextEdit |
| - </li> |
| - <li> |
| - item |
| - </li> |
| - <li> |
| - lang |
| - </li> |
| - <li> |
| - language |
| - </li> |
| - <li> |
| - lastChild |
| - </li> |
| - <li> |
| - lastElementChild |
| - </li> |
| - <li> |
| - length |
| - </li> |
| - <li> |
| - localName |
| - </li> |
| - <li> |
| - lookupPrefix |
| - </li> |
| - <li> |
| - mergeAttributes |
| - </li> |
| - <li> |
| - method |
| - </li> |
| - <li> |
| - moveRepetitionBlock |
| - </li> |
| - <li> |
| - msBlockProgression |
| - </li> |
| - <li> |
| - msBoxSizing |
| - </li> |
| - <li> |
| - name |
| - </li> |
| - <li> |
| - namedItem |
| - </li> |
| - <li> |
| - namespaceURI |
| - </li> |
| - <li> |
| - nextSibling |
| - </li> |
| - <li> |
| - nodeName |
| - </li> |
| - <li> |
| - nodeType |
| - </li> |
| - <li> |
| - nodeValue |
| - </li> |
| - <li> |
| - normalize |
| - </li> |
| - <li> |
| - offsetHeight |
| - </li> |
| - <li> |
| - offsetWidth |
| - </li> |
| - <li> |
| - onOffBehavior |
| - </li> |
| - <li> |
| - onabort |
| - </li> |
| - <li> |
| - onactivate |
| - </li> |
| - <li> |
| - onbeforeactivate |
| - </li> |
| - <li> |
| - onbeforecopy |
| - </li> |
| - <li> |
| - onbeforecut |
| - </li> |
| - <li> |
| - onbeforedeactivate |
| - </li> |
| - <li> |
| - onbeforeeditfocus |
| - </li> |
| - <li> |
| - onbeforepaste |
| - </li> |
| - <li> |
| - onblur |
| - </li> |
| - <li> |
| - onchage |
| - </li> |
| - <li> |
| - onclick |
| - </li> |
| - <li> |
| - onclosecapture |
| - </li> |
| - <li> |
| - oncontextmenu |
| - </li> |
| - <li> |
| - oncopy |
| - </li> |
| - <li> |
| - oncut |
| - </li> |
| - <li> |
| - ondblclick |
| - </li> |
| - <li> |
| - ondeactivate |
| - </li> |
| - <li> |
| - ondrag |
| - </li> |
| - <li> |
| - ondragend |
| - </li> |
| - <li> |
| - ondragenter |
| - </li> |
| - <li> |
| - ondragleave |
| - </li> |
| - <li> |
| - ondragover |
| - </li> |
| - <li> |
| - onerror |
| - </li> |
| - <li> |
| - onfocus |
| - </li> |
| - <li> |
| - onfocusin |
| - </li> |
| - <li> |
| - onfocusout |
| - </li> |
| - <li> |
| - onhelp |
| - </li> |
| - <li> |
| - oninput |
| - </li> |
| - <li> |
| - onkeydown |
| - </li> |
| - <li> |
| - onkeypress |
| - </li> |
| - <li> |
| - onkeyup |
| - </li> |
| - <li> |
| - onmousedown |
| - </li> |
| - <li> |
| - onmouseenter |
| - </li> |
| - <li> |
| - onmouseleave |
| - </li> |
| - <li> |
| - onmousemove |
| - </li> |
| - <li> |
| - onmousemultiwheel |
| - </li> |
| - <li> |
| - onmouseout |
| - </li> |
| - <li> |
| - onmouseover |
| - </li> |
| - <li> |
| - onmouseup |
| - </li> |
| - <li> |
| - onmousewheel |
| - </li> |
| - <li> |
| - onmove |
| - </li> |
| - <li> |
| - onmoveend |
| - </li> |
| - <li> |
| - onmovestart |
| - </li> |
| - <li> |
| - onpaste |
| - </li> |
| - <li> |
| - onpropertychange |
| - </li> |
| - <li> |
| - onreadystatechange |
| - </li> |
| - <li> |
| - onresize |
| - </li> |
| - <li> |
| - onresizeend |
| - </li> |
| - <li> |
| - onresizestart |
| - </li> |
| - <li> |
| - onscroll |
| - </li> |
| - <li> |
| - onsearch |
| - </li> |
| - <li> |
| - onselect |
| - </li> |
| - <li> |
| - onselectstart |
| - </li> |
| - <li> |
| - ontimeerror |
| - </li> |
| - <li> |
| - onunload |
| - </li> |
| - <li> |
| - outerHTML |
| - </li> |
| - <li> |
| - outerText |
| - </li> |
| - <li> |
| - ownerDocument |
| - </li> |
| - <li> |
| - parentNode |
| - </li> |
| - <li> |
| - parentTextEdit |
| - </li> |
| - <li> |
| - prefix |
| - </li> |
| - <li> |
| - previousElementSibling |
| - </li> |
| - <li> |
| - previousSibling |
| - </li> |
| - <li> |
| - propertyIsEnumerable |
| - </li> |
| - <li> |
| - querySelector |
| - </li> |
| - <li> |
| - querySelectorAll |
| - </li> |
| - <li> |
| - quotes |
| - </li> |
| - <li> |
| - releaseCapture |
| - </li> |
| - <li> |
| - removeAttribute |
| - </li> |
| - <li> |
| - removeAttributeNS |
| - </li> |
| - <li> |
| - removeAttributeNode |
| - </li> |
| - <li> |
| - removeBehavior |
| - </li> |
| - <li> |
| - removeChild |
| - </li> |
| - <li> |
| - removeEventListener |
| - </li> |
| - <li> |
| - removeEventSource |
| - </li> |
| - <li> |
| - removeExpression |
| - </li> |
| - <li> |
| - removeNode |
| - </li> |
| - <li> |
| - removeRepetitionBlock |
| - </li> |
| - <li> |
| - repeatMax |
| - </li> |
| - <li> |
| - repeatMin |
| - </li> |
| - <li> |
| - repeatStart |
| - </li> |
| - <li> |
| - repetitionBlocks |
| - </li> |
| - <li> |
| - repetitionIndex |
| - </li> |
| - <li> |
| - repetitionTemplate |
| - </li> |
| - <li> |
| - repetitionType |
| - </li> |
| - <li> |
| - replace |
| - </li> |
| - <li> |
| - replaceAdjacentText |
| - </li> |
| - <li> |
| - replaceChild |
| - </li> |
| - <li> |
| - replaceNode |
| - </li> |
| - <li> |
| - reset |
| - </li> |
| - <li> |
| - resetFromData |
| - </li> |
| - <li> |
| - role |
| - </li> |
| - <li> |
| - runtimeStyle |
| - </li> |
| - <li> |
| - schemaTypeInfo |
| - </li> |
| - <li> |
| - scopeName |
| - </li> |
| - <li> |
| - scrollByLines |
| - </li> |
| - <li> |
| - scrollByPages |
| - </li> |
| - <li> |
| - scrollHeight |
| - </li> |
| - <li> |
| - scrollIntoView |
| - </li> |
| - <li> |
| - scrollLeft |
| - </li> |
| - <li> |
| - scrollTop |
| - </li> |
| - <li> |
| - scrollWidth |
| - </li> |
| - <li> |
| - selectNodes |
| - </li> |
| - <li> |
| - selectSingleNode |
| - </li> |
| - <li> |
| - setActive |
| - </li> |
| - <li> |
| - setAttributeNS |
| - </li> |
| - <li> |
| - setAttributeNode |
| - </li> |
| - <li> |
| - setAttributeNodeNS |
| - </li> |
| - <li> |
| - setCapture |
| - </li> |
| - <li> |
| - setExpression |
| - </li> |
| - <li> |
| - setIdAttribute |
| - </li> |
| - <li> |
| - setIdAttributeNS |
| - </li> |
| - <li> |
| - setIdAttributeNode |
| - </li> |
| - <li> |
| - setUserData |
| - </li> |
| - <li> |
| - sourceIndex |
| - </li> |
| - <li> |
| - spellcheck |
| - </li> |
| - <li> |
| - style |
| - </li> |
| - <li> |
| - submit |
| - </li> |
| - <li> |
| - swapNode |
| - </li> |
| - <li> |
| - tabIndex |
| - </li> |
| - <li> |
| - tagName |
| - </li> |
| - <li> |
| - tagUrn |
| - </li> |
| - <li> |
| - target |
| - </li> |
| - <li> |
| - templateElements |
| - </li> |
| - <li> |
| - text |
| - </li> |
| - <li> |
| - textContent |
| - </li> |
| - <li> |
| - title |
| - </li> |
| - <li> |
| - toLocaleString |
| - </li> |
| - <li> |
| - toString |
| - </li> |
| - <li> |
| - uniqueID |
| - </li> |
| - <li> |
| - unselectable |
| - </li> |
| - <li> |
| - unwatch |
| - </li> |
| - <li> |
| - urns |
| - </li> |
| - <li> |
| - valueOf |
| - </li> |
| - <li> |
| - watch |
| - </li> |
| - <li> |
| - window |
| - </li> |
| - </ol> |
| - |
| - <h4 style="clear:both">Early Adopter</h4> |
| - <p> |
| - Safari 3 has implemented the behavior specified in more closely than |
| - Safari 2. Safari 3 replaces more pre-existing properties of a |
| - <code>FORM</code> when an element with the same name is added. |
| - </p> |
| - |
| - <div id="toc"> |
| - <h4>Table of Contents</h4> |
| - <ul class="pagination linkList"> |
| - <li><a href="./index.html">Introduction</a></li> |
| - <li><a href="extra_props.html">Extra Properties: <code>FORM</code> Elements</a></li> |
| - <li><a href="extra_props_document.html">Extra Properties: <code>document</code></a></li> |
| - <li><a href="extra_props_global.html">Extra Properties: <code>global</code></a></li> |
| - <li><a href="event_handler.html">Event Handler Scope</a></li> |
| - <li><a href="api_design.html">API Design?</a></li> |
| - <li>Unsafe Names</li> |
| - <li><a href="conclusion.html">Conclusion</a></li> |
| - </ul> |
| - </div> |
| - <ul id="nextLink" class="linkList"> |
| - <li> |
| - <span class="prev">Previous:</span> <a href="api_design.html">API Design?</a> |
| - </li> |
| - <li> |
| - <span class="next">Next:</span> <a href="conclusion.html">Conclusion</a> |
| - </li> |
| - </ul> |
| -</body> |
| -</html> |
| /cljs/names/unsafe_names.html |
| Property changes: |
| Deleted: svn:mime-type |
| ## -1 +0,0 ## |
| -text/plain |
| \ No newline at end of property |
| Index: cljs/names/form_override_html_source.html |
| =================================================================== |
| --- cljs/names/form_override_html_source.html (revision 45) |
| +++ cljs/names/form_override_html_source.html (nonexistent) |
| @@ -1,65 +0,0 @@ |
| -<!DOCTYPE HTML> |
| -<html lang="en"> |
| -<head> |
| - <title>FormElementCollection.html</title> |
| - <style type="text/css"> |
| - #pass { display: none; background : #0f0; } |
| - #fail { display: none; background : #F33; } |
| - </style> |
| -</head> |
| -<body> |
| -<h1>Test: 290 Names not to give a FORM Control</h1> |
| -<form action=""> |
| -<input name="window" id="window" type="text"><input name="watch" id="watch" type="text"><input name="valueOf" id="valueOf" type="text"><input name="urns" id="urns" type="text"><input name="unwatch" id="unwatch" type="text"><input name="unselectable" id="unselectable" type="text"><input name="uniqueID" id="uniqueID" type="text"><input name="toString" id="toString" type="text"><input name="toLocaleString" id="toLocaleString" type="text"><input name="title" id="title" type="text"><input name="textContent" id="textContent" type="text"><input name="text" id="text" type="text"><input name="templateElements" id="templateElements" type="text"><input name="target" id="target" type="text"><input name="tagUrn" id="tagUrn" type="text"><input name="tagName" id="tagName" type="text"><input name="tabIndex" id="tabIndex" type="text"><input name="swapNode" id="swapNode" type="text"><input name="submit" id="submit" type="text"><input name="style" id="style" type="text"><input name="spellcheck" id="spellcheck" type="text"><input name="sourceIndex" id="sourceIndex" type="text"><input name="setUserData" id="setUserData" type="text"><input name="setIdAttributeNode" id="setIdAttributeNode" type="text"><input name="setIdAttributeNS" id="setIdAttributeNS" type="text"><input name="setIdAttribute" id="setIdAttribute" type="text"><input name="setExpression" id="setExpression" type="text"><input name="setCapture" id="setCapture" type="text"><input name="setAttributeNodeNS" id="setAttributeNodeNS" type="text"><input name="setAttributeNode" id="setAttributeNode" type="text"><input name="setAttributeNS" id="setAttributeNS" type="text"><input name="setActive" id="setActive" type="text"><input name="selectSingleNode" id="selectSingleNode" type="text"><input name="selectNodes" id="selectNodes" type="text"><input name="scrollWidth" id="scrollWidth" type="text"><input name="scrollTop" id="scrollTop" type="text"><input name="scrollLeft" id="scrollLeft" type="text"><input name="scrollIntoView" id="scrollIntoView" type="text"><input name="scrollHeight" id="scrollHeight" type="text"><input name="scrollByPages" id="scrollByPages" type="text"><input name="scrollByLines" id="scrollByLines" type="text"><input name="scopeName" id="scopeName" type="text"><input name="schemaTypeInfo" id="schemaTypeInfo" type="text"><input name="runtimeStyle" id="runtimeStyle" type="text"><input name="role" id="role" type="text"><input name="resetFromData" id="resetFromData" type="text"><input name="reset" id="reset" type="text"><input name="replaceNode" id="replaceNode" type="text"><input name="replaceChild" id="replaceChild" type="text"><input name="replaceAdjacentText" id="replaceAdjacentText" type="text"><input name="replace" id="replace" type="text"><input name="repetitionType" id="repetitionType" type="text"><input name="repetitionTemplate" id="repetitionTemplate" type="text"><input name="repetitionIndex" id="repetitionIndex" type="text"><input name="repetitionBlocks" id="repetitionBlocks" type="text"><input name="repeatStart" id="repeatStart" type="text"><input name="repeatMin" id="repeatMin" type="text"><input name="repeatMax" id="repeatMax" type="text"><input name="removeRepetitionBlock" id="removeRepetitionBlock" type="text"><input name="removeNode" id="removeNode" type="text"><input name="removeExpression" id="removeExpression" type="text"><input name="removeEventSource" id="removeEventSource" type="text"><input name="removeEventListener" id="removeEventListener" type="text"><input name="removeChild" id="removeChild" type="text"><input name="removeBehavior" id="removeBehavior" type="text"><input name="removeAttributeNode" id="removeAttributeNode" type="text"><input name="removeAttributeNS" id="removeAttributeNS" type="text"><input name="removeAttribute" id="removeAttribute" type="text"><input name="releaseCapture" id="releaseCapture" type="text"><input name="quotes" id="quotes" type="text"><input name="querySelectorAll" id="querySelectorAll" type="text"><input name="querySelector" id="querySelector" type="text"><input name="propertyIsEnumerable" id="propertyIsEnumerable" type="text"><input name="previousSibling" id="previousSibling" type="text"><input name="previousElementSibling" id="previousElementSibling" type="text"><input name="prefix" id="prefix" type="text"><input name="parentTextEdit" id="parentTextEdit" type="text"><input name="parentNode" id="parentNode" type="text"><input name="ownerDocument" id="ownerDocument" type="text"><input name="outerText" id="outerText" type="text"><input name="outerHTML" id="outerHTML" type="text"><input name="onunload" id="onunload" type="text"><input name="ontimeerror" id="ontimeerror" type="text"><input name="onselectstart" id="onselectstart" type="text"><input name="onselect" id="onselect" type="text"><input name="onsearch" id="onsearch" type="text"><input name="onscroll" id="onscroll" type="text"><input name="onresizestart" id="onresizestart" type="text"><input name="onresizeend" id="onresizeend" type="text"><input name="onresize" id="onresize" type="text"><input name="onreadystatechange" id="onreadystatechange" type="text"><input name="onpropertychange" id="onpropertychange" type="text"><input name="onpaste" id="onpaste" type="text"><input name="onmovestart" id="onmovestart" type="text"><input name="onmoveend" id="onmoveend" type="text"><input name="onmove" id="onmove" type="text"><input name="onmousewheel" id="onmousewheel" type="text"><input name="onmouseup" id="onmouseup" type="text"><input name="onmouseover" id="onmouseover" type="text"><input name="onmouseout" id="onmouseout" type="text"><input name="onmousemultiwheel" id="onmousemultiwheel" type="text"><input name="onmousemove" id="onmousemove" type="text"><input name="onmouseleave" id="onmouseleave" type="text"><input name="onmouseenter" id="onmouseenter" type="text"><input name="onmousedown" id="onmousedown" type="text"><input name="onkeyup" id="onkeyup" type="text"><input name="onkeypress" id="onkeypress" type="text"><input name="onkeydown" id="onkeydown" type="text"><input name="oninput" id="oninput" type="text"><input name="onhelp" id="onhelp" type="text"><input name="onfocusout" id="onfocusout" type="text"><input name="onfocusin" id="onfocusin" type="text"><input name="onfocus" id="onfocus" type="text"><input name="onerror" id="onerror" type="text"><input name="ondragover" id="ondragover" type="text"><input name="ondragleave" id="ondragleave" type="text"><input name="ondragenter" id="ondragenter" type="text"><input name="ondragend" id="ondragend" type="text"><input name="ondrag" id="ondrag" type="text"><input name="ondeactivate" id="ondeactivate" type="text"><input name="ondblclick" id="ondblclick" type="text"><input name="oncut" id="oncut" type="text"><input name="oncopy" id="oncopy" type="text"><input name="oncontextmenu" id="oncontextmenu" type="text"><input name="onclosecapture" id="onclosecapture" type="text"><input name="onclick" id="onclick" type="text"><input name="onchage" id="onchage" type="text"><input name="onblur" id="onblur" type="text"><input name="onbeforepaste" id="onbeforepaste" type="text"><input name="onbeforeeditfocus" id="onbeforeeditfocus" type="text"><input name="onbeforedeactivate" id="onbeforedeactivate" type="text"><input name="onbeforecut" id="onbeforecut" type="text"><input name="onbeforecopy" id="onbeforecopy" type="text"><input name="onbeforeactivate" id="onbeforeactivate" type="text"><input name="onactivate" id="onactivate" type="text"><input name="onabort" id="onabort" type="text"><input name="onOffBehavior" id="onOffBehavior" type="text"><input name="offsetWidth" id="offsetWidth" type="text"><input name="offsetHeight" id="offsetHeight" type="text"><input name="normalize" id="normalize" type="text"><input name="nodeValue" id="nodeValue" type="text"><input name="nodeType" id="nodeType" type="text"><input name="nodeName" id="nodeName" type="text"><input name="nextSibling" id="nextSibling" type="text"><input name="namespaceURI" id="namespaceURI" type="text"><input name="namedItem" id="namedItem" type="text"><input name="name" id="name" type="text"><input name="msBoxSizing" id="msBoxSizing" type="text"><input name="msBlockProgression" id="msBlockProgression" type="text"><input name="moveRepetitionBlock" id="moveRepetitionBlock" type="text"><input name="method" id="method" type="text"><input name="mergeAttributes" id="mergeAttributes" type="text"><input name="lookupPrefix" id="lookupPrefix" type="text"><input name="localName" id="localName" type="text"><input name="length" id="length" type="text"><input name="lastElementChild" id="lastElementChild" type="text"><input name="lastChild" id="lastChild" type="text"><input name="language" id="language" type="text"><input name="lang" id="lang" type="text"><input name="item" id="item" type="text"><input name="isTextEdit" id="isTextEdit" type="text"><input name="isSupported" id="isSupported" type="text"><input name="isSameNode" id="isSameNode" type="text"><input name="isPrototypeOf" id="isPrototypeOf" type="text"><input name="isMultiLine" id="isMultiLine" type="text"><input name="isEqualNode" id="isEqualNode" type="text"><input name="isDisabled" id="isDisabled" type="text"><input name="isDefaultNamespaceURI" id="isDefaultNamespaceURI" type="text"><input name="isDefaultNamespace" id="isDefaultNamespace" type="text"><input name="isContentEditable" id="isContentEditable" type="text"><input name="insertBefore" id="insertBefore" type="text"><input name="insertAdjacentText" id="insertAdjacentText" type="text"><input name="insertAdjacentHTML" id="insertAdjacentHTML" type="text"><input name="insertAdjacentElement" id="insertAdjacentElement" type="text"><input name="innerText" id="innerText" type="text"><input name="innerHTML" id="innerHTML" type="text"><input name="id" id="id" type="text"><input name="hideFocus" id="hideFocus" type="text"><input name="hasOwnProperty" id="hasOwnProperty" type="text"><input name="hasChildNodes" id="hasChildNodes" type="text"><input name="hasAttributes" id="hasAttributes" type="text"><input name="hasAttributeNS" id="hasAttributeNS" type="text"><input name="hasAttribute" id="hasAttribute" type="text"><input name="getUserData" id="getUserData" type="text"><input name="getFeature" id="getFeature" type="text"><input name="getExpression" id="getExpression" type="text"><input name="getElementsByTagNameNS" id="getElementsByTagNameNS" type="text"><input name="getElementsByTagName" id="getElementsByTagName" type="text"><input name="getElementsByClassName" id="getElementsByClassName" type="text"><input name="getClientRects" id="getClientRects" type="text"><input name="getBoundingClientRect" id="getBoundingClientRect" type="text"><input name="getAttributeNodeNS" id="getAttributeNodeNS" type="text"><input name="getAttributeNode" id="getAttributeNode" type="text"><input name="getAttributeNS" id="getAttributeNS" type="text"><input name="getAttribute" id="getAttribute" type="text"><input name="getAdjacentText" id="getAdjacentText" type="text"><input name="focus" id="focus" type="text"><input name="firstElementChild" id="firstElementChild" type="text"><input name="firstChild" id="firstChild" type="text"><input name="fireEvent" id="fireEvent" type="text"><input name="enctype" id="enctype" type="text"><input name="encoding" id="encoding" type="text"><input name="elements" id="elements" type="text"><input name="dragDrop" id="dragDrop" type="text"><input name="document" id="document" type="text"><input name="dispatchFormInput" id="dispatchFormInput" type="text"><input name="dispatchFormChange" id="dispatchFormChange" type="text"><input name="dispatchEvent" id="dispatchEvent" type="text"><input name="dir" id="dir" type="text"><input name="detachEvent" id="detachEvent" type="text"><input name="data" id="data" type="text"><input name="currentStyle" id="currentStyle" type="text"><input name="contentEditable" id="contentEditable" type="text"><input name="contains" id="contains" type="text"><input name="constructor" id="constructor" type="text"><input name="componentFromPoint" id="componentFromPoint" type="text"><input name="compareDocumentPosition" id="compareDocumentPosition" type="text"><input name="cloneNode" id="cloneNode" type="text"><input name="clientWidth" id="clientWidth" type="text"><input name="clientTop" id="clientTop" type="text"><input name="clientLeft" id="clientLeft" type="text"><input name="clientHeight" id="clientHeight" type="text"><input name="click" id="click" type="text"><input name="clearAttributes" id="clearAttributes" type="text"><input name="className" id="className" type="text"><input name="children" id="children" type="text"><input name="childNodes" id="childNodes" type="text"><input name="childElementCount" id="childElementCount" type="text"><input name="checkValidity" id="checkValidity" type="text"><input name="canHaveHTML" id="canHaveHTML" type="text"><input name="canHaveChildren" id="canHaveChildren" type="text"><input name="blur" id="blur" type="text"><input name="blockDiraction" id="blockDiraction" type="text"><input name="behaviorUrns" id="behaviorUrns" type="text"><input name="baseURI" id="baseURI" type="text"><input name="autocomplete" id="autocomplete" type="text"><input name="attributes" id="attributes" type="text"><input name="attachEvent" id="attachEvent" type="text"><input name="ariaValuenow" id="ariaValuenow" type="text"><input name="ariaValuemin" id="ariaValuemin" type="text"><input name="ariaValuemax" id="ariaValuemax" type="text"><input name="ariaSetsize" id="ariaSetsize" type="text"><input name="ariaSelected" id="ariaSelected" type="text"><input name="ariaSecret" id="ariaSecret" type="text"><input name="ariaRequired" id="ariaRequired" type="text"><input name="ariaReadonly" id="ariaReadonly" type="text"><input name="ariaPressed" id="ariaPressed" type="text"><input name="ariaPosinset" id="ariaPosinset" type="text"><input name="ariaOwns" id="ariaOwns" type="text"><input name="ariaMultiselect" id="ariaMultiselect" type="text"><input name="ariaLevel" id="ariaLevel" type="text"><input name="ariaLabelledby" id="ariaLabelledby" type="text"><input name="ariaInvalid" id="ariaInvalid" type="text"><input name="ariaHidden" id="ariaHidden" type="text"><input name="ariaHaspopup" id="ariaHaspopup" type="text"><input name="ariaFlowto" id="ariaFlowto" type="text"><input name="ariaExpanded" id="ariaExpanded" type="text"><input name="ariaDisabled" id="ariaDisabled" type="text"><input name="ariaDescribability" id="ariaDescribability" type="text"><input name="ariaControls" id="ariaControls" type="text"><input name="ariaChecked" id="ariaChecked" type="text"><input name="ariaBusy" id="ariaBusy" type="text"><input name="applyElement" id="applyElement" type="text"><input name="appendChild" id="appendChild" type="text"><input name="all" id="all" type="text"><input name="addRepetitionBlockByIndex" id="addRepetitionBlockByIndex" type="text"><input name="addRepetitionBlock" id="addRepetitionBlock" type="text"><input name="addEventSource" id="addEventSource" type="text"><input name="addEventListener" id="addEventListener" type="text"><input name="addBehavior" id="addBehavior" type="text"><input name="action" id="action" type="text"><input name="acceptCharset" id="acceptCharset" type="text"><input name="accept" id="accept" type="text"><input name="TEXT_NODE" id="TEXT_NODE" type="text"><input name="PROCESSING_INSTRUCTION_NODE" id="PROCESSING_INSTRUCTION_NODE" type="text"><input name="NOTATION_NODE" id="NOTATION_NODE" type="text"><input name="ENTITY_REFERENCE_NODE" id="ENTITY_REFERENCE_NODE" type="text"><input name="ENTITY_NODE" id="ENTITY_NODE" type="text"><input name="ELEMENT_NODE" id="ELEMENT_NODE" type="text"><input name="DOCUMENT_TYPE_NODE" id="DOCUMENT_TYPE_NODE" type="text"><input name="DOCUMENT_POSITION_PRECEDING" id="DOCUMENT_POSITION_PRECEDING" type="text"><input name="DOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC" id="DOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC" type="text"><input name="DOCUMENT_POSITION_FOLLOWING" id="DOCUMENT_POSITION_FOLLOWING" type="text"><input name="DOCUMENT_POSITION_DISCONNECTED" id="DOCUMENT_POSITION_DISCONNECTED" type="text"><input name="DOCUMENT_POSITION_CONTAINS" id="DOCUMENT_POSITION_CONTAINS" type="text"><input name="DOCUMENT_POSITION_CONTAINED_BY" id="DOCUMENT_POSITION_CONTAINED_BY" type="text"><input name="DOCUMENT_NODE" id="DOCUMENT_NODE" type="text"><input name="DOCUMENT_FRAGMENT_NODE" id="DOCUMENT_FRAGMENT_NODE" type="text"><input name="COMMENT_NODE" id="COMMENT_NODE" type="text"><input name="CDATA_SECTION_NODE" id="CDATA_SECTION_NODE" type="text"><input name="ATTRIBUTE_NODE" id="ATTRIBUTE_NODE" type="text"> |
| -</form> |
| -<form name="title"/> |
| - |
| -<pre id="pass">PASS - All Form Properties Replaced by an Element</pre> |
| -<pre id="fail">FAIL</pre> |
| -<pre> |
| -<script type='text/javascript' src="names.js"></script> |
| -<script type="text/javascript"> |
| -(function(){ |
| -var form = document.forms[0]; |
| -var actual, expected, msg, actualString; |
| -var bugs = []; |
| - |
| -for(var i = names.length -1; i > 0; i--) { |
| - try{ |
| - actual = form[names[i]]; |
| - if(actual != input) { |
| - msg = names[i]; |
| - if(actual.toString && actual.toString.tagName) |
| - actualString = actual.toString.tagName; |
| - else |
| - actualString = String(actual); |
| - msg += " found: " + (((actualString + " ("+typeof actual+")")) || "(missing)"); |
| - bugs[bugs.length] = msg; |
| - } |
| - } catch(x){ |
| - msg = "Error: " + x.message; |
| - } |
| -} |
| -// can't use form.elements, form.getElementsByTagName, et c |
| -// because they were replaced by an input. |
| - |
| -if(bugs.length > 0) |
| - fail(bugs); |
| -else pass(); |
| - |
| -function fail(bugs) { |
| - var fail = document.getElementById('fail'); |
| - fail.firstChild.data += ': The following ' + bugs.length + |
| - ' form properties should have been an INPUT element:\n * ' + bugs.join('\n * '); |
| - fail.style.display = "inline-block"; |
| -} |
| - |
| -function pass() { |
| - var pass = document.getElementById('pass'); |
| - pass.style.display = "inline-block"; |
| -} |
| - |
| -})(); |
| -</script> |
| -</body> |
| -</html> |
| /cljs/names/form_override_html_source.html |
| Property changes: |
| Deleted: svn:mime-type |
| ## -1 +0,0 ## |
| -text/plain |
| \ No newline at end of property |
| Index: cljs/names/extra_props.html |
| =================================================================== |
| --- cljs/names/extra_props.html (revision 45) |
| +++ cljs/names/extra_props.html (nonexistent) |
| @@ -1,182 +0,0 @@ |
| -<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> |
| -<html lang="en"> |
| -<head> |
| - <title>Unsafe Names for HTML Form Controls - Extra Properties: Form Elements</title> |
| - <meta http-equiv="content-type" content="text/html; charset=iso-8859-1"> |
| - <meta name="author" content="Garrett Smith"> |
| - <link rel="Start" href="./"> |
| - <link rel="stylesheet" href="../faq.css" type="text/css" media="all" charset="iso-8859-1"> |
| - <link rel="stylesheet" href="names.css" type="text/css" media="all" charset="iso-8859-1"> |
| -</head> |
| -<body> |
| - |
| - <h1>Unsafe Names for HTML Form Controls</h1> |
| - <h2>Extra Properties: <code>FORM</code> Elements</h2> |
| - |
| - <h3>Named Properties</h3> |
| - <p> |
| - A browser may add a property to the either the <code>FORM</code> or |
| - <code>elements</code> collection for each named (or <code>id</code>'d) element. |
| - Alternatively, the same |
| - browser may implement a specialized <code>[[Get]]</code> method to find the property. |
| - </p> |
| - <p>The way to tell if an object has a property is to use the <code>in</code> operator.</p> |
| - |
| - <form action=""> |
| - <button name='test' onclick="this.nextSibling.firstChild.data = eval(this.firstChild.data);return false" |
| - >'test' in this.form</button |
| - ><span> </span> |
| - <button name='test' onclick="this.nextSibling.firstChild.data = eval(this.firstChild.data);return false" |
| - >'test' in this.form.elements</button |
| - ><span> </span> |
| - </form> |
| - |
| - <p> |
| - Behavior varies between browsers, |
| - and between <code>FORM</code> and <code>elements</code>. When named properties |
| - exist, they usually appear to have the attributes <code>ReadOnly</code>, <code>DontDelete</code>. |
| - </p> |
| - |
| - <h3>Indexed Properties</h3> |
| - <p> |
| - Browsers also either add indexed properties to the collection or form or implement |
| - a specialized <code>[[Get]]</code> method to find the property. As with named properties, most browsers |
| - will actually add the property to the collection. |
| - </p> |
| - |
| - <form action=""> |
| - <button name='test' onclick="this.nextSibling.firstChild.data = eval(this.firstChild.data);return false" |
| - >'0' in this.form</button |
| - ><span> </span> |
| - <button name='test' onclick="this.nextSibling.firstChild.data = eval(this.firstChild.data);return false" |
| - >'0' in this.form.elements</button |
| - ><span> </span> |
| - </form> |
| - |
| - <p> |
| - Mozilla seems to be the only browser that implements a specialized [[Get]]. |
| - </p> |
| - |
| - <h3 id="StandardWrong">Standard</h3> |
| - <p> |
| - The <code>elements</code> collection is an <code>HTMLCollection</code> that provides a |
| - standard way to access form controls. |
| - </p> |
| - |
| - <p> |
| - Web IDL [<a href="conclusion.html#controls-normref">WebIDL</a>] lumps these behaviors into |
| - the terms: <code>[[NameGetter]]</code> and <code>[[IndexGetter]]</code>. |
| - Not all browsers have a specialized <code>[[Get]]</code> to retrieve named elements; |
| - the ones that do (Mozilla) don't always use it for every collection, so the term is a bit |
| - of a misnomer. |
| - </p> |
| - <p> |
| - We can see the influence Java programmers had in the DOM 2 ECMAScript bindings |
| - [<a href="conclusion.html#controls-normref">DOM2</a>], |
| - which falsely states: |
| - </p> |
| - |
| - <blockquote cite="http://www.w3.org/TR/DOM-Level-2-HTML/ECMA-script-binding.html"> |
| - <strong>Objects that implement the <code>HTMLCollection</code> interface:</strong> |
| - ... |
| - <p> |
| - <strong>Note:</strong> This object can also be dereferenced using square |
| - bracket notation (e.g. <code>obj[1]</code>). Dereferencing with an integer |
| - <strong>index</strong> is equivalent to invoking the <strong><code>item</code></strong> function |
| - with that index. |
| - </p> |
| - ... |
| - <p> |
| - <strong>Note:</strong> This object can also be dereferenced using square |
| - bracket notation (e.g. <code>obj["foo"]</code>). Dereferencing using a string |
| - index is equivalent to invoking the <strong><code>namedItem</code></strong> function with |
| - that index. |
| - </p> |
| - </blockquote> |
| - |
| - <h3>Property Access Operators</h3> |
| - <p> |
| - Contrary to what the [<a href="conclusion.html#controls-normref">DOM 1</a>] |
| - specification states, the <code>[ ]</code> property access operator does not perform |
| - a typecheck. In ECMAScript, property access |
| - is performed with <code>obj[ <var>Expression</var> ]</code> or |
| - <code>obj . <var>Identifier</var></code>. |
| - </p> |
| - |
| - <h4>Property Access on a Form</h4> |
| - <p> |
| - When the named or indexed property is added to the form, |
| - there is no call to <code>item</code> or <code>namedItem</code>. The specification |
| - is wrong. |
| - </p> |
| - |
| - <p> |
| - When the property access operator is used, the <code><var>Expression</var></code> is |
| - converted to a string with the internal <code>ToString</code>. |
| - The internal <code>ToString</code> method calls the object's <code>toString</code> |
| - property if it is an object or, if <code>toString</code> is not an object, the <code>valueOf</code> |
| - property is to be called (though results vary). |
| - </p> |
| - |
| - <h4>Property Access on a Form Example</h4> |
| - <p> |
| - The following example |
| - shows that with <code>form[ <var>Expression</var> ]</code>, |
| - the <code><var>Expression</var></code>, an <code>ObjectLiteral</code>, |
| - results in an Object. This object's <code>toString</code> method |
| - is called by the internal [[ToString]]. |
| - </p> |
| - |
| - <form action=""> |
| - <button name='test' onclick="this.nextSibling.data += eval(this.firstChild.data);return false" |
| - >this.form["0"] === this.form[ { toString : function(){ return 0; } } ]</button |
| - > |
| - </form> |
| - |
| - <p> |
| - The property access operator results in a call to the object's <code>toString</code> |
| - property and the resulting primitive value is converted to the string value <samp>"0"</samp>. |
| - </p> |
| - |
| - <p> |
| - Had the authors of the DOM specification ECMAScript bindings written some tests, |
| - they could have learned how this basic feature of property access works in ECMAScript. |
| - </p> |
| - |
| - <p> |
| - Accessing form controls from the <code>elements</code> collection reduces ambiguity |
| - in the code. Control names that may conflict with the collection's properties are limited to: |
| - <code>length</code>, <code>item</code>, <code>namedItem</code>, <code>tags</code>. |
| - The names <code>document</code>, and <code>window</code> are still unsafe. |
| - </p> |
| - |
| - <p> |
| - Accessing form controls from the <code>elements</code> collection is safe. There |
| - are fewer conflicting names and, unlike form-as-a-collection, <code>elements</code> |
| - is a live representation. |
| - </p> |
| - |
| - |
| - <div id="toc"> |
| - <h4>Table of Contents</h4> |
| - <ul class="pagination linkList"> |
| - <li><a href="./index.html">Introduction</a></li> |
| - <li>Extra Properties: <code>FORM</code> Elements</li> |
| - <li><a href="extra_props_document.html">Extra Properties: <code>document</code></a></li> |
| - <li><a href="extra_props_global.html">Extra Properties: <code>global</code></a></li> |
| - <li><a href="event_handler.html">Event Handler Scope</a></li> |
| - <li><a href="api_design.html">API Design?</a></li> |
| - <li><a href="unsafe_names.html">Unsafe Names</a></li> |
| - <li><a href="conclusion.html">Conclusion</a></li> |
| - </ul> |
| - </div> |
| - <ul id="nextLink" class="linkList"> |
| - <li> |
| - <span class="prev">Previous:</span> <a href="index.html">Introduction</a> |
| - </li> |
| - <li> |
| - <span class="next">Next:</span> <a href="extra_props_document.html">Extra Properties: <code>document</code></a> |
| - </li> |
| - </ul> |
| -</body> |
| -</html> |
| /cljs/names/extra_props.html |
| Property changes: |
| Deleted: svn:mime-type |
| ## -1 +0,0 ## |
| -text/plain |
| \ No newline at end of property |
| Index: cljs/names/form_override_change_name.html |
| =================================================================== |
| --- cljs/names/form_override_change_name.html (revision 45) |
| +++ cljs/names/form_override_change_name.html (nonexistent) |
| @@ -1,75 +0,0 @@ |
| -<!DOCTYPE HTML> |
| -<html lang="en"> |
| -<head> |
| - <title>Safe Form Controls</title> |
| - <style type="text/css"> |
| - input { font-size: 8px; font-family: courier new, monospace; padding: 0 } |
| - #pass { display: none; background : #0f0; } |
| - #fail { display: none; background : #F33; } |
| - </style> |
| -</head> |
| -<body> |
| -<h1>Test: 290 Names not to give a FORM Control</h1> |
| -<form name="length" action="fail" title="fail"> |
| -<input type="submit" /> |
| -</form> |
| -<pre id="pass">PASS - All Form Properties Replaced by an Element</pre> |
| -<pre id="fail">FAIL</pre> |
| -<pre> |
| -<script type='text/javascript' src="names.js"></script> |
| -<script type="text/javascript"> |
| -(function(){ |
| -var form = document.forms[0]; |
| -var input = form.elements[0]; |
| -var bugs = []; |
| - |
| -var actual, expected, msg, actualString; |
| - |
| -for(var i = names.length -1; i > 0; i--) { |
| - if(names[i] == names[i-1]) { |
| - alert("found duplicate: " + names[i]); |
| - break; |
| - } |
| - else { |
| - try{ |
| - input.name = names[i]; |
| - actual = form[names[i]]; |
| - if(actual != input) { |
| - msg = names[i]; |
| - if(actual.toString && actual.toString.tagName) |
| - actualString = actual.toString.tagName; |
| - else |
| - actualString = String(actual); |
| - msg += " found: " + (((actualString + " ("+typeof actual+")")) || "(missing)"); |
| - bugs[bugs.length] = msg; |
| - } |
| - } catch(x){ |
| - msg = "Error: " + x.message; |
| - } |
| - } |
| -} |
| -// can't use form.elements, form.getElementsByTagName, et c |
| -// because they were replaced by an input. |
| - |
| -if(bugs.length > 0) |
| - fail(bugs); |
| -else pass(); |
| - |
| -function fail(bugs) { |
| - var fail = document.getElementById('fail'); |
| - fail.firstChild.data += ': The following ' + bugs.length + |
| - ' form properties should have been an INPUT element:\n * ' + bugs.join('\n * '); |
| - fail.style.display = "inline-block"; |
| -} |
| - |
| -function pass() { |
| - var pass = document.getElementById('pass'); |
| - pass.style.display = "inline-block"; |
| -} |
| - |
| -//document.write(names.join("\n </li>\n<li>\n")); |
| -})(); |
| -</script> |
| -</pre> |
| -</body> |
| -</html> |
| /cljs/names/form_override_change_name.html |
| Property changes: |
| Deleted: svn:mime-type |
| ## -1 +0,0 ## |
| -text/plain |
| \ No newline at end of property |
| Index: cljs/names/index.html |
| =================================================================== |
| --- cljs/names/index.html (revision 45) |
| +++ cljs/names/index.html (nonexistent) |
| @@ -1,235 +0,0 @@ |
| -<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> |
| -<html lang="en"> |
| -<head> |
| - <title>Unsafe Names for HTML Form Controls</title> |
| - <meta http-equiv="content-type" content="text/html; charset=iso-8859-1"> |
| - <meta name="author" content="Garrett Smith"> |
| - <meta name="author-email" content="dhtmkitchen@gmail.com"> |
| - <link rel="stylesheet" href="../faq.css" type="text/css" media="all" charset="iso-8859-1"> |
| - <link rel="stylesheet" href="names.css" type="text/css" media="all" charset="iso-8859-1"> |
| - <link rel="Start" href="./"> |
| -</head> |
| -<body> |
| - <h1>Unsafe Names for HTML Form Controls</h1> |
| - |
| - <p> |
| - by Garrett Smith (<a href="http://www.dhtmlkitchen.com/">dhtmlkitchen.com</a>), |
| - edited by Frank Manno (<a href="http://www.frankmanno.com/">frankmanno.com</a>) |
| - with comments from David Mark, Richard Cornford, RobG, and Juriy Zaytsev. |
| - </p> |
| - <h2>Rich, Featureful Forms</h2> |
| - |
| - <p> |
| - An HTML <code>FORM</code> element, in most modern browsers, |
| - implements many interfaces and has a rich set of features. |
| - These features are exposed as properties of the form, such as |
| - <code>addEventListener</code>, <code>parentNode</code>, and |
| - <code>submit</code>. Browsers also add their own non-standard features |
| - such as <code>all</code>, <code>contentEditable</code>, or <code>spellcheck</code>. |
| - </p> |
| - |
| - <h3>Problem</h3> |
| - <p> |
| - Browsers add <code>name</code>s and <code>id</code>s of form |
| - controls as properties to the <code>FORM</code>. This results in |
| - the properties of the form being replaced. |
| - </p> |
| - <p> |
| - Browsers also may add <code>name</code>s |
| - and <code>id</code>'s of other elements as properties to |
| - <code>document</code>, and sometimes to the <code>global</code> |
| - object (or an object above the <code>global</code> object in scope). |
| - This non-standard behavior can result in replacement of |
| - properties on other objects. The problems it causes are discussed in detail. |
| - </p> |
| - |
| - <p> |
| - A problem occurs when a form control's <code>name</code> conflicts |
| - with the a property name of the <code>FORM</code> object. For example: |
| - </p> |
| - |
| - <h4>Simple Unsafe Name Example</h4> |
| - <pre> |
| -<form action=""> |
| - <input type="text" name="name"> |
| - <input type="submit" name="submit"> |
| -</form> |
| -</pre> |
| - |
| - <h5>Result</h5> |
| - <p> |
| - The element with <code>name="name"</code> replaces |
| - the value of the <code>FORM</code>'s <code>name</code> property. |
| - A similar type of conflict happens with the |
| - <code>FORM</code>'s <code>submit</code> method and the |
| - element with <code>name="submit'</code>. Which will win? |
| - </p> |
| - <p> |
| - In most cases, the form control wins and the <code>FORM</code>'s property is |
| - replaced to have the value of the form control, or, if more than |
| - one form control has that name, the <code>FORM</code>'s property is |
| - replaced with a <code>NodeList</code> containing those form controls. |
| - </p> |
| - <p> |
| - However, in some cases, the <code>FORM</code>'s property is <em>not</em> replaced |
| - to have the value of the form control with the same name. The examples in this page show that |
| - the result depends on the browser, the property, and how the control is added. |
| - </p> |
| - |
| - <h4>How is a Form Like a Collection?</h4> |
| - <p> |
| - The DOM 1 specification states: |
| - </p> |
| - <blockquote cite="http://www.w3.org/TR/REC-DOM-Level-1/level-one-html.html#ID-40002357"> |
| - <p> |
| - The <code>FORM</code> element encompasses behavior similar to a collection and an element. |
| - It provides direct access to the contained <code>input</code> elements as well as the |
| - attributes of the <code>FORM</code> element. [<a href="conclusion.html#controls-normref">DOM1</a>] |
| - </p> |
| - </blockquote> |
| - |
| - <p> |
| - <cite>"Similar to a collection?"</cite> |
| - <em>What</em> collection? Similar in what way? |
| - The only standardized feature that is <cite>"similar to a collection"</cite> is |
| - the <code>length</code> property. |
| - </p> |
| - |
| - <p> |
| - In most browsers, a form has direct access to all named form controls, |
| - (except for <code>input type="image"</code>), not just <code>input</code> elements. |
| - </p> |
| - <p> |
| - Accessing controls as named or indexed properties is not standardized by the w3c DOM specification. |
| - It is a holdover feature from Netscape Navigator that was copied by Internet Explorer |
| - and since copied by every other major browser vendor. |
| - </p> |
| - |
| - <h4>How the Nonstandard Form-as-a-Collection <em>Really</em> Works</h4> |
| - <p> |
| - Controls may be accessed directly off the form. |
| - </p> |
| - |
| - <p>Given the following form:</p> |
| - |
| - <pre> |
| -<form action=""> |
| - <input type="text" name="a"> |
| -</form> |
| -</pre> |
| - <p> |
| - The <code>input name="a"</code> may be retrieved in one of two ways, from the form |
| - or from the <code>elements</code> collection. |
| - </p> |
| - <h5>The elements Collection (standard)</h5> |
| - |
| - <pre> |
| - // Standard. |
| - document.forms[0].elements[0]; |
| - document.forms[0].elements.a; |
| -</pre> |
| - <p> |
| - The control may be accessed directly off the form: |
| - </p> |
| - <h5>Directly from the Form (nonstandard)</h5> |
| - <pre> |
| - // non-standard. |
| - document.forms[0][0]; |
| - document.forms[0].a; |
| -</pre> |
| - |
| - <h4>Side Effects</h4> |
| - <p> |
| - Accessing a named control directly off the form can have undesirable results. |
| - </p> |
| - <p> |
| - In a few browsers, removing a named control from the form will leave the named |
| - control as a property of the form. |
| - </p> |
| - <h5>Form-as-a-Collection Leak Example</h5> |
| - <p> |
| - This <a href="simple-leak-form-input.html">Simple leak</a> example shows |
| - that accessing a named element property directly from the <code>form</code> |
| - may cause the property to remain on the form, even after the element |
| - has been removed from the DOM. |
| - </p> |
| - <h5>Results</h5> |
| - <strong>Firefox 3, Safari 3</strong> |
| - <pre> |
| -foo: [object HTMLInputElement] |
| -bar: undefined |
| -elements.foo: undefined |
| -</pre> |
| - <strong>Opera 9.5, IE 6, Safari 2</strong> |
| - <pre> |
| -foo: undefined |
| -bar: undefined |
| -elements.foo: undefined |
| -</pre> |
| - |
| - <p> |
| - Similarly, when a named <code>FORM</code> element is removed from the <code>document</code> |
| - some browsers will keep that form name as a property of the <code>document</code>. |
| - Accessing named <code>FORM</code> controls as properties of the document is also nonstandard. |
| - </p> |
| - |
| - <h5>Standard</h5> |
| - <pre>document.forms.myform;</pre> |
| - <h5>Nonstandard</h5> |
| - <pre>document.myform;</pre> |
| - |
| - <p> |
| - A <code>form</code>'s indexed form control properties may also appear out of order. |
| - This behavior would not be compliant for the <code>elements</code> collection, |
| - it does not violate any standard for the form-as-a-collection (because |
| - there is no standard). |
| - </p> |
| - |
| - <p> |
| - Form-as-a-collection is unreliable and therefore should never be used. |
| - </p> |
| - |
| - <h3>The <code>elements</code> Collection</h3> |
| - <p> |
| - The <code>form.elements</code> collection |
| - provides programmers a safe place to access form controls. |
| - </p> |
| - |
| - <p> |
| - The <code>elements</code> collection contains the following properties: |
| - <code>length</code>, <code>item</code>, <code>namedItem</code>, plus an ordinal |
| - index property for each form control (excepting <code>input type="image"</code> controls). |
| - Some browsers also have a <code>tags</code> property on the <code>elements</code> collection. |
| - </p> |
| - |
| - <h4>The elements Collection is Live</h4> |
| - <p> |
| - When a form control is removed from the DOM, the <code>elements</code> collection |
| - is updated; however, the property will still remain on the form in some browsers |
| - (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=307415">Mozilla bug 307415</a>). |
| - </p> |
| - <h5>Element Removal Example</h5> |
| - <p> |
| - <a href="form_dom_removal.html">element removal example</a> |
| - </p> |
| - |
| - <div id="toc"> |
| - <h4>Table of Contents</h4> |
| - <ul class="pagination linkList"> |
| - <li>Introduction</li> |
| - <li><a href="extra_props.html">Extra Properties: <code>FORM</code> Elements</a></li> |
| - <li><a href="extra_props_document.html">Extra Properties: <code>document</code></a></li> |
| - <li><a href="extra_props_global.html">Extra Properties: <code>global</code></a></li> |
| - <li><a href="event_handler.html">Event Handler Scope</a></li> |
| - <li><a href="api_design.html">API Design?</a></li> |
| - <li><a href="unsafe_names.html">Unsafe Names</a></li> |
| - <li><a href="conclusion.html">Conclusion</a></li> |
| - </ul> |
| - </div> |
| - <ul id="nextLink" class="linkList"> |
| - <li> |
| - <span class="next">Next:</span> <a href="extra_props.html">Extra Properties: <code>FORM</code> Elements</a> |
| - </li> |
| - </ul> |
| -</body> |
| -</html> |
| /cljs/names/index.html |
| Property changes: |
| Deleted: svn:mime-type |
| ## -1 +0,0 ## |
| -text/plain |
| \ No newline at end of property |
| Index: cljs/names/callable_example.html |
| =================================================================== |
| --- cljs/names/callable_example.html (revision 45) |
| +++ cljs/names/callable_example.html (nonexistent) |
| @@ -1,59 +0,0 @@ |
| -<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" |
| - "http://www.w3.org/TR/html4/loose.dtd"> |
| -<html lang="en"> |
| -<head> |
| - <title>Callable HTMLCollection</title> |
| - <link rel="Start" href="./"> |
| - <link rev="Section" href="api_design.html"> |
| -</head> |
| -<body> |
| -<form action="" id="a" name="d"><input type="text"></form> |
| -<h3>Your Browser's Result:</h3> |
| -<pre id="callableResult">-</pre> |
| -<pre> |
| -<script type="text/javascript">(function(){ |
| -var f = document.forms, isCallable = true, |
| - callableResult = document.getElementById('callableResult'); |
| -try { |
| - f(0); |
| -} catch(ex) { |
| - isCallable = false; |
| -} |
| -if(!isCallable) { |
| - callableResult.firstChild.data = "form is not callable"; |
| -} else { |
| - callableResult.firstChild.data = |
| - ["typeof f " + "\""+ (typeof f) + "\"", |
| - "f('0') " + f('0'), |
| - "f('a') " + f('a'), |
| - "f('d') " + f('d')].join('\n'); |
| -} |
| -})();</script> |
| -</pre> |
| -<hr> |
| -<h3>Browser Results:</h3> |
| -Firefox |
| -<pre>form is not callable</pre> |
| -Opera 9 |
| -<pre> |
| -typeof f "object" |
| -f('0') [object HTMLFormElement] |
| -f('a') [object HTMLFormElement] |
| -f('d') [object HTMLFormElement] |
| -</pre> |
| -IE6, IE7, IE8 |
| -<pre> |
| -typeof f "object" |
| -f('0') [object] |
| -f('a') [object] |
| -f('d') [object] |
| -</pre> |
| -Safari |
| -<pre> |
| -typeof f "function" |
| -f('0') [object HTMLFormElement] |
| -f('a') [object HTMLFormElement] |
| -f('d') [object HTMLFormElement] |
| -</pre> |
| -</body> |
| -</html> |
| /cljs/names/callable_example.html |
| Property changes: |
| Deleted: svn:mime-type |
| ## -1 +0,0 ## |
| -text/plain |
| \ No newline at end of property |
| Index: cljs/backup/index.html |
| =================================================================== |
| --- cljs/backup/index.html (revision 45) |
| +++ cljs/backup/index.html (nonexistent) |
| @@ -1,2110 +0,0 @@ |
| -<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" |
| -"http://www.w3.org/TR/html4/strict.dtd"> |
| -<html lang="en"> |
| -<head> |
| -<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> |
| -<meta name="DCTERMS.language" scheme="RFC1766" content="en"> |
| -<meta name="DC.title" content="comp.lang.javascript Frequently Asked Questions"> |
| -<meta name="DCTERMS.subject" content="Frequently asked questions in the Usenet newsgroup comp.lang.javascript"> |
| -<meta name="DC.format" content="text/html"> |
| -<meta name="DC.type" content="Text"> |
| -<meta name="DC.creator" content="Jim Ley"> |
| -<meta name="DC.publisher" content="Garrett Smith"> |
| -<META name="DC.Publisher.Address" content="dhtmlkitchen@gmail.com"> |
| -<meta name="DCTERMS.modified" content="2010-10-08"> |
| -<meta name="DCTERMS.audience" content="Programmers, web developers"> |
| -<meta name="DC.description" content="Javascript Frequently Asked Questions"> |
| -<meta name="DC.identifier" content="http://jibbering.com/faq"> |
| -<meta name="DC.source" content="http://www.ecma-international.org/publications/standards/Ecma-262.htm"> |
| -<meta name="DC.source" content="news:comp.lang.javascript"> |
| -<meta name="DC.source" content="https://developer.mozilla.org/en/JavaScript"> |
| -<meta name="DC.source" content="http://msdn.microsoft.com/en-us/library/hbxc2t98%28VS.85%29.aspx"> |
| -<meta name="DC.source" content="http://msdn.microsoft.com/en-us/library/ms533050%28VS.85%29.aspx"> |
| -<meta name="DC.rights" content="copyright contributors, comp.lang.javascript"> |
| -<link rel="StyleSheet" href="faq.css" type="text/css" media="screen"> |
| -<title> comp.lang.javascript FAQ</title> |
| -</head> |
| - <body> |
| -<h1> comp.lang.javascript FAQ</h1> |
| -<p>Version 32.2, Updated 2010-10-08, by Garrett Smith</p><div id="nav"><a href="notes/">FAQ Notes</a></div> |
| -<ul id='faqList'> |
| -<li>1 <a href='#meta'>Meta-FAQ meta-questions</a> |
| - |
| -<ul> |
| -<li>1.1 <a href='#newsgroups'>Which newsgroups deal with javascript?</a></li> |
| -<li>1.2 <a href='#appropriateQuestions'>What questions are on-topic for comp.lang.javascript?</a></li> |
| -<li>1.3 <a href='#posting'>What should I do before posting to comp.lang.javascript?</a></li> |
| -<li>1.4 <a href='#noAnswer'>Why was my post not answered?</a></li> |
| -</ul></li><li>2 <a href='#tips'>Language Overview</a> |
| - |
| -<ul> |
| -<li>2.1 <a href='#ecma'>What is ECMAScript?</a></li> |
| -<li>2.2 <a href='#jScript'>What is JScript?</a></li> |
| -<li>2.3 <a href='#dom'>What is the Document Object Model (DOM)?</a></li> |
| -<li>2.4 <a href='#localization'>Internationalisation and Localisation in javascript</a></li> |
| -<li>2.5 <a href='#futureEcmaScript'>What does the future hold for ECMAScript?</a></li> |
| -</ul></li><li>3 <a href='#ecmascriptResources'>Javascript Resources</a> |
| - |
| -<ul> |
| -<li>3.1 <a href='#books'>What books are recommended for javascript?</a></li> |
| -<li>3.2 <a href='#onlineResources'>What online resources are available?</a></li> |
| -<li>3.3 <a href='#libraryResources'>Javascript Libraries</a></li> |
| -</ul></li><li>4 <a href='#functions'>Functions</a> |
| - |
| -<ul> |
| -<li>4.1 <a href='#scope'>What is (function(){ /*...*/ })() ?</a></li> |
| -<li>4.2 <a href='#functionStatement'>What is a function statement?</a></li> |
| -</ul></li><li>5 <a href='#dates'>Dates</a> |
| - |
| -<ul> |
| -<li>5.1 <a href='#formatDate'>How do I format a Date object with javascript?</a></li> |
| -<li>5.2 <a href='#parseDate'>How can I create a Date object from a String?</a></li> |
| -</ul></li><li>6 <a href='#numbers'>Numbers</a> |
| - |
| -<ul> |
| -<li>6.1 <a href='#formatNumber'>How do I format a Number as a String with exactly 2 decimal places?</a></li> |
| -<li>6.2 <a href='#binaryNumbers'>Why does simple decimal arithmetic give strange results?</a></li> |
| -<li>6.3 <a href='#parseIntBase'>Why does K = parseInt('09') set K to 0?</a></li> |
| -<li>6.4 <a href='#typeConvert'>Why does 1+1 equal 11? or How do I convert a string to a number?</a></li> |
| -<li>6.5 <a href='#randomNumber'>How do I generate a random integer from 1 to n?</a></li> |
| -</ul></li><li>7 <a href='#objects'>Objects</a> |
| - |
| -<ul> |
| -<li>7.1 <a href='#nativeObject'>What is a native object?</a></li> |
| -<li>7.2 <a href='#builtInObject'>What is a built-in object?</a></li> |
| -<li>7.3 <a href='#hostObject'>What is a host object?</a></li> |
| -<li>7.4 <a href='#eval'>When should I use eval?</a></li> |
| -<li>7.5 <a href='#propertyAccessAgain'>How do I access a property of an object using a string?</a></li> |
| -</ul></li><li>8 <a href='#strings'>Strings and RegExp</a> |
| - |
| -<ul> |
| -<li>8.1 <a href='#trimString'>How do I trim whitespace?</a></li> |
| -</ul></li><li>9 <a href='#domRef'>DOM and Forms</a> |
| - |
| -<ul> |
| -<li>9.1 <a href='#formControlAccess'>How do I get the value of a form control?</a></li> |
| -<li>9.2 <a href='#propertyAccess'>My element is named myselect[], how do I access it?</a></li> |
| -<li>9.3 <a href='#globalPollution'>Why doesn't the global variable "divId" always refer to the element with id="divId"?</a></li> |
| -<li>9.4 <a href='#updateContent'>How do I modify the content of the current page?</a></li> |
| -<li>9.5 <a href='#accessElementBeforeDefined'>Why does my code fail to access an element?</a></li> |
| -<li>9.6 <a href='#testCookie'>How can I see in javascript if a web browser accepts cookies?</a></li> |
| -</ul></li><li>10 <a href='#windows'>Windows and Frames</a> |
| - |
| -<ul> |
| -<li>10.1 <a href='#disableBackButton'>How can I disable the back button in a web browser?</a></li> |
| -<li>10.2 <a href='#frameRef'>How do I access a frame's content?</a></li> |
| -<li>10.3 <a href='#getWindowSize'>How do I find the size of the window?</a></li> |
| -<li>10.4 <a href='#isWindowOpen'>How do I check to see if a child window is open, before opening another?</a></li> |
| -<li>10.5 <a href='#printFrame'>Why does framename.print() not print the correct frame in IE?</a></li> |
| -<li>10.6 <a href='#windowClose'>How do I close a window and why does it not work on the first one?</a></li> |
| -<li>10.7 <a href='#permissionDenied'>Why do I get permission denied when accessing a frame/window?</a></li> |
| -<li>10.8 <a href='#setTimeout'>How do I make a 10 second delay?</a></li> |
| -<li>10.9 <a href='#printSettings'>How do I change print settings for window.print()?</a></li> |
| -<li>10.10 <a href='#changeBrowserDialog'>How do I change the confirm box to say yes/no or default to cancel?</a></li> |
| -<li>10.11 <a href='#fileDownload'>How do I prompt a "Save As" dialog for an accepted mime type?</a></li> |
| -<li>10.12 <a href='#modifyChrome'>How do I modify the current browser window?</a></li> |
| -<li>10.13 <a href='#target'>How do I POST a form to a new window?</a></li> |
| -<li>10.14 <a href='#openWindow'>How do I open a new window with javascript?</a></li> |
| -</ul></li><li>11 <a href='#ajaxRef'>Ajax and Server Communication</a> |
| - |
| -<ul> |
| -<li>11.1 <a href='#ajax'>What is Ajax?</a></li> |
| -<li>11.2 <a href='#downloadPage'>How do I download a page to a variable?</a></li> |
| -<li>11.3 <a href='#getServerVariable'>How do I get a jsp/php variable into client-side javascript?</a></li> |
| -<li>11.4 <a href='#sessionExpired'>How do I log-out a user when they leave my site?</a></li> |
| -<li>11.5 <a href='#runServerScript'>How do I run a server side script?</a></li> |
| -<li>11.6 <a href='#noCache'>How do I force a reload from the server/prevent caching?</a></li> |
| -<li>11.7 <a href='#ajaxCache'>Why is my Ajax page not updated properly when using an HTTP GET request in Internet Explorer?</a></li> |
| -</ul></li><li>12 <a href='#debugging'>Debugging</a> |
| - |
| -<ul> |
| -<li>12.1 <a href='#javascriptErrors'>How do I get my browser to report javascript errors?</a></li> |
| -</ul></li><li>13 <a href='#doNotTry'>Things not to attempt in a browser</a> |
| - |
| -<ul> |
| -<li>13.1 <a href='#detectBrowser'>How do I detect Opera/Safari/IE?</a></li> |
| -<li>13.2 <a href='#preventAccess'>How can I prevent access to a web page by using javascript?</a></li> |
| -<li>13.3 <a href='#hideSource'>How do I protect my javascript code?</a></li> |
| -<li>13.4 <a href='#disableRightClick'>How do I suppress a context menu (right-click menu)?</a></li> |
| -<li>13.5 <a href='#readFile'>How can I access the client-side filesystem?</a></li> |
| -<li>13.6 <a href='#javascriptURI'>I have <a href="javascript:somefunction()"> what ... ?</a></li> |
| -</ul></li><li>14 <a href='#comments'>Comments and Suggestions</a> |
| - |
| -<ul> |
| -<li>14.1 <a href='#FAQENTRY'>Why do some posts have <FAQENTRY> in them?</a></li> |
| -<li>14.2 <a href='#makeSuggestion'>How do I make a suggestion?</a></li> |
| -</ul></li></ul><div id='meta' class='section'><h2 id='FAQ1'>1 Meta-FAQ meta-questions</h2> |
| -<p> |
| - |
| -This is the <em>comp.lang.javascript</em> meta-FAQ, 32.2. The latest |
| -version is available at <a href="http://jibbering.com/faq/" >http://jibbering.com/faq/</a> in HTML form. |
| -</p> <p> |
| - |
| -Each day, one section of the FAQ is posted for review and questions, |
| -and as a reminder that the FAQ is available. |
| -</p> <p> |
| - |
| -For additional explanation and detail relating to some aspects |
| -of the FAQ, please see the |
| -<a href="notes/" >FAQ Notes</a>. |
| -It has been provided separately to avoid increasing the size of |
| -the FAQ to a point where it would be unreasonable to post it to |
| -the group. |
| -</p> <p> |
| - |
| -Code examples in this FAQ use <a href="http://jsdoctoolkit.org/" >JSDoc Toolkit</a> comments. |
| -</p> </div><div id='newsgroups' class='section'><h3 id='FAQ2_1'>1.1 Which newsgroups deal with javascript?</h3><p> |
| - |
| -The official Big 8 Usenet newsgroup dealing with javascript is |
| - <a href="news:comp.lang.javascript">comp.lang.javascript</a>. |
| -Some "language" hierarchies also have *.comp.lang.javascript groups. |
| - </p> <p> |
| - |
| -c.l.js is an unmoderated newsgroup. |
| - </p> </div> |
| -<div id='appropriateQuestions' class='section'><h3 id='FAQ2_2'>1.2 What questions are on-topic for comp.lang.javascript?</h3><p> |
| - |
| -The comp.lang.javascript newsgroup deals with ECMAScript |
| -languages, so any questions about JavaScript or JScript are |
| -welcome. However, the majority of questions sent to this group |
| -relates to javascript in a web browser. If you are experiencing |
| -issues with a particular browser, or the host is not a browser |
| -at all, please make this information clear. |
| - </p> <p> |
| - |
| -Javascript and Java are two completely different languages. |
| -Java questions should be asked in one of the comp.lang.java.* |
| -newsgroups; they are not appropriate for c.l.js (as Java and |
| -javascript are distinct programming languages with only |
| -superficial similarities due to sharing a C-like syntax and |
| -some of the characters in their names). |
| - </p> <p> |
| - |
| -Questions dealing with other scripting languages, such as |
| -VBScript, PerlScript or CGI scripting are also off-topic, |
| -as are HTML-only or CSS-only questions. |
| - </p> <p> |
| - |
| -Questions that are specific to Microsoft's JScript may also |
| -be appropriately asked at: |
| - <a href="news:microsoft.public.scripting.jscript">microsoft.public.scripting.jscript</a></p> <p> |
| - |
| -The comp.lang.javascript newsgroup charter is included in |
| -<a href="faq_notes/cljs_charter.html" >faq_notes/cljs_charter.html</a>. |
| - </p> </div> |
| -<div id='posting' class='section'><h3 id='FAQ2_3'>1.3 What should I do before posting to comp.lang.javascript?</h3><p> |
| - |
| -Before posting to c.l.js, you should read this document. |
| -You should also check the <a href="#onlineResources" >Resources section</a>. |
| - </p> |
| -<h4 id='ask'>How to Ask a Question</h4> |
| - |
| -<ul> |
| - <li> |
| -State your question clearly and concisely. |
| - </li> |
| - <li> |
| -Use the Subject: line to show the type of problem you have but |
| -include the question in the body as well. |
| - </li> |
| - <li> |
| -For a more detailed explanation of formatting, see |
| - <a href="notes/posting/" >"Posting Questions and Replies to comp.lang.javascript"</a>. |
| - </li></ul> |
| -<h4 id='reply'>Replying</h4> |
| - |
| -<ul> |
| - <li> |
| -Quote only relevant parts of earlier messages, and add your |
| -comments below each quoted section |
| -(<a href="http://www.ietf.org/rfc/rfc1855.txt" >FYI28/RFC1855</a>). |
| - </li> |
| - <li> |
| -Link to specific sections of the FAQ that are relevant. |
| - </li> |
| - <li> |
| -Avoid being unnecessarily rude, but do not complain about other rude posts. |
| - </li> |
| - <li> |
| -Don't quote signatures. |
| - </li></ul> |
| -<h4 id='postCode'>Posting Code</h4> |
| - |
| -<ul> |
| - <li> |
| -Remove everything that does not contribute to the problem (images, |
| -markup, other scripts, etc). |
| - </li> |
| - <li> |
| -Validate the HTML and CSS <a href="http://validator.w3.org/" >http://validator.w3.org/</a>, <a href="http://jigsaw.w3.org/css-validator/" >http://jigsaw.w3.org/css-validator/</a>. |
| - </li> |
| - <li> |
| -Make sure the code is executable as transmitted. |
| - </li> |
| - <li> |
| -Format lines to 72 characters; indent with 2-4 spaces (not tabs). |
| - </li> |
| - <li> |
| -State what you expect the code to do. |
| - </li> |
| - <li> |
| -Mention the platforms, browsers, and versions. |
| - </li> |
| - <li> |
| -See also the <a href="#debugging" >FAQ section on debugging</a>. |
| - </li> |
| - <li> |
| -Post in plain-text only. Do not encode it. Do not attach files. |
| - </li> |
| - <li> |
| -If the code is more than about 100 lines, provide a URL in addition. |
| - </li> |
| - <li> |
| -Do not multi-post; cross-post if necessary |
| -(<a href="http://en.wikipedia.org/wiki/Cross-post" >Wikipedia description</a>). |
| - </li></ul> |
| -<h4 id='doNotPost'>What Not to Post</h4> |
| - |
| -<ul> |
| - <li> |
| -Do not post job postings. Job postings should go to |
| -an appropriate regional jobs group. |
| - </li> |
| - <li> |
| -Do not post copyright material without permission |
| -from the copyright holder. |
| - </li></ul><p> |
| - |
| -Relevant announcements are welcome, but no more often than once |
| -per major release, as a short link to the product's webpage. |
| - </p> </div> |
| -<div id='noAnswer' class='section'><h3 id='FAQ2_4'>1.4 Why was my post not answered?</h3><p> |
| - |
| -This could be for several reasons: |
| - </p> |
| -<ul> <li> |
| -It was a variation of a frequently asked question and was |
| -therefore ignored by everyone. |
| - </li> |
| -<li> |
| -Nobody knows the answer. |
| - </li> |
| -<li> |
| -The person with the answer has not seen the post. |
| - </li> |
| -<li> |
| -It might not be possible to do what you want to do but perhaps |
| -readers of c.l.js are reluctant to answer your post in the negative |
| -when they are not convinced that it cannot be done. |
| - </li> |
| -<li> |
| -The question was not asked clearly enough, or did not included |
| -enough information to be answered. |
| - </li> |
| -<li> |
| -The questioner did not realise the need to read the group, for a |
| -few days, to see the answers posted there. |
| - </li> |
| -<li> You ignored the <a href="#posting" >section on posting</a> </li> |
| -</ul> |
| -<p> |
| -If it is not one of these, then after a few days consider |
| -reposting after checking <a href="http://groups.google.com/group/comp.lang.javascript/topics" >http://groups.google.com/group/comp.lang.javascript/topics</a> |
| -for replies. Make sure the post is phrased well, and everything |
| -needed to answer is correct, and the subject is appropriate. |
| - </p> </div> |
| -<div id='tips' class='section'><h2 id='FAQ2'>2 Language Overview</h2> |
| -</div><div id='ecma' class='section'><h3 id='FAQ2_6'>2.1 What is ECMAScript?</h3><p> |
| - <a href="http://www.ecma-international.org/publications/standards/Ecma-262.htm" >ECMA-262</a> |
| -is the international standard that current language implementations |
| -(JavaScript™, JScript etc.) are based on. |
| - |
| - </p> <p> |
| - <a href="http://www.ecma-international.org/publications/standards/Ecma-262.htm" >ECMA-262</a> |
| -defines the language Syntax, Types, Keywords, Operators, and built-in |
| -objects. The ECMAScript specification is the reference to determine the |
| -expected behavior of a program. ECMAScript does not define any host |
| -objects, such as <code>document</code>, <code>window</code>, or <code>ActiveXObject</code>. |
| - </p> <p> |
| - |
| -ECMA-327 defines the Compact Profile of ECMAScript by |
| -describing the features from ECMA 262 that may be omitted in some |
| -resource-constrained environments. |
| -<a href="http://www.ecma-international.org/publications/standards/Ecma-327.htm" >http://www.ecma-international.org/publications/standards/Ecma-327.htm</a></p> <p> |
| - |
| -The most widely supported edition of ECMA-262 is the 3rd edition (1999). |
| -There is fair support for this edition in JScript 5.5+ (buggy) and good |
| -support JavaScript 1.5. |
| -</p> <p> |
| - |
| -The term "javascript" is used as a common name for all dialects of ECMAScript. |
| - </p> </div> |
| -<div id='jScript' class='section'><h3 id='FAQ2_7'>2.2 What is JScript?</h3><p> |
| - |
| -JScript is Microsoft's implementation of ECMAScript. |
| - </p> <p> |
| - |
| -Questions that are specific to Microsoft's JScript may also |
| -be appropriately asked at: |
| - <a href="news:microsoft.public.scripting.jscript">microsoft.public.scripting.jscript</a>. |
| - </p> </div> |
| -<div id='dom' class='section'><h3 id='FAQ2_9'>2.3 What is the Document Object Model (DOM)?</h3><p> |
| - |
| -The |
| -<dfn>Document Object Model</dfn> (DOM) is a interface-based model for <code>Document</code> |
| -objects. The DOM allows scripts to dynamically access and update a |
| -document's content, style, and event handlers. |
| -</p> <p> |
| - |
| -The DOM is <em>not</em> part of the ECMAScript programming language. |
| -</p> <p> |
| - |
| -Official DOM standards are defined by the World Wide Web Consortium. |
| -Scriptable browsers also have |
| -<dfn>proprietary</dfn> DOM features (<a href="http://msdn.microsoft.com/en-us/library/ms533050(VS.85).aspx" >MSDN</a>, <a href="https://developer.mozilla.org/en/DOM_Client_Object_Cross-Reference" >MDC</a>), |
| -such as <code>document.writeln()</code>. |
| - </p> <p> |
| - |
| -Also see the section on <a href="#domRef" >DOM and Forms</a>. |
| -</p><ul class='linkList'><li><a href="#onlineResources" >c.l.js DOM Resources</a></li> |
| -<li><a href="http://www.w3.org/DOM/faq.html" >W3C DOM FAQ</a></li> |
| -<li><a href="http://www.w3.org/DOM/" >W3C DOM </a></li> |
| -<li><a href="https://developer.mozilla.org/en/Gecko_DOM_Reference/Introduction#What_is_the_DOM.3F" >MDC: What is the DOM?</a></li> |
| -</ul> </div> |
| -<div id='localization' class='section'><h3 id='FAQ2_10'>2.4 Internationalisation and Localisation in javascript</h3><p> |
| - |
| -<dfn>Internationalisation</dfn> means using one form which is everywhere both |
| -acceptable and understood. Any international standard not supported by |
| -default can be coded for. |
| - </p> <p> |
| - |
| -For example, there is an International Standard for numeric Gregorian |
| -date format; but none for decimal and thousands separators. |
| - </p> <p> |
| - |
| -<dfn>Localisation</dfn> is the process of adapting software for a specific region |
| -or language by adding locale-specific components and translating text. It |
| -cannot work well in general, because it requires a knowledge of all |
| -preferences and the ability to choose the right one, in an environment |
| -where many systems are inappropriately set anyway. |
| - </p> <p> |
| - |
| -ECMAScript has a few |
| -<dfn>localisation</dfn> features. The various |
| -<code>toString()</code> methods are all implementation dependent, |
| -but tend to use either UK or US settings (not necessarily correctly). |
| -ECMAScript Ed. 3 introduced some capabilities, including the |
| -<code>toLocaleString()</code>method which should create a string |
| -based on the host's locale. |
| - </p> <p> |
| - |
| -ECMAScript 5th Edition introduces limited ISO 8601 capabilities with |
| -<code>Date.prototype.toISOString()</code> and new behavior for <code>Date.parse()</code>. |
| -</p> </div> |
| -<div id='futureEcmaScript' class='section'><h3 id='FAQ2_12'>2.5 What does the future hold for ECMAScript?</h3><p> |
| - |
| -The 5th edition of ECMAScript was approved on 2009-12-04. There is some |
| -support in implementations released before approval date (JScript 5.8, |
| -JavaScript 1.8, JavaScriptCore). |
| -http://www.ecma-international.org/publications/standards/Ecma-262.htm |
| -</p><ul class='linkList'><li><a href="http://www.ecma-international.org/publications/standards/Ecma-262.htm" >http://www.ecma-international.org/publications/standards/Ecma-262.htm</a></li> |
| -</ul> </div> |
| -<div id='ecmascriptResources' class='section'><h2 id='FAQ3'>3 Javascript Resources</h2> |
| -</div><div id='books' class='section'><h3 id='FAQ3_1'>3.1 What books are recommended for javascript?</h3><p> |
| - |
| -Most javascript books have been found to contain so many technical |
| -errors that consensus recommendations have not emerged from the group. |
| - </p> <p> |
| - |
| -The following books have been considered to have value by some |
| -individuals on c.l.js. The reviews of these books are provided: |
| - </p> |
| -<ul> |
| - <li> <em>"JavaScript: The Definitive Guide,"</em> 5th Edition, by David Flanagan |
| - |
| -<ul> <li> Published: 2006-08 </li> |
| -<li> Pages: 1018 </li> |
| -<li> Errata: <a href="http://oreilly.com/catalog/9780596101992/errata/" >http://oreilly.com/catalog/9780596101992/errata/</a> </li> |
| -<li> Discussed in: |
| - |
| -<ul> <li> <a href="http://groups.google.com/group/comp.lang.javascript/browse_thread/thread/7283898f77fd2a66/9252aa024e058dea#c5f145ae807c918e" >FAQ Update 9.85 Dated 2007-08-31</a> </li> |
| -</ul> |
| - </li> |
| -</ul> |
| - </li> |
| - <li> <em>"JavaScript, The Good Parts,"</em> 1st Edition, by Douglas Crockford |
| - |
| -<ul> <li> Published: 2008-05 </li> |
| -<li> Pages: 170 </li> |
| -<li> Errata: <a href="http://oreilly.com/catalog/9780596517748/errata/" >http://oreilly.com/catalog/9780596517748/errata/</a> </li> |
| -<li> Discussed in: |
| - |
| -<ul> <li> <a href="http://groups.google.com/group/comp.lang.javascript/browse_thread/thread/d084d2109f7b4ec7#" >Crockford's 'The Good Parts': a short review</a> </li> |
| -<li> <a href="http://groups.google.com/group/comp.lang.javascript/browse_thread/thread/db1e49ab113aa05c/3987eac87ad27966#3987eac87ad27966" >FunctionExpression's and memory consumptions</a> </li> |
| -<li> <a href="http://groups.google.com/group/comp.lang.javascript/browse_thread/thread/6a41f7835ee728de/da5ccfc65e2df64a#da5ccfc65e2df64a" >FAQ Topic - What books are recommended for javascript? (2008-12-02)</a> </li> |
| -<li> <a href="http://groups.google.com/group/comp.lang.javascript/browse_thread/thread/3a08fb741525ab6d/" >Augmenting functions</a> </li> |
| -<li> <a href="http://groups.google.com/group/comp.lang.javascript/browse_thread/thread/bf26be6e63494ee2/acb733a1c35f6ce5#ee9e4ee29e658d5d" >Crockford's JavaScript, The Good Parts (a book review).</a> </li> |
| -<li> <a href="http://groups.google.com/group/comp.lang.javascript/browse_thread/thread/df602506ee48b400/e65e00f5cad07676#e65e00f5cad07676" >Closures Explained</a> </li> |
| -<li> <a href="http://groups.google.com/group/comp.lang.javascript/browse_thread/thread/acadf1b22b219433/4f69a95607d0b3ae#4f69a95607d0b3ae" >Javascript library development</a> </li> |
| -</ul> |
| - </li> |
| -</ul> |
| - </li></ul></div> |
| -<div id='onlineResources' class='section'><h3 id='FAQ3_2'>3.2 What online resources are available?</h3> |
| -<h4 id='ecmaResources'>ECMAScript</h4> |
| - |
| -<dl> |
| - <dt> |
| -The Official ECMAScript Specification |
| - </dt> |
| - <dd> <a href="[ECMA-262] http://www.ecma-international.org/publications/standards/Ecma-262-arch.htm" >[ECMA-262] http://www.ecma-international.org/publications/standards/Ecma-262-arch.htm</a> </dd> |
| - <dt> |
| -[ISO16262] ISO/IEC 16262, Second Edition 2002-06-01 : ISO Standard matching |
| -ECMA-262 3rd Edition, with corrections. |
| - </dt> |
| - <dd> <a href="http://standards.iso.org/ittf/PubliclyAvailableStandards/c033835_ISO_IEC_16262_2002(E).zip" >http://standards.iso.org/ittf/PubliclyAvailableStandards/c033835_ISO_IEC_16262_2002(E).zip</a> </dd> |
| - <dt> |
| - [MS-ES3]: Internet Explorer ECMA-262 ECMAScript Language Specification Standards Support |
| - </dt> |
| - <dd> <a href="http://msdn.microsoft.com/en-us/library/ff520996%28VS.85%29.aspx" >http://msdn.microsoft.com/en-us/library/ff520996%28VS.85%29.aspx</a> </dd> |
| - <dd> <a href="res/%5BMS-ES3%5D.pdf" >res/%5BMS-ES3%5D.pdf</a> (local alias) </dd> |
| - <dt> |
| - [MS-ES3EX]: Microsoft JScript Extensions to the ECMAScript Language Specification Third Edition |
| - </dt> |
| - <dd> <a href="http://msdn.microsoft.com/en-us/library/ff521046%28VS.85%29.aspx" >http://msdn.microsoft.com/en-us/library/ff521046%28VS.85%29.aspx</a> </dd> |
| - <dd> <a href="res/%5BMS-ES3EX%5D.pdf" >res/%5BMS-ES3EX%5D.pdf</a> (local alias) </dd> |
| - <dt> ECMAScript on Wikipedia |
| - </dt> |
| - <dd> <a href="http://en.wikipedia.org/wiki/ECMAScript" >http://en.wikipedia.org/wiki/ECMAScript</a> </dd></dl> |
| -<h4 id='domResources'>W3C DOM</h4> |
| - |
| -<dl> |
| - <dt> |
| -DOM Level 1 ECMAScript Binding |
| - </dt> |
| - <dd> <a href="http://www.w3.org/TR/REC-DOM-Level-1/ecma-script-language-binding.html" >http://www.w3.org/TR/REC-DOM-Level-1/ecma-script-language-binding.html</a> </dd> |
| - <dt> |
| -DOM Level 2 ECMAScript Binding |
| - </dt> |
| - <dd> <a href="http://www.w3.org/TR/DOM-Level-2-HTML/ecma-script-binding.html" >http://www.w3.org/TR/DOM-Level-2-HTML/ecma-script-binding.html</a> </dd> |
| - <dt> |
| -DOM Level 2 Events |
| - </dt> |
| - <dd> <a href="http://www.w3.org/TR/DOM-Level-2-Events/events.html" >http://www.w3.org/TR/DOM-Level-2-Events/events.html</a> </dd> |
| - <dt> |
| -DOM Level 2 Style |
| - </dt> |
| - <dd> <a href="http://www.w3.org/TR/DOM-Level-2-Style/" >http://www.w3.org/TR/DOM-Level-2-Style/</a> </dd> |
| - <dt> |
| -DOM Level 3 ECMAScript Binding |
| - </dt> |
| - <dd> <a href="http://www.w3.org/TR/DOM-Level-3-Core/ecma-script-binding.html" >http://www.w3.org/TR/DOM-Level-3-Core/ecma-script-binding.html</a> </dd></dl> |
| -<h4 id='browserResources'>Browser Documentation</h4> |
| - |
| -<dl> |
| - <dt> |
| -Mozilla |
| - </dt> |
| - <dd> JavaScript: |
| -<a href="http://developer.mozilla.org/en/docs/JavaScript" >http://developer.mozilla.org/en/docs/JavaScript</a> </dd> |
| - <dd> Gecko DOM Reference: |
| -<a href="http://developer.mozilla.org/en/docs/Gecko_DOM_Reference" >http://developer.mozilla.org/en/docs/Gecko_DOM_Reference</a> </dd> |
| - <dt> |
| -Microsoft |
| - </dt> |
| - <dd> HTML and DHTML Reference: |
| -<a href="http://msdn.microsoft.com/en-us/library/ms533050.aspx" >http://msdn.microsoft.com/en-us/library/ms533050.aspx</a> </dd> |
| - <dd> JScript Language Reference: |
| -<a href="http://msdn.microsoft.com/en-us/library/hbxc2t98%28VS.85%29.aspx" >http://msdn.microsoft.com/en-us/library/hbxc2t98%28VS.85%29.aspx</a> </dd> |
| - <dd> Scripting: |
| -<a href="http://msdn.microsoft.com/en-us/library/ms950396.aspx" >http://msdn.microsoft.com/en-us/library/ms950396.aspx</a> </dd> |
| - <dt> |
| -Opera |
| - </dt> |
| - <dd> Web Specifications Support: |
| -<a href="http://www.opera.com/docs/specs/#ecmascript" >http://www.opera.com/docs/specs/#ecmascript</a> </dd> |
| - <dd> JavaScript Support: |
| -<a href="http://www.opera.com/docs/specs/js/" >http://www.opera.com/docs/specs/js/</a> </dd> |
| - <dd> ECMAScript Support: |
| -<a href="http://www.opera.com/docs/specs/js/ecma" >http://www.opera.com/docs/specs/js/ecma</a> </dd> |
| - <dt> |
| -BlackBerry JavaScript Reference |
| - </dt> |
| - <dd> <a href="http://docs.blackberry.com/en/developers/deliverables/11849/" >http://docs.blackberry.com/en/developers/deliverables/11849/</a> </dd> |
| - <dt> |
| -ICab InScript |
| - </dt> |
| - <dd> <a href="http://www.muchsoft.com/inscript/" >http://www.muchsoft.com/inscript/</a> </dd> |
| - <dt> Apple Safari </dt> |
| - <dd> Web Content Guide: |
| -<a href="http://developer.apple.com/safari/library/documentation/AppleApplications/Reference/SafariWebContent/Introduction/Introduction.html" >http://developer.apple.com/safari/library/documentation/AppleApplications/Reference/SafariWebContent/Introduction/Introduction.html</a> </dd> |
| - <dt> |
| -Webkit |
| - </dt> |
| - <dd> Project Site: <a href="http://webkit.org/" >http://webkit.org/</a> </dd> |
| - <dd> |
| - Wiki: <a href="http://trac.webkit.org/wiki" >http://trac.webkit.org/wiki</a> </dd> |
| - <dd> DOM Reference: |
| -<a href="http://developer.apple.com/Mac/library/documentation/AppleApplications/Reference/WebKitDOMRef/index.html#//apple_ref/doc/uid/TP40006089" >http://developer.apple.com/Mac/library/documentation/AppleApplications/Reference/WebKitDOMRef/index.html#//apple_ref/doc/uid/TP40006089</a> </dd> |
| - <dt> |
| -Netscape 4 Client-Side JavaScript Reference |
| - </dt> |
| - <dd> <a href="http://docs.sun.com/source/816-6408-10/" >http://docs.sun.com/source/816-6408-10/</a> </dd> |
| - <dt> |
| -Archived documentation for MSIE 3.x |
| - </dt> |
| - <dd> <a href="http://members.tripod.com/%7Ehousten/download/" >http://members.tripod.com/%7Ehousten/download/</a> </dd></dl> |
| -<h4 id='standaloneImplementations'>Standalone ECMAScript Implementations</h4> |
| - |
| -<dl> |
| - <dt> |
| -Rhino: An open-source implementation of JavaScript written in Java |
| - </dt> |
| - <dd> <a href="http://www.mozilla.org/rhino/" >http://www.mozilla.org/rhino/</a> </dd> |
| - <dt> |
| -Besen IDE: ECMAScript Edition 5 with IDE |
| - </dt> |
| - <dd> <a href="http://besen.sourceforge.net/" >http://besen.sourceforge.net/</a> </dd> |
| - <dt> |
| -V8: Google's open source JavaScript engine |
| - </dt> |
| - <dd> <a href="http://code.google.com/p/v8/" >http://code.google.com/p/v8/</a> </dd> |
| - <dt> |
| -SpiderMonkey: Mozilla's C implementation of JavaScript |
| - </dt> |
| - <dd> <a href="http://www.mozilla.org/js/spidermonkey/" >http://www.mozilla.org/js/spidermonkey/</a> </dd> |
| - <dt> |
| -Digital Mars DMD Script, console and MS Active Script implementation of ECMAScript |
| - </dt> |
| - <dd> <a href="http://www.digitalmars.com/dscript/" >http://www.digitalmars.com/dscript/</a> </dd></dl> |
| -<h4 id='nonBrowserResources'>Other ECMAScript Implementations</h4> |
| - |
| -<dl> |
| - <dt> |
| -Developing Dashboard Widgets: Apple Developer Connection |
| - </dt> |
| - <dd> <a href="http://developer.apple.com/macosx/dashboard.html" >http://developer.apple.com/macosx/dashboard.html</a> </dd> |
| - <dt> |
| -Whitebeam Apache Module: Server Side JavaScript in Apache |
| - </dt> |
| - <dd> <a href="http://www.whitebeam.org/" >http://www.whitebeam.org/</a> </dd></dl></div> |
| -<div id='libraryResources' class='section'><h3>3.3 Javascript Libraries</h3><p> |
| - |
| -No javascript libraries are endorsed by this group. If you want help |
| -with using a library, visit that library's discussion group instead. |
| - </p> </div> |
| -<div id='functions' class='section'><h2>4 Functions</h2> |
| -</div><div id='scope' class='section'><h3>4.1 What is (function(){ /*...*/ })() ?</h3><p> |
| - |
| -This is an anonymous |
| -<dfn>FunctionExpression</dfn> that is called |
| -immediately after creation. |
| -</p> <p> |
| - |
| -Variables declared inside a function are not accessible from |
| -outside the function. This can be useful, for example, to hide |
| -implementation details or to avoid polluting the global scope. |
| -</p><ul class='linkList'><li><a href="http://yura.thinkweb2.com/named-function-expressions/" >http://yura.thinkweb2.com/named-function-expressions/</a></li> |
| -<li><a href="notes/closures/" >notes/closures/</a></li> |
| -<li><a href="http://dmitrysoshnikov.com/ecmascript/chapter-5-functions/#question-about-surrounding-parentheses" >http://dmitrysoshnikov.com/ecmascript/chapter-5-functions/#question-about-surrounding-parentheses</a></li> |
| -</ul> </div> |
| -<div id='functionStatement' class='section'><h3>4.2 What is a function statement?</h3><p> |
| - |
| -The term |
| -<dfn>function statement</dfn> has been widely and wrongly used to |
| -describe a <code>FunctionDeclaration</code>. This is misleading because in ECMAScript, |
| -a <code>FunctionDeclaration</code> is not a |
| -<dfn>Statement</dfn>; there are places in a program |
| -where a |
| -<dfn>Statement</dfn> is permitted but a <code>FunctionDeclaration</code> is not. To add |
| -to this confusion, some implementations, notably Mozillas', provide a |
| -syntax extension called |
| -<dfn>function statement</dfn>. This is allowed under |
| -section 16 of ECMA-262, Editions 3 and 5. |
| -</p> <p> |
| - |
| -Example of nonstandard |
| -<dfn>function statement</dfn>: |
| -</p> |
| -<pre> |
| -// Nonstandard syntax, found in GMail source code. DO NOT USE. |
| -try { |
| - // FunctionDeclaration not allowed in Block. |
| - function Fze(b,a){return b.unselectable=a} |
| - /*...*/ |
| -} catch(e) { _DumpException(e) } |
| -</pre> |
| - <p> |
| - |
| -Code that uses |
| -<dfn>function statement</dfn> has three known interpretations. Some |
| -implementations process <code>Fze</code> as a |
| -<dfn>Statement</dfn>, in order. Others, including |
| -JScript, evaluate <code>Fze</code> upon entering the execution context that it |
| -appears in. Yet others, notably DMDScript and default configuration of BESEN, |
| -throw a <code>SyntaxError</code>. |
| -</p> <p> |
| - |
| -For consistent behavior across implementations, <em>do not use function |
| -statement</em>; use either <code>FunctionExpression</code> or <code>FunctionDeclaration</code> instead. |
| -</p> <p> |
| - |
| -Example of <code>FunctionExpression</code> (valid): |
| -</p> |
| -<pre> |
| -var Fze; |
| -try { |
| - Fze = function(b,a){return b.unselectable=a}; |
| - /*...*/ |
| -} catch(e) { _DumpException(e) } |
| -</pre> |
| -<p> |
| -Example of <code>FunctionDeclaration</code> (valid): |
| -</p> |
| -<pre> |
| -// Program code |
| -function aa(b,a){return b.unselectable=a} |
| -</pre> |
| - <p> |
| - <!-- |
| -Notable examples of the misuse of the term "function statement" |
| -can be seen in David Flanagan's "JavaScript: The Definitive Guide", |
| -Douglas Crockford's "JavaScript: The Good Parts", MDC documentation, |
| -JSLint error messages. |
| ---></p><ul class='linkList'><li><a href="example/functionStatement.html" >example/functionStatement.html</a></li> |
| -<li><a href="https://mail.mozilla.org/pipermail/es-discuss/2008-February/005314.html" >https://mail.mozilla.org/pipermail/es-discuss/2008-February/005314.html</a></li> |
| -<li><a href="http://groups.google.com/group/comp.lang.javascript/msg/aa9a32d0c6ae0342" >http://groups.google.com/group/comp.lang.javascript/msg/aa9a32d0c6ae0342</a></li> |
| -<li><a href="http://groups.google.com/group/comp.lang.javascript/msg/3987eac87ad27966" >http://groups.google.com/group/comp.lang.javascript/msg/3987eac87ad27966</a></li> |
| -<li><a href="http://nanto.asablo.jp/blog/2005/12/10/172622" >http://nanto.asablo.jp/blog/2005/12/10/172622</a></li> |
| -<li> (Article in Japanese) |
| -</li> |
| -</ul> </div> |
| -<div id='dates' class='section'><h2>5 Dates</h2> |
| -<p> |
| - |
| -ISO 8601 defines date and time formats. Some benefits include: |
| -</p> |
| -<ul> |
| - <li> language-independent and unambiguous world-wide </li> |
| - <li> sortable with a trivial string comparison </li> |
| - <li> easily readable and writable by software </li> |
| - <li> compatible with standards ISO 9075 and <a href="http://www.ietf.org/rfc/rfc3339.txt" >rfc 3339</a> </li></ul><p> |
| - |
| -The ISO Extended format for common date is <code>YYYY-MM-DD</code>, and for time is |
| -<code>hh:mm:ss</code>. |
| -</p> <p> |
| - |
| -For an event with an offset from UTC, use <code>YYYY-MM-DDThh:mm:ss±hh:mm</code>. |
| -</p> <p> |
| - |
| -Never use a local date/time format for a non-local event. Instead, use |
| -UTC, as in <code>YYYY-MM-DDThh:mm:ssZ</code> (<code>Z</code> is the only letter suffix). |
| -</p> <p> |
| - |
| -The <code>T</code> can be omitted where that would not cause ambiguity. For |
| -rfc 3339 compliance, it may be replaced by a space and for SQL, |
| -it <em>must</em> be replaced by a single space. |
| -</p> <p> |
| - |
| -Year <code>0000</code> is unrecognized by some formats (XML Schema, <code>xs:date</code>). |
| - </p><ul class='linkList'><li><a href="#onlineResources" >ECMA-262 Date.prototype, s. 15.9</a></li> |
| -<li><a href="http://www.cl.cam.ac.uk/~mgk25/iso-time.html" >A summary of the international standard date and time notation, by Markus Kuhn</a></li> |
| -<li><a href="http://en.wikipedia.org/wiki/ISO_8601" >http://en.wikipedia.org/wiki/ISO_8601</a></li> |
| -<li><a href="res/ISO_8601-2004_E.pdf" >ISO 8601:2004(E)</a></li> |
| -<li><a href="http://www.w3.org/QA/Tips/iso-date" >W3C QA Tip: Use international date format (ISO)</a></li> |
| -<li><a href="http://www.ietf.org/rfc/rfc3339.txt" >RFC 3339, Date and Time on the Internet: Timestamps |
| -</a></li> |
| -<li><a href="http://www.w3.org/TR/xmlschema-2/#dateTime" >http://www.w3.org/TR/xmlschema-2/#dateTime</a></li> |
| -</ul> </div><div id='formatDate' class='section'><h3 id='FAQ4_30'>5.1 How do I format a Date object with javascript?</h3><p> |
| - |
| -A local <code>Date</code> object where <code>0 <= year <= 9999</code> can be |
| -formatted to a common ISO 8601 format <code>YYYY-MM-DD</code> with:- |
| - </p> |
| -<pre> |
| - /** Formats a Date to YYYY-MM-DD (local time), compatible with both |
| - * ISO 8601 and ISO/IEC 9075-2:2003 (E) (SQL 'date' type). |
| - * @param {Date} dateInRange year 0000 to 9999. |
| - * @throws {RangeError} if the year is not in range |
| - */ |
| - function formatDate(dateInRange) { |
| - var year = dateInRange.getFullYear(), |
| - isInRange = year >= 0 && year <= 9999, yyyy, mm, dd; |
| - if(!isInRange) { |
| - throw RangeError("formatDate: year must be 0000-9999"); |
| - } |
| - yyyy = ("000" + year).slice(-4); |
| - mm = ("0" + (dateInRange.getMonth() + 1)).slice(-2); |
| - dd = ("0" + (dateInRange.getDate())).slice(-2); |
| - return yyyy + "-" + mm + "-" + dd; |
| - } |
| - </pre> |
| -<ul class='linkList'><li><a href="http://www.merlyn.demon.co.uk/js-date9.htm" >http://www.merlyn.demon.co.uk/js-date9.htm</a></li> |
| -</ul> </div> |
| -<div id='parseDate' class='section'><h3>5.2 How can I create a Date object from a String?</h3><p> |
| - |
| -An Extended ISO 8601 local Date format <code>YYYY-MM-DD</code> can be parsed to a |
| -Date with the following:- |
| -</p> |
| -<pre> |
| - /**Parses string formatted as YYYY-MM-DD to a Date object. |
| - * If the supplied string does not match the format, an |
| - * invalid Date (value NaN) is returned. |
| - * @param {string} dateStringInRange format YYYY-MM-DD, with year in |
| - * range of 0000-9999, inclusive. |
| - * @return {Date} Date object representing the string. |
| - */ |
| - function parseISO8601(dateStringInRange) { |
| - var isoExp = /^\s*(\d{4})-(\d\d)-(\d\d)\s*$/, |
| - date = new Date(NaN), month, |
| - parts = isoExp.exec(dateStringInRange); |
| - |
| - if(parts) { |
| - month = +parts[2]; |
| - date.setFullYear(parts[1], month - 1, parts[3]); |
| - if(month != date.getMonth() + 1) { |
| - date.setTime(NaN); |
| - } |
| - } |
| - return date; |
| - }</pre> |
| - </div> |
| -<div id='numbers' class='section'><h2>6 Numbers</h2> |
| -</div><div id='formatNumber' class='section'><h3 id='FAQ4_6'>6.1 How do I format a Number as a String with exactly 2 decimal places?</h3><p> |
| - |
| -When formatting money for example, to format 6.57634 to 6.58, 6.7 to |
| -6.50, and 6 to 6.00? |
| - </p> <p> |
| - |
| -Rounding of x.xx5 is unreliable, as most numbers are not represented |
| -exactly. See also: |
| -<a href="#binaryNumbers" >Why does simple decimal arithmetic give strange results?</a></p> <p> |
| - |
| -The statement <code>n = Math.round(n * 100)/100</code> converts <code>n</code> to a <code>Number</code> value |
| -close to a multiple of <code>0.01</code>. However, there are some problems. |
| -Converting the number to a string <code>(n + "")</code>, does not give |
| -trailing zeroes. Rounding numbers that are very close to <code>x.5</code>, for example, |
| -<code>Math.round(0.49999999999999992)</code> results <code>1</code>. |
| - </p> <p> |
| - |
| -ECMA-262 3rd Edition introduced <code>Number.prototype.toFixed</code>. |
| -There are bugs in JScript 5.8 and below with certain numbers, for example |
| -<code>0.007.toFixed(2)</code> incorrectly results <code>0.00</code>. |
| - </p> <p> |
| - </p> |
| -<pre> |
| -var numberToFixed = |
| -(function() { |
| - return toFixedString; |
| - |
| - function toFixedString(n, digits) { |
| - var unsigned = toUnsignedString(Math.abs(n), digits); |
| - return (n < 0 ? "-" : "") + unsigned; |
| - } |
| - |
| - function toUnsignedString(m, digits) { |
| - var t, s = Math.round(m * Math.pow(10, digits)) + "", |
| - start, end; |
| - if (/\D/.test(s)) { |
| - return "" + m; |
| - } |
| - s = padLeft(s, 1 + digits, "0"); |
| - start = s.substring(0, t = (s.length - digits)); |
| - end = s.substring(t); |
| - if(end) { |
| - end = "." + end; |
| - } |
| - return start + end; // avoid "0." |
| - } |
| - /** |
| - * @param {string} input: input value converted to string. |
| - * @param {number} size: desired length of output. |
| - * @param {string} ch: single character to prefix to s. |
| - */ |
| - function padLeft(input, size, ch) { |
| - var s = input + ""; |
| - while(s.length < size) { |
| - s = ch + s; |
| - } |
| - return s; |
| - } |
| -})(); |
| - |
| -// Test results |
| -document.writeln([ |
| - "numberToFixed(9e-3, 12) => " + numberToFixed(9e-3, 12), |
| - "numberToFixed(1.255, 2) => " + numberToFixed(1.255, 2), |
| - "numberToFixed(1.355, 2) => " + numberToFixed(1.355, 2), |
| - "numberToFixed(0.1255, 3) => " + numberToFixed(0.1255, 3), |
| - "numberToFixed(0.07, 2) => " + numberToFixed(0.07, 2), |
| - "numberToFixed(0.0000000006, 1) => " + numberToFixed(0.0000000006, 1), |
| - "numberToFixed(0.0000000006, 0) => " + numberToFixed(0.0000000006, 0) |
| -].join("\n")); |
| -</pre> |
| -<ul class='linkList'><li><a href="http://www.merlyn.demon.co.uk/js-round.htm" >http://www.merlyn.demon.co.uk/js-round.htm</a></li> |
| -<li><a href="http://msdn.microsoft.com/en-us/library/sstyff0z%28VS.85%29.aspx" >http://msdn.microsoft.com/en-us/library/sstyff0z%28VS.85%29.aspx</a></li> |
| -</ul> </div> |
| -<div id='binaryNumbers' class='section'><h3 id='FAQ4_7'>6.2 Why does simple decimal arithmetic give strange results?</h3><p> |
| - |
| -For example, <code>5 * 1.015</code> does not give exactly |
| -<code>5.075</code> and <code>0.06+0.01</code> does |
| -not give exactly <code>0.07</code> in javascript. |
| - </p> <p> |
| - |
| -ECMAScript numbers are represented in binary as IEEE-754 (IEC 559) |
| -Doubles, with a resolution of 53 bits, giving an accuracy of |
| -15-16 decimal digits; integers up to just over <code>9e15</code> are |
| -precise, but few decimal fractions are. Given this, arithmetic |
| -is as exact as possible, but no more. Operations on integers |
| -are exact if the true result and all intermediates are integers |
| -within that range. |
| - </p> <p> |
| - |
| -In particular, non-integer results should not normally be |
| -compared for equality; and non-integer computed results |
| -commonly need rounding; see <a href="#formatNumber" >How do I format a Number as a String with exactly 2 decimal places?</a></p><ul class='linkList'><li><a href="http://msdn.microsoft.com/en-us/library/7wkd9z69%28VS.85%29.aspx" >http://msdn.microsoft.com/en-us/library/7wkd9z69%28VS.85%29.aspx</a></li> |
| -<li><a href="http://www.merlyn.demon.co.uk/js-misc0.htm#DW4" >http://www.merlyn.demon.co.uk/js-misc0.htm#DW4</a></li> |
| -</ul> <p> |
| - |
| -Otherwise, use <code>Math.round</code> on the results of expressions which |
| -should be of integer value. |
| - </p> </div> |
| -<div id='parseIntBase' class='section'><h3 id='FAQ4_12'>6.3 Why does K = parseInt('09') set K to 0?</h3><p> |
| - |
| -Method <code>parseInt</code> generally needs a second parameter, <code>radix</code>, |
| -for the base (from 2 to 36). |
| - </p> <p> |
| - |
| -If <code>radix</code> is omitted, the base is determined by the contents of |
| -the string. Any string beginning with <code>'0x'</code> or <code>'0X'</code> represents a |
| -hexadecimal number. A string beginning with a leading 0 may be parsed as |
| -octal (as if <code>raxix</code> were 8), in ECMA-262 Ed 3 (octal digits are <code>0-7</code>). |
| -If string <code>'09'</code> is converted to <code>0</code>. |
| - </p> <p> |
| - |
| -To force use of a particular base, use the <code>radix</code> |
| -parameter: <code>parseInt("09", base)</code>. |
| - |
| - <!-- [omit] |
| - If base 10 is desired, |
| - the unary <ICODE>+</ICODE> operator can be an option. Example: |
| - <ICODE> |
| -var s = '-09.1'; // Input string. |
| -var j = +s; // Convert to number. Result: -9.1 |
| -var n = j|0; // Chop off decimal (convert ToInt32). Result: -9 |
| -</ICODE> |
| - [/omit] --></p> <p> |
| - </p><ul class='linkList'><li><a href="http://developer.mozilla.org/en/Core_JavaScript_1.5_Reference/Global_Functions/parseInt" >http://developer.mozilla.org/en/Core_JavaScript_1.5_Reference/Global_Functions/parseInt</a></li> |
| -<li><a href="http://msdn.microsoft.com/en-us/library/x53yedee%28VS.85%29.aspx" >http://msdn.microsoft.com/en-us/library/x53yedee%28VS.85%29.aspx</a></li> |
| -<li><a href="http://docs.sun.com/source/816-6408-10/toplev.htm#1064173" >http://docs.sun.com/source/816-6408-10/toplev.htm#1064173</a></li> |
| -<li><a href="notes/type-conversion/#tcPrIntRx" >notes/type-conversion/#tcPrIntRx</a></li> |
| -</ul> </div> |
| -<div id='typeConvert' class='section'><h3>6.4 Why does 1+1 equal 11? or How do I convert a string to a number?</h3><p> |
| - |
| -Variables are not typed; their values are. The conversion between a |
| -string and a number happens automatically. |
| -</p> <p> |
| - |
| -The addition operator (<code>+</code>) performs concatenation if either operand is a |
| -string, thus <code>"1" + 1</code> results <code>"11"</code>. To perform addition, you might need |
| -to first convert the string to a number. For example <code>+varname</code> or |
| -<code>Number(varname)</code> or <code>parseInt(varname, 10)</code> or |
| -<code>parseFloat(varname)</code>. Form control values are strings, as is the result |
| -from a <code>prompt</code> dialog. Convert these to numbers before performing |
| -addition: <code>+'1' + 1</code> results <code>2</code>. |
| - </p><ul class='linkList'><li> |
| -Additional Notes: </li> |
| -<li><a href="notes/type-conversion/" >notes/type-conversion/</a></li> |
| -<li><a href="http://msdn.microsoft.com/en-us/library/67defydd%28VS.85%29.aspx" >http://msdn.microsoft.com/en-us/library/67defydd%28VS.85%29.aspx</a></li> |
| -</ul> </div> |
| -<div id='randomNumber' class='section'><h3 id='FAQ4_22'>6.5 How do I generate a random integer from 1 to n?</h3><p> |
| - <code>Math.random()</code> returns a value <code>R</code> such that <code>0 <= R < 1.0</code>; therefore: |
| - </p> |
| -<pre> |
| - // positive integer expected |
| - function getRandomNumber(n) { |
| - return Math.floor(n * Math.random()); |
| - } |
| -</pre> |
| -<p> |
| -- gives an evenly distributed random integer in the range from |
| - <code>0</code> to <code>n - 1</code> inclusive; use <code>getRandomNumber(n)+1</code> for <code>1</code> to <code>n</code>. |
| - </p><ul class='linkList'><li><a href="http://msdn.microsoft.com/en-us/library/41336409%28VS.85%29.aspx" >http://msdn.microsoft.com/en-us/library/41336409%28VS.85%29.aspx</a></li> |
| -<li><a href="http://docs.sun.com/source/816-6408-10/math.htm" >http://docs.sun.com/source/816-6408-10/math.htm</a></li> |
| -<li> |
| -How to Deal and Shuffle, see in: </li> |
| -<li><a href="http://www.merlyn.demon.co.uk/js-randm.htm" >http://www.merlyn.demon.co.uk/js-randm.htm</a></li> |
| -</ul> </div> |
| -<div id='objects' class='section'><h2>7 Objects</h2> |
| -</div><div id='nativeObject' class='section'><h3>7.1 What is a native object?</h3><p> |
| - |
| -A |
| -<dfn>native object</dfn> is any object whose semantics are fully defined by |
| -ECMA-262. |
| -</p> <p> |
| - |
| -Some |
| -<dfn>native objects</dfn> are |
| -<dfn>built-in</dfn>; others, such as |
| -<dfn>user-defined</dfn> objects, |
| -may be constructed during the execution of an ECMAScript program. |
| -</p> <p> |
| - |
| -Example: |
| -</p> |
| -<pre> |
| -// Native built-in objects: |
| -var m = Math, // Built-in Math object. |
| - slice = Array.prototype.slice, // Built-in native method. |
| - o = {}, // Native user-defined object. |
| - f = function(){}, // Native user-defined function. |
| - d = new Date(), |
| - a = [], |
| - e = new Error("My Message."); |
| - </pre> |
| -<p> |
| -See also: |
| -</p><ul class='linkList'><li><a href="http://dmitrysoshnikov.com/ecmascript/chapter-7-2-oop-ecmascript-implementation/" >http://dmitrysoshnikov.com/ecmascript/chapter-7-2-oop-ecmascript-implementation/</a></li> |
| -</ul> </div> |
| -<div id='builtInObject' class='section'><h3>7.2 What is a built-in object?</h3><p> |
| - |
| - A |
| -<dfn>built-in</dfn> object is any object supplied by an ECMAScript |
| - implementation, independent of the host environment, that is present |
| - at the start of the execution of an ECMAScript program. |
| - </p> <p> |
| - |
| -ECMA-262 3rd Edition defines the following |
| -<dfn>built-in</dfn> objects: |
| -</p> |
| -<dl id='builtInsList'> |
| - <dt> Objects </dt> |
| - <dd> <em>global</em>, Math </dd> |
| - <dt> Constructors </dt> |
| - <dd> Object, Function, Array, String, Boolean, Number, Date, RegExp </dd> |
| - <dt> Errors </dt> |
| - <dd> Error, Date, EvalError, RangeError, ReferenceError, SyntaxError, TypeError, URIError </dd> |
| - <dt> Functions </dt> |
| - <dd> eval, parseInt, parseFloat, isNaN, isFinite, decodeURI, |
| - decodeURIComponent, encodeURI, encodeURIComponent </dd></dl><p> |
| - |
| -ECMA-262 Edition 5 defines also the built-in object <code>JSON</code>. |
| -</p> <p> |
| - |
| -Nonstandard |
| -<dfn>built-in</dfn> objects may include <code>RuntimeObject</code>, |
| -<code>String.prototype.link</code>, <code>CollectGarbage</code>, and more. |
| -</p> </div> |
| -<div id='hostObject' class='section'><h3 id='FAQ2_8'>7.3 What is a host object?</h3><p> |
| - |
| -A |
| -<dfn>host object</dfn> is any object supplied by the host environment to |
| -complete the execution environment of ECMAScript. |
| -</p> <p> |
| - |
| -A |
| -<dfn>host object</dfn> is not part of the ECMAScript implementation, but is |
| -exposed to the ECMAScript implementation. |
| -</p> <p> |
| - |
| -A |
| -<dfn>host object</dfn> may be implemented as a native ECMAScript object, however |
| -this is not required. For example, Internet Explorer implements many |
| -scriptable DOM objects as ActiveX Objects, often resulting in unexpected errors. |
| -</p> <p> |
| - |
| -Availability and behavior of a host object depends on the host environment. |
| -</p> <p> |
| - |
| -For example, in a browser, <code>XMLHttpRequest</code> might be available, with or |
| -without standard or proprietary features or events. Windows Script Host object model |
| -has the <code>WScript</code> object available. |
| -</p> <p> |
| - |
| - For information on a particular host object, consult the pertinent |
| - documentation available for the implementation(s). For web browsers, |
| - this usually includes the w3c specifications as well as documentation |
| - for that browser. |
| - See also: |
| - |
| -</p><ul class='linkList'><li><a href="notes/code-guidelines/#hostObjects" >notes/code-guidelines/#hostObjects</a></li> |
| -<li><a href="http://peter.michaux.ca/articles/feature-detection-state-of-the-art-browser-scripting" >http://peter.michaux.ca/articles/feature-detection-state-of-the-art-browser-scripting</a></li> |
| -</ul> </div> |
| -<div id='eval' class='section'><h3 id='FAQ4_40'>7.4 When should I use eval?</h3><p> |
| - |
| -The <code>eval</code> function should <em>only</em> be used when it is necessary to |
| -evaluate a string supplied or composed at run-time; the string |
| -can be anything from a simple (but unpredictable) expression such |
| -as <code>"12 * 2.54"</code> to a substantial piece of javascript code. |
| -</p> <p> |
| - |
| -When <code>eval( '{"key" : 42}' )</code> is called, <code>{</code> is interpreted as a block of |
| -code instead of an object literal. Hence, the Grouping Operator (parentheses) |
| -is used to force <code>eval</code> to interpret the JSON as an object literal: |
| -<code>eval( '({"key" : 42})' );</code>. |
| - </p><ul class='linkList'><li><a href="http://json.org/" >http://json.org/</a></li> |
| -<li><a href="#propertyAccessAgain" >How do I access a property of an object using a string?</a></li> |
| -<li><a href="notes/square-brackets/" >notes/square-brackets/</a></li> |
| -</ul> </div> |
| -<div id='propertyAccessAgain' class='section'><h3 id='FAQ4_39'>7.5 How do I access a property of an object using a string?</h3><p> |
| - |
| -There are two ways to access properties: dot notation and square bracket |
| -notation. What you are looking for is the square bracket notation in |
| -which the dot, and the identifier to its right, are replaced with a set |
| -of square brackets containing a string. The value of the string matches |
| -the identifier. For example:- |
| -</p> |
| -<pre> |
| - //dot notation |
| - var bodyElement = document.body; |
| - |
| - //square bracket notation, using an expression |
| - var bodyElement = document["bo"+"dy"];</pre> |
| -<ul class='linkList'><li><a href="notes/square-brackets/" >notes/square-brackets/</a></li> |
| -</ul> </div> |
| -<div id='strings' class='section'><h2>8 Strings and RegExp</h2> |
| -</div><div id='trimString' class='section'><h3 id='FAQ4_16'>8.1 How do I trim whitespace?</h3><p> |
| - |
| -ECMAScript 5 defines <code>String.prototype.trim</code>. Where not supported, |
| -it can be added as a function that uses a |
| -<dfn>regular expression</dfn>: |
| -</p> |
| -<pre> |
| -if(!String.prototype.trim) { |
| - String.prototype.trim = function() { |
| - return String(this).replace(/^\s+|\s+$/g, ""); |
| - }; |
| -} |
| -</pre> |
| -<p> |
| -Implementations are inconsistent with <code>\s</code>. For example, |
| -some implementations, notably JScript 5.8 and Safari 2, do not match <code>\xA0</code> |
| -(no-break space), among others. |
| - </p> <p> |
| - |
| -A more consistent approach would be to create a character class |
| -that defines the characters to trim. |
| - </p> <p> |
| - </p><ul class='linkList'><li><a href="https://developer.mozilla.org/en/Core_JavaScript_1.5_Reference/Global_Objects/RegExp" >https://developer.mozilla.org/en/Core_JavaScript_1.5_Reference/Global_Objects/RegExp</a></li> |
| -<li><a href="http://thinkweb2.com/projects/prototype/whitespace-deviations/" >http://thinkweb2.com/projects/prototype/whitespace-deviations/</a></li> |
| -<li><a href="https://developer.mozilla.org/en/Firefox_3.1_for_developers" >https://developer.mozilla.org/en/Firefox_3.1_for_developers</a></li> |
| -<li><a href="http://docs.sun.com/source/816-6408-10/regexp.htm" >http://docs.sun.com/source/816-6408-10/regexp.htm</a></li> |
| -<li><a href="http://msdn.microsoft.com/en-us/library/6wzad2b2%28VS.85%29.aspx" >http://msdn.microsoft.com/en-us/library/6wzad2b2%28VS.85%29.aspx</a></li> |
| -<li><a href="http://groups.google.com/group/comp.lang.javascript/browse_frm/thread/c7010139217600c3/31092c5eb99625d0?#31092c5eb99625d0" >http://groups.google.com/group/comp.lang.javascript/browse_frm/thread/c7010139217600c3/31092c5eb99625d0?#31092c5eb99625d0</a></li> |
| -<li><a href="http://unicode.org/Public/UNIDATA/PropList.txt" >http://unicode.org/Public/UNIDATA/PropList.txt</a></li> |
| -</ul> </div> |
| -<div id='domRef' class='section'><h2>9 DOM and Forms</h2> |
| -</div><div id='formControlAccess' class='section'><h3 id='FAQ4_13'>9.1 How do I get the value of a form control?</h3><p> |
| - |
| -In HTML documents, a form may be referred to as a property of the |
| -<code>document.forms</code> collection, either by its ordinal index or by name |
| -(if the <code>form</code> has a name). A <code>form</code>'s controls may be similarly referenced |
| -from its <code>elements</code> collection: |
| -</p> |
| -<pre> |
| - var frm = document.forms[0]; |
| - var control = frm.elements["elementname"]; |
| -</pre> |
| -<p> |
| -Once a reference to a control is obtained, its (string) <code>value</code> |
| -property can be read:- |
| -</p> |
| -<pre> |
| - var value = control.value; |
| - value = +control.value; //string to number. |
| -</pre> |
| -<p> |
| -Some exceptions would be: |
| -</p> <p> |
| - |
| -First Exception: Where the control is a <code>SELECT</code> element, and |
| -support for older browsers, such as NN4, is required: |
| -</p> |
| -<pre> |
| - var value = control.options[control.selectedIndex].value; |
| -</pre> |
| -<p> |
| -Second Exception: Where several controls share the same name, |
| -such as radio buttons. These are made available as collections |
| -and require additional handling. For more information, see:- |
| -</p><ul class='linkList'><li><a href="notes/form-access/" >notes/form-access/</a></li> |
| -<li><a href="names/" >Unsafe Names for HTML Form Controls</a></li> |
| -</ul> <p> |
| - |
| -Third Exception: File inputs. Most current browsers do not allow |
| -reading of <code>type="file"</code> input elements in a way that is useful. |
| - </p> </div> |
| -<div id='propertyAccess' class='section'><h3 id='FAQ4_25'>9.2 My element is named myselect[], how do I access it?</h3><p> |
| - |
| -Form controls with any "illegal" characters can be accessed with |
| -<code>formref.elements["myselect[]"]</code> - The bracket characters, |
| -amongst others, are illegal in ID attributes and javascript |
| -identifiers, so you should try to avoid them as browsers may |
| -handle them incorrectly. |
| -</p><ul class='linkList'><li><a href="http://msdn.microsoft.com/en-us/library/ms537449%28VS.85%29.aspx" >http://msdn.microsoft.com/en-us/library/ms537449%28VS.85%29.aspx</a></li> |
| -<li><a href="https://developer.mozilla.org/en/DOM/form" >https://developer.mozilla.org/en/DOM/form</a></li> |
| -<li><a href="notes/form-access/" >notes/form-access/</a></li> |
| -</ul> </div> |
| -<div id='globalPollution' class='section'><h3 id='FAQ4_41'>9.3 Why doesn't the global variable "divId" always refer to the element with id="divId"?</h3><p> |
| - |
| -Microsoft introduced a shortcut that can be used to reference |
| -elements which include an <code>id</code> attribute where the |
| -<code>id</code> becomes a globally-accessible property. Some browsers reproduce |
| -this behavior. Some, most notably Gecko-based browsers (Netscape and Mozilla), |
| -do so only in "quirks" mode. The best approach is the <code>document.getElementById</code> |
| -method, which is part of the W3C DOM standard and implemented |
| -in modern browsers (including IE from version 5.0). So an |
| -element with <code>id="foo"</code> can be referenced |
| -with:- |
| - </p> |
| -<pre> |
| - var el = document.getElementById("foo"); |
| -</pre> |
| -<p> |
| -Note: make sure not to use the same <code>id</code> twice in the same document |
| -and do not give an element a <code>name</code> that matches an <code>id</code> |
| -of another in the same document or it will trigger bugs in MSIE <= 7 with |
| -<code>document.getElementsByName</code> and <code>document.getElementById</code>. |
| -</p><ul class='linkList'><li><a href="https://developer.mozilla.org/en/Using_Web_Standards_in_your_Web_Pages/Using_the_W3C_DOM#Accessing_Elements_with_the_W3C_DOM |
| -" >https://developer.mozilla.org/en/Using_Web_Standards_in_your_Web_Pages/Using_the_W3C_DOM#Accessing_Elements_with_the_W3C_DOM |
| -</a></li> |
| -<li><a href="faq_notes/faq_notes.html#FAQN4_41" >faq_notes/faq_notes.html#FAQN4_41</a></li> |
| -</ul> </div> |
| -<div id='updateContent' class='section'><h3 id='FAQ4_15'>9.4 How do I modify the content of the current page?</h3><p> |
| - |
| -Using the non-standard but widely implemented |
| -<code>innerHTML</code> property: |
| -<code><div id="anID">Some Content</div></code> with script: |
| - </p> |
| -<pre> |
| - document.getElementById("anID").innerHTML = |
| - "Some <em>new</em> Content"; |
| -</pre> |
| -<p> |
| -Where <code>"anID"</code> is the (unique on the HTML page) |
| -<code>id</code> attribute value of the element to modify. |
| - </p> <p> |
| - |
| -All versions of Internet Explorer exhibit problems with innerHTML, including: |
| - </p> |
| -<ul> |
| - <li> Fails with FRAMESET, HEAD, HTML, STYLE, SELECT, |
| -OBJECT, and all TABLE-related elements. |
| - </li> |
| - <li> Replaces consecutive whitespace characters with a single space. </li> |
| - <li> Changes attribute values and order of appearance. </li> |
| - <li> Removes quotations around attribute values. </li></ul><p> |
| - |
| -If the new content is only text and does not need to replace existing HTML, |
| -it is more efficient to modify the <code>data</code> property of a text node. |
| - </p> |
| -<pre> |
| - document.getElementById("anID").firstChild.data = "Some new Text"; |
| -</pre> |
| - <p> |
| - |
| -Compatibility Note: Implementations have been known to split long text |
| -content among several adjacent text nodes, so replacing the data of the |
| -first text node may not replace all the element's text. The <code>normalize</code> |
| -method, where supported, will combine adjacent text nodes. |
| -</p> <p> |
| - |
| -Note: Make sure the element exists in the document (has been parsed) before trying to |
| -reference it. |
| - </p><ul class='linkList'><li><a href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-FF21A306" >http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-FF21A306</a></li> |
| -<li><a href="http://msdn.microsoft.com/en-us/library/cc304097%28VS.85%29.aspx" >http://msdn.microsoft.com/en-us/library/cc304097%28VS.85%29.aspx</a></li> |
| -<li><a href="http://msdn.microsoft.com/en-us/library/ms533897%28VS.85%29.aspx" >http://msdn.microsoft.com/en-us/library/ms533897%28VS.85%29.aspx</a></li> |
| -<li><a href="http://developer.mozilla.org/en/Whitespace_in_the_DOM" >http://developer.mozilla.org/en/Whitespace_in_the_DOM</a></li> |
| -<li><a href="http://developer.mozilla.org/en/docs/DOM:element.innerHTML" >http://developer.mozilla.org/en/docs/DOM:element.innerHTML</a></li> |
| -<li><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-end.html#html-fragment-serialization-algorithm" >http://www.whatwg.org/specs/web-apps/current-work/multipage/the-end.html#html-fragment-serialization-algorithm</a></li> |
| -<li> (draft) |
| - </li> |
| -</ul> </div> |
| -<div id='accessElementBeforeDefined' class='section'><h3>9.5 Why does my code fail to access an element?</h3><p> |
| - |
| -An element can only be accessed after it exists in the document. |
| - </p> <p> |
| - |
| -Either: |
| -A) include your script after the HTML element it refers to, or |
| -B) use the <code>"load"</code> event to trigger your script. |
| - </p> <p> |
| - |
| -Example A: |
| -</p> |
| -<pre> |
| -<div id="snurgle">here</div> |
| -<script type="text/javascript"> |
| -// Don't forget var. |
| -var snurgleEl = document.getElementById("snurgle"); |
| -window.alert(snurgleEl.parentNode); |
| -</script> |
| -</pre> |
| - <p> |
| - |
| -Example B: |
| -</p> |
| -<pre> |
| -// In the HEAD. |
| -<script type="text/javascript"> |
| -window.onload = function(){ |
| - var snurgleEl = document.getElementById("snurgle"); |
| -}; |
| -</script> |
| -</pre> |
| - |
| -<h4>Other problems can include:</h4> |
| - |
| -<ul> |
| - <li> invalid HTML </li> |
| - <li> two elements with the same <code>name</code> or <code>id</code> </li> |
| - <li> use of an unsafe name: http://jibbering.com/names/ </li></ul></div> |
| -<div id='testCookie' class='section'><h3 id='FAQ4_4'>9.6 How can I see in javascript if a web browser accepts cookies?</h3><p> |
| - |
| -Write a cookie and read it back and check if it's the same. |
| - </p><ul class='linkList'><li> |
| -Additional Notes: |
| -</li> |
| -<li><a href="http://www.ietf.org/rfc/rfc2965.txt" >http://www.ietf.org/rfc/rfc2965.txt</a></li> |
| -<li><a href="http://www.galasoft-lb.ch/myjavascript/consulting/2001012701/" >http://www.galasoft-lb.ch/myjavascript/consulting/2001012701/</a></li> |
| -<li><a href="http://www.cookiecentral.com/" >http://www.cookiecentral.com/</a></li> |
| -</ul> </div> |
| -<div id='windows' class='section'><h2>10 Windows and Frames</h2> |
| -<p> |
| - |
| -The <code>window</code> object (also referred to by <code>self</code>) is "DOM Level 0". |
| -No formal standard for it exists. |
| -</p> </div><div id='disableBackButton' class='section'><h3 id='FAQ4_2'>10.1 How can I disable the back button in a web browser?</h3><p> |
| - |
| -You can't. The browser's history cannot be modified. However, you |
| -can use <code>self.location.replace(url);</code> in some browsers to replace |
| -the current page in the history. |
| - </p><ul class='linkList'><li><a href="http://msdn.microsoft.com/en-us/library/ms536712%28VS.85%29.aspx" >http://msdn.microsoft.com/en-us/library/ms536712%28VS.85%29.aspx</a></li> |
| -<li><a href="http://docs.sun.com/source/816-6408-10/location.htm#1194240" >http://docs.sun.com/source/816-6408-10/location.htm#1194240</a></li> |
| -</ul> </div> |
| -<div id='frameRef' class='section'><h3 id='FAQ4_8'>10.2 How do I access a frame's content?</h3><p> |
| - |
| -To reference another frame on the <em>same domain</em>: |
| -</p> <p> |
| - |
| -The |
| -<dfn>content window</dfn> of a <code>FRAME</code> or <code>IFRAME</code> can be |
| -accessed by the <code>frames</code> collection. |
| -</p> <p> |
| - |
| -Example: |
| -</p> |
| -<pre> |
| -var fwin; |
| -fwin = self.frames[0]; // or: |
| -fwin = self.frames["iframeName"]; |
| -</pre> |
| - <p> |
| - or, from the <code>IFRAME</code> or <code>FRAME</code> element: |
| -</p> |
| -<pre> |
| -var iframeEl = document.getElementById("myFrame"); |
| -var fwin = iframeEl.contentWindow; // Nonstandard, but widely supported. |
| -var fdoc = iframeEl.contentDocument; // DOM2 HTML Standard. |
| -</pre> |
| - <p> |
| - |
| -A global identifier <code>moomin</code> in the the iframe's |
| -<dfn>content window</dfn> |
| -is accessed as <code>fwin.moomin</code>. |
| - </p> <p> |
| - |
| -To communicate between frames on <em>different</em> domains: |
| -</p> <p> |
| - |
| -Where supported, (IE8, Firefox 3, Opera 9, Safari 4), use |
| -<code>window.postMessage( message[, port], otherDomain);</code>. |
| -</p> <p> |
| - |
| -Example: |
| -<a href="http://jibbering.com/faq/example/postMessage.html" >http://jibbering.com/faq/example/postMessage.html</a></p> <p> |
| - |
| -Where <code>window.postMessage</code> is not supported, the <code>window.name</code> property |
| -can be set on the other window, which can poll for updates to that |
| -property using <code>setInterval(checkWinName, 100);</code> where <code>checkWinName</code> |
| -is a function that polls to check the value of |
| -<code>self.name</code>. |
| -</p><ul class='linkList'><li><a href="http://en.wikipedia.org/wiki/Same_origin_policy" >http://en.wikipedia.org/wiki/Same_origin_policy</a></li> |
| -<li><a href="http://www-archive.mozilla.org/docs/dom/domref/dom_frame_ref5.html" >http://www-archive.mozilla.org/docs/dom/domref/dom_frame_ref5.html</a></li> |
| -<li><a href="https://developer.mozilla.org/en/DOM/window.postMessage" >https://developer.mozilla.org/en/DOM/window.postMessage</a></li> |
| -<li><a href="http://msdn.microsoft.com/en-us/library/cc197015(VS.85).aspx" >http://msdn.microsoft.com/en-us/library/cc197015(VS.85).aspx</a></li> |
| -</ul> </div> |
| -<div id='getWindowSize' class='section'><h3 id='FAQ4_9'>10.3 How do I find the size of the window?</h3><p> |
| - |
| -Here is a detailed explanation of a cross-browser strategy to |
| -find the dimensions of the viewport, excepting all chrome |
| -(excludes scrollbars, etc). |
| - </p> <p> |
| - |
| -We can consider various properties: |
| - </p> |
| -<pre> |
| - window.innerWidth |
| - document.clientWidth |
| - document.documentElement.clientWidth |
| - document.body.clientWidth |
| -</pre> |
| -<p> |
| - |
| -Of the browsers that have an <code>innerWidth</code> property, most |
| -include scrollbar dimensions. Some versions of KHTML browsers |
| -(including Safari 2) do <em>not</em> include scrollbar width. |
| - </p> <p> |
| - |
| -The <code>window.inner*</code> properties are unreliable and not |
| -useful here. We don't want scrollbar dimensions included. |
| -</p> |
| -<pre> document.clientWidth</pre> |
| - <p> |
| - |
| -Certain versions of KHTML, including Safari 2, have |
| -<code>document.clientHeight</code> and <code>document.clientWidth</code> |
| -properties. Where supported, these rare properties accurately |
| -return the height and width of the viewport, without including |
| -scrollbar dimensions. |
| - </p> |
| -<pre> |
| - document.documentElement.clientWidth |
| - document.body.clientWidth |
| -</pre> |
| -<p> |
| -MSHTML (Trident), Firefox (Gecko), Opera (Presto), and Safari |
| -(Webkit) all support <code>clientHeight</code> on <code>document.body</code> |
| -and <code>document.documentElement</code>. The difficulty is figuring out |
| -which one is reliable. In other words which object to get the |
| -<code>clientHeight</code> property from:<code>documentElement</code> or <code>body</code>? |
| - </p> <p> |
| - |
| -What the number returned from either of these properties |
| -represents depends on the environment. The environment includes |
| -the browser, its version, and the rendering mode of the document. |
| -In quirks mode, we'll mostly want to use <code>body.clientHeight</code> |
| -(except for in Safari 2). |
| - |
| - </p> |
| -<pre> document.body.clientHeight</pre> |
| -<p> |
| - |
| -Some environments will return the viewport height. Others will |
| -return <code>0</code>. Yet others will return the <code>clientHeight</code> of |
| -the <code>BODY</code> element. |
| - |
| - </p> |
| -<pre> document.documentElement.clientHeight</pre> |
| -<p> |
| - |
| -This is the more "standard" property for getting the height of |
| -the viewport. It usually "works" in modern browsers in |
| - |
| -<dfn>standards mode</dfn>. Notable exceptions include Safari 2 and |
| -Opera <= 9.25, both of which return the <code>clientHeight</code> |
| -of the <code>html</code> <em>element</em>. (Oddly, Opera <= 9.25 |
| -in standards mode returns the width of the viewport for |
| -<code>documentElement.clientWidth</code>). |
| - </p> <p> |
| - |
| -With the exception of Safari 2, <code>body.clientHeight</code> is reliable |
| -where <code>documentElement.clientHeight</code> is found to be unreliable. |
| -For example, in Safari 3+, Opera, and Mozilla, all in quirks mode, |
| -<code>document.documentElement.clientHeight</code> returns the <code>clientHeight</code> |
| -of the <code>html</code> element (this may seem unsurprising but |
| -it is not what we want). |
| - </p> <p> |
| - |
| -Conversely, <code>document.body.clientHeight</code> will return |
| -the height of the viewport in most cases where |
| -<code>document.documentElement.clientHeight</code> does not. An exception |
| -to that is Safari 2, where <code>documentElement.clientHeight</code> |
| -and <code>body.clientHeight</code> both return the height of their |
| -corresponding element (not what we want). |
| - </p> <p> |
| - |
| -By using a combination of |
| -<dfn>Feature Testing</dfn> and |
| -<dfn>Capability Testing</dfn>, |
| -the dimensions of the viewport can be strategically retrieved |
| -from the property that works in the environment the script is |
| -running in. The trick is determining which property will give us |
| -the value we want. |
| - </p> <p> |
| - |
| -Since <code>document.clientHeight</code> is reliable where |
| -(rarely) supported, and since browsers that support this property |
| -don't return the viewport dimensions from |
| -<code>document.body.clientHeight</code> or |
| -<code>document.documentElement.clientHeight</code>, this should be the |
| -very first condition: |
| - |
| - </p> |
| -<pre> |
| - // Safari 2 uses document.clientWidth (default). |
| - if(typeof document.clientWidth == "number") { |
| - // use document.clientWidth. |
| - } |
| -</pre> |
| -<p> |
| - |
| -The next strategy is to determine if |
| -<code>document.documentElement.clientHeight</code> property is unreliable. |
| -It is deemed "unreliable" when it is either <code>0</code> or taller |
| -than the viewport. |
| - </p> <p> |
| - |
| - Determining if <code>documentElement.clientHeight</code> is <code>0</code> is easy. |
| - The result is stored in a variable <code>IS_BODY_ACTING_ROOT</code>. |
| - |
| - </p> |
| -<pre> |
| - var docEl = document.documentElement, |
| - IS_BODY_ACTING_ROOT = docEl && docEl.clientHeight === 0; |
| - docEl = null; |
| -</pre> |
| -<p> |
| - |
| -To determine if <code>documentElement.clientHeight</code> returns |
| -a value taller than the viewport, we need a |
| -<dfn>Capability Test.</dfn></p> <p> |
| - |
| -If we can force <code>documentElement</code> to be very tall |
| -(taller than a normal viewport) we can then check to see if |
| -<code>documentElement.clientHeight</code> returns that "very tall" number. |
| -If it does, then it is unreliable. |
| - </p> <p> |
| - |
| -We can force <code>documentElement</code> to be taller than the viewport |
| -(or any "normal" viewport) by adding a <code>div</code> to the <code>body</code>, |
| -give that <code>div</code> a height larger than any normal monitor, |
| -and then check to see if <code>documentElement.clientHeight</code> is |
| -that high (or "almost" that high, to account for <code>documentElement</code> |
| -having a border). |
| - |
| - </p> |
| -<pre> |
| - // Used to feature test Opera returning wrong values |
| - // for documentElement.clientHeight. |
| - // The results of this function should be cached, |
| - // so it does not need to be called more than once. |
| - function isDocumentElementHeightOff(){ |
| - var d = document, |
| - div = d.createElement('div'); |
| - div.style.height = "2500px"; |
| - d.body.insertBefore(div, d.body.firstChild); |
| - var r = d.documentElement.clientHeight > 2400; |
| - d.body.removeChild(div); |
| - return r; |
| - } |
| -</pre> |
| -<p> |
| - |
| -We can use this function to see if we should use |
| -<code>body.clientHeight</code>, instead. (but only after checking if |
| -<code>document.clientHeight</code> is supported). |
| - |
| - </p> |
| -<pre> |
| - // Safari 2 uses document.clientWidth (default). |
| - if(typeof document.clientWidth == "number") { |
| - // use document.clientHeight/Width. |
| - } |
| - else if(IS_BODY_ACTING_ROOT || isDocumentElementHeightOff()) { |
| - // use document.body.clientHeight/Width. |
| - } else { |
| - // use document.documentElement.clientHeight/Width. |
| - } |
| -</pre> |
| -<p> |
| -The preceding strategy was developed by Garrett Smith with input |
| -from John David Dalton. A complete and tested example can be found |
| -in APE Library under <code>APE.dom.getViewportDimensions</code>. |
| -Source code: |
| -<a href="http://dhtmlkitchen.com/ape/build/dom/viewport-f.js" >http://dhtmlkitchen.com/ape/build/dom/viewport-f.js</a>. |
| -APE is publicly released under Academic Free License. |
| -APE home: <a href="http://dhtmlkitchen.com/ape/" >http://dhtmlkitchen.com/ape/</a>. |
| - </p> <p> |
| - |
| -Note: The dimensions cannot be determined accurately until after |
| -the document has finished loading. |
| -</p><ul class='linkList'><li><a href="http://msdn.microsoft.com/en-us/library/ms533566%28VS.85%29.aspx" >http://msdn.microsoft.com/en-us/library/ms533566%28VS.85%29.aspx</a></li> |
| -<li><a href="http://developer.mozilla.org/en/DOM/window.innerWidth" >http://developer.mozilla.org/en/DOM/window.innerWidth</a></li> |
| -<li><a href="http://dev.opera.com/articles/view/using-capability-detection/" >http://dev.opera.com/articles/view/using-capability-detection/</a></li> |
| -</ul> </div> |
| -<div id='isWindowOpen' class='section'><h3 id='FAQ4_10'>10.4 How do I check to see if a child window is open, before opening another?</h3><p> |
| - </p> |
| -<pre> |
| - var myWin; |
| - function openWin(aURL) { |
| - if (!myWin || myWin.closed ) { |
| - myWin = window.open(aURL,'myWin'); |
| - } else { |
| - myWin.location.href = aURL; |
| - myWin.focus(); |
| - } |
| - }</pre> |
| -<p> |
| -Popup windows cause usability problems and are generally best avoided. |
| -</p><ul class='linkList'><li><a href="https://developer.mozilla.org/en/DOM:window.open" >https://developer.mozilla.org/en/DOM:window.open</a></li> |
| -<li><a href="http://msdn.microsoft.com/en-us/library/ms533574%28VS.85%29.aspx" >http://msdn.microsoft.com/en-us/library/ms533574%28VS.85%29.aspx</a></li> |
| -<li><a href="http://docs.sun.com/source/816-6408-10/window.htm#1201877" >http://docs.sun.com/source/816-6408-10/window.htm#1201877</a></li> |
| -<li><a href="http://www.useit.com/alertbox/990530.html" >http://www.useit.com/alertbox/990530.html</a></li> |
| -</ul> </div> |
| -<div id='printFrame' class='section'><h3 id='FAQ4_11'>10.5 Why does framename.print() not print the correct frame in IE?</h3><p> |
| - |
| -IE prints the frame that has focus when you call the print |
| -method <code>frameref.focus();frameref.print();</code></p><ul class='linkList'><li><a href="http://msdn.microsoft.com/en-us/library/ms976105.aspx" >http://msdn.microsoft.com/en-us/library/ms976105.aspx</a></li> |
| -</ul> </div> |
| -<div id='windowClose' class='section'><h3 id='FAQ4_14'>10.6 How do I close a window and why does it not work on the first one?</h3><p> |
| - |
| -If a window was opened by javascript, then it can be closed |
| -without confirmation by using <code>windowRef.close()</code>. |
| -</p> <p> |
| - |
| -Before calling <code>windowRef.close()</code> (or other <code>window</code> methods), make |
| -sure the window reference is not null and its <code>closed</code> property is <code>false</code>. |
| -</p> <p> |
| - |
| -Popup windows cause usability problems and are generally best avoided. |
| -</p> <p> |
| - </p><ul class='linkList'><li><a href="http://www.useit.com/alertbox/990530.html" >http://www.useit.com/alertbox/990530.html</a></li> |
| -<li><a href="#isWindowOpen " >#isWindowOpen </a></li> |
| -<li><a href="http://msdn.microsoft.com/en-us/library/ms536367%28VS.85%29.aspx" >http://msdn.microsoft.com/en-us/library/ms536367%28VS.85%29.aspx</a></li> |
| -<li><a href="https://developer.mozilla.org/en/DOM/window.close#Description" >https://developer.mozilla.org/en/DOM/window.close#Description</a></li> |
| -<li><a href="http://docs.sun.com/source/816-6408-10/window.htm#1201822" >http://docs.sun.com/source/816-6408-10/window.htm#1201822</a></li> |
| -</ul> </div> |
| -<div id='permissionDenied' class='section'><h3 id='FAQ4_19'>10.7 Why do I get permission denied when accessing a frame/window?</h3><p> |
| - |
| -In the normal browser security model, a script may only access the |
| -properties of documents served from the same domain or IP address, |
| -protocol, and port. |
| - </p> <p> |
| - |
| -Any attempt to access a property in such cases will result in a "Permission |
| -Denied" error. Signed scripts or trusted ActiveX objects can |
| -overcome this in limited situations. |
| -</p><ul class='linkList'><li><a href="http://msdn.microsoft.com/en-us/library/ms533028%28VS.85%29.aspx" >http://msdn.microsoft.com/en-us/library/ms533028%28VS.85%29.aspx</a></li> |
| -<li><a href="https://developer.mozilla.org/En/Same_origin_policy_for_JavaScript" >https://developer.mozilla.org/En/Same_origin_policy_for_JavaScript</a></li> |
| -</ul> </div> |
| -<div id='setTimeout' class='section'><h3 id='FAQ4_20'>10.8 How do I make a 10 second delay?</h3><p> |
| - |
| -There is no built-in way to pause execution in javascript such |
| -as a sleep function, but hosts usually provide a method of some |
| -form. Web browsers are designed for event driven programming and |
| -only provide the <code>setTimeout</code> and <code>setInterval</code> functions |
| -to facilitate timed delays. The delay before calling <code>getSnork</code> may |
| -exceed the second parameter to <code>setTimeout</code> and <code>setInterval</code> |
| -due to implementation differences among browsers. |
| - </p> <p> |
| - |
| - To call the function <code>getSnork</code>, approximately 10 seconds |
| - after the function <code>getMoomin()</code> completes, you would do this: |
| - </p> |
| -<pre> |
| - getMoomin(); |
| - setTimeout(getSnork, 10000); |
| -</pre> |
| -<p> |
| -Script execution is not stopped, and adding <code>getSnufkin()</code> after the |
| -<code>setTimeout</code> line would immediately execute the function <code>getSnufkin</code> |
| -before <code>getSnork</code>. |
| - </p> <p> |
| - |
| -Achieving delays through running a loop of some sort for a pre-defined |
| -period is a bad strategy, as that will inhibit whatever was supposed to |
| -be happening during the delay, including blocking user interation. |
| - </p> <p> |
| - |
| -Other (less event driven) hosts have different wait functions, |
| -such as <code>WScript.Sleep()</code> in the Windows Script Host. |
| -</p><ul class='linkList'><li><a href="http://msdn.microsoft.com/en-us/library/ms536753%28VS.85%29.aspx" >http://msdn.microsoft.com/en-us/library/ms536753%28VS.85%29.aspx</a></li> |
| -<li><a href="http://docs.sun.com/source/816-6408-10/window.htm#1203758" >http://docs.sun.com/source/816-6408-10/window.htm#1203758</a></li> |
| -<li><a href="http://en.wikipedia.org/wiki/Event-driven_programming" >http://en.wikipedia.org/wiki/Event-driven_programming</a></li> |
| -<li><a href="faq_notes/misc.html#mtSetTI" >faq_notes/misc.html#mtSetTI</a></li> |
| -</ul> </div> |
| -<div id='printSettings' class='section'><h3 id='FAQ4_23'>10.9 How do I change print settings for window.print()?</h3><p> |
| - |
| -In a normal security environment, you can't change anything. |
| -</p> <p> |
| - |
| -Print Stylesheet rules provide options. |
| -</p> <p> |
| - For IE, <code>ActiveX</code> or Plugin ScriptX and |
| -Neptune from Meadroid to give you more control for Windows |
| -versions of Internet Explorer, Netscape, and Opera. |
| -</p><ul class='linkList'><li><a href="http://www.meadroid.com/scriptx/" >http://www.meadroid.com/scriptx/</a></li> |
| -<li><a href="http://msdn.microsoft.com/en-us/library/ms976105.aspx" >http://msdn.microsoft.com/en-us/library/ms976105.aspx</a></li> |
| -</ul> </div> |
| -<div id='changeBrowserDialog' class='section'><h3 id='FAQ4_28'>10.10 How do I change the confirm box to say yes/no or default to cancel?</h3><p> |
| - |
| -The buttons on a confirm box cannot be changed, nor can a default |
| -button be specified. |
| - </p> <p> |
| - |
| -Change the question to a statement so that "OK" is suitable as the |
| -default response. |
| -</p> <p> |
| - |
| - Example: |
| - "Would you like us to charge your credit card?" (wrong) |
| - "We will now charge your credit card." (right). |
| -</p> </div> |
| -<div id='fileDownload' class='section'><h3 id='FAQ4_33'>10.11 How do I prompt a "Save As" dialog for an accepted mime type?</h3><p> |
| - |
| -It is not possible with client-side javascript. |
| - </p> <p> |
| - |
| -Some browsers accept the Content-Disposition header, but this |
| -must be added by the server. Taking the form:- |
| -<code>Content-Disposition: attachment; filename=filename.ext</code></p><ul class='linkList'><li><a href="http://classicasp.aspfaq.com/general/how-do-i-prompt-a-save-as-dialog-for-an-accepted-mime-type.html" >http://classicasp.aspfaq.com/general/how-do-i-prompt-a-save-as-dialog-for-an-accepted-mime-type.html</a></li> |
| -<li><a href="http://support.microsoft.com/kb/q260519/" >http://support.microsoft.com/kb/q260519/</a></li> |
| -</ul> </div> |
| -<div id='modifyChrome' class='section'><h3 id='FAQ4_36'>10.12 How do I modify the current browser window?</h3><p> |
| - |
| -In a default security environment you are very limited in how much |
| -you can modify the current browser window. You can use |
| -<code>window.resizeTo</code> or <code>window.moveTo</code> to resize or move a |
| -window respectively, but that is it. Normally you can only |
| -suggest chrome changes in a <code>window.open</code>. |
| -</p><ul class='linkList'><li><a href="http://msdn.microsoft.com/en-us/library/ms536651%28VS.85%29.aspx" >http://msdn.microsoft.com/en-us/library/ms536651%28VS.85%29.aspx</a></li> |
| -<li><a href="https://developer.mozilla.org/en/DOM:window.open" >https://developer.mozilla.org/en/DOM:window.open</a></li> |
| -</ul> </div> |
| -<div id='target' class='section'><h3 id='FAQ4_37'>10.13 How do I POST a form to a new window?</h3><p> |
| - |
| -Use the target attribute on the form, opening a window with |
| -that name and your feature string in the onsubmit handler of the |
| -FORM. |
| - </p> |
| -<pre> |
| - <form action="" method="post" |
| - target="wndname" onsubmit="window.open('',this.target);return true;"></pre> |
| -<ul class='linkList'><li><a href="http://www.htmlhelp.com/reference/html40/forms/form.html" >http://www.htmlhelp.com/reference/html40/forms/form.html</a></li> |
| -</ul> </div> |
| -<div id='openWindow' class='section'><h3 id='FAQ4_42'>10.14 How do I open a new window with javascript?</h3><p> |
| - |
| -New windows can be opened on browsers that support the |
| -<code>window.open</code> function and are not subject to the action of any |
| -pop-up blocking mechanism with code such as:- |
| - </p> |
| -<pre> |
| - var wRef; |
| - if(window.open){ |
| - wRef = window.open("http://example.com/page.html","windowName"); |
| - }</pre> |
| -<ul class='linkList'><li><a href="https://developer.mozilla.org/en/DOM:window.open" >https://developer.mozilla.org/en/DOM:window.open</a></li> |
| -<li><a href="http://www.infimum.dk/HTML/JSwindows.html" >http://www.infimum.dk/HTML/JSwindows.html</a></li> |
| -</ul> </div> |
| -<div id='ajaxRef' class='section'><h2>11 Ajax and Server Communication</h2> |
| -</div><div id='ajax' class='section'><h3 id='FAQ4_44'>11.1 What is Ajax?</h3><p> |
| - |
| -<dfn title = 'Asynchronous JavaScript and XML'>Ajax</dfn> |
| -is shorthand for Asynchronous JavaScript and XML. The technology is |
| -based on the <code>XMLHttpRequest</code> Object. At its simplest, |
| -it is the sending/retrieving of new data from the server without |
| -changing or reloading the window location. |
| -</p><ul class='linkList'><li> |
| -Mozilla Documentation: |
| -</li> |
| -<li><a href="http://developer.mozilla.org/en/docs/XMLHttpRequest" >http://developer.mozilla.org/en/docs/XMLHttpRequest</a></li> |
| -<li> |
| -MSDN Documention: |
| -</li> |
| -<li><a href="http://msdn.microsoft.com/en-us/library/ms535874%28VS.85%29.aspx" >http://msdn.microsoft.com/en-us/library/ms535874%28VS.85%29.aspx</a></li> |
| -<li><a href="http://msdn.microsoft.com/en-us/library/ms759148%28VS.85%29.aspx" >http://msdn.microsoft.com/en-us/library/ms759148%28VS.85%29.aspx</a></li> |
| -<li> |
| -Libraries and Tutorial Sites: |
| -</li> |
| -<li><a href="http://jibbering.com/2002/4/httprequest.html" >http://jibbering.com/2002/4/httprequest.html</a></li> |
| -<li><a href="http://www.ajaxtoolbox.com/" >http://www.ajaxtoolbox.com/</a></li> |
| -</ul> </div> |
| -<div id='downloadPage' class='section'><h3 id='FAQ4_38'>11.2 How do I download a page to a variable?</h3><p> |
| - |
| -Although <code>XMLHttpRequest</code> can be used to download |
| -entire pages, it is often used for downloading small pieces |
| -of data that can be used to update the current page. |
| - </p><ul class='linkList'><li><a href="http://jibbering.com/2002/4/httprequest.html" >http://jibbering.com/2002/4/httprequest.html</a></li> |
| -<li><a href="http://www.ajaxtoolbox.com/" >http://www.ajaxtoolbox.com/</a></li> |
| -</ul> </div> |
| -<div id='getServerVariable' class='section'><h3 id='FAQ4_18'>11.3 How do I get a jsp/php variable into client-side javascript?</h3><p> |
| - |
| -Use a server-side language to generate the javascript. |
| -</p> <p> |
| - |
| -Certain characters of ECMAScript strings must be escaped by backslash. |
| -These include quote marks, backslash, and line terminators. |
| -</p> <p> |
| - JSP Example, using Apache Commons: <code>org.apache.commons.lang.StringEscapeUtils</code>: |
| - </p> |
| -<pre> |
| -var jsVar = "<%= StringEscapeUtils.escapeJavaScript(str) %>"; |
| -</pre> |
| - <p> |
| - PHP example using <code>addcslashes</code>: |
| -</p> |
| -<pre> |
| -var jsVar = "<?php echo addcslashes($str,"\\\'\"\n\r"); ?>"; |
| -</pre> |
| -<ul class='linkList'><li><a href="example/addcslashes.php" >example/addcslashes.php</a></li> |
| -<li><a href="http://php.net/manual/en/function.addcslashes.php" >http://php.net/manual/en/function.addcslashes.php</a></li> |
| -<li><a href="http://commons.apache.org/lang/" >http://commons.apache.org/lang/</a></li> |
| -</ul> </div> |
| -<div id='sessionExpired' class='section'><h3 id='FAQ4_29'>11.4 How do I log-out a user when they leave my site?</h3><p> |
| - |
| -This cannot be done reliably. Here's why: |
| - </p> |
| -<ul> <li> |
| -The user may disable javascript so the log-out script will |
| -never execute. |
| - </li> |
| -<li> |
| -The user may not be on-line when they close your web page. |
| - </li> |
| -<li> |
| -Javascript errors elsewhere in the page may prevent the script |
| -executing. |
| - </li> |
| -<li> |
| -The browser may not support the onunload event, or may not fire |
| -it under certain circumstances, so the log-out function will |
| -not execute. |
| - </li> |
| -</ul> |
| -<p> |
| -The URL below has more information. |
| -</p><ul class='linkList'><li><a href="http://groups.google.com/groups?selm=BlmZ7.55691%244x4.7344316%40news2-win.server.ntlworld.com" >http://groups.google.com/groups?selm=BlmZ7.55691%244x4.7344316%40news2-win.server.ntlworld.com</a></li> |
| -</ul> </div> |
| -<div id='runServerScript' class='section'><h3 id='FAQ4_34'>11.5 How do I run a server side script?</h3><p> |
| - |
| -You trigger a server-side script by sending an HTTP request. |
| -This can be achieved by setting the <code>src</code> of an <code>img</code>, |
| -<code>Image</code>, <code>frame</code>, or <code>iframe</code>, or by using |
| -<dfn title = 'XMLHttpRequest or XMLHTTP'>XHR</dfn>, where supported. |
| - </p> <p> |
| - |
| -An image will also |
| -"swallow" the data sent back by the server, so that they will |
| -not be visible anywhere. |
| -</p> <p> |
| - </p> |
| -<pre> |
| - var dummyImage = new Image(); |
| - dummyImage.src = "scriptURL.asp?param=" + varName; |
| -</pre> |
| - <p> |
| - |
| -Mozilla, Opera 7.6+, Safari 1.2+, and Windows IE 7 |
| -provide the <code>XMLHttpRequest</code> object |
| -(Windows IE versions 5+, provides ActiveX to acheive an analagous |
| -effect). <code>XMLHttpRequest</code> can send HTTP requests to |
| -the server, and provides access the <code>responseText</code> or <code>responseXML</code> |
| -(when the response is XML), and HTTP header information. |
| -</p><ul class='linkList'><li><a href="http://jibbering.com/2002/4/httprequest.html" >http://jibbering.com/2002/4/httprequest.html</a></li> |
| -<li><a href="http://www.w3.org/TR/XMLHttpRequest/" >http://www.w3.org/TR/XMLHttpRequest/</a></li> |
| -<li><a href="http://developer.mozilla.org/en/XMLHttpRequest" >http://developer.mozilla.org/en/XMLHttpRequest</a></li> |
| -<li><a href="http://msdn.microsoft.com/en-us/library/ms537505(VS.85).aspx" >http://msdn.microsoft.com/en-us/library/ms537505(VS.85).aspx</a></li> |
| -</ul> </div> |
| -<div id='noCache' class='section'><h3 id='FAQ4_17'>11.6 How do I force a reload from the server/prevent caching?</h3><p> |
| - |
| -To reload a page, use <code>location.reload()</code>. However, this depends |
| -upon the cache headers that your server sends. To change this, |
| -you need to alter the server configuration. A quick fix on the |
| -client is to change the page URI so that it contains a unique |
| -element, such as the current time. For example: |
| -<code>location.replace(location.href+'?d='+new Date().valueOf())</code> |
| -If the <code>location.href</code> already contains a query String, use: |
| -<code>location.replace(location.href+'&d='+new Date().valueOf())</code></p><ul class='linkList'><li><a href="http://www.mnot.net/cache_docs/" >http://www.mnot.net/cache_docs/</a></li> |
| -<li><a href="http://docs.sun.com/source/816-6408-10/date.htm" >http://docs.sun.com/source/816-6408-10/date.htm</a></li> |
| -</ul> </div> |
| -<div id='ajaxCache' class='section'><h3 id='FAQ4_45'>11.7 Why is my Ajax page not updated properly when using an HTTP GET request in Internet Explorer?</h3><p> |
| - |
| - Browsers cache the results of HTTP requests to reduce network traffic. |
| - To force the browser to request the document from the server, either |
| - set the <code>EXPIRES</code> and/or <code>CACHE-CONTROL</code> response header(s) |
| - with a past date or use a unique query string. |
| - </p> |
| -<pre> |
| - req.open("GET", "/example.jsp?date=" + (+new Date), true); |
| -</pre> |
| -<p> |
| - |
| -Always use the appropriate HTTP method. Do not use <code>POST</code> |
| -to prevent caching. See <a href="http://www.faqs.org/rfcs/rfc2616.html" >RFC 2616</a>. |
| - |
| -</p><ul class='linkList'><li><a href="http://www.mnot.net/cache_docs/#EXPIRES" >http://www.mnot.net/cache_docs/#EXPIRES</a></li> |
| -<li><a href="http://www.mnot.net/javascript/xmlhttprequest/cache.html " >http://www.mnot.net/javascript/xmlhttprequest/cache.html </a></li> |
| -</ul> </div> |
| -<div id='debugging' class='section'><h2>12 Debugging</h2> |
| -</div><div id='javascriptErrors' class='section'><h3 id='FAQ4_43'>12.1 How do I get my browser to report javascript errors?</h3><p> |
| - |
| -There are debugging tools for many browsers. Learn to use them all. |
| - </p> |
| -<dl> |
| - <dt> Windows </dt> |
| - <dd> <a href="http://www.fiddlertool.com/fiddler/" >Fiddler</a>. |
| -Fiddler is an HTTP Debugging proxy (it won't find script |
| -errors). Fiddler logs HTTP activity, like Firebug's Net |
| -tab, but can be attached to any browser running on Windows. |
| - </dd> |
| - <dt> Windows IE </dt> |
| - <dd> Microsoft Script Editor. Included with Visual Studio or Microsoft |
| -Word 2003 (discontinued in Office 2007). |
| -To enable, |
| -<code>Tools</code>, <code>Internet Options</code>, <code>Advanced</code>, and uncheck |
| -<code>Disable Script Debugging</code>. After enabling Script Debugging, |
| -a <code>Script Debugger</code> option will appear in the <code>View</code> menu. </dd> |
| - <dd> <a href="http://www.my-debugbar.com/wiki/IETester/HomePage" >IETester</a> for testing IE 5.5- IE8. </dd> |
| - <dd> <a href="http://www.my-debugbar.com/wiki/CompanionJS/HomePage" >CompanionJS</a><code>console</code> for IE. </dd> |
| - <dd> <em>Note:</em> For debugging scripts in IE, the Microsoft Script <em>Editor</em> |
| -is recommended. However, if not available, the <a href="http://www.microsoft.com/downloads/details.aspx?FamilyId=2F465BE0-94FD-4569-B3C4-DFFDF19CCD99&displaylang=en" >Microsoft Script Debugger</a> may be somewhat helpful. |
| - </dd> |
| - <dd> <a href="http://www.microsoft.com/downloads/details.aspx?FamilyID=e59c3964-672d-4511-bb3e-2d5e1db91038&displaylang=en" >Internet Explorer Developer Toolbar</a> </dd> |
| - <dd> |
| -To report errors: Wait until a little yellow |
| -triangle appears at the left end of the status bar, double click |
| -on it and, when the error dialog box appears, check the "Always |
| -show errors" checkbox it contains. |
| - |
| -Or, <code>Internet Options</code>, <code>Advanced</code>, deselect <code>"Disable Script Debugging"</code>, |
| -select <code>"Display a notification ..."</code>. |
| - </dd> |
| - <dt> Firefox </dt> |
| - <dd> <code>Tools > Error console</code> (<code>Ctrl</code> + <code>Shift</code> + <code>j</code>). |
| - </dd> |
| - <dd> <a href="http://getfirebug.com/" >Firebug</a> </dd> |
| - <dd> <a href="https://addons.mozilla.org/en-US/firefox/addon/5369" >YSlow</a>. |
| -YSlow analyzes web pages and tells you why they're slow |
| -based on Yahoo's rules for high performance web sites. |
| - </dd> |
| - <dd> <a href="https://addons.mozilla.org/en-US/firefox/addon/1743" >Lori</a> |
| -<dfn>Lori</dfn> or Life-of-request info, is useful for troubleshooting |
| -server response and page load time. |
| - </dd> |
| - <dd> <a href="https://addons.mozilla.org/en-US/firefox/addon/60" >Web Developer Toolbar</a>. |
| - </dd> |
| - <dd> <a href="https://addons.mozilla.org/en-US/firefox/addon/1201" >Cookie Watcher</a>. |
| - </dd> |
| - <dd> <a href="https://addons.mozilla.org/en-US/firefox/addon/1192" >XPather</a>. |
| -XPath generator, editor and inspector. |
| - </dd> |
| - <dt> Opera </dt> |
| - <dd> |
| -Tools > Advanced > Error console |
| - </dd> |
| - <dd> <a href="http://dev.opera.com/articles/view/introduction-to-opera-dragonfly/" >Introduction to Opera Dragonfly</a> </dd> |
| - <dt> Safari </dt> |
| - <dd> |
| -To display the <code>Develop</code> menu in Safari 3.1 or higher, select |
| -the checkbox labeled "Show Develop menu in menu bar" in |
| -Safari's <code>Advanced</code> Preferences panel. |
| - </dd> |
| - <dd> <a href="http://trac.webkit.org/wiki/Web%20Inspector " >Safari Web Inspector</a> </dd> |
| - <dt> Chrome </dt> |
| - <dd> |
| -JavaScript Console: click the <code>Page</code> menu icon and select |
| -<code>Developer > JavaScript Console</code>. From here, you'll be |
| -able to view errors in the JavaScript execution, and enter |
| -additional javascript commands to execute. |
| - </dd> |
| - <dd> |
| -JavaScript Debugger: available as <code>Page</code> menu icon > <code>Developer</code> |
| -> Debug JavaScript, the debugger provides a command prompt from which you |
| -can set breakpoints, backtrace, and more. Type <code>help</code> at the debugger |
| -command line to get started. |
| - </dd> |
| - <dd> |
| -<ul> <li> <a href="http://www.google.com/chrome/intl/en/webmasters-faq.html#jsexec" >Google Chrome Script Debugging</a> </li> |
| -<li> <a href="http://blog.chromium.org/2009/06/developer-tools-for-google-chrome.html" >Developer Tools for Google Chrome</a> </li> |
| -<li> <a href="http://blog.chromium.org/2009/08/google-chrome-developer-tools-for.html" >Tools for Eclipse Users</a> </li> |
| -</ul> |
| - </dd> |
| - <dt> Mac IE </dt> |
| - <dd> |
| -Use the Preferences dialog. |
| - </dd></dl></div> |
| -<div id='doNotTry' class='section'><h2>13 Things not to attempt in a browser</h2> |
| -</div><div id='detectBrowser' class='section'><h3 id='FAQ4_26'>13.1 How do I detect Opera/Safari/IE?</h3><p> |
| - |
| -The short answer: <em>Don't do that</em>. |
| - </p> <p> |
| - |
| -The <code>navigator</code> |
| -<dfn>host object</dfn> contains properties which |
| -may identify the browser and version. These properties are historically |
| -inaccurate. Some browsers allow the user to set <code>navigator.userAgent</code> to any value. For |
| -example, Firefox, (type <code>about:config</code> and search <code>useragent</code> |
| -or Safari, <code>Develop > User Agent > Other...</code>, IE, via Registry. |
| - </p> <p> |
| - |
| -Other browsers, such as Opera, provide a list of user agents |
| -for the user to select from. There are also at least 25 other |
| -javascript capable browsers, with multiple versions, each |
| -with their own string. |
| - </p> <p> |
| - |
| -Browser detection is unreliable, at best. It usually causes |
| -forward-compatibility and maintenance problems. It is unrelated to the |
| -problem or incompatiblity it is trying to solve and obscures the |
| -problems it is used for, where it is used. |
| - </p> <p> |
| - |
| -Object detection is checking that the object in question exists. |
| -<a href="http://dev.opera.com/articles/view/using-capability-detection/" >Capability detection</a> goes one step further to actually test the object, |
| -method, or property, to see if behaves in the desired manner. |
| - </p> <p> |
| - |
| -Feature Test Example: |
| - </p> |
| -<pre> |
| -/** |
| - * Returns the element/object the user targeted. |
| - * If neither DOM nor IE event model is supported, returns undefined. |
| - * @throws TypeError if the event is not an object. |
| - */ |
| -function getEventTarget(e) { |
| - e = e || window.event; |
| - // First check for the existence of standard "target" property. |
| - return e.target || e.srcElement; |
| -}</pre> |
| -<ul class='linkList'><li><a href="notes/detect-browser/" >notes/detect-browser/</a></li> |
| -<li><a href="http://dev.opera.com/articles/view/using-capability-detection/" >http://dev.opera.com/articles/view/using-capability-detection/</a></li> |
| -<li><a href="http://developer.apple.com/internet/webcontent/objectdetection.html" >http://developer.apple.com/internet/webcontent/objectdetection.html</a></li> |
| -<li><a href="http://www.w3.org/Protocols/rfc2616/rfc2616-sec14.html#sec14.43" >http://www.w3.org/Protocols/rfc2616/rfc2616-sec14.html#sec14.43</a></li> |
| -</ul> </div> |
| -<div id='preventAccess' class='section'><h3 id='FAQ4_5'>13.2 How can I prevent access to a web page by using javascript?</h3><p> |
| - |
| -In practice you can't. While you could create a suitable |
| -encryption system with a password in the page, the level of |
| -support you need to do this means it's always simpler to do it |
| -server-side. Anything that "protects" a page |
| -other than the current one is definitely flawed. |
| - </p> </div> |
| -<div id='hideSource' class='section'><h3 id='FAQ4_1'>13.3 How do I protect my javascript code?</h3><p> |
| - |
| -With clientside javascript you can't as your code is distributed |
| -in source form and is easily readable. With JScript, there is the |
| -Script Encoder (see MSDN), but this is nothing more than obfuscation. |
| -Attempting to disable the context menu does nothing to |
| -protect your script in a Web browser. |
| - </p><ul class='linkList'><li> |
| - Your code is likely protected under copyright laws. See: |
| - </li> |
| -<li><a href="http://www.wipo.int/about-ip/en/copyright.html" >http://www.wipo.int/about-ip/en/copyright.html</a></li> |
| -<li><a href="http://webdesign.about.com/od/copyright/Copyright_Issues_on_the_Web_Intellectual_Property.htm" >http://webdesign.about.com/od/copyright/Copyright_Issues_on_the_Web_Intellectual_Property.htm</a></li> |
| -</ul> </div> |
| -<div id='disableRightClick' class='section'><h3 id='FAQ4_27'>13.4 How do I suppress a context menu (right-click menu)?</h3><p> |
| - |
| -A context menu, often triggered by right-click, can be requested by the |
| -user in a few ways. For example, on windows, shift + F10 and on macs, |
| -click-and-hold. Other input devices exist and mouse buttons can be |
| -configured, making the term "right click" a misnomer, in context. |
| -</p> <p> |
| - |
| -In browsers that allow it, a script can suppress the context menu by |
| -returning false from an object's <code>oncontextmenu</code> event handler. |
| -</p> |
| -<pre> |
| -document.oncontextmenu = function() { |
| - return false; |
| -}; |
| -</pre> |
| -<p> |
| -Some browsers lack context menus (e.g. iphone). Browsers that have |
| -context menus do not always have a scriptable event for them. Some |
| -browsers can be configured to disallow scripts from detecting context |
| -menu events (IE, Opera); others may fire the event but be configured to |
| -disallow scripts from suppressing the context menu (Firefox,Seamonkey). |
| -</p> <p> |
| - |
| -Even when the context menu has been suppressed, it will still be |
| -possible to view/save the source code and to save images. |
| -</p><ul class='linkList'><li><a href="http://en.wikipedia.org/wiki/Context_menu" >http://en.wikipedia.org/wiki/Context_menu</a></li> |
| -<li><a href="http://kb.mozillazine.org/Ui.click_hold_context_menus" >http://kb.mozillazine.org/Ui.click_hold_context_menus</a></li> |
| -<li><a href="http://support.microsoft.com/kb/823057" >http://support.microsoft.com/kb/823057</a></li> |
| -<li><a href="http://stackoverflow.com/questions/1870880/opera-custom-context-menu-picking-up-the-right-click/1902730#1902730" >http://stackoverflow.com/questions/1870880/opera-custom-context-menu-picking-up-the-right-click/1902730#1902730</a></li> |
| -<li><a href="http://support.mozilla.com/en-US/kb/Javascript#Advanced_JavaScript_settings" >http://support.mozilla.com/en-US/kb/Javascript#Advanced_JavaScript_settings</a></li> |
| -<li><a href="http://msdn.microsoft.com/en-us/library/ms536914%28VS.85%29.aspx" >http://msdn.microsoft.com/en-us/library/ms536914%28VS.85%29.aspx</a></li> |
| -</ul> </div> |
| -<div id='readFile' class='section'><h3 id='FAQ4_3'>13.5 How can I access the client-side filesystem?</h3><p> |
| - |
| -Security means that by default you can't. In a more restricted |
| -environment, there are options. For example, using LiveConnect to |
| -connect to Java with Netscape, and using the FileSystemObject in |
| -IE. Check <a href="http://groups.google.com/group/comp.lang.javascript/topics" >Google Groups archives</a> |
| -for previous posts on the subject. |
| - </p><ul class='linkList'><li><a href="http://msdn.microsoft.com/en-us/library/z9ty6h50%28VS.85%29.aspx" >http://msdn.microsoft.com/en-us/library/z9ty6h50%28VS.85%29.aspx</a></li> |
| -<li><a href="http://www.javaworld.com/javaworld/jw-10-1998/jw-10-apptowin32.html" >http://www.javaworld.com/javaworld/jw-10-1998/jw-10-apptowin32.html</a></li> |
| -</ul> </div> |
| -<div id='javascriptURI' class='section'><h3 id='FAQ4_24'>13.6 I have <a href="javascript:somefunction()"> what ... ?</h3><p> |
| - |
| -Whatever the rest of your question, this is generally a very bad idea. |
| -The <code>javascript:</code> pseudo protocol was designed to replace the |
| -current document with the value that is returned from the expression. |
| -For example: |
| - </p> |
| -<pre> |
| - <a href="javascript:'&lt;h1&gt;' + document.lastModified + '&lt;/h1&gt;'">lastModified</a> |
| -</pre> |
| -<p> |
| -will result in replacing the current document with the value |
| -returned from <code>document.lastModified</code>, wrapped in an <code><h1></code> |
| -tag. |
| - </p> <p> |
| - |
| -When the expression used evaluates to an <code>undefined</code> value |
| -(as some function calls do), the contents of the current page are not |
| -replaced. Regardless, some browsers (notably IE6) interpret this as |
| -navigation and will enter into a 'navigation' state where GIF |
| -animations and plugins (such as movies) will stop and navigational |
| -features such as <code>META</code> refresh, assignment to <code>location.href</code>, and image |
| -swaps fail. |
| - </p> <p> |
| - |
| -It is also possible for IE to be configured such that it supports |
| -javascript but not the <code>javascript:</code> protocol. This results |
| -in the user seeing a protocol error for <code>javascript:</code> URIs. |
| - </p> <p> |
| - |
| -The <code>javascript:</code> pseudo protocol creates accessibility and |
| -usability problems. It provides no fallback for when the script is not |
| -supported. |
| - </p> <p> |
| - |
| -Instead, use |
| -<code><a href="something.html" onclick="somefunction();return false"></code> |
| -where <code>something.html</code> is a meaningful alternative. Alternatively, |
| -attach the <code>click</code> callback using an event registry. |
| - </p><ul class='linkList'><li><a href="example/jsuri/" >example/jsuri/</a></li> |
| -<li><a href="http://groups.google.com/group/comp.lang.javascript/msg/f665cfca3b619692" >Set/Navigate to a Location</a></li> |
| -<li><a href="http://www.useit.com/alertbox/20021223.html" >Top Ten Web-Design Mistakes of 2002</a></li> |
| -</ul> </div> |
| -<div id='comments' class='section'><h2 id='FAQ5'>14 Comments and Suggestions</h2> |
| -<p> |
| - |
| -The FAQ uses the stylesheet <a href="faq.css" >faq.css</a> and is generated |
| -from the xml source <a href="index.xml" >index.xml</a> by the windows script |
| -host script <a href="process.wsf" >process.wsf</a> which also checks the links. |
| - </p> </div><div id='FAQENTRY' class='section'><h3 id='FAQ5_1'>14.1 Why do some posts have <FAQENTRY> in them?</h3><p> |
| - |
| -If a poster feels that the question they are answering should be |
| -covered in the FAQ, placing <FAQENTRY> in the post lets the FAQ |
| -robot collect the messages for easy review and inclusion. A Draft Proposal |
| -for the FAQ is requested and appreciated. |
| - </p> <p> |
| - |
| -The <FAQENTRY> should not be used in posts except in |
| -conjunction with a suggestion/proposal for the FAQ. It should |
| -also not be literally quoted in replies, instead it should be |
| -partly obscured as, e.g. <FAQ**TRY> or similar. |
| - </p> </div> |
| -<div id='makeSuggestion' class='section'><h3 id='FAQ5_2'>14.2 How do I make a suggestion?</h3><p> |
| - |
| -The FAQ is currently lacking a maintainer, please contact Jim Ley |
| -(jim.ley@gmail.com) if you wish to take it over, you will need to |
| -be in good standing in the group and trustworthy to have access to the |
| -server. All comments, suggestions, and especially corrections are |
| -welcome. |
| - </p> </div> |
| -<!--<script src='FAQReader.js' type='text/javascript'></script>--></body> |
| -</html> |
| - |
| /cljs/backup/index.html |
| Property changes: |
| Deleted: svn:mime-type |
| ## -1 +0,0 ## |
| -text/plain |
| \ No newline at end of property |
| Index: cljs/backup/process.wsf |
| =================================================================== |
| --- cljs/backup/process.wsf (revision 45) |
| +++ cljs/backup/process.wsf (nonexistent) |
| @@ -1,387 +0,0 @@ |
| -<job id="process"> |
| -<!-- |
| -This file generates the FAQ index.html |
| ---> |
| -<SCRIPT> |
| -/** |
| - * Formatting - Still messy. |
| - * Needed corrections: |
| - * statements terminated with semicolon. |
| - * use |var| for variables. |
| - * use whitespace. |
| - * 2 spaces for indentation (not one). |
| - */ |
| -var CheckUrls=false, |
| - xmlhttp = new ActiveXObject("Msxml2.XMLHTTP"); |
| - |
| -// moomin.utilities can be got from http://www.e-media.co.uk/earl/ |
| -// var mu=new ActiveXObject("Moomin.Utilities") |
| - |
| -var xml = new ActiveXObject("Microsoft.XMLDOM"); |
| -xml.async = false; |
| -xml.validateOnParse = false; |
| -xml.resolveExternals = false; |
| -xml.load("index.xml"); |
| -xml.save("indexold.xml"); |
| - |
| -var faqNode = xml.selectSingleNode("/FAQ"), |
| - Version = faqNode.attributes.getNamedItem("VERSION").nodeValue, |
| - maintainer = "Garrett Smith", |
| - Updated = faqNode.attributes.getNamedItem("DATE").nodeValue; |
| - |
| -var str = '<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" \n' |
| - + '"http://www.w3.org/TR/html4/strict.dtd">\n<html lang="en">\n' |
| - + '<head>\n' |
| - + '<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">\n' |
| - + '<meta name="DCTERMS.language" scheme="RFC1766" content="en">\n' |
| - + '<meta name="DC.title" content="comp.lang.javascript Frequently Asked Questions">\n' |
| - + '<meta name="DCTERMS.subject" ' |
| - + 'content="Frequently asked questions in the Usenet newsgroup comp.lang.javascript">\n' |
| - + '<meta name="DC.format" content="text/html">\n' |
| - + '<meta name="DC.type" content="Text">\n' |
| - + '<meta name="DC.creator" content="Jim Ley">\n' |
| - + '<meta name="DC.publisher" content="' + maintainer + '">\n' |
| - + '<META name="DC.Publisher.Address" ' |
| - + 'content="dhtmlkitchen@gmail.com">\n' |
| - + '<meta name="DCTERMS.modified" content="' + Updated +'">\n' |
| - + '<meta name="DCTERMS.audience" content="Programmers, web developers">\n' |
| - + '<meta name="DC.description" content="Javascript Frequently Asked Questions">\n' |
| - + '<meta name="DC.identifier" content="http://jibbering.com/faq">\n' |
| - + '<meta name="DC.source" ' |
| - + 'content="http://www.ecma-international.org/publications/standards/Ecma-262.htm">\n' |
| - + '<meta name="DC.source" content="news:comp.lang.javascript">\n' |
| - + '<meta name="DC.source" content="https://developer.mozilla.org/en/JavaScript">\n' |
| - + '<meta name="DC.source" content="http://msdn.microsoft.com/en-us/library/hbxc2t98%28VS.85%29.aspx">\n' |
| - + '<meta name="DC.source" content="http://msdn.microsoft.com/en-us/library/ms533050%28VS.85%29.aspx">\n' |
| - + '<meta name="DC.rights" content="copyright contributors, comp.lang.javascript">\n' |
| - + '<link rel="StyleSheet" href="faq.css" type="text/css" media="screen">\n'; |
| - |
| -TitleStr = xml.selectSingleNode("/FAQ/TITLE").firstChild.nodeValue; |
| - |
| -str += "<title> "+TitleStr+"</title>\n" |
| - + '</head>\n <body>\n' |
| - + "<h1> "+TitleStr+"</h1>\n" |
| - + "<p>Version "+Version+", Updated "+Updated +", by " + maintainer + "</p>" |
| - + '<div id="nav"><a href="notes/">FAQ Notes</a></div>'; |
| - |
| -var contentstr = ""; |
| -Contents = xml.selectSingleNode("/FAQ/CONTENTS").selectNodes("CONTENT"); |
| - |
| -str += "\n<ul id='faqList'>\n"; |
| - |
| -for (var i = 0; i < Contents.length; i++) { |
| - CNode = Contents[i]; |
| - var sectionId = CNode.getAttribute("ID") || "", |
| - title = CNode.getAttribute("TITLE"); |
| - |
| - str += "<li>" + (i+1) + " <a href='#" + sectionId +"'>" + title + "</a>\n"; |
| - |
| - contentstr += "<div id='" + sectionId +"' class='section'>" |
| - + "<h2"+getOldId(CNode)+">" |
| - + (i+1) + " " + title |
| - + "</h2>\n" |
| - + processContentChildren(CNode) |
| - + "</div>"; |
| - |
| - var SubContents = CNode.selectNodes("CONTENT"); |
| - processContentChildren(CNode); |
| - if(SubContents.length > 0) { |
| - str += "\n<ul>\n"; |
| - |
| - // Build a link to a subsection. |
| - // a subsection looks like: |
| - // <h3 id=[FAQ5_7 | getWindowSize]><a name=FAQ5_7></a> ... </h3> |
| - // This allows for items to be moved around in various |
| - // order (index should not matter). |
| - |
| - for (var j = 0; j < SubContents.length; j++) { |
| - var SubCNode = SubContents[j], |
| - subSectionId = SubCNode.getAttribute("ID"), |
| - title = SubCNode.getAttribute("TITLE"), |
| - entryNumber = ""+(i+1)+"."+ (j+1); |
| - |
| - str += "<li>" + entryNumber +" <a href='#"+ subSectionId +"'>" + title + "</a></li>\n"; |
| - |
| - contentstr += "<div id='" + subSectionId + "' class='section'>" |
| - + "<h3" + getOldId(SubCNode) + ">" |
| - + entryNumber + " " + title |
| - + '</h3>' |
| - + processContentChildren(SubCNode ) |
| - + '</div>' |
| - + '\n'; |
| - } |
| - str += "</ul>"; |
| - } |
| - str += "</li>"; |
| -} |
| - |
| -/** |
| - * If the node contains a "NUMID", |
| - * the content is wrapped in an anchor, e.g. "<a name='" + NUMID. |
| - * Otherwise, returns the content. |
| - */ |
| -function getOldId(node) { |
| - var faqSectionIndexString = node.getAttribute("NUMID") || ""; |
| - return (faqSectionIndexString ? |
| - " id='FAQ" + faqSectionIndexString +"'" : ""); |
| -} |
| - |
| -str += "</ul>" |
| - + contentstr |
| - + "<!--<script src='FAQReader.js' type='text/javascript'><\/script>-->" |
| - + "</body> \n</html> \n"; |
| -str = str.replace(/<p><\/p>/gm,"").replace(/<p> <\/p>/gm,""); |
| - |
| -// Create the files. |
| -var FSO = new ActiveXObject("Scripting.FileSystemObject"); |
| -FIL = FSO.CreateTextFile("index"+Version+".html",true); |
| -FIL.WriteLine(str); |
| -FIL.close(); |
| -FIL=FSO.CreateTextFile("index.html",true); |
| -FIL.WriteLine(str); |
| -FIL.close(); |
| -if (CheckUrls) { |
| - xml.save("index.xml"); |
| - xml.save("index"+Version+".xml"); |
| -} |
| - |
| -function processContentChildren(cNode) { |
| - var allNodes = cNode.selectNodes("*"), |
| - contentstr = "";; |
| - for(var k = 0; k < allNodes.length; k++) { |
| - var node = allNodes[k]; |
| - if(node.tagName == "P") |
| - contentstr += ProcessNode(node); |
| - |
| - // List nodes, for UL, OL, DL. |
| - else if(node.tagName == "LIST") |
| - contentstr += processList(allNodes[k]); |
| - } |
| - return contentstr; |
| -} |
| - |
| -function ProcessNode(nde) { |
| - var str = " ", p = "", closeP = "", child; |
| - if(nde.tagName == "P") { |
| - str = "<p>\n "; |
| - p = "<p>"; |
| - closeP = "</p>"; |
| - } |
| - for (var i = 0;i < nde.childNodes.length; i++) { |
| - child = nde.childNodes[i]; |
| - switch (child.nodeName) { |
| - case "#comment" : |
| - str += "<!--" + child.data + "-->"; |
| - break; |
| - case "#text" : |
| - // If a text node is empty, do not generate an empty <p> tag. |
| - if(child.nodeValue.replace(/\s+/,'') == "") return " "; |
| - str += child.nodeValue; |
| - break; |
| - case "VER" : |
| - str += Version; |
| - break; |
| - case "UPDATED" : |
| - str += Updated; |
| - break; |
| - case "URL" : |
| - str += makeLink(child); |
| - break; |
| - case "EM" : |
| - var url= child.firstChild.nodeValue; |
| - str+=' <em>'+url+'</em>'; |
| - break; |
| - case "NEWSGROUP" : |
| - var url= child.firstChild.nodeValue; |
| - str+=' <a href="news:'+url+'">'+url+'</a>'; |
| - break; |
| - case "MAILTO" : |
| - var url= child.firstChild.nodeValue; |
| - str+=' <a href="mailto:'+url+'">'+url+'</a>'; |
| - break; |
| - case "MOREINFO" : |
| - str += closeP + ProcessResource(child) + p; |
| - break; |
| - case "UL" : |
| - str+= closeP + " \n<ul> "+ProcessUL(nde.childNodes[i])+"</ul> \n" + p; |
| - break; |
| - case "LI" : |
| - str+="<li> "+ ProcessNode( child ) + "</li>"; |
| - break; |
| - case "CODE" : |
| - str+= closeP + "\n<pre>"+ child.firstChild.nodeValue +"</pre>\n"+p; |
| - break; |
| - case "ICODE" : |
| - str += "<code>"+ child.firstChild.nodeValue+"</code>"; |
| - break; |
| - case "DFN" : |
| - var title = child.attributes.getNamedItem("TITLE"); |
| - title = title && (" title = '" + title.nodeValue +"'") || ""; |
| - str +="\n<dfn" + title + ">" |
| - + child.firstChild.nodeValue + "</dfn>"; |
| - break; |
| - default: |
| - str += child.nodeValue; |
| - break; |
| - } |
| - } |
| - return str+= closeP + " "; |
| -} |
| - |
| -function makeLink(child) { |
| - var url = child.firstChild.nodeValue, |
| - linkText = child.attributes.getNamedItem("LINKTEXT"), |
| - addstr = checkUrl(url, child); |
| - linkText = linkText && linkText.nodeValue; |
| - return '<a href="'+url+'" '+addstr+'>'+(linkText||url)+'</a>'; |
| -} |
| - |
| -/** Processing for OL, UL, DL. |
| - * calls processNode. |
| - */ |
| -function processList(list) { |
| - var str = "", |
| - header = "", |
| - title = list.getAttribute("TITLE"), |
| - id = list.getAttribute("ID"), |
| - idStr = (id && " id='" + id + "'") || ""; |
| - |
| - if(title) { |
| - header = "\n<h4" + idStr +">" + title + "</h4>\n"; |
| - idStr = ""; // Output id only once. |
| - } |
| - |
| - var type = list.getAttribute("TYPE"); |
| - type = (type || "ul").toLowerCase(); |
| - |
| - str += "\n<" + type + idStr +">"; |
| - |
| - for (var i = 0; i < list.childNodes.length; i++) { |
| - var child = list.childNodes[i], |
| - tagName = child.nodeName; |
| - |
| - // If not a list-type element, |
| - // add it to the header (will appear first). |
| - if(!/(?:LI)|(?:DT)|(?:DD)/.test(tagName)) { |
| - header += ProcessNode(child); |
| - } |
| - else if(tagName !== "#text") { |
| - tagName = tagName.toLowerCase(); |
| - str += "\n <" +tagName +">" + ProcessNode(child) + "</" +tagName +">"; |
| - } |
| - } |
| - return header + str + "</" + type + ">"; |
| -} |
| - |
| - function ProcessUL(nde) { |
| - var str="" |
| - for (var i=0;i<nde.childNodes.length;i++) { |
| - |
| - var child = nde.childNodes[i]; |
| - |
| - switch (nde.childNodes[i].nodeName) { |
| - case "#text" : |
| - str+=nde.childNodes[i].nodeValue; |
| - break; |
| - case "VER" : |
| - str+=Version |
| - break; |
| - case "URL" : |
| - str += makeLink(child); |
| - break; |
| - case "NEWSGROUP" : |
| - var url = child.firstChild.nodeValue |
| - str+=' <a href="news:'+url+'">'+url+'</a> \n' |
| - break; |
| - case "MAILTO" : |
| - var url= child.firstChild.nodeValue; |
| - str+=' <a href="mailto:'+url+'">'+url+'</a> \n' |
| - break; |
| - case "UL" : |
| - str+="<ul>\n" + ProcessNode(child) + "\n</ul>\n" |
| - break; |
| - case "LI" : |
| - str+="<li> " + ProcessNode(child) + "</li> \n" |
| - break; |
| - case "CODE" : |
| - str+="</p>\n<pre>"+nde.childNodes[i].firstChild.nodeValue.replace('\r',"<BR> ")+"</pre> \n<p> \n" |
| - break; |
| - case "ICODE" : |
| - str+="<code>"+nde.childNodes[i].firstChild.nodeValue+"</code>\n" |
| - break; |
| - default: |
| - document.write(nde.childNodes[i].nodeName+'<br> \n') |
| - str+=nde.childNodes[i].nodeValue; |
| - break; |
| - } |
| - } |
| - return str += ""; |
| - } |
| - |
| - |
| -function ProcessResource(nde) { |
| - var str="<ul class='linkList'>", child; |
| - for (var i = 0; i < nde.childNodes.length; i++) { |
| - child = nde.childNodes[i]; |
| - switch (child.nodeName) { |
| - case "#text" : |
| - if(/[a-zA-Z]/.test(child.nodeValue)) |
| - str += '<li>' + child.nodeValue + '</li>\n'; |
| - break; |
| - case "URL" : |
| - str+='<li>' + makeLink(child) + '</li>\n'; |
| - break; |
| - case "NEWSGROUP" : |
| - var url = child.firstChild.nodeValue; |
| - str += '<li><a href="news:'+url+'">' + url + '</a></li> \n'; |
| - break; |
| - |
| - } |
| - } |
| - return str + "</ul>"; |
| -} |
| - |
| - function checkUrl(url,node) { |
| - url=url.split('#')[0] |
| - if (CheckUrls) { |
| - if (url.indexOf('http://')==0) { |
| - xmlhttp.Open("get",url,false) |
| - try { |
| - xmlhttp.Send() |
| - } catch (e) { WScript.Echo(url);return ""; } |
| - stat=xmlhttp.status |
| - node.attributes.getNamedItem("status").nodeValue=stat |
| - if (stat==200) { |
| - source=xmlhttp.responseText |
| - if (url.indexOf('microsoft')!=-1 && source.indexOf('Page Cannot')!=-1) { |
| - //Ugly hack 'cos MSDN don't understand HTTP. |
| - stat=404 |
| - node.attributes.getNamedItem("status").nodeValue=stat |
| - return ' class="nolink" ' |
| - } |
| - contentlength=source.length |
| -// oldhash=node.attributes.getNamedItem("hash").nodeValue |
| -// hash=mu.MD5(source,"faq") |
| -// node.attributes.getNamedItem("hash").nodeValue=hash |
| - classstr="" |
| -// if (oldhash!=hash) classstr=' class="updated"' |
| - lm=xmlhttp.getResponseHeader("Last-Modified") |
| - return classstr+' title="'+lm+'" ' |
| - } else { |
| - xmlhttp.Open("get","http://www.google.com/search?q=cache:"+url,false) |
| - xmlhttp.Send() |
| - if (xmlhttp.responseText.indexOf('did not match any documents')==-1) { |
| - return ' class="nolink"> \n<small> \n<a href="http://www.google.com/search?q=cache:'+url+'>(Googles cached copy)</a> \n<small' |
| - } |
| - return ' class="nolink" ' |
| - } |
| - } else { |
| - return "" |
| - } |
| - } else { |
| - return "" |
| - } |
| - |
| - } |
| -</SCRIPT> |
| -</job> |
| Index: cljs/index.xml |
| =================================================================== |
| --- cljs/index.xml (revision 45) |
| +++ cljs/index.xml (nonexistent) |
| @@ -1,37 +0,0 @@ |
| -<!DOCTYPE FAQ [ |
| - <!ENTITY trade "™"><!-- trade mark sign, U+2122 ISOnum --> |
| - |
| - <!ENTITY meta SYSTEM "sections/meta.xml"> |
| - <!ENTITY overview SYSTEM "sections/overview.xml"> |
| - <!ENTITY resources SYSTEM "sections/resources.xml"> |
| - <!ENTITY functions SYSTEM "sections/functions.xml"> |
| - <!ENTITY dates SYSTEM "sections/dates.xml"> |
| - <!ENTITY numbers SYSTEM "sections/numbers.xml"> |
| - <!ENTITY objects SYSTEM "sections/objects.xml"> |
| - <!ENTITY strings SYSTEM "sections/strings.xml"> |
| - <!ENTITY dom SYSTEM "sections/dom.xml"> |
| - <!ENTITY windows SYSTEM "sections/windows.xml"> |
| - <!ENTITY server SYSTEM "sections/server.xml"> |
| - <!ENTITY debugging SYSTEM "sections/debugging.xml"> |
| - <!ENTITY donts SYSTEM "sections/donts.xml"> |
| - <!ENTITY suggestions SYSTEM "sections/suggestions.xml"> |
| -]> |
| -<FAQ VERSION="32.2" DATE="2010-10-08" revision="$Revision$" id="$Id$"> |
| - <TITLE>FAQ for comp.lang.javascript</TITLE> |
| - <CONTENTS> |
| - &meta; |
| - &overview; |
| - &resources; |
| - &functions; |
| - &dates; |
| - &numbers; |
| - &objects; |
| - &strings; |
| - &dom; |
| - &windows; |
| - &server; |
| - &debugging; |
| - &donts; |
| - &suggestions; |
| - </CONTENTS> |
| -</FAQ> |
| \ No newline at end of file |
| /cljs/index.xml |
| Property changes: |
| Deleted: svn:keywords |
| ## -1 +0,0 ## |
| -LastChangedDate LastChangedRevision LastChangedBy Id |
| \ No newline at end of property |
| Deleted: svn:mime-type |
| ## -1 +0,0 ## |
| -text/plain |
| \ No newline at end of property |
| Index: cljs/sections/dates.xml |
| =================================================================== |
| --- cljs/sections/dates.xml (revision 45) |
| +++ cljs/sections/dates.xml (nonexistent) |
| @@ -1,99 +0,0 @@ |
| -<?xml version="1.0" encoding="UTF-8"?> |
| -<CONTENT TITLE="Dates" ID="dates"> |
| - <P> |
| - ISO 8601 defines date and time formats. Some benefits include: |
| - </P> |
| - <LIST TYPE="UL"> |
| - <LI>language-independent and unambiguous world-wide</LI> |
| - <LI>sortable with a trivial string comparison</LI> |
| - <LI>easily readable and writable by software</LI> |
| - <LI>compatible with standards ISO 9075 and <URL LINKTEXT="rfc 3339">http://www.ietf.org/rfc/rfc3339.txt</URL></LI> |
| - </LIST> |
| - <P> |
| - The ISO Extended format for common date is <ICODE>YYYY-MM-DD</ICODE>, and for time is |
| - <ICODE>hh:mm:ss</ICODE>. |
| - </P> |
| - <P> |
| - For an event with an offset from UTC, use <ICODE>YYYY-MM-DDThh:mm:ss±hh:mm</ICODE>. |
| - </P> |
| - <P> |
| - Never use a local date/time format for a non-local event. Instead, use |
| - UTC, as in <ICODE>YYYY-MM-DDThh:mm:ssZ</ICODE> (<ICODE>Z</ICODE> is the only letter suffix). |
| - </P> |
| - <P> |
| - The <ICODE>T</ICODE> can be omitted where that would not cause ambiguity. For |
| - rfc 3339 compliance, it may be replaced by a space and for SQL, |
| - it <EM>must</EM> be replaced by a single space. |
| - </P> |
| - <P> |
| - Year <ICODE>0000</ICODE> is unrecognized by some formats (XML Schema, <ICODE>xs:date</ICODE>). |
| - </P> |
| - <MOREINFO> |
| - <URL LINKTEXT="ECMA-262 Date.prototype, s. 15.9">#onlineResources</URL> |
| - <URL LINKTEXT="A summary of the international standard date and time notation, by Markus Kuhn" |
| - >http://www.cl.cam.ac.uk/~mgk25/iso-time.html</URL> |
| - <URL>http://en.wikipedia.org/wiki/ISO_8601</URL> |
| - <URL LINKTEXT="ISO 8601:2004(E)">res/ISO_8601-2004_E.pdf</URL> |
| - <URL LINKTEXT="W3C QA Tip: Use international date format (ISO)">http://www.w3.org/QA/Tips/iso-date</URL> |
| - <URL LINKTEXT="RFC 3339, Date and Time on the Internet: Timestamps" |
| - >http://www.ietf.org/rfc/rfc3339.txt</URL> |
| - <URL>http://www.w3.org/TR/xmlschema-2/#dateTime</URL> |
| - </MOREINFO> |
| - |
| - <CONTENT TITLE="How do I format a Date object with javascript?" ID="formatDate" NUMID="4_30"> |
| - <P> |
| - A local <ICODE>Date</ICODE> object where <ICODE>0 <= year <= 9999</ICODE> can be |
| - formatted to a common ISO 8601 format <ICODE>YYYY-MM-DD</ICODE> with:- |
| - </P> |
| - <CODE> |
| -/** Formats a Date to YYYY-MM-DD (local time), compatible with both |
| - * ISO 8601 and ISO/IEC 9075-2:2003 (E) (SQL 'date' type). |
| - * @param {Date} dateInRange year 0000 to 9999. |
| - * @throws {RangeError} if the year is not in range |
| - */ |
| -function formatDate(dateInRange) { |
| - var year = dateInRange.getFullYear(), |
| - isInRange = year >= 0 && year <= 9999, yyyy, mm, dd; |
| - if(!isInRange) { |
| - throw RangeError("formatDate: year must be 0000-9999"); |
| - } |
| - yyyy = ("000" + year).slice(-4); |
| - mm = ("0" + (dateInRange.getMonth() + 1)).slice(-2); |
| - dd = ("0" + (dateInRange.getDate())).slice(-2); |
| - return yyyy + "-" + mm + "-" + dd; |
| -} |
| - </CODE> |
| - <MOREINFO> |
| - <URL>http://www.merlyn.demon.co.uk/js-date9.htm</URL> |
| - </MOREINFO> |
| - </CONTENT> |
| - <CONTENT TITLE="How can I create a Date object from a String?" ID="parseDate"> |
| - <P> |
| - An Extended ISO 8601 local Date format <ICODE>YYYY-MM-DD</ICODE> can be parsed to a |
| - Date with the following: |
| - </P> |
| - <CODE> |
| -/**Parses string formatted as YYYY-MM-DD to a Date object. |
| - * If the supplied string does not match the format, an |
| - * invalid Date (value NaN) is returned. |
| - * @param {string} dateStringInRange format YYYY-MM-DD, with year in |
| - * range of 0000-9999, inclusive. |
| - * @return {Date} Date object representing the string. |
| - */ |
| -function parseISO8601(dateStringInRange) { |
| - var isoExp = /^\s*(\d{4})-(\d\d)-(\d\d)\s*$/, |
| - date = new Date(NaN), month, |
| - parts = isoExp.exec(dateStringInRange); |
| - |
| - if(parts) { |
| - month = +parts[2]; |
| - date.setFullYear(parts[1], month - 1, parts[3]); |
| - if(month != date.getMonth() + 1) { |
| - date.setTime(NaN); |
| - } |
| - } |
| - return date; |
| -} |
| - </CODE> |
| - </CONTENT> |
| -</CONTENT> |
| \ No newline at end of file |
| /cljs/sections/dates.xml |
| Property changes: |
| Deleted: svn:mime-type |
| ## -1 +0,0 ## |
| -text/plain |
| \ No newline at end of property |
| Index: cljs/sections/server.xml |
| =================================================================== |
| --- cljs/sections/server.xml (revision 45) |
| +++ cljs/sections/server.xml (nonexistent) |
| @@ -1,170 +0,0 @@ |
| -<?xml version="1.0" encoding="UTF-8"?> |
| -<CONTENT TITLE="Ajax and Server Communication" ID="ajaxRef"> |
| - <CONTENT TITLE="What is Ajax?" ID="ajax" NUMID="4_44"> |
| - <P> |
| -<DFN TITLE="Asynchronous JavaScript and XML">Ajax</DFN> |
| -is shorthand for Asynchronous JavaScript and XML. The technology is |
| -based on the <ICODE>XMLHttpRequest</ICODE> Object. At its simplest, |
| -it is the sending/retrieving of new data from the server without |
| -changing or reloading the window location. |
| - </P> |
| -<MOREINFO> |
| -Mozilla Documentation: |
| -<URL>http://developer.mozilla.org/en/docs/XMLHttpRequest</URL> |
| -MSDN Documention: |
| -<URL>http://msdn.microsoft.com/en-us/library/ms535874%28VS.85%29.aspx</URL> |
| -<URL>http://msdn.microsoft.com/en-us/library/ms759148%28VS.85%29.aspx</URL> |
| - |
| -<DFN TITLE="Asynchronous JavaScript and XML">Ajax</DFN> |
| -Libraries and Tutorial Sites: |
| -<URL>http://jibbering.com/2002/4/httprequest.html</URL> |
| -<URL>http://www.ajaxtoolbox.com/</URL> |
| -</MOREINFO> |
| - </CONTENT> |
| - <CONTENT TITLE="How do I download a page to a variable?" ID="downloadPage" NUMID="4_38"> |
| - <P> |
| -Although <ICODE>XMLHttpRequest</ICODE> can be used to download |
| -entire pages, it is often used for downloading small pieces |
| -of data that can be used to update the current page. |
| - </P> |
| - <MOREINFO> |
| - <URL>http://jibbering.com/2002/4/httprequest.html</URL> |
| - <URL>http://www.ajaxtoolbox.com/</URL> |
| - </MOREINFO> |
| - </CONTENT> |
| - <CONTENT TITLE="How do I get a jsp/php variable into client-side javascript?" |
| - ID="getServerVariable" NUMID="4_18"> |
| - <P> |
| -Use a server-side language to generate the javascript. |
| -</P> |
| -<P> |
| -Certain characters of ECMAScript strings must be escaped by backslash. |
| -These include quote marks, backslash, and line terminators. |
| -</P> |
| -<P>JSP Example, using Apache Commons: <ICODE>org.apache.commons.lang.StringEscapeUtils</ICODE>: |
| -</P> |
| - <CODE> |
| -var jsVar = "<%= StringEscapeUtils.escapeJavaScript(str) %>"; |
| -</CODE> |
| -<P>PHP example using <ICODE>addcslashes</ICODE>: </P> |
| -<CODE> |
| -var jsVar = "<?php echo addcslashes($str,"\\\'\"\n\r"); ?>"; |
| -</CODE> |
| - <MOREINFO> |
| - <URL>example/addcslashes.php</URL> |
| - <URL>http://php.net/manual/en/function.addcslashes.php</URL> |
| - <URL>http://commons.apache.org/lang/</URL> |
| - </MOREINFO> |
| - </CONTENT> |
| - <CONTENT TITLE="How do I log-out a user when they leave my site?" |
| - ID="sessionExpired" NUMID="4_29"> |
| - <P> |
| -This cannot be done reliably. Here's why: |
| - </P> |
| - <UL> |
| - <LI> |
| -The user may disable javascript so the log-out script will |
| -never execute. |
| - </LI> |
| - <LI> |
| -The user may not be on-line when they close your web page. |
| - </LI> |
| - <LI> |
| -Javascript errors elsewhere in the page may prevent the script |
| -executing. |
| - </LI> |
| - <LI> |
| -The browser may not support the onunload event, or may not fire |
| -it under certain circumstances, so the log-out function will |
| -not execute. |
| - </LI> |
| - </UL> |
| -The URL below has more information. |
| -<MOREINFO> |
| -<URL>http://groups.google.com/groups?selm=BlmZ7.55691%244x4.7344316%40news2-win.server.ntlworld.com</URL> |
| - </MOREINFO> |
| - </CONTENT> |
| - <CONTENT TITLE="How do I run a server side script?" ID="runServerScript" NUMID="4_34"> |
| - <P> |
| -You trigger a server-side script by sending an HTTP request. |
| -This can be achieved by setting the <ICODE>src</ICODE> of an <ICODE>img</ICODE>, |
| -<ICODE>Image</ICODE>, <ICODE>frame</ICODE>, or <ICODE>iframe</ICODE>, or by using <DFN |
| -TITLE="XMLHttpRequest or XMLHTTP">XHR</DFN>, where supported. |
| - </P> |
| - <P> |
| -An image will also |
| -"swallow" the data sent back by the server, so that they will |
| -not be visible anywhere. |
| -</P> |
| - <CODE> |
| - var dummyImage = new Image(); |
| - dummyImage.src = "scriptURL.asp?param=" + varName; |
| -</CODE> |
| - <P> |
| -Mozilla, Opera 7.6+, Safari 1.2+, and Windows IE 7 |
| -provide the <ICODE>XMLHttpRequest</ICODE> object |
| -(Windows IE versions 5+, provides ActiveX to acheive an analagous |
| -effect). <ICODE>XMLHttpRequest</ICODE> can send HTTP requests to |
| -the server, and provides access the <ICODE>responseText</ICODE> or <ICODE>responseXML</ICODE> |
| -(when the response is XML), and HTTP header information. |
| -</P> |
| -<MOREINFO> |
| -<URL>http://jibbering.com/2002/4/httprequest.html</URL> |
| -<URL>http://www.w3.org/TR/XMLHttpRequest/</URL> |
| -<URL>http://developer.mozilla.org/en/XMLHttpRequest</URL> |
| -<URL>http://msdn.microsoft.com/en-us/library/ms537505(VS.85).aspx</URL> |
| -</MOREINFO> |
| - <CONTENT TITLE="Why are my rollovers so slow?" ID="imageCache" NUMID="4_31"> |
| - <P> |
| -Images are cached by the browser depending on the headers sent by |
| -the server. If the server does not send sufficient information |
| -for the browser to decide the image is cacheable, the browser |
| -will check if the image has been updated every time you change the |
| -src of an image (in some user settings). To overcome this you |
| -must send suitable headers. |
| - </P> |
| -<MOREINFO> |
| -<URL>http://www.mnot.net/cache_docs/</URL> |
| -</MOREINFO> |
| - </CONTENT> |
| - </CONTENT> |
| - <CONTENT TITLE="How do I force a reload from the server/prevent caching?" |
| - ID="noCache" NUMID="4_17"> |
| - <P> |
| -To reload a page, use <ICODE>location.reload()</ICODE>. However, this depends |
| -upon the cache headers that your server sends. To change this, |
| -you need to alter the server configuration. A quick fix on the |
| -client is to change the page URI so that it contains a unique |
| -element, such as the current time. For example: |
| -<ICODE>location.replace(location.href+'?d='+new Date().valueOf())</ICODE> |
| -If the <ICODE>location.href</ICODE> already contains a query String, use: |
| -<ICODE>location.replace(location.href+'&d='+new Date().valueOf())</ICODE> |
| - </P> |
| - <MOREINFO> |
| - <URL>http://www.mnot.net/cache_docs/</URL> |
| - <URL>http://docs.sun.com/source/816-6408-10/date.htm</URL> |
| - </MOREINFO> |
| - </CONTENT> |
| - <CONTENT |
| - TITLE="Why is my Ajax page not updated properly when using an HTTP GET request in Internet Explorer?" |
| - ID="ajaxCache" NUMID="4_45"> |
| - <P> |
| - Browsers cache the results of HTTP requests to reduce network traffic. |
| - To force the browser to request the document from the server, either |
| - set the <ICODE>EXPIRES</ICODE> and/or <ICODE>CACHE-CONTROL</ICODE> response header(s) |
| - with a past date or use a unique query string. |
| -</P> |
| - <CODE> |
| - req.open("GET", "/example.jsp?date=" + (+new Date), true); |
| -</CODE> |
| - |
| -Always use the appropriate HTTP method. Do not use <ICODE>POST</ICODE> |
| -to prevent caching. See <URL LINKTEXT="RFC 2616" |
| ->http://www.faqs.org/rfcs/rfc2616.html</URL>. |
| - |
| -<MOREINFO> |
| -<URL>http://www.mnot.net/cache_docs/#EXPIRES</URL> |
| -<URL>http://www.mnot.net/javascript/xmlhttprequest/cache.html </URL> |
| -</MOREINFO> |
| - </CONTENT> |
| - </CONTENT> |
| \ No newline at end of file |
| /cljs/sections/server.xml |
| Property changes: |
| Deleted: svn:mime-type |
| ## -1 +0,0 ## |
| -text/plain |
| \ No newline at end of property |
| Index: cljs/sections/meta.xml |
| =================================================================== |
| --- cljs/sections/meta.xml (revision 45) |
| +++ cljs/sections/meta.xml (nonexistent) |
| @@ -1,161 +0,0 @@ |
| -<?xml version="1.0" encoding="UTF-8"?> |
| -<CONTENT TITLE="Meta-FAQ meta-questions" ID="meta" NUMID="1"> |
| - <P> |
| - This is the meta-FAQ for comp.lang.javascript. The latest |
| - version is available at <URL>http://PointedEars.de/faq/</URL> in HTML form. |
| - </P> |
| -<!-- |
| - <P> |
| - Each day, one section of the <em>original</em> comp.lang.javascript FAQ, <VER/>, |
| - is posted for review and questions, and as a reminder that the FAQ |
| - is available. |
| - </P> |
| - --> |
| - <P> |
| - For additional explanation and detail relating to some aspects |
| - of the FAQ, please see the |
| - <URL LINKTEXT="FAQ Notes">notes/</URL>. |
| - It has been provided separately to avoid increasing the size of |
| - the FAQ to a point where it would be unreasonable to post it to |
| - the group. |
| - </P> |
| - <P> |
| - Code examples in this FAQ use <URL LINKTEXT="JSDoc Toolkit" |
| - >https://code.google.com/p/jsdoc-toolkit/</URL> comments. |
| - </P> |
| - |
| - <CONTENT TITLE="Why this FAQ?" ID="why" NUMID="2_0"> |
| - <P> |
| - This document is work in progress, intended to replace |
| - the comp.lang.javascript FAQ that has gone unmaintained |
| - since 2010-10-08 CE. |
| - </P> |
| - </CONTENT> |
| - |
| - <CONTENT TITLE="Which newsgroups deal with javascript?" ID="newsgroups" NUMID="2_1"> |
| - <P> |
| - The official Big 8 Usenet newsgroup dealing with javascript is |
| - <NEWSGROUP>comp.lang.javascript</NEWSGROUP>. |
| - Some "language" hierarchies also have *.comp.lang.javascript groups. |
| - </P> |
| - <P> |
| - c.l.js is an unmoderated newsgroup. |
| - </P> |
| - </CONTENT> |
| - |
| - <CONTENT TITLE="What questions are on-topic for comp.lang.javascript?" ID="appropriateQuestions" NUMID="2_2"> |
| - <P> |
| - The comp.lang.javascript newsgroup deals with ECMAScript |
| - languages, so any questions about JavaScript or JScript are |
| - welcome. However, the majority of questions sent to this group |
| - relates to javascript in a web browser. If you are experiencing |
| - issues with a particular browser, or the host is not a browser |
| - at all, please make this information clear. |
| - </P> |
| - <P> |
| - Javascript and Java are two completely different languages. |
| - Java questions should be asked in one of the comp.lang.java.* |
| - newsgroups; they are not appropriate for c.l.js (as Java and |
| - javascript are distinct programming languages with only |
| - superficial similarities due to sharing a C-like syntax and |
| - some of the characters in their names). |
| - </P> |
| - <P> |
| - Questions dealing with other scripting languages, such as |
| - VBScript, PerlScript or CGI scripting are also off-topic, |
| - as are HTML-only or CSS-only questions. |
| - </P> |
| - <!-- |
| - <P> |
| - Questions about the design of various javascript libraries are |
| - appropriate; questions on how to <EM>use</EM> such libraries |
| - are not. Check <URL LINKTEXT="c.l.js FAQ Resources" |
| - >http://jibbering.comindex.html#libraryResources</URL> or search the web. |
| - </P> |
| - --> |
| - <P> |
| - Questions that are specific to Microsoft's JScript may also |
| - be appropriately asked at: |
| - <NEWSGROUP>microsoft.public.scripting.jscript</NEWSGROUP> |
| - </P> |
| - <P> |
| - The comp.lang.javascript newsgroup charter is included in |
| - <URL>faq_notes/cljs_charter.html</URL>. |
| - </P> |
| - </CONTENT> |
| - |
| - <CONTENT TITLE="What should I do before posting to comp.lang.javascript?" ID="posting" NUMID="2_3"> |
| - <P> |
| - Before posting to c.l.js, you should read this document. |
| - You should also check the <URL LINKTEXT="Resources section">#onlineResources</URL>. |
| - </P> |
| - <LIST TYPE="UL" TITLE="How to Ask a Question" ID="ask"> |
| - <LI>State your question clearly and concisely.</LI> |
| - <LI>Use the Subject: line to show the type of problem you have but |
| - include the question in the body as well.</LI> |
| - <LI>For a more detailed explanation of formatting, see |
| - "<URL LINKTEXT="Posting Questions and Replies to comp.lang.javascript">notes/posting/</URL>".</LI> |
| - </LIST> |
| - |
| - <LIST TYPE="UL" TITLE="Replying" ID="reply"> |
| - <LI>Quote only relevant parts of earlier messages, and add your |
| - comments below each quoted section |
| - (<URL LINKTEXT="FYI28/RFC1855">http://www.ietf.org/rfc/rfc1855.txt</URL>).</LI> |
| - <LI>Link to specific sections of the FAQ that are relevant.</LI> |
| - <LI>Avoid being unnecessarily rude, but do not complain about other rude posts.</LI> |
| - <LI>Don't quote signatures.</LI> |
| - </LIST> |
| - |
| - <LIST TYPE="UL" TITLE="Posting Code" ID="postCode"> |
| - <LI> |
| - Remove everything that does not contribute to the problem (images, |
| - markup, other scripts, etc). |
| - </LI> |
| - <LI>Validate the HTML and CSS <URL>http://validator.w3.org/</URL>, |
| - <URL>http://jigsaw.w3.org/css-validator/</URL>.</LI> |
| - <LI>Make sure the code is executable as transmitted.</LI> |
| - <LI>Format lines to 72 characters; indent with 2-4 spaces (not tabs).</LI> |
| - <LI>State what you expect the code to do.</LI> |
| - <LI>Mention the platforms, browsers, and versions.</LI> |
| - <LI>See also the <URL LINKTEXT="FAQ section on debugging">#debugging</URL>.</LI> |
| - <LI>Post in plain-text only. Do not encode it. Do not attach files.</LI> |
| - <LI>If the code is more than about 100 lines, provide a URL in addition.</LI> |
| - <LI>Do not multi-post; cross-post if necessary |
| - (<URL LINKTEXT="Wikipedia description">http://en.wikipedia.org/wiki/Cross-post</URL>).</LI> |
| - </LIST> |
| - <LIST TYPE="UL" TITLE="What Not to Post" ID="doNotPost"> |
| - <LI>Do not post job postings. Job postings should go to |
| - an appropriate regional jobs group.</LI> |
| - <LI>Do not post copyright material without permission |
| - from the copyright holder.</LI> |
| - </LIST> |
| - <P> |
| - Relevant announcements are welcome, but no more often than once |
| - per major release, as a short link to the product's webpage. |
| - </P> |
| - </CONTENT> |
| - |
| - <CONTENT TITLE="Why was my post not answered?" ID="noAnswer" NUMID="2_4"> |
| - <P>This could be for several reasons:</P> |
| - <UL> |
| - <LI>It was a variation of a frequently asked question and was |
| - therefore ignored by everyone.</LI> |
| - <LI>Nobody knows the answer.</LI> |
| - <LI>The person with the answer has not seen the post.</LI> |
| - <LI>It might not be possible to do what you want to do but perhaps |
| - readers of c.l.js are reluctant to answer your post in the negative |
| - when they are not convinced that it cannot be done.</LI> |
| - <LI>The question was not asked clearly enough, or did not included |
| - enough information to be answered.</LI> |
| - <LI>The questioner did not realise the need to read the group, for a |
| - few days, to see the answers posted there.</LI> |
| - <LI>You ignored the <URL LINKTEXT="section on posting">#posting</URL></LI> |
| - </UL> |
| - |
| - <p>If it is not one of these, then after a few days consider |
| - reposting after checking |
| - <URL>http://groups.google.com/group/comp.lang.javascript/topics</URL> |
| - for replies. Make sure the post is phrased well, and everything |
| - needed to answer is correct, and the subject is appropriate.</p> |
| - </CONTENT> |
| -</CONTENT> |
| \ No newline at end of file |
| /cljs/sections/meta.xml |
| Property changes: |
| Deleted: svn:mime-type |
| ## -1 +0,0 ## |
| -text/plain |
| \ No newline at end of property |
| Index: cljs/sections/overview.xml |
| =================================================================== |
| --- cljs/sections/overview.xml (revision 45) |
| +++ cljs/sections/overview.xml (nonexistent) |
| @@ -1,113 +0,0 @@ |
| -<?xml version="1.0" encoding="UTF-8"?> |
| -<CONTENT TITLE="Language Overview" ID="tips" NUMID="2"> |
| - <CONTENT TITLE="What is ECMAScript?" ID="ecma" NUMID="2_6"> |
| - <P> |
| - <URL LINKTEXT="ECMA-262">http://www.ecma-international.org/publications/standards/Ecma-262.htm</URL> |
| - is the international standard that current language implementations |
| - (JavaScript™, JScript etc.) are based on. |
| - </P> |
| - <P> |
| - <URL LINKTEXT="ECMA-262">http://www.ecma-international.org/publications/standards/Ecma-262.htm</URL> |
| - defines the language Syntax, Types, Keywords, Operators, and built-in |
| - objects. The ECMAScript specification is the reference to determine the |
| - expected behavior of a program. ECMAScript does not define any host |
| - objects, such as <ICODE>document</ICODE>, <ICODE>window</ICODE>, or |
| - <ICODE>ActiveXObject</ICODE>. |
| - </P> |
| - <P> |
| - ECMA-327 defines the Compact Profile of ECMAScript by |
| - describing the features from ECMA 262 that may be omitted in some |
| - resource-constrained environments. |
| - <URL>http://www.ecma-international.org/publications/standards/Ecma-327.htm</URL> |
| - </P> |
| - <P> |
| - The most widely supported edition of ECMA-262 is the 3rd edition (1999). |
| - There is fair support for this edition in JScript 5.5+ (buggy) and good |
| - support JavaScript 1.5. |
| - </P> |
| - <P> |
| - <em>For historical reasons, the term “javascript” is used herein |
| - as a shorthand for “ECMAScript-based programming languages”. |
| - Note that not all uses of that term here are correct. For example, |
| - there are instances where using “DOM” instead would have been correct. |
| - This will be fixed in a later revision.</em> |
| - </P> |
| - </CONTENT> |
| - <CONTENT TITLE="What is JScript?" ID="jScript" NUMID="2_7"> |
| - <P> |
| - JScript is Microsoft's implementation of ECMAScript. |
| - </P> |
| - <P> |
| - Questions that are specific to Microsoft's JScript may also |
| - be appropriately asked at: |
| - <NEWSGROUP>microsoft.public.scripting.jscript</NEWSGROUP>. |
| - </P> |
| - </CONTENT> |
| - <CONTENT TITLE="What is the Document Object Model (DOM)?" ID="dom" NUMID="2_9"> |
| - <P> |
| - The <DFN>Document Object Model</DFN> (DOM) is a interface-based model for <ICODE>Document</ICODE> |
| - objects. The DOM allows scripts to dynamically access and update a |
| - document's content, style, and event handlers. |
| - </P> |
| - <P> |
| - The DOM is <EM>not</EM> part of the ECMAScript programming language. |
| - </P> |
| - <P> |
| - Official DOM standards are defined by the World Wide Web Consortium. |
| - Scriptable browsers also have <DFN>proprietary</DFN> DOM features (<URL |
| - LINKTEXT="MSDN">http://msdn.microsoft.com/en-us/library/ms533050(VS.85).aspx</URL>, <URL |
| - LINKTEXT="MDC">https://developer.mozilla.org/en/DOM_Client_Object_Cross-Reference</URL>), |
| - such as <ICODE>document.writeln()</ICODE>. |
| - </P> |
| - <P> |
| - Also see the section on <URL LINKTEXT="DOM and Forms">#domRef</URL>. |
| - </P> |
| - <MOREINFO> |
| - <URL LINKTEXT="c.l.js DOM Resources">#onlineResources</URL> |
| - <URL LINKTEXT="W3C DOM FAQ">http://www.w3.org/DOM/faq.html</URL> |
| - <URL LINKTEXT="W3C DOM ">http://www.w3.org/DOM/</URL> |
| - <URL LINKTEXT="MDC: What is the DOM?">https://developer.mozilla.org/en/Gecko_DOM_Reference/Introduction#What_is_the_DOM.3F</URL> |
| - </MOREINFO> |
| - </CONTENT> |
| - <CONTENT TITLE="Internationalisation and Localisation in javascript" ID="localization" NUMID="2_10"> |
| - <P> |
| - <DFN>Internationalisation</DFN> means using one form which is everywhere both |
| - acceptable and understood. Any international standard not supported by |
| - default can be coded for. |
| - </P> |
| - <P> |
| - For example, there is an International Standard for numeric Gregorian |
| - date format; but none for decimal and thousands separators. |
| - </P> |
| - <P> |
| - <DFN>Localisation</DFN> is the process of adapting software for a specific region |
| - or language by adding locale-specific components and translating text. It |
| - cannot work well in general, because it requires a knowledge of all |
| - preferences and the ability to choose the right one, in an environment |
| - where many systems are inappropriately set anyway. |
| - </P> |
| - <P> |
| - ECMAScript has a few <DFN>localisation</DFN> features. The various |
| - <ICODE>toString()</ICODE> methods are all implementation dependent, |
| - but tend to use either UK or US settings (not necessarily correctly). |
| - ECMAScript Ed. 3 introduced some capabilities, including the |
| - <ICODE>toLocaleString()</ICODE>method which should create a string |
| - based on the host's locale. |
| - </P> |
| - <P> |
| - ECMAScript 5th Edition introduces limited ISO 8601 capabilities with |
| - <ICODE>Date.prototype.toISOString()</ICODE> and new behavior for <ICODE>Date.parse()</ICODE>. |
| - </P> |
| - </CONTENT> |
| - <CONTENT TITLE="What does the future hold for ECMAScript?" ID="futureEcmaScript" NUMID="2_12"> |
| - <P> |
| - The 5th edition of ECMAScript was approved on 2009-12-04. There is some |
| - support in implementations released before approval date (JScript 5.8, |
| - JavaScript 1.8, JavaScriptCore). |
| - http://www.ecma-international.org/publications/standards/Ecma-262.htm |
| - </P> |
| - <MOREINFO> |
| - <URL>http://www.ecma-international.org/publications/standards/Ecma-262.htm</URL> |
| - </MOREINFO> |
| - </CONTENT> |
| -</CONTENT> |
| \ No newline at end of file |
| /cljs/sections/overview.xml |
| Property changes: |
| Deleted: svn:mime-type |
| ## -1 +0,0 ## |
| -text/plain |
| \ No newline at end of property |
| Index: cljs/sections/donts.xml |
| =================================================================== |
| --- cljs/sections/donts.xml (revision 45) |
| +++ cljs/sections/donts.xml (nonexistent) |
| @@ -1,175 +0,0 @@ |
| -<?xml version="1.0" encoding="UTF-8"?> |
| -<CONTENT TITLE="Things not to attempt in a browser" ID="doNotTry"> |
| - <CONTENT TITLE="How do I detect Opera/Safari/IE?" ID="detectBrowser" NUMID="4_26"> |
| - <P> |
| -The short answer: <EM>Don't do that</EM>. |
| - </P> |
| - <P> |
| -The <ICODE>navigator</ICODE> <DFN>host object</DFN> contains properties which |
| -may identify the browser and version. These properties are historically |
| -inaccurate. Some browsers allow the user to set <ICODE>navigator.userAgent</ICODE> to any value. For |
| -example, Firefox, (type <ICODE>about:config</ICODE> and search <ICODE>useragent</ICODE> |
| -or Safari, <ICODE>Develop > User Agent > Other...</ICODE>, IE, via Registry. |
| - </P> |
| - <P> |
| -Other browsers, such as Opera, provide a list of user agents |
| -for the user to select from. There are also at least 25 other |
| -javascript capable browsers, with multiple versions, each |
| -with their own string. |
| - </P> |
| - <P> |
| -Browser detection is unreliable, at best. It usually causes |
| -forward-compatibility and maintenance problems. It is unrelated to the |
| -problem or incompatiblity it is trying to solve and obscures the |
| -problems it is used for, where it is used. |
| - </P> |
| - <P> |
| -Object detection is checking that the object in question exists. |
| -<URL LINKTEXT="Capability detection" |
| ->http://dev.opera.com/articles/view/using-capability-detection/</URL |
| - > goes one step further to actually test the object, |
| -method, or property, to see if behaves in the desired manner. |
| - </P> |
| - <P> |
| -Feature Test Example: |
| - </P> |
| - <CODE> |
| -/** |
| - * Returns the element/object the user targeted. |
| - * If neither DOM nor IE event model is supported, returns undefined. |
| - * @throws TypeError if the event is not an object. |
| - */ |
| -function getEventTarget(e) { |
| - e = e || window.event; |
| - // First check for the existence of standard "target" property. |
| - return e.target || e.srcElement; |
| -}</CODE> |
| -<MOREINFO> |
| -<URL>notes/detect-browser/</URL> |
| -<URL>http://dev.opera.com/articles/view/using-capability-detection/</URL> |
| -<URL>http://developer.apple.com/internet/webcontent/objectdetection.html</URL> |
| -<URL>http://www.w3.org/Protocols/rfc2616/rfc2616-sec14.html#sec14.43</URL> |
| -</MOREINFO> |
| - </CONTENT> |
| - <CONTENT TITLE="How can I prevent access to a web page by using javascript?" |
| - ID="preventAccess" NUMID="4_5"> |
| - <P> |
| -In practice you can't. While you could create a suitable |
| -encryption system with a password in the page, the level of |
| -support you need to do this means it's always simpler to do it |
| -server-side. Anything that "protects" a page |
| -other than the current one is definitely flawed. |
| - </P> |
| - </CONTENT> |
| - <CONTENT TITLE="How do I protect my javascript code?" ID="hideSource" NUMID="4_1"> |
| - <P> |
| -With clientside javascript you can't as your code is distributed |
| -in source form and is easily readable. With JScript, there is the |
| -Script Encoder (see MSDN), but this is nothing more than obfuscation. |
| -Attempting to disable the context menu does nothing to |
| -protect your script in a Web browser. |
| - </P> |
| - <MOREINFO> |
| - Your code is likely protected under copyright laws. See: |
| - <URL>http://www.wipo.int/about-ip/en/copyright.html</URL> |
| - <URL>http://webdesign.about.com/od/copyright/Copyright_Issues_on_the_Web_Intellectual_Property.htm</URL> |
| - </MOREINFO> |
| - </CONTENT> |
| - <CONTENT TITLE="How do I suppress a context menu (right-click menu)?" |
| - ID="disableRightClick" NUMID="4_27"> |
| - <P> |
| -A context menu, often triggered by right-click, can be requested by the |
| -user in a few ways. For example, on windows, shift + F10 and on macs, |
| -click-and-hold. Other input devices exist and mouse buttons can be |
| -configured, making the term "right click" a misnomer, in context. |
| -</P> |
| -<P> |
| -In browsers that allow it, a script can suppress the context menu by |
| -returning false from an object's <ICODE>oncontextmenu</ICODE> event handler. |
| -</P> |
| -<CODE> |
| -document.oncontextmenu = function() { |
| - return false; |
| -}; |
| -</CODE> |
| -<P> |
| -Some browsers lack context menus (e.g. iphone). Browsers that have |
| -context menus do not always have a scriptable event for them. Some |
| -browsers can be configured to disallow scripts from detecting context |
| -menu events (IE, Opera); others may fire the event but be configured to |
| -disallow scripts from suppressing the context menu (Firefox,Seamonkey). |
| -</P> |
| -<P> |
| -Even when the context menu has been suppressed, it will still be |
| -possible to view/save the source code and to save images. |
| -</P> |
| -<MOREINFO> |
| -<URL>http://en.wikipedia.org/wiki/Context_menu</URL> |
| -<URL>http://kb.mozillazine.org/Ui.click_hold_context_menus</URL> |
| -<URL>http://support.microsoft.com/kb/823057</URL> |
| -<URL>http://stackoverflow.com/questions/1870880/opera-custom-context-menu-picking-up-the-right-click/1902730#1902730</URL> |
| -<URL>http://support.mozilla.com/en-US/kb/Javascript#Advanced_JavaScript_settings</URL> |
| -<URL>http://msdn.microsoft.com/en-us/library/ms536914%28VS.85%29.aspx</URL> |
| -</MOREINFO> |
| -</CONTENT> |
| - <CONTENT TITLE="How can I access the client-side filesystem?" ID="readFile" NUMID="4_3"> |
| - <P> |
| -Security means that by default you can't. In a more restricted |
| -environment, there are options. For example, using LiveConnect to |
| -connect to Java with Netscape, and using the FileSystemObject in |
| -IE. Check <URL LINKTEXT="Google Groups archives">http://groups.google.com/group/comp.lang.javascript/topics</URL> |
| -for previous posts on the subject. |
| - </P> |
| - <MOREINFO> |
| - <URL>http://msdn.microsoft.com/en-us/library/z9ty6h50%28VS.85%29.aspx</URL> |
| - <URL>http://www.javaworld.com/javaworld/jw-10-1998/jw-10-apptowin32.html</URL> |
| - </MOREINFO> |
| - </CONTENT> |
| - <CONTENT TITLE="I have <a href="javascript:somefunction()"> what ... ?" |
| - ID="javascriptURI" NUMID="4_24"> |
| - <P> |
| -Whatever the rest of your question, this is generally a very bad idea. |
| -The <ICODE>javascript:</ICODE> pseudo protocol was designed to replace the |
| -current document with the value that is returned from the expression. |
| -For example: |
| - </P> |
| - <CODE> |
| - <a href="javascript:'<h1>' + document.lastModified + '</h1>'">lastModified</a> |
| -</CODE> |
| - <P> |
| -will result in replacing the current document with the value |
| -returned from <ICODE>document.lastModified</ICODE>, wrapped in an <ICODE><h1></ICODE> |
| -tag. |
| - </P> |
| - <P> |
| -When the expression used evaluates to an <ICODE>undefined</ICODE> value |
| -(as some function calls do), the contents of the current page are not |
| -replaced. Regardless, some browsers (notably IE6) interpret this as |
| -navigation and will enter into a 'navigation' state where GIF |
| -animations and plugins (such as movies) will stop and navigational |
| -features such as <ICODE>META</ICODE> refresh, assignment to <ICODE>location.href</ICODE>, and image |
| -swaps fail. |
| - </P> |
| - <P> |
| -It is also possible for IE to be configured such that it supports |
| -javascript but not the <ICODE>javascript:</ICODE> protocol. This results |
| -in the user seeing a protocol error for <ICODE>javascript:</ICODE> URIs. |
| - </P> |
| - <P> |
| -The <ICODE>javascript:</ICODE> pseudo protocol creates accessibility and |
| -usability problems. It provides no fallback for when the script is not |
| -supported. |
| - </P> |
| - <P> |
| -Instead, use |
| -<ICODE><a href="something.html" onclick="somefunction();return false"></ICODE> |
| -where <ICODE>something.html</ICODE> is a meaningful alternative. Alternatively, |
| -attach the <ICODE>click</ICODE> callback using an event registry. |
| - </P> |
| - <MOREINFO> |
| - <URL>example/jsuri/</URL> |
| - <URL LINKTEXT="Set/Navigate to a Location">http://groups.google.com/group/comp.lang.javascript/msg/f665cfca3b619692</URL> |
| - <URL LINKTEXT="Top Ten Web-Design Mistakes of 2002">http://www.useit.com/alertbox/20021223.html</URL> |
| - </MOREINFO> |
| - </CONTENT> |
| - </CONTENT> |
| \ No newline at end of file |
| /cljs/sections/donts.xml |
| Property changes: |
| Deleted: svn:mime-type |
| ## -1 +0,0 ## |
| -text/plain |
| \ No newline at end of property |
| Index: cljs/sections/functions.xml |
| =================================================================== |
| --- cljs/sections/functions.xml (revision 45) |
| +++ cljs/sections/functions.xml (nonexistent) |
| @@ -1,81 +0,0 @@ |
| -<?xml version="1.0" encoding="UTF-8"?> |
| -<CONTENT TITLE="Functions" ID="functions"> |
| - <CONTENT TITLE="What is (function(){ /*...*/ })() ?" ID="scope"> |
| - <P> |
| - This is an anonymous <DFN>FunctionExpression</DFN> that is called |
| - immediately after creation. |
| - </P> |
| - <P> |
| - Variables declared inside a function are not accessible from |
| - outside the function. This can be useful, for example, to hide |
| - implementation details or to avoid polluting the global scope. |
| - </P> |
| - <MOREINFO> |
| - <URL>http://yura.thinkweb2.com/named-function-expressions/</URL> |
| - <URL>notes/closures/</URL> |
| - <URL>http://dmitrysoshnikov.com/ecmascript/chapter-5-functions/#question-about-surrounding-parentheses</URL> |
| - </MOREINFO> |
| - </CONTENT> |
| - |
| - <CONTENT TITLE="What is a function statement?" ID="functionStatement"> |
| - <P> |
| - The term <DFN>function statement</DFN> has been widely and wrongly used to |
| - describe a <ICODE>FunctionDeclaration</ICODE>. This is misleading because in ECMAScript, |
| - a <ICODE>FunctionDeclaration</ICODE> is not a <DFN>Statement</DFN>; there are places in a program |
| - where a <DFN>Statement</DFN> is permitted but a <ICODE>FunctionDeclaration</ICODE> is not. To add |
| - to this confusion, some implementations, notably Mozillas', provide a |
| - syntax extension called <DFN>function statement</DFN>. This is allowed under |
| - section 16 of ECMA-262, Editions 3 and 5. |
| - </P> |
| - <P> |
| - Example of nonstandard <DFN>function statement</DFN>: |
| - </P> |
| - <CODE> |
| -// Nonstandard syntax, found in GMail source code. DO NOT USE. |
| -try { |
| - // FunctionDeclaration not allowed in Block. |
| - function Fze(b,a){return b.unselectable=a} |
| - /*...*/ |
| -} catch(e) { _DumpException(e) } |
| - </CODE> |
| - <P> |
| - Code that uses <DFN>function statement</DFN> has three known interpretations. Some |
| - implementations process <ICODE>Fze</ICODE> as a <DFN>Statement</DFN>, in order. Others, including |
| - JScript, evaluate <ICODE>Fze</ICODE> upon entering the execution context that it |
| - appears in. Yet others, notably DMDScript and default configuration of BESEN, |
| - throw a <ICODE>SyntaxError</ICODE>. |
| - </P> |
| - <P> |
| - For consistent behavior across implementations, <EM>do not use function |
| - statement</EM>; use either <ICODE>FunctionExpression</ICODE> or <ICODE>FunctionDeclaration</ICODE> instead. |
| - </P> |
| - <P> |
| - Example of <ICODE>FunctionExpression</ICODE> (valid): |
| - </P> |
| - <CODE> |
| -var Fze; |
| -try { |
| - Fze = function(b,a){return b.unselectable=a}; |
| - /*...*/ |
| -} catch(e) { _DumpException(e) } |
| - </CODE> |
| - Example of <ICODE>FunctionDeclaration</ICODE> (valid): |
| - <CODE> |
| -// Program code |
| -function aa(b,a){return b.unselectable=a} |
| - </CODE> |
| -<!-- |
| -Notable examples of the misuse of the term "function statement" |
| -can be seen in David Flanagan's "JavaScript: The Definitive Guide", |
| -Douglas Crockford's "JavaScript: The Good Parts", MDC documentation, |
| -JSLint error messages. |
| ---> |
| - <MOREINFO> |
| - <URL>example/functionStatement.html</URL> |
| - <URL>https://mail.mozilla.org/pipermail/es-discuss/2008-February/005314.html</URL> |
| - <URL>http://groups.google.com/group/comp.lang.javascript/msg/aa9a32d0c6ae0342</URL> |
| - <URL>http://groups.google.com/group/comp.lang.javascript/msg/3987eac87ad27966</URL> |
| - <URL>http://nanto.asablo.jp/blog/2005/12/10/172622</URL> (Article in Japanese) |
| - </MOREINFO> |
| - </CONTENT> |
| -</CONTENT> |
| \ No newline at end of file |
| /cljs/sections/functions.xml |
| Property changes: |
| Deleted: svn:mime-type |
| ## -1 +0,0 ## |
| -text/plain |
| \ No newline at end of property |
| Index: cljs/sections/objects.xml |
| =================================================================== |
| --- cljs/sections/objects.xml (revision 45) |
| +++ cljs/sections/objects.xml (nonexistent) |
| @@ -1,136 +0,0 @@ |
| -<?xml version="1.0" encoding="UTF-8"?> |
| -<CONTENT TITLE="Objects" ID="objects"> |
| - <CONTENT TITLE="What is a native object?" ID="nativeObject"> |
| - <P> |
| - A <DFN>native object</DFN> is any object whose semantics are fully defined by |
| - ECMA-262. |
| - </P> |
| - <P> |
| - Some <DFN>native objects</DFN> are <DFN>built-in</DFN>; others, such as <DFN>user-defined</DFN> objects, |
| - may be constructed during the execution of an ECMAScript program. |
| - </P> |
| - <P> |
| - Example: |
| - </P> |
| - <CODE> |
| -// Native built-in objects: |
| -var m = Math, // Built-in Math object. |
| - slice = Array.prototype.slice, // Built-in native method. |
| - o = {}, // Native user-defined object. |
| - f = function(){}, // Native user-defined function. |
| - d = new Date(), |
| - a = [], |
| - e = new Error("My Message."); |
| - </CODE> |
| - See also: |
| - <MOREINFO> |
| - <URL>http://dmitrysoshnikov.com/ecmascript/chapter-7-2-oop-ecmascript-implementation/</URL> |
| - </MOREINFO> |
| - </CONTENT> |
| - <CONTENT TITLE="What is a built-in object?" ID="builtInObject"> |
| - <P> |
| - A <DFN>built-in</DFN> object is any object supplied by an ECMAScript |
| - implementation, independent of the host environment, that is present |
| - at the start of the execution of an ECMAScript program. |
| - </P> |
| - <P> |
| - ECMA-262 3rd Edition defines the following <DFN>built-in</DFN> objects: |
| - </P> |
| - <LIST TYPE="DL" ID="builtInsList"> |
| - <DT>Objects</DT> |
| - <DD><EM>global</EM>, Math</DD> |
| - |
| - <DT>Constructors</DT> |
| - <DD>Object, Function, Array, String, Boolean, Number, Date, RegExp</DD> |
| - |
| - <DT>Errors</DT> |
| - <DD>Error, Date, EvalError, RangeError, ReferenceError, SyntaxError, TypeError, URIError</DD> |
| - |
| - <DT>Functions</DT> |
| - <DD>eval, parseInt, parseFloat, isNaN, isFinite, decodeURI, |
| - decodeURIComponent, encodeURI, encodeURIComponent</DD> |
| - </LIST> |
| - <P> |
| - ECMA-262 Edition 5 defines also the built-in object <ICODE>JSON</ICODE>. |
| - </P> |
| - <P> |
| - Nonstandard <DFN>built-in</DFN> objects may include <ICODE>RuntimeObject</ICODE>, |
| - <ICODE>String.prototype.link</ICODE>, <ICODE>CollectGarbage</ICODE>, and more. |
| - </P> |
| - </CONTENT> |
| - |
| - <CONTENT TITLE="What is a host object?" ID="hostObject" NUMID="2_8"> |
| - <P> |
| - A <DFN>host object</DFN> is any object supplied by the host environment to |
| - complete the execution environment of ECMAScript. |
| - </P> |
| - <P> |
| - A <DFN>host object</DFN> is not part of the ECMAScript implementation, but is |
| - exposed to the ECMAScript implementation. |
| - </P> |
| - <P> |
| - A <DFN>host object</DFN> may be implemented as a native ECMAScript object, however |
| - this is not required. For example, Internet Explorer implements many |
| - scriptable DOM objects as ActiveX Objects, often resulting in unexpected errors. |
| - </P> |
| - <P> |
| - Availability and behavior of a host object depends on the host environment. |
| - </P> |
| - <P> |
| - For example, in a browser, <ICODE>XMLHttpRequest</ICODE> might be available, with or |
| - without standard or proprietary features or events. Windows Script Host object model |
| - has the <ICODE>WScript</ICODE> object available. |
| - </P> |
| - <P> |
| - For information on a particular host object, consult the pertinent |
| - documentation available for the implementation(s). For web browsers, |
| - this usually includes the w3c specifications as well as documentation |
| - for that browser. |
| - See also: |
| - </P> |
| - |
| - <MOREINFO> |
| - <URL>notes/code-guidelines/#hostObjects</URL> |
| - <URL>http://peter.michaux.ca/articles/feature-detection-state-of-the-art-browser-scripting</URL> |
| - </MOREINFO> |
| - </CONTENT> |
| - <CONTENT TITLE="When should I use eval?" ID="eval" NUMID="4_40"> |
| - <P> |
| -The <ICODE>eval</ICODE> function should <EM>only</EM> be used when it is necessary to |
| -evaluate a string supplied or composed at run-time; the string |
| -can be anything from a simple (but unpredictable) expression such |
| -as <ICODE>"12 * 2.54"</ICODE> to a substantial piece of javascript code. |
| -</P> |
| -<P> |
| -When <ICODE>eval( '{"key" : 42}' )</ICODE> is called, <ICODE>{</ICODE> is interpreted as a block of |
| -code instead of an object literal. Hence, the Grouping Operator (parentheses) |
| -is used to force <ICODE>eval</ICODE> to interpret the JSON as an object literal: |
| -<ICODE>eval( '({"key" : 42})' );</ICODE>. |
| - </P> |
| - <MOREINFO> |
| - <URL>http://json.org/</URL> |
| - <URL LINKTEXT="How do I access a property of an object using a string?" |
| - >#propertyAccessAgain</URL> |
| - <URL>notes/square-brackets/</URL> |
| - </MOREINFO> |
| - </CONTENT> |
| - <CONTENT TITLE="How do I access a property of an object using a string?" ID="propertyAccessAgain" NUMID="4_39"> |
| - <P> |
| - There are two ways to access properties: dot notation and square bracket |
| - notation. What you are looking for is the square bracket notation in |
| - which the dot, and the identifier to its right, are replaced with a set |
| - of square brackets containing a string. The value of the string matches |
| - the identifier. For example:- |
| - </P> |
| - <CODE> |
| -//dot notation |
| -var bodyElement = document.body; |
| - |
| -//square bracket notation, using an expression |
| -var bodyElement = document["bo"+"dy"]; |
| - </CODE> |
| - <MOREINFO> |
| - <URL>notes/square-brackets/</URL> |
| - </MOREINFO> |
| - </CONTENT> |
| -</CONTENT> |
| \ No newline at end of file |
| /cljs/sections/objects.xml |
| Property changes: |
| Deleted: svn:mime-type |
| ## -1 +0,0 ## |
| -text/plain |
| \ No newline at end of property |
| Index: cljs/sections/strings.xml |
| =================================================================== |
| --- cljs/sections/strings.xml (revision 45) |
| +++ cljs/sections/strings.xml (nonexistent) |
| @@ -1,33 +0,0 @@ |
| -<?xml version="1.0" encoding="UTF-8"?> |
| -<CONTENT TITLE="Strings and RegExp" ID="strings"> |
| - <CONTENT TITLE="How do I trim whitespace?" ID="trimString" NUMID="4_16"> |
| - <P> |
| - ECMAScript 5 defines <ICODE>String.prototype.trim</ICODE>. Where not supported, |
| - it can be added as a function that uses a <DFN>regular expression</DFN>: |
| - </P> |
| - <CODE> |
| -if(!String.prototype.trim) { |
| - String.prototype.trim = function() { |
| - return String(this).replace(/^\s+|\s+$/g, ""); |
| - }; |
| -} |
| - </CODE> |
| - <P> |
| - Implementations are inconsistent with <ICODE>\s</ICODE>. For example, |
| - some implementations, notably JScript 5.8 and Safari 2, do not match <ICODE>\xA0</ICODE> |
| - (no-break space), among others.</P> |
| - <P> |
| - A more consistent approach would be to create a character class |
| - that defines the characters to trim. |
| - </P> |
| - <MOREINFO> |
| - <URL>https://developer.mozilla.org/en/Core_JavaScript_1.5_Reference/Global_Objects/RegExp</URL> |
| - <URL>http://thinkweb2.com/projects/prototype/whitespace-deviations/</URL> |
| - <URL>https://developer.mozilla.org/en/Firefox_3.1_for_developers</URL> |
| - <URL>http://docs.sun.com/source/816-6408-10/regexp.htm</URL> |
| - <URL>http://msdn.microsoft.com/en-us/library/6wzad2b2%28VS.85%29.aspx</URL> |
| - <URL>http://groups.google.com/group/comp.lang.javascript/browse_frm/thread/c7010139217600c3/31092c5eb99625d0?#31092c5eb99625d0</URL> |
| - <URL>http://unicode.org/Public/UNIDATA/PropList.txt</URL> |
| - </MOREINFO> |
| - </CONTENT> |
| -</CONTENT> |
| \ No newline at end of file |
| /cljs/sections/strings.xml |
| Property changes: |
| Deleted: svn:mime-type |
| ## -1 +0,0 ## |
| -text/plain |
| \ No newline at end of property |
| Index: cljs/sections/windows.xml |
| =================================================================== |
| --- cljs/sections/windows.xml (revision 45) |
| +++ cljs/sections/windows.xml (nonexistent) |
| @@ -1,483 +0,0 @@ |
| -<?xml version="1.0" encoding="UTF-8"?> |
| -<CONTENT TITLE="Windows and Frames" ID="windows"> |
| - <P> |
| - The <ICODE>window</ICODE> object (also referred to by <ICODE>self</ICODE>) is "DOM Level 0". |
| - No formal standard for it exists. |
| - </P> |
| - <CONTENT TITLE="How can I disable the back button in a web browser?" ID="disableBackButton" NUMID="4_2"> |
| - <P> |
| - You can't. The browser's history cannot be modified. However, you |
| - can use <ICODE>self.location.replace(url);</ICODE> in some browsers to replace |
| - the current page in the history. |
| - </P> |
| - <MOREINFO> |
| - <URL>http://msdn.microsoft.com/en-us/library/ms536712%28VS.85%29.aspx</URL> |
| - <URL>http://docs.sun.com/source/816-6408-10/location.htm#1194240</URL> |
| - </MOREINFO> |
| - </CONTENT> |
| - <CONTENT TITLE="How do I access a frame's content?" |
| - ID="frameRef" NUMID="4_8"> |
| - <P> |
| - To reference another frame on the <EM>same domain</EM>: |
| - </P> |
| - <P> |
| - The <DFN>content window</DFN> of a <ICODE>FRAME</ICODE> or <ICODE>IFRAME</ICODE> can be |
| - accessed by the <ICODE>frames</ICODE> collection. |
| - </P> |
| - <P> |
| - Example: |
| - </P> |
| - <CODE> |
| -var fwin; |
| -fwin = self.frames[0]; // or: |
| -fwin = self.frames["iframeName"]; |
| - </CODE> |
| - <P>or, from the <ICODE>IFRAME</ICODE> or <ICODE>FRAME</ICODE> element:</P> |
| - <CODE> |
| -var iframeEl = document.getElementById("myFrame"); |
| -var fwin = iframeEl.contentWindow; // Nonstandard, but widely supported. |
| -var fdoc = iframeEl.contentDocument; // DOM2 HTML Standard. |
| - </CODE> |
| - <P> |
| - A global identifier <ICODE>moomin</ICODE> in the the iframe's <DFN>content window</DFN> |
| - is accessed as <ICODE>fwin.moomin</ICODE>. |
| - </P> |
| - <P> |
| - To communicate between frames on <EM>different</EM> domains: |
| - </P> |
| - <P> |
| - Where supported, (IE8, Firefox 3, Opera 9, Safari 4), use |
| - <ICODE>window.postMessage( message[, port], otherDomain);</ICODE>. |
| - </P> |
| - <P> |
| - Example: |
| - <URL>http://jibbering.com/faq/example/postMessage.html</URL> |
| - </P> |
| - <P> |
| - Where <ICODE>window.postMessage</ICODE> is not supported, the <ICODE>window.name</ICODE> property |
| - can be set on the other window, which can poll for updates to that |
| - property using <ICODE>setInterval(checkWinName, 100);</ICODE> where <ICODE>checkWinName</ICODE> |
| - is a function that polls to check the value of |
| - <ICODE>self.name</ICODE>. |
| - </P> |
| - <MOREINFO> |
| - <URL>http://en.wikipedia.org/wiki/Same_origin_policy</URL> |
| - <URL>http://www-archive.mozilla.org/docs/dom/domref/dom_frame_ref5.html</URL> |
| - <URL>https://developer.mozilla.org/en/DOM/window.postMessage</URL> |
| - <URL>http://msdn.microsoft.com/en-us/library/cc197015(VS.85).aspx</URL> |
| - </MOREINFO> |
| - </CONTENT> |
| - <CONTENT TITLE="How do I find the size of the window?" ID="getWindowSize" |
| - NUMID="4_9"> |
| - <P> |
| - Here is a detailed explanation of a cross-browser strategy to |
| - find the dimensions of the viewport, excepting all chrome |
| - (excludes scrollbars, etc). |
| - </P> |
| - <P> |
| - We can consider various properties: |
| - </P> |
| - <CODE> |
| -window.innerWidth |
| -document.clientWidth |
| -document.documentElement.clientWidth |
| -document.body.clientWidth |
| - </CODE> |
| - <P> |
| - Of the browsers that have an <ICODE>innerWidth</ICODE> property, most |
| - include scrollbar dimensions. Some versions of KHTML browsers |
| - (including Safari 2) do <EM>not</EM> include scrollbar width. |
| - </P> |
| - |
| - <P> |
| - The <ICODE>window.inner*</ICODE> properties are unreliable and not |
| - useful here. We don't want scrollbar dimensions included. |
| - </P> |
| -<CODE> document.clientWidth</CODE> |
| - <P> |
| - Certain versions of KHTML, including Safari 2, have |
| - <ICODE>document.clientHeight</ICODE> and <ICODE>document.clientWidth</ICODE> |
| - properties. Where supported, these rare properties accurately |
| - return the height and width of the viewport, without including |
| - scrollbar dimensions. |
| - </P> |
| - <CODE> |
| -document.documentElement.clientWidth |
| -document.body.clientWidth |
| - </CODE> |
| - <P> |
| - MSHTML (Trident), Firefox (Gecko), Opera (Presto), and Safari |
| - (Webkit) all support <ICODE>clientHeight</ICODE> on <ICODE>document.body</ICODE> |
| - and <ICODE>document.documentElement</ICODE>. The difficulty is figuring out |
| - which one is reliable. In other words which object to get the |
| - <ICODE>clientHeight</ICODE> property from:<ICODE>documentElement</ICODE> or <ICODE>body</ICODE>? |
| - </P> |
| - |
| - <P> |
| - What the number returned from either of these properties |
| - represents depends on the environment. The environment includes |
| - the browser, its version, and the rendering mode of the document. |
| - In quirks mode, we'll mostly want to use <ICODE>body.clientHeight</ICODE> |
| - (except for in Safari 2). |
| - </P> |
| - <CODE>document.body.clientHeight</CODE> |
| - <P> |
| - Some environments will return the viewport height. Others will |
| - return <ICODE>0</ICODE>. Yet others will return the <ICODE>clientHeight</ICODE> of |
| - the <ICODE>BODY</ICODE> element. |
| - </P> |
| - <CODE> document.documentElement.clientHeight</CODE> |
| - <P> |
| - This is the more "standard" property for getting the height of |
| - the viewport. It usually "works" in modern browsers in |
| - <DFN>standards mode</DFN>. Notable exceptions include Safari 2 and |
| - Opera <= 9.25, both of which return the <ICODE>clientHeight</ICODE> |
| - of the <ICODE>html</ICODE> <EM>element</EM>. (Oddly, Opera <= 9.25 |
| - in standards mode returns the width of the viewport for |
| - <ICODE>documentElement.clientWidth</ICODE>). |
| - </P> |
| - <P> |
| - With the exception of Safari 2, <ICODE>body.clientHeight</ICODE> is reliable |
| - where <ICODE>documentElement.clientHeight</ICODE> is found to be unreliable. |
| - For example, in Safari 3+, Opera, and Mozilla, all in quirks mode, |
| - <ICODE>document.documentElement.clientHeight</ICODE> returns the <ICODE>clientHeight</ICODE> |
| - of the <ICODE>html</ICODE> element (this may seem unsurprising but |
| - it is not what we want). |
| - </P> |
| - <P> |
| - Conversely, <ICODE>document.body.clientHeight</ICODE> will return |
| - the height of the viewport in most cases where |
| - <ICODE>document.documentElement.clientHeight</ICODE> does not. An exception |
| - to that is Safari 2, where <ICODE>documentElement.clientHeight</ICODE> |
| - and <ICODE>body.clientHeight</ICODE> both return the height of their |
| - corresponding element (not what we want). |
| - </P> |
| - <P> |
| - By using a combination of <DFN>Feature Testing</DFN> and <DFN>Capability Testing</DFN>, |
| - the dimensions of the viewport can be strategically retrieved |
| - from the property that works in the environment the script is |
| - running in. The trick is determining which property will give us |
| - the value we want. |
| - </P> |
| - <P> |
| - Since <ICODE>document.clientHeight</ICODE> is reliable where |
| - (rarely) supported, and since browsers that support this property |
| - don't return the viewport dimensions from |
| - <ICODE>document.body.clientHeight</ICODE> or |
| - <ICODE>document.documentElement.clientHeight</ICODE>, this should be the |
| - very first condition: |
| - </P> |
| - <CODE> |
| -// Safari 2 uses document.clientWidth (default). |
| -if(typeof document.clientWidth == "number") { |
| - // use document.clientWidth. |
| -} |
| - </CODE> |
| - <P> |
| - The next strategy is to determine if |
| - <ICODE>document.documentElement.clientHeight</ICODE> property is unreliable. |
| - It is deemed "unreliable" when it is either <ICODE>0</ICODE> or taller |
| - than the viewport. |
| - </P> |
| - <P> |
| - Determining if <ICODE>documentElement.clientHeight</ICODE> is <ICODE>0</ICODE> is easy. |
| - The result is stored in a variable <ICODE>IS_BODY_ACTING_ROOT</ICODE>. |
| - </P> |
| - <CODE> |
| -var docEl = document.documentElement, |
| - IS_BODY_ACTING_ROOT = docEl && docEl.clientHeight === 0; |
| -docEl = null; |
| - </CODE> |
| - <P> |
| - To determine if <ICODE>documentElement.clientHeight</ICODE> returns |
| - a value taller than the viewport, we need a <DFN>Capability Test.</DFN> |
| - </P> |
| - <P> |
| - If we can force <ICODE>documentElement</ICODE> to be very tall |
| - (taller than a normal viewport) we can then check to see if |
| - <ICODE>documentElement.clientHeight</ICODE> returns that "very tall" number. |
| - If it does, then it is unreliable. |
| - </P> |
| - <P> |
| - We can force <ICODE>documentElement</ICODE> to be taller than the viewport |
| - (or any "normal" viewport) by adding a <ICODE>div</ICODE> to the <ICODE>body</ICODE>, |
| - give that <ICODE>div</ICODE> a height larger than any normal monitor, |
| - and then check to see if <ICODE>documentElement.clientHeight</ICODE> is |
| - that high (or "almost" that high, to account for <ICODE>documentElement</ICODE> |
| - having a border). |
| - </P> |
| - <CODE> |
| -// Used to feature test Opera returning wrong values |
| -// for documentElement.clientHeight. |
| -// The results of this function should be cached, |
| -// so it does not need to be called more than once. |
| -function isDocumentElementHeightOff(){ |
| - var d = document, |
| - div = d.createElement('div'); |
| - div.style.height = "2500px"; |
| - d.body.insertBefore(div, d.body.firstChild); |
| - var r = d.documentElement.clientHeight > 2400; |
| - d.body.removeChild(div); |
| - return r; |
| -} |
| - </CODE> |
| - <P> |
| - We can use this function to see if we should use |
| - <ICODE>body.clientHeight</ICODE>, instead. (but only after checking if |
| - <ICODE>document.clientHeight</ICODE> is supported). |
| - </P> |
| - <CODE> |
| -// Safari 2 uses document.clientWidth (default). |
| -if(typeof document.clientWidth == "number") { |
| - // use document.clientHeight/Width. |
| -} |
| -else if(IS_BODY_ACTING_ROOT || isDocumentElementHeightOff()) { |
| - // use document.body.clientHeight/Width. |
| -} else { |
| - // use document.documentElement.clientHeight/Width. |
| -} |
| - </CODE> |
| - <P> |
| - The preceding strategy was developed by Garrett Smith with input |
| - from John David Dalton. A complete and tested example can be found |
| - in APE Library under <ICODE>APE.dom.getViewportDimensions</ICODE>. |
| - Source code: |
| - <URL>http://wayback.archive.org/web/20110814142717/http://dhtmlkitchen.com/ape/build/dom/viewport-f.js</URL>. |
| - APE is publicly released under Academic Free License. |
| - APE home: <URL>http://wayback.archive.org/web/20110628160010/http://www.dhtmlkitchen.com/ape/</URL>. |
| - </P> |
| - <P> |
| - Note: The dimensions cannot be determined accurately until after |
| - the document has finished loading. |
| - </P> |
| - <MOREINFO> |
| - <URL>http://msdn.microsoft.com/en-us/library/ms533566%28VS.85%29.aspx</URL> |
| - <URL>http://developer.mozilla.org/en/DOM/window.innerWidth</URL> |
| - <URL>http://dev.opera.com/articles/view/using-capability-detection/</URL> |
| - </MOREINFO> |
| - </CONTENT> |
| - |
| - <CONTENT TITLE="How do I check to see if a child window is open, before opening another?" |
| - ID="isWindowOpen" NUMID="4_10"> |
| - <CODE> |
| -var myWin; |
| -function openWin(aURL) { |
| - if (!myWin || myWin.closed ) { |
| - myWin = window.open(aURL,'myWin'); |
| - } else { |
| - myWin.location.href = aURL; |
| - myWin.focus(); |
| - } |
| -} |
| - </CODE> |
| - <P> |
| - Popup windows cause usability problems and are generally best avoided. |
| - </P> |
| - <MOREINFO> |
| - <URL>https://developer.mozilla.org/en/DOM:window.open</URL> |
| - <URL>http://msdn.microsoft.com/en-us/library/ms533574%28VS.85%29.aspx</URL> |
| - <URL>http://docs.sun.com/source/816-6408-10/window.htm#1201877</URL> |
| - <URL>http://www.useit.com/alertbox/990530.html</URL> |
| - </MOREINFO> |
| - </CONTENT> |
| - <CONTENT TITLE="Why does framename.print() not print the correct frame in IE?" |
| - ID="printFrame" NUMID="4_11"> |
| - <P> |
| - IE prints the frame that has focus when you call the print |
| - method <ICODE>frameref.focus();frameref.print();</ICODE> |
| - </P> |
| - <MOREINFO> |
| - <URL>http://msdn.microsoft.com/en-us/library/ms976105.aspx</URL> |
| - </MOREINFO> |
| - </CONTENT> |
| - |
| - <CONTENT TITLE="How do I close a window and why does it not work on the first one?" |
| - ID="windowClose" NUMID="4_14"> |
| - <P> |
| - If a window was opened by javascript, then it can be closed |
| - without confirmation by using <ICODE>windowRef.close()</ICODE>. |
| - </P> |
| - <P> |
| - Before calling <ICODE>windowRef.close()</ICODE> (or other <ICODE>window</ICODE> methods), make |
| - sure the window reference is not null and its <ICODE>closed</ICODE> property is <ICODE>false</ICODE>. |
| - </P> |
| - <P> |
| - Popup windows cause usability problems and are generally best avoided. |
| - </P> |
| - <MOREINFO> |
| - <URL>http://www.useit.com/alertbox/990530.html</URL> |
| - <URL>#isWindowOpen</URL> |
| - <URL>http://msdn.microsoft.com/en-us/library/ms536367%28VS.85%29.aspx</URL> |
| - <URL>https://developer.mozilla.org/en/DOM/window.close#Description</URL> |
| - <URL>http://docs.sun.com/source/816-6408-10/window.htm#1201822</URL> |
| - </MOREINFO> |
| - </CONTENT> |
| - <CONTENT TITLE="Why do I get permission denied when accessing a frame/window?" |
| - ID="permissionDenied" NUMID="4_19"> |
| - <P> |
| - In the normal browser security model, a script may only access the |
| - properties of documents served from the same domain or IP address, |
| - protocol, and port. |
| - </P> |
| - <P> |
| - Any attempt to access a property in such cases will result in a "Permission |
| - Denied" error. Signed scripts or trusted ActiveX objects can |
| - overcome this in limited situations. |
| - </P> |
| - <MOREINFO> |
| - <URL>http://msdn.microsoft.com/en-us/library/ms533028%28VS.85%29.aspx</URL> |
| - <URL>https://developer.mozilla.org/En/Same_origin_policy_for_JavaScript</URL> |
| - </MOREINFO> |
| - </CONTENT> |
| - <CONTENT TITLE="How do I make a 10 second delay?" ID="setTimeout" NUMID="4_20"> |
| - <P> |
| - There is no built-in way to pause execution in javascript such |
| - as a sleep function, but hosts usually provide a method of some |
| - form. Web browsers are designed for event driven programming and |
| - only provide the <ICODE>setTimeout</ICODE> and <ICODE>setInterval</ICODE> functions |
| - to facilitate timed delays. The delay before calling <ICODE>getSnork</ICODE> may |
| - exceed the second parameter to <ICODE>setTimeout</ICODE> and <ICODE>setInterval</ICODE> |
| - due to implementation differences among browsers. |
| - </P> |
| - <P> |
| - To call the function <ICODE>getSnork</ICODE>, approximately 10 seconds |
| - after the function <ICODE>getMoomin()</ICODE> completes, you would do this: |
| - </P> |
| - <CODE> |
| -getMoomin(); |
| -setTimeout(getSnork, 10000); |
| - </CODE> |
| - <P> |
| - Script execution is not stopped, and adding <ICODE>getSnufkin()</ICODE> after the |
| - <ICODE>setTimeout</ICODE> line would immediately execute the function <ICODE>getSnufkin</ICODE> |
| - before <ICODE>getSnork</ICODE>. |
| - </P> |
| - <P> |
| - Achieving delays through running a loop of some sort for a pre-defined |
| - period is a bad strategy, as that will inhibit whatever was supposed to |
| - be happening during the delay, including blocking user interation. |
| - </P> |
| - <P> |
| - Other (less event driven) hosts have different wait functions, |
| - such as <ICODE>WScript.Sleep()</ICODE> in the Windows Script Host. |
| - </P> |
| - <MOREINFO> |
| - <URL>http://msdn.microsoft.com/en-us/library/ms536753%28VS.85%29.aspx</URL> |
| - <URL>http://docs.sun.com/source/816-6408-10/window.htm#1203758</URL> |
| - <URL>http://en.wikipedia.org/wiki/Event-driven_programming</URL> |
| - <URL>faq_notes/misc.html#mtSetTI</URL> |
| - </MOREINFO> |
| - </CONTENT> |
| - |
| - <CONTENT TITLE="How do I change print settings for window.print()?" |
| - ID="printSettings" NUMID="4_23"> |
| - <P> |
| - In a normal security environment, you can't change anything. |
| - </P> |
| - <P> |
| - Print Stylesheet rules provide options. |
| - </P> |
| - <P> |
| - For IE, <ICODE>ActiveX</ICODE> or Plugin ScriptX and |
| - Neptune from Meadroid to give you more control for Windows |
| - versions of Internet Explorer, Netscape, and Opera. |
| - </P> |
| - <MOREINFO> |
| - <URL>http://www.meadroid.com/scriptx/</URL> |
| - <URL>http://msdn.microsoft.com/en-us/library/ms976105.aspx</URL> |
| - </MOREINFO> |
| - </CONTENT> |
| - <CONTENT TITLE="How do I change the confirm box to say yes/no or default to cancel?" |
| - ID="changeBrowserDialog" NUMID="4_28"> |
| - <P> |
| - The buttons on a confirm box cannot be changed, nor can a default |
| - button be specified. |
| - </P> |
| - <P> |
| - Change the question to a statement so that "OK" is suitable as the |
| - default response. |
| - </P> |
| - <P> |
| - Example: |
| - "Would you like us to charge your credit card?" (wrong) |
| - "We will now charge your credit card." (right). |
| - </P> |
| - </CONTENT> |
| - <CONTENT TITLE="How do I prompt a "Save As" dialog for an accepted mime type?" |
| - ID="fileDownload" NUMID="4_33"> |
| - <P> |
| - It is not possible with client-side javascript. |
| - </P> |
| - <P> |
| - Some browsers accept the Content-Disposition header, but this |
| - must be added by the server. Taking the form:- |
| - <ICODE>Content-Disposition: attachment; filename=filename.ext</ICODE> |
| - </P> |
| - <MOREINFO> |
| - <URL>http://classicasp.aspfaq.com/general/how-do-i-prompt-a-save-as-dialog-for-an-accepted-mime-type.html</URL> |
| - <URL>http://support.microsoft.com/kb/q260519/</URL> |
| - </MOREINFO> |
| - </CONTENT> |
| - <!-- Can we remove this entry? |
| - http://groups.google.com/group/comp.lang.javascript/msg/c70b57d86300fa91 |
| - |
| - CONTENT TITLE="I have window.status="Moomin"; why doesn't the statusbar change?" |
| - ID="returnValue" NUMID="4_35"> |
| - <P> |
| -When changing the status in an event (e.g. <ICODE>onmouseover</ICODE>) you |
| -should return true from the event. Also a number of browsers |
| -require a short delay before setting the status to overcome their |
| -default behaviour with the statusbar. |
| -<ICODE>onevent="setTimeout('window.status=\'Moomin\'',15);"</ICODE> |
| - </P> |
| - <P> |
| -Many browsers are configured, by default, to disallow scripts from setting |
| -the status bar text. Some browsers don't have such a bar, or don't have it by default. |
| - </P> |
| - </CONTENT--> |
| - |
| - <CONTENT TITLE="How do I modify the current browser window?" ID="modifyChrome" NUMID="4_36"> |
| - <P> |
| - In a default security environment you are very limited in how much |
| - you can modify the current browser window. You can use |
| - <ICODE>window.resizeTo</ICODE> or <ICODE>window.moveTo</ICODE> to resize or move a |
| - window respectively, but that is it. Normally you can only |
| - suggest chrome changes in a <ICODE>window.open</ICODE>. |
| - </P> |
| - <MOREINFO> |
| - <URL>http://msdn.microsoft.com/en-us/library/ms536651%28VS.85%29.aspx</URL> |
| - <URL>https://developer.mozilla.org/en/DOM:window.open</URL> |
| - </MOREINFO> |
| - </CONTENT> |
| - <CONTENT TITLE="How do I POST a form to a new window?" ID="target" NUMID="4_37"> |
| - <P> |
| - Use the target attribute on the form, opening a window with |
| - that name and your feature string in the onsubmit handler of the |
| - FORM. |
| - </P> |
| - <CODE> |
| -<form action="" method="post" |
| - target="wndname" onsubmit="window.open('',this.target);return true;"> |
| - </CODE> |
| - <MOREINFO> |
| - <URL>http://www.htmlhelp.com/reference/html40/forms/form.html</URL> |
| - </MOREINFO> |
| - </CONTENT> |
| - <CONTENT TITLE="How do I open a new window with javascript?" ID="openWindow" NUMID="4_42"> |
| - <P> |
| - New windows can be opened on browsers that support the |
| - <ICODE>window.open</ICODE> function and are not subject to the action of any |
| - pop-up blocking mechanism with code such as:- |
| - </P> |
| - <CODE> |
| -var wRef; |
| -if(window.open){ |
| - wRef = window.open("http://example.com/page.html","windowName"); |
| -} |
| - </CODE> |
| - <MOREINFO> |
| - <URL>https://developer.mozilla.org/en/DOM:window.open</URL> |
| - <URL>http://www.infimum.dk/HTML/JSwindows.html</URL> |
| - </MOREINFO> |
| - </CONTENT> |
| -</CONTENT> |
| \ No newline at end of file |
| /cljs/sections/windows.xml |
| Property changes: |
| Deleted: svn:mime-type |
| ## -1 +0,0 ## |
| -text/plain |
| \ No newline at end of property |
| Index: cljs/sections/resources.xml |
| =================================================================== |
| --- cljs/sections/resources.xml (revision 45) |
| +++ cljs/sections/resources.xml (nonexistent) |
| @@ -1,178 +0,0 @@ |
| -<?xml version="1.0" encoding="UTF-8"?> |
| -<CONTENT TITLE="Javascript Resources" ID="ecmascriptResources" NUMID="3"> |
| - <CONTENT TITLE="What books are recommended for javascript?" ID="books" NUMID="3_1"> |
| - <P> |
| - Most javascript books have been found to contain so many technical |
| - errors that consensus recommendations have not emerged from the group. |
| - </P> |
| - <P> |
| - The following books have been considered to have value by some |
| - individuals on c.l.js. The reviews of these books are provided: |
| - </P> |
| - <LIST TYPE="UL"> |
| - <LI><EM>"JavaScript: The Definitive Guide,"</EM> 5th Edition, by David Flanagan |
| - <UL> |
| - <LI>Published: 2006-08</LI> |
| - <LI>Pages: 1018</LI> |
| - <LI>Errata: <URL>http://oreilly.com/catalog/9780596101992/errata/</URL></LI> |
| - <LI>Discussed in: |
| - <UL> |
| - <LI> |
| - <URL LINKTEXT="FAQ Update 9.85 Dated 2007-08-31" |
| - >http://groups.google.com/group/comp.lang.javascript/browse_thread/thread/7283898f77fd2a66/9252aa024e058dea#c5f145ae807c918e</URL> |
| - </LI> |
| - </UL> |
| - </LI> |
| - </UL> |
| - </LI> |
| - <LI> |
| - <EM>"JavaScript, The Good Parts,"</EM> 1st Edition, by Douglas Crockford |
| - <UL> |
| - <LI>Published: 2008-05</LI> |
| - <LI>Pages: 170</LI> |
| - <LI>Errata: <URL>http://oreilly.com/catalog/9780596517748/errata/</URL></LI> |
| - <LI>Discussed in: |
| - <UL> |
| - <LI> |
| - <URL LINKTEXT="Crockford's 'The Good Parts': a short review" |
| - >http://groups.google.com/group/comp.lang.javascript/browse_thread/thread/d084d2109f7b4ec7#</URL> |
| - </LI> |
| - <LI> |
| - <URL LINKTEXT="FunctionExpression's and memory consumptions" |
| - >http://groups.google.com/group/comp.lang.javascript/browse_thread/thread/db1e49ab113aa05c/3987eac87ad27966#3987eac87ad27966</URL> |
| - </LI> |
| - <LI> |
| - <URL LINKTEXT="FAQ Topic - What books are recommended for javascript? (2008-12-02)" |
| - >http://groups.google.com/group/comp.lang.javascript/browse_thread/thread/6a41f7835ee728de/da5ccfc65e2df64a#da5ccfc65e2df64a</URL> |
| - </LI> |
| - <LI> |
| - <URL LINKTEXT="Augmenting functions" |
| - >http://groups.google.com/group/comp.lang.javascript/browse_thread/thread/3a08fb741525ab6d/</URL> |
| - </LI> |
| - |
| - <LI> |
| - <URL LINKTEXT="Crockford's JavaScript, The Good Parts (a book review)." |
| - >http://groups.google.com/group/comp.lang.javascript/browse_thread/thread/bf26be6e63494ee2/acb733a1c35f6ce5#ee9e4ee29e658d5d</URL> |
| - </LI> |
| - <LI> |
| - <URL LINKTEXT="Closures Explained" |
| - >http://groups.google.com/group/comp.lang.javascript/browse_thread/thread/df602506ee48b400/e65e00f5cad07676#e65e00f5cad07676</URL> |
| - </LI> |
| - <LI> |
| - <URL LINKTEXT="Javascript library development" |
| - >http://groups.google.com/group/comp.lang.javascript/browse_thread/thread/acadf1b22b219433/4f69a95607d0b3ae#4f69a95607d0b3ae</URL> |
| - </LI> |
| - </UL></LI> |
| - </UL> |
| - </LI> |
| - </LIST> |
| - </CONTENT> |
| - |
| - <CONTENT TITLE="What online resources are available?" ID="onlineResources" NUMID="3_2"> |
| - <LIST TITLE="ECMAScript" TYPE="DL" ID="ecmaResources"> |
| - <DT>The Official ECMAScript Specification</DT> |
| - <DD><URL>[ECMA-262] http://www.ecma-international.org/publications/standards/Ecma-262-arch.htm</URL></DD> |
| - |
| - <DT>[ISO16262] ISO/IEC 16262, Second Edition 2002-06-01 : ISO Standard matching |
| - ECMA-262 3rd Edition, with corrections.</DT> |
| - <DD><URL>http://standards.iso.org/ittf/PubliclyAvailableStandards/c033835_ISO_IEC_16262_2002(E).zip</URL></DD> |
| - |
| - <DT>[MS-ES3]: Internet Explorer ECMA-262 ECMAScript Language Specification Standards Support</DT> |
| - <DD><URL>http://msdn.microsoft.com/en-us/library/ff520996%28VS.85%29.aspx</URL></DD> |
| - <DD><URL>res/%5BMS-ES3%5D.pdf</URL> (local alias)</DD> |
| - |
| - <DT>[MS-ES3EX]: Microsoft JScript Extensions to the ECMAScript Language Specification Third Edition</DT> |
| - <DD><URL>http://msdn.microsoft.com/en-us/library/ff521046%28VS.85%29.aspx</URL></DD> |
| - <DD><URL>res/%5BMS-ES3EX%5D.pdf</URL> (local alias)</DD> |
| - |
| - <DT>ECMAScript on Wikipedia</DT> |
| - <DD><URL>http://en.wikipedia.org/wiki/ECMAScript</URL></DD> |
| - </LIST> |
| - |
| - <LIST TITLE="W3C DOM" TYPE="DL" ID="domResources"> |
| - <DT>DOM Level 1 ECMAScript Binding</DT> |
| - <DD><URL>http://www.w3.org/TR/REC-DOM-Level-1/ecma-script-language-binding.html</URL></DD> |
| - |
| - <DT>DOM Level 2 ECMAScript Binding</DT> |
| - <DD><URL>http://www.w3.org/TR/DOM-Level-2-HTML/ecma-script-binding.html</URL></DD> |
| - |
| - <DT>DOM Level 2 Events</DT> |
| - <DD><URL>http://www.w3.org/TR/DOM-Level-2-Events/events.html</URL></DD> |
| - |
| - <DT>DOM Level 2 Style</DT> |
| - <DD><URL>http://www.w3.org/TR/DOM-Level-2-Style/</URL></DD> |
| - |
| - <DT>DOM Level 3 ECMAScript Binding</DT> |
| - <DD><URL>http://www.w3.org/TR/DOM-Level-3-Core/ecma-script-binding.html</URL></DD> |
| - </LIST> |
| - |
| - <LIST TITLE="Browser Documentation" TYPE="DL" ID="browserResources"> |
| - <DT>Mozilla</DT> |
| - <DD>JavaScript: <URL>http://developer.mozilla.org/en/docs/JavaScript</URL></DD> |
| - <DD>Gecko DOM Reference: <URL>http://developer.mozilla.org/en/docs/Gecko_DOM_Reference</URL></DD> |
| - |
| - <DT>Microsoft</DT> |
| - <DD>HTML and DHTML Reference: <URL>http://msdn.microsoft.com/en-us/library/ms533050.aspx</URL></DD> |
| - <DD>JScript Language Reference:<URL>http://msdn.microsoft.com/en-us/library/hbxc2t98%28VS.85%29.aspx</URL></DD> |
| - <DD>Scripting: <URL>http://msdn.microsoft.com/en-us/library/ms950396.aspx</URL></DD> |
| - |
| - <DT>Opera</DT> |
| - <DD>Web Specifications Support: <URL>http://www.opera.com/docs/specs/#ecmascript</URL></DD> |
| - |
| - <DD>JavaScript Support: <URL>http://www.opera.com/docs/specs/js/</URL></DD> |
| - <DD>ECMAScript Support: <URL>http://www.opera.com/docs/specs/js/ecma</URL></DD> |
| - |
| - <DT>BlackBerry JavaScript Reference</DT> |
| - <DD><URL>http://docs.blackberry.com/en/developers/deliverables/11849/</URL></DD> |
| - |
| - <DT>ICab InScript</DT> |
| - <DD><URL>http://www.muchsoft.com/inscript/</URL></DD> |
| - |
| - <DT>Apple Safari</DT> |
| - <DD>Web Content Guide: <URL>http://developer.apple.com/safari/library/documentation/AppleApplications/Reference/SafariWebContent/Introduction/Introduction.html</URL></DD> |
| - |
| - <DT>Webkit</DT> |
| - <DD>Project Site: <URL>http://webkit.org/</URL></DD> |
| - <DD>Wiki: <URL>http://trac.webkit.org/wiki</URL></DD> |
| - <DD>DOM Reference: <URL>http://developer.apple.com/Mac/library/documentation/AppleApplications/Reference/WebKitDOMRef/index.html#//apple_ref/doc/uid/TP40006089</URL></DD> |
| - |
| - <DT>Netscape 4 Client-Side JavaScript Reference</DT> |
| - <DD><URL>http://docs.sun.com/source/816-6408-10/</URL></DD> |
| - |
| - <DT>Archived documentation for MSIE 3.x</DT> |
| - <DD><URL>http://members.tripod.com/%7Ehousten/download/</URL></DD> |
| - </LIST> |
| - |
| - <LIST TITLE="Standalone ECMAScript Implementations" TYPE="DL" ID="standaloneImplementations"> |
| - <DT>Rhino: An open-source implementation of JavaScript written in Java</DT> |
| - <DD><URL>http://www.mozilla.org/rhino/</URL></DD> |
| - |
| - <DT>Besen IDE: ECMAScript Edition 5 with IDE</DT> |
| - <DD><URL>http://besen.sourceforge.net/</URL></DD> |
| - |
| - <DT>V8: Google's open source JavaScript engine</DT> |
| - <DD><URL>http://code.google.com/p/v8/</URL></DD> |
| - |
| - <DT>SpiderMonkey: Mozilla's C implementation of JavaScript</DT> |
| - <DD><URL>http://www.mozilla.org/js/spidermonkey/</URL></DD> |
| - |
| - <DT>Digital Mars DMD Script, console and MS Active Script implementation of ECMAScript</DT> |
| - <DD><URL>http://www.digitalmars.com/dscript/</URL></DD> |
| - </LIST> |
| - |
| - <LIST TITLE="Other ECMAScript Implementations" TYPE="DL" ID="nonBrowserResources"> |
| - <DT>Developing Dashboard Widgets: Apple Developer Connection</DT> |
| - <DD><URL>http://developer.apple.com/macosx/dashboard.html</URL></DD> |
| - |
| - <DT>Whitebeam Apache Module: Server Side JavaScript in Apache</DT> |
| - <DD><URL>http://www.whitebeam.org/</URL></DD> |
| - </LIST> |
| - </CONTENT> |
| - |
| - <CONTENT TITLE="Javascript Libraries" ID="libraryResources"> |
| - <P> |
| - No javascript libraries are endorsed by this group. If you want help |
| - with using a library, visit that library's discussion group instead. |
| - </P> |
| - </CONTENT> |
| -</CONTENT> |
| \ No newline at end of file |
| /cljs/sections/resources.xml |
| Property changes: |
| Deleted: svn:mime-type |
| ## -1 +0,0 ## |
| -text/plain |
| \ No newline at end of property |
| Index: cljs/sections/suggestions.xml |
| =================================================================== |
| --- cljs/sections/suggestions.xml (revision 45) |
| +++ cljs/sections/suggestions.xml (nonexistent) |
| @@ -1,52 +0,0 @@ |
| -<?xml version="1.0" encoding="UTF-8"?> |
| -<CONTENT TITLE="Comments and Suggestions" ID="comments" NUMID="14"> |
| - <P HTMLONLY="true"> |
| - This FAQ uses the CSS stylesheet <URL>faq.css</URL> and is generated |
| - from the XML source <URL>index.xml</URL> using the XSLT stylesheet |
| - <URL>index.xsl</URL><!-- which also checks the links -->. |
| - </P> |
| - <CONTENT TITLE="Why do some posts have <FAQENTRY> in them?" ID="FAQENTRY" NUMID="5_1"> |
| - <P> |
| - If a poster feels that the question they are answering should be |
| - covered in the FAQ, placing <FAQENTRY> in the post lets the FAQ |
| - robot collect the messages for easy review and inclusion. A Draft Proposal |
| - for the FAQ is requested and appreciated. |
| - </P> |
| - <P> |
| -The <FAQENTRY> should not be used in posts except in |
| -conjunction with a suggestion/proposal for this FAQ. It should |
| -also not be literally quoted in replies, instead it should be |
| -partly obscured as, e.g. <FAQ**TRY> or similar. |
| - </P> |
| - </CONTENT> |
| - <CONTENT TITLE="How do I make a suggestion?" NUMID="5_2" ID="makeSuggestion"> |
| - <P> |
| -To make a suggestion to this FAQ, use either the FAQENTRY method |
| -above, or send e-mail to Thomas 'PointedEars' Lahn |
| -<cljs@PointedEars.de> |
| -(editor). |
| -All comments, suggestions, and especially corrections are welcome, and will be credited, where it is due, below. |
| - </P> |
| - </CONTENT> |
| - |
| - <CONTENT TITLE="Contributors" ID="contributors"> |
| - <p>(non-exhaustive, in alphabetical order; see <a |
| - href="http://PointedEars.de/wsvn/FAQs/trunk/cljs/?op=log&isdir=1&showchanges=1" |
| - >changelog</a> for details)</p> |
| - <ul> |
| - <li>Andrew Poulos <<a href="mailto:ap_prog@hotmail.com">ap_prog@hotmail.com</a>></li> |
| - <li><a href="http://3-magi.net/">Christoph Michael Becker</a> <<a href="mailto:cmbecker69@arcor.de">cmbecker69@arcor.de</a>></li> |
| - <li><a href="http://weppipakki.com/">Osmo Saarikumpu</a> <<a href="mailto:osmo@weppipakki.com">osmo@weppipakki.com</a>></li> |
| - <li><a href="http://personx.tumblr.com/">Garrett Smith</a> <<a href="mailto:dhtmlkitchen@gmail.com">dhtmlkitchen@gmail.com</a>></li> |
| - </ul> |
| - </CONTENT> |
| - |
| - <!-- FIXME --> |
| - <!-- |
| - <P> |
| - This FAQ is (C) Copyright Contributors on behalf of the |
| - newsgroup comp.lang.javascript. Upon change of the FAQ maintainer, |
| - the copyright will automatically pass over to the new maintainer. |
| - </P> |
| - --> |
| - </CONTENT> |
| \ No newline at end of file |
| /cljs/sections/suggestions.xml |
| Property changes: |
| Deleted: svn:mime-type |
| ## -1 +0,0 ## |
| -text/plain |
| \ No newline at end of property |
| Index: cljs/sections/numbers.xml |
| =================================================================== |
| --- cljs/sections/numbers.xml (revision 45) |
| +++ cljs/sections/numbers.xml (nonexistent) |
| @@ -1,211 +0,0 @@ |
| -<?xml version="1.0" encoding="UTF-8"?> |
| -<CONTENT TITLE="Numbers" ID="numbers"> |
| - <CONTENT TITLE="How do I format a Number as a String with exactly 2 decimal places?" ID="formatNumber" NUMID="4_6"> |
| - <P> |
| - (For example: When formatting currency, how to format |
| - <code>6.57634</code> as <code>"6.58"</code>, |
| - <code>6.5</code> as <code>"6.50"</code>, and <code>6</code> |
| - as <code>"6.00"</code>?) |
| - </P> |
| - <P> |
| - Rounding of x.xx5 is unreliable, as most numbers are not |
| - represented exactly. See also: |
| - <URL LINKTEXT="Why does simple decimal arithmetic give strange results?" |
| - >#binaryNumbers</URL> |
| - </P> |
| - <P> |
| - The statement <code>n = Math.round(n * 100) / 100</code> |
| - converts <code>n</code> to a <code>Number</code> value close |
| - to a multiple of <code>0.01</code>. However, there are |
| - problems. Converting the <code>Number</code> value |
| - <code>n</code> to a <code>String</code> value |
| - (<code>n.toString()</code>), does not give trailing zeroes. |
| - Rounding numbers that are very close to <code>x.5</code>, |
| - for example, <code>Math.round(0.49999999999999992)</code> |
| - returns <code>1</code>. |
| - </P> |
| - <P> |
| - ECMA-262 Edition 3 introduced <code>Number.prototype.toFixed()</code>. |
| - However, there are bugs in JScript 5.8 and below with certain |
| - values; for example, <code>0.007.toFixed(2)</code> incorrectly |
| - returns <code>"0.00"</code>. |
| - </P> |
| - <CODE><![CDATA[ |
| -var numberToFixed = (function () { |
| - /** |
| - * @param {string} input |
| - * Input value to be converted to string. |
| - * @param {number} size |
| - * Desired length of output. |
| - * @param {string} ch |
| - * Single character to prefix to <var>s</var>. |
| - * @return {string} |
| - */ |
| - function padLeft (input, size, ch) |
| - { |
| - var s = input.toString(); |
| - |
| - while (s.length < size) |
| - { |
| - s = ch + s; |
| - } |
| - |
| - return s; |
| - } |
| - |
| - function toUnsignedString (m, digits) |
| - { |
| - var t, |
| - s = Math.round(m * Math.pow(10, digits)).toString(), |
| - start, end; |
| - |
| - if (/\D/.test(s)) |
| - { |
| - return m.toString(); |
| - } |
| - |
| - s = padLeft(s, 1 + digits, "0"); |
| - start = s.substring(0, t = (s.length - digits)); |
| - end = s.substring(t); |
| - |
| - if (end) |
| - { |
| - end = "." + end; |
| - } |
| - |
| - /* avoid "0." */ |
| - return start + end; |
| - } |
| - |
| - /** |
| - * @param {number} n |
| - * Number to be formatted |
| - * @param {number} digits |
| - * Number of decimal digits |
| - * @return {string} |
| - * The formatted string |
| - */ |
| - return function (n, digits) { |
| - var unsigned = toUnsignedString(Math.abs(n), digits); |
| - return (n < 0 ? "-" : "") + unsigned; |
| - }; |
| -})(); |
| - |
| -// Test results |
| -document.writeln([ |
| - "numberToFixed(9e-3, 12) => " + numberToFixed(9e-3, 12), |
| - "numberToFixed(1.255, 2) => " + numberToFixed(1.255, 2), |
| - "numberToFixed(1.355, 2) => " + numberToFixed(1.355, 2), |
| - "numberToFixed(0.1255, 3) => " + numberToFixed(0.1255, 3), |
| - "numberToFixed(0.07, 2) => " + numberToFixed(0.07, 2), |
| - "numberToFixed(0.0000000006, 1) => " + numberToFixed(0.0000000006, 1), |
| - "numberToFixed(0.0000000006, 0) => " + numberToFixed(0.0000000006, 0) |
| -].join("\n")); |
| - ]]></CODE> |
| - <MOREINFO> |
| - <URL>http://www.merlyn.demon.co.uk/js-round.htm</URL> |
| - <URL>http://msdn.microsoft.com/en-us/library/sstyff0z%28VS.85%29.aspx</URL> |
| - </MOREINFO> |
| - </CONTENT> |
| - <CONTENT TITLE="Why does simple decimal arithmetic give strange results?" ID="binaryNumbers" NUMID="4_7"> |
| - <P> |
| - For example, <ICODE>5 * 1.015</ICODE> does not give exactly |
| - <ICODE>5.075</ICODE> and <ICODE>0.06+0.01</ICODE> does |
| - not give exactly <ICODE>0.07</ICODE> in javascript. |
| - </P> |
| - <P> |
| - ECMAScript numbers are represented in binary as IEEE-754 (IEC 559) |
| - Doubles, with a resolution of 53 bits, giving an accuracy of |
| - 15-16 decimal digits; integers up to just over <ICODE>9e15</ICODE> are |
| - precise, but few decimal fractions are. Given this, arithmetic |
| - is as exact as possible, but no more. Operations on integers |
| - are exact if the true result and all intermediates are integers |
| - within that range. |
| - </P> |
| - <P> |
| - In particular, non-integer results should not normally be |
| - compared for equality; and non-integer computed results |
| - commonly need rounding; see <URL |
| - LINKTEXT="How do I format a Number as a String with exactly 2 decimal places?" |
| - >#formatNumber</URL> |
| - </P> |
| - <MOREINFO> |
| - <URL>http://msdn.microsoft.com/en-us/library/7wkd9z69%28VS.85%29.aspx</URL> |
| - <URL>http://www.merlyn.demon.co.uk/js-misc0.htm#DW4</URL> |
| - </MOREINFO> |
| - <P> |
| - Otherwise, use <ICODE>Math.round</ICODE> on the results of expressions which |
| - should be of integer value. |
| - </P> |
| - </CONTENT> |
| - <CONTENT TITLE="Why does K = parseInt('09') set K to 0?" ID="parseIntBase" NUMID="4_12"> |
| - <P> |
| - Method <ICODE>parseInt</ICODE> generally needs a second parameter, <ICODE>radix</ICODE>, |
| - for the base (from 2 to 36). |
| - </P> |
| - <P> |
| - If <ICODE>radix</ICODE> is omitted, the base is determined by the contents of |
| - the string. Any string beginning with <ICODE>'0x'</ICODE> or <ICODE>'0X'</ICODE> represents a |
| - hexadecimal number. A string beginning with a leading 0 may be parsed as |
| - octal (as if <ICODE>raxix</ICODE> were 8), in ECMA-262 Ed 3 (octal digits are <ICODE>0-7</ICODE>). |
| - If string <ICODE>'09'</ICODE> is converted to <ICODE>0</ICODE>. |
| - </P> |
| - <P> |
| - To force use of a particular base, use the <ICODE>radix</ICODE> |
| - parameter: <ICODE>parseInt("09", base)</ICODE>. |
| - |
| - <!-- [omit] |
| - If base 10 is desired, |
| - the unary <ICODE>+</ICODE> operator can be an option. Example: |
| - <ICODE> |
| -var s = '-09.1'; // Input string. |
| -var j = +s; // Convert to number. Result: -9.1 |
| -var n = j|0; // Chop off decimal (convert ToInt32). Result: -9 |
| -</ICODE> |
| - [/omit] --> |
| - </P> |
| - <MOREINFO> |
| - <URL>http://developer.mozilla.org/en/Core_JavaScript_1.5_Reference/Global_Functions/parseInt</URL> |
| - <URL>http://msdn.microsoft.com/en-us/library/x53yedee%28VS.85%29.aspx</URL> |
| - <URL>http://docs.sun.com/source/816-6408-10/toplev.htm#1064173</URL> |
| - <URL>notes/type-conversion/#tcPrIntRx</URL> |
| - </MOREINFO> |
| - </CONTENT> |
| - <CONTENT TITLE="Why does 1+1 equal 11? or How do I convert a string to a number?" ID="typeConvert"> |
| - <P> |
| - Variables are not typed; their values are. The conversion between a |
| - string and a number happens automatically. |
| - </P> |
| - <P> |
| - The addition operator (<ICODE>+</ICODE>) performs concatenation if either operand is a |
| - string, thus <ICODE>"1" + 1</ICODE> results <ICODE>"11"</ICODE>. To perform addition, you might need |
| - to first convert the string to a number. For example <ICODE>+varname</ICODE> or |
| - <ICODE>Number(varname)</ICODE> or <ICODE>parseInt(varname, 10)</ICODE> or |
| - <ICODE>parseFloat(varname)</ICODE>. Form control values are strings, as is the result |
| - from a <ICODE>prompt</ICODE> dialog. Convert these to numbers before performing |
| - addition: <ICODE>+'1' + 1</ICODE> results <ICODE>2</ICODE>. |
| - </P> |
| - <MOREINFO> |
| - <URL LINKTEXT="Additional Notes">notes/type-conversion/</URL> |
| - <URL>http://msdn.microsoft.com/en-us/library/67defydd%28VS.85%29.aspx</URL> |
| - </MOREINFO> |
| - </CONTENT> |
| - <CONTENT TITLE="How do I generate a random integer from 1 to n?" ID="randomNumber" NUMID="4_22"> |
| - <P> |
| - <ICODE>Math.random()</ICODE> returns a value <ICODE>R</ICODE> such that <ICODE>0 <= R < 1.0</ICODE>; therefore: |
| - </P> |
| - <CODE> |
| -// positive integer expected |
| -function getRandomNumber(n) { |
| - return Math.floor(n * Math.random()); |
| -} |
| - </CODE> |
| - - gives an evenly distributed random integer in the range from |
| - <ICODE>0</ICODE> to <ICODE>n - 1</ICODE> inclusive; use <ICODE>getRandomNumber(n)+1</ICODE> for <ICODE>1</ICODE> to <ICODE>n</ICODE>. |
| - <MOREINFO> |
| - <URL>http://msdn.microsoft.com/en-us/library/41336409%28VS.85%29.aspx</URL> |
| - <URL>http://docs.sun.com/source/816-6408-10/math.htm</URL> |
| - How to Deal and Shuffle, see in: <URL>http://www.merlyn.demon.co.uk/js-randm.htm</URL> |
| - </MOREINFO> |
| - </CONTENT> |
| -</CONTENT> |
| \ No newline at end of file |
| /cljs/sections/numbers.xml |
| Property changes: |
| Deleted: svn:mime-type |
| ## -1 +0,0 ## |
| -text/plain |
| \ No newline at end of property |
| Index: cljs/sections/debugging.xml |
| =================================================================== |
| --- cljs/sections/debugging.xml (revision 45) |
| +++ cljs/sections/debugging.xml (nonexistent) |
| @@ -1,118 +0,0 @@ |
| -<?xml version="1.0" encoding="UTF-8"?> |
| -<CONTENT TITLE="Debugging" ID="debugging"> |
| - <CONTENT TITLE="How do I get my browser to report script errors?" |
| - ID="javascriptErrors" NUMID="4_43"> |
| - <P> |
| -There are debugging tools for many browsers. Learn to use them all. |
| - </P> |
| - <LIST TYPE="DL"> |
| - <DT>General</DT> |
| - <DD><URL LINKTEXT="Secrets of the Browser Developer Tools">http://devtoolsecrets.com/</URL></DD> |
| - <DT>Windows</DT> |
| - <DD> |
| -<URL LINKTEXT="Fiddler">http://www.fiddlertool.com/fiddler/</URL>. |
| -Fiddler is an HTTP Debugging proxy (it won't find script |
| -errors). Fiddler logs HTTP activity, like Firebug's Net |
| -tab, but can be attached to any browser running on Windows. |
| - </DD> |
| - <DT>Windows IE</DT> |
| - <DD>Microsoft Script Editor. Included with Visual Studio or Microsoft |
| -Word 2003 (discontinued in Office 2007). |
| -To enable, |
| -<ICODE>Tools</ICODE>, <ICODE>Internet Options</ICODE>, <ICODE>Advanced</ICODE>, and uncheck |
| -<ICODE>Disable Script Debugging</ICODE>. After enabling Script Debugging, |
| -a <ICODE>Script Debugger</ICODE> option will appear in the <ICODE>View</ICODE> menu.</DD> |
| - |
| -<DD><URL LINKTEXT="IETester">http://www.my-debugbar.com/wiki/IETester/HomePage</URL> for testing IE 5.5- IE8.</DD> |
| -<DD><URL LINKTEXT="CompanionJS">http://www.my-debugbar.com/wiki/CompanionJS/HomePage</URL> <ICODE>console</ICODE> for IE.</DD> |
| - <DD> |
| -<EM>Note:</EM> For debugging scripts in IE, the Microsoft Script <EM>Editor</EM> |
| -is recommended. However, if not available, the <URL LINKTEXT="Microsoft Script Debugger" |
| ->http://www.microsoft.com/downloads/details.aspx?FamilyId=2F465BE0-94FD-4569-B3C4-DFFDF19CCD99&displaylang=en</URL> may be somewhat helpful. |
| - </DD> |
| - <DD> |
| -<URL LINKTEXT="Internet Explorer Developer Toolbar" |
| - >http://www.microsoft.com/downloads/details.aspx?FamilyID=e59c3964-672d-4511-bb3e-2d5e1db91038&displaylang=en</URL> |
| - </DD> |
| - <DD> |
| -To report errors: Wait until a little yellow |
| -triangle appears at the left end of the status bar, double click |
| -on it and, when the error dialog box appears, check the "Always |
| -show errors" checkbox it contains. |
| - |
| -Or, <ICODE>Internet Options</ICODE>, <ICODE>Advanced</ICODE>, deselect <ICODE>"Disable Script Debugging"</ICODE>, |
| -select <ICODE>"Display a notification ..."</ICODE>. |
| - </DD> |
| - <DT>Firefox</DT> |
| - <DD> |
| - <ICODE>Tools > Error console</ICODE> (<ICODE>Ctrl</ICODE> + <ICODE>Shift</ICODE> + <ICODE>j</ICODE>). |
| - </DD> |
| - <DD> |
| -<URL LINKTEXT="Firebug">http://getfirebug.com/</URL> |
| - </DD> |
| - <DD> |
| -<URL LINKTEXT="YSlow">https://addons.mozilla.org/en-US/firefox/addon/5369</URL>. |
| -YSlow analyzes web pages and tells you why they're slow |
| -based on Yahoo's rules for high performance web sites. |
| - </DD> |
| - <DD> |
| -<URL LINKTEXT="Lori">https://addons.mozilla.org/en-US/firefox/addon/1743</URL> |
| -<DFN>Lori</DFN> or Life-of-request info, is useful for troubleshooting |
| -server response and page load time. |
| - </DD> |
| - <DD> |
| -<URL LINKTEXT="Web Developer Toolbar">https://addons.mozilla.org/en-US/firefox/addon/60</URL>. |
| - </DD> |
| - <DD> |
| -<URL LINKTEXT="Cookie Watcher">https://addons.mozilla.org/en-US/firefox/addon/1201</URL>. |
| - </DD> |
| - <DD> |
| -<URL LINKTEXT="XPather">https://addons.mozilla.org/en-US/firefox/addon/1192</URL>. |
| -XPath generator, editor and inspector. |
| - </DD> |
| - <DT>Opera</DT> |
| - <DD> |
| -Tools > Advanced > Error console |
| - </DD> |
| - <DD> |
| -<URL LINKTEXT="Introduction to Opera Dragonfly" |
| - >http://dev.opera.com/articles/view/introduction-to-opera-dragonfly/</URL> |
| - </DD> |
| - <DT>Safari</DT> |
| - <DD> |
| -To display the <ICODE>Develop</ICODE> menu in Safari 3.1 or higher, select |
| -the checkbox labeled "Show Develop menu in menu bar" in |
| -Safari's <ICODE>Advanced</ICODE> Preferences panel. |
| - </DD> |
| - <DD> |
| -<URL LINKTEXT="Safari Web Inspector">http://trac.webkit.org/wiki/Web%20Inspector </URL> |
| - </DD> |
| - <DT>Chrome</DT> |
| - <DD> |
| -JavaScript Console: click the <ICODE>Page</ICODE> menu icon and select |
| -<ICODE>Developer > JavaScript Console</ICODE>. From here, you'll be |
| -able to view errors in the JavaScript execution, and enter |
| -additional javascript commands to execute. |
| - </DD> |
| - <DD> |
| -JavaScript Debugger: available as <ICODE>Page</ICODE> menu icon > <ICODE>Developer</ICODE> |
| -> Debug JavaScript, the debugger provides a command prompt from which you |
| -can set breakpoints, backtrace, and more. Type <ICODE>help</ICODE> at the debugger |
| -command line to get started. |
| - </DD> |
| - <DD> |
| - <UL> |
| - <LI><URL LINKTEXT="Google Chrome Script Debugging" |
| - >http://www.google.com/chrome/intl/en/webmasters-faq.html#jsexec</URL></LI> |
| - <LI><URL LINKTEXT="Developer Tools for Google Chrome" |
| - >http://blog.chromium.org/2009/06/developer-tools-for-google-chrome.html</URL></LI> |
| - <LI><URL LINKTEXT="Tools for Eclipse Users">http://blog.chromium.org/2009/08/google-chrome-developer-tools-for.html</URL></LI> |
| - </UL> |
| - </DD> |
| - <DT>Mac IE</DT> |
| - <DD> |
| -Use the Preferences dialog. |
| - </DD> |
| - </LIST> |
| - </CONTENT> |
| - </CONTENT> |
| \ No newline at end of file |
| /cljs/sections/debugging.xml |
| Property changes: |
| Deleted: svn:mime-type |
| ## -1 +0,0 ## |
| -text/plain |
| \ No newline at end of property |
| Index: cljs/sections/dom.xml |
| =================================================================== |
| --- cljs/sections/dom.xml (revision 45) |
| +++ cljs/sections/dom.xml (nonexistent) |
| @@ -1,188 +0,0 @@ |
| -<?xml version="1.0" encoding="UTF-8"?> |
| -<CONTENT TITLE="DOM and Forms" ID="domRef"> |
| - <CONTENT TITLE="How do I get the value of a form control?" |
| - ID="formControlAccess" NUMID="4_13"> |
| - <P> |
| - In HTML documents, a form may be referred to as a property of the |
| - <ICODE>document.forms</ICODE> collection, either by its ordinal index or by name |
| - (if the <ICODE>form</ICODE> has a name). A <ICODE>form</ICODE>'s controls may be similarly referenced |
| - from its <ICODE>elements</ICODE> collection: |
| - </P> |
| - <CODE> |
| -var frm = document.forms[0]; |
| -var control = frm.elements["elementname"]; |
| - </CODE> |
| - <P> |
| - Once a reference to a control is obtained, its (string) <ICODE>value</ICODE> |
| - property can be read:- |
| - </P> |
| - <CODE> |
| -var value = control.value; |
| -value = +control.value; //string to number. |
| - </CODE> |
| - Some exceptions would be: |
| - <P> |
| - First Exception: Where the control is a <ICODE>SELECT</ICODE> element, and |
| - support for older browsers, such as NN4, is required: |
| - </P> |
| - <CODE> |
| -var value = control.options[control.selectedIndex].value; |
| - </CODE> |
| - <P> |
| - Second Exception: Where several controls share the same name, |
| - such as radio buttons. These are made available as collections |
| - and require additional handling. For more information, see:- |
| - </P> |
| - <MOREINFO> |
| - <URL>notes/form-access/</URL> |
| - <URL LINKTEXT="Unsafe Names for HTML Form Controls">names/</URL> |
| - </MOREINFO> |
| - <P> |
| - Third Exception: File inputs. Most current browsers do not allow |
| - reading of <ICODE>type="file"</ICODE> input elements in a way that is useful. |
| - </P> |
| - </CONTENT> |
| - <CONTENT TITLE="My element is named myselect[], how do I access it?" ID="propertyAccess" NUMID="4_25"> |
| - <P> |
| -Form controls with any "illegal" characters can be accessed with |
| -<ICODE>formref.elements["myselect[]"]</ICODE> - The bracket characters, |
| -amongst others, are illegal in ID attributes and javascript |
| -identifiers, so you should try to avoid them as browsers may |
| -handle them incorrectly. |
| - </P> |
| - <MOREINFO> |
| - <URL>http://msdn.microsoft.com/en-us/library/ms537449%28VS.85%29.aspx</URL> |
| - <URL>https://developer.mozilla.org/en/DOM/form</URL> |
| - <URL>notes/form-access/</URL> |
| - </MOREINFO> |
| - </CONTENT> |
| - <CONTENT TITLE="Why doesn't the global variable "divId" always refer to the element with id="divId"?" |
| - ID="globalPollution" NUMID="4_41"> |
| - <P> |
| - Microsoft introduced a shortcut that can be used to reference |
| - elements which include an <ICODE>id</ICODE> attribute where the |
| - <ICODE>id</ICODE> becomes a globally-accessible property. Some browsers reproduce |
| - this behavior. Some, most notably Gecko-based browsers (Netscape and Mozilla), |
| - do so only in "quirks" mode. The best approach is the <ICODE>document.getElementById</ICODE> |
| - method, which is part of the W3C DOM standard and implemented |
| - in modern browsers (including IE from version 5.0). So an |
| - element with <ICODE>id="foo"</ICODE> can be referenced |
| - with:- |
| - </P> |
| - <CODE> |
| -var el = document.getElementById("foo"); |
| - </CODE> |
| - <P> |
| - Note: make sure not to use the same <ICODE>id</ICODE> twice in the same document |
| - and do not give an element a <ICODE>name</ICODE> that matches an <ICODE>id</ICODE> |
| - of another in the same document or it will trigger bugs in MSIE <= 7 with |
| - <ICODE>document.getElementsByName</ICODE> and <ICODE>document.getElementById</ICODE>. |
| - </P> |
| - <MOREINFO> |
| - <URL>https://developer.mozilla.org/en/Using_Web_Standards_in_your_Web_Pages/Using_the_W3C_DOM#Accessing_Elements_with_the_W3C_DOM</URL> |
| - <URL>faq_notes/faq_notes.html#FAQN4_41</URL> |
| - </MOREINFO> |
| - </CONTENT> |
| - <CONTENT TITLE="How do I modify the content of the current page?" |
| - ID="updateContent" NUMID="4_15"> |
| - <P> |
| - Using the non-standard but widely implemented |
| - <ICODE>innerHTML</ICODE> property: |
| - <ICODE><div id="anID">Some Content</div></ICODE> with script: |
| - </P> |
| - <CODE> |
| -document.getElementById("anID").innerHTML = |
| - "Some <em>new</em> Content"; |
| - </CODE> |
| - <P> |
| - Where <ICODE>"anID"</ICODE> is the (unique on the HTML page) |
| - <ICODE>id</ICODE> attribute value of the element to modify. |
| - </P> |
| - <P> |
| - All versions of Internet Explorer exhibit problems with innerHTML, including: |
| - </P> |
| - <LIST TYPE="UL"> |
| - <LI>Fails with FRAMESET, HEAD, HTML, STYLE, SELECT, |
| - OBJECT, and all TABLE-related elements.</LI> |
| - <LI>Replaces consecutive whitespace characters with a single space.</LI> |
| - <LI>Changes attribute values and order of appearance.</LI> |
| - <LI>Removes quotations around attribute values.</LI> |
| - </LIST> |
| - <P> |
| - If the new content is only text and does not need to replace existing HTML, |
| - it is more efficient to modify the <ICODE>data</ICODE> property of a text node. |
| - </P> |
| - <CODE> |
| -document.getElementById("anID").firstChild.data = "Some new Text"; |
| - </CODE> |
| - <P> |
| - Compatibility Note: Implementations have been known to split long text |
| - content among several adjacent text nodes, so replacing the data of the |
| - first text node may not replace all the element's text. The <ICODE>normalize</ICODE> |
| - method, where supported, will combine adjacent text nodes. |
| - </P> |
| - <P> |
| - Note: Make sure the element exists in the document (has been parsed) before trying to |
| - reference it. |
| - </P> |
| - <MOREINFO> |
| - <URL>http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-FF21A306</URL> |
| - <URL>http://msdn.microsoft.com/en-us/library/cc304097%28VS.85%29.aspx</URL> |
| - <URL>http://msdn.microsoft.com/en-us/library/ms533897%28VS.85%29.aspx</URL> |
| - <URL>http://developer.mozilla.org/en/Whitespace_in_the_DOM</URL> |
| - <URL>http://developer.mozilla.org/en/docs/DOM:element.innerHTML</URL> |
| - <URL>http://www.whatwg.org/specs/web-apps/current-work/multipage/the-end.html#html-fragment-serialization-algorithm</URL> (draft) |
| - </MOREINFO> |
| - </CONTENT> |
| - |
| - <CONTENT TITLE="Why does my code fail to access an element?" ID="accessElementBeforeDefined"> |
| - <P> |
| - An element can only be accessed after it exists in the document. |
| - </P> |
| - <P> |
| - Either: |
| - A) include your script after the HTML element it refers to, or |
| - B) use the <ICODE>"load"</ICODE> event to trigger your script. |
| - </P> |
| - <P> |
| - Example A: |
| - </P> |
| - <CODE> |
| -<div id="snurgle">here</div> |
| -<script type="text/javascript"> |
| -// Don't forget var. |
| -var snurgleEl = document.getElementById("snurgle"); |
| -window.alert(snurgleEl.parentNode); |
| -</script> |
| - </CODE> |
| - <P> |
| - Example B: |
| - </P> |
| - <CODE> |
| -// In the HEAD. |
| -<script type="text/javascript"> |
| -window.onload = function(){ |
| - var snurgleEl = document.getElementById("snurgle"); |
| -}; |
| -</script> |
| - </CODE> |
| - |
| - <LIST TYPE="UL" TITLE="Other problems can include:"> |
| - <LI>invalid HTML</LI> |
| - <LI>two elements with the same <ICODE>name</ICODE> or <ICODE>id</ICODE></LI> |
| - <LI><URL LINKTEXT="use of an unsafe name">names</URL></LI>. |
| - </LIST> |
| - </CONTENT> |
| - <CONTENT TITLE="How can I see in javascript if a web browser accepts cookies?" |
| - ID="testCookie" NUMID="4_4"> |
| - <P> |
| - Write a cookie and read it back and check if it's the same. |
| - </P> |
| - <MOREINFO> |
| - Additional Notes: |
| - <URL>http://www.ietf.org/rfc/rfc2965.txt</URL> |
| - <URL>http://www.galasoft-lb.ch/myjavascript/consulting/2001012701/</URL> |
| - <URL>http://www.cookiecentral.com/</URL> |
| - </MOREINFO> |
| - </CONTENT> |
| -</CONTENT> |
| \ No newline at end of file |
| /cljs/sections/dom.xml |
| Property changes: |
| Deleted: svn:mime-type |
| ## -1 +0,0 ## |
| -text/plain |
| \ No newline at end of property |
| Index: cljs/notes/posting/index.html |
| =================================================================== |
| --- cljs/notes/posting/index.html (revision 45) |
| +++ cljs/notes/posting/index.html (nonexistent) |
| @@ -1,1209 +0,0 @@ |
| -<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" |
| -"http://www.w3.org/TR/html4/strict.dtd"> |
| -<html lang="en"> |
| -<head> |
| -<title>Notes on the comp.lang.javascript FAQ</title> |
| -<meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1"> |
| -<link href="../../faq.css" rel="stylesheet" type="text/css"> |
| -<link href="../notes.css" rel="stylesheet" type="text/css"> |
| -<meta name="ROBOTS" content="NOINDEX, NOFOLLOW"> |
| -<style type="text/css"> |
| -.resourceList LI { |
| - margin-bottom: 0.8em; |
| -} |
| -</style> |
| -</head> |
| -<body> |
| - |
| -<h1>Posting Questions and Replies to comp.lang.javascript</h1> |
| -<div id="faqNav"> |
| - <a href="../../">FAQ</a> > <a href="../">FAQ Notes</a> |
| - |
| -</div> |
| -<ul> |
| - <li><a href="#ps1Intro">Introduction</a></li> |
| - <li><a href="#ps1Lang">Posting Language</a></li> |
| - <li><a href="#ps1OToc">On and Off Topic Posting</a></li> |
| - <li><a href="#ps1Txt">Plain-Text Only</a></li> |
| - <li><a href="#ps1Post">Interleaved Posting, Bottom Posting and Not Top Posting.</a> |
| - <ul> |
| - <li><a href="#ps1InBPost">Interleaved Posting, Bottom Posting</a></li> |
| - <li><a href="#ps1TopPs">Top Posting (don't)</a></li> |
| - </ul> |
| - </li> |
| - <li><a href="#ps1Trim">What to Trim</a></li> |
| - <li><a href="#ps1Marg">Margins and Line Wrapping</a> |
| - <ul> |
| - <li><a href="#ps1Mar">Margins</a></li> |
| - <li><a href="#ps1Lw">Line Wrapping</a></li> |
| - <li><a href="#ps1LwQu">Line Wrapping in Quoted Material</a></li> |
| - </ul> |
| - </li> |
| - <li><a href="#ps1Code">General Code Postings, and when to use a URL</a></li> |
| - <!-- <li><a href="#ps1Proof">Proof-read your message</a></li> --> |
| - <li><a href="#ps1Quest">Well Asked Questions Get the Best Answers</a> |
| - <ul> |
| - <li><a href="#ps1QSub">Appropriate Use of the Subject Header</a></li> |
| - <li><a href="#ps1QRes">Doing Your Own Research</a></li> |
| - <li><a href="#ps1DontWork">"It doesn't work"</a></li> |
| - <li><a href="#ps1CntX">Explain the Whole Context</a></li> |
| - <li><a href="#ps1PR">Proof-Read your Questions</a></li> |
| - </ul> |
| - </li> |
| - <!-- <li><a href="#ps1notHD">comp.lang.javascript is Not a Helpdesk</a></li> --> |
| - <li><a href="#ps1AddR">Additional Reading</a></li> |
| -</ul> |
| - |
| -<h2 id="ps1Intro">Introduction</h2> |
| -<h3>Social Behavior</h3> |
| - |
| -<p> |
| -There may be several reasons for making posts to comp.lang.javascirpt |
| -but all valid reasons would be intended to elicit responses, preferably |
| -including responses form the many experienced and knowledgeable |
| -regular contributors to the group. The direction of communication is |
| -always one-to-many, which places the onus on the composer of a message |
| -to consider the many in their audience above any personal preferences. |
| -It is always in the best interest |
| -of someone posting to the group to recognise that the people whose |
| -responses will be of most value to them may have an attitude toward |
| -their behaviour on the group, and to try to ensure that it will not be |
| -a bad attitude. |
| -</p> |
| - |
| -<p> |
| -It is also always in the best interest of any poster to the group to do |
| -everything within their power to behave in a way that makes it quick |
| -and easy for the people they expect to answer their questions to read and follow |
| -their posts, understand their questions and problems and comprehend and |
| -test posted code. The people with the best answers are the most likely |
| -to be busy; too busy to be interested in unraveling a badly expressed |
| -problem from a mass of incomprehensibly formatted code amid a |
| -conversation that is hard to follow. |
| -</p> |
| - |
| -<p id="ps1Into_3"> |
| -Usenet has been around for a long time now and has developed various |
| -conventions of its own. Conventions that have evolved to make |
| -communicating in the medium as easy and efficient as possible. They |
| -are not necessarily adhered to on all groups but where they are |
| -recognised they are definitely preferred. And comp.lang.javascript is |
| -a group where most of the regulars recognise many Usenet conventions |
| -and so the FAQ outlines them. This document is intended to provide |
| -additional detail on the subject. |
| -</p> |
| - |
| -<p id="ps1Into_4"> |
| -Following those conventions and additionally posting with a |
| -consideration of the other points made on this page related more |
| -specifically to posting in comp.lang.javascript, will maximise the |
| -potential for any questions asked and posts made to elicit a useful |
| -response. At least in part because they make it quicker and easier for |
| -those interested in offering help to do so. |
| -</p> |
| - |
| -<h2 id="ps1Lang">Posting Language</h2> |
| - |
| -<p id="ps1Lang_1"> |
| -comp.lang.javascript is the international javascript group. There are |
| -language specific javascript groups that could be expected to be |
| -carried by news servers within the countries concerned. There is, |
| -however, no English language specific javascript group so |
| -comp.lang.javascript serves that audience. As a result the vast |
| -majority of the conversation within the group is in English, and |
| -anyone with a javascript interest but incapable of reading/writing any |
| -language but English would choose comp.lang.javascript to read and post |
| -in. But there are no rules that say that English is the only language |
| -that is to be used. |
| -</p> |
| - |
| -<p id="ps1Lang_2"> |
| -As an international group, comp.lang.javascript has contributors form |
| -around the world, many of whom speak/read/write English as a second or |
| -third (+) language. So a post made in any other language will stand a |
| -chance of falling within the linguistic capabilities of someone. But |
| -posts in English should be understandable to everyone, including those |
| -for whom English is their only language, and thus receive the most |
| -attention. |
| -</p> |
| - |
| -<p id="ps1Lang_3"> |
| -Machine translation into English (and sometimes less skilled human |
| -translation) sometimes does not produce results that can be |
| -understood/followed by English speakers. When a bad translation into |
| -English is the only option it might be better for a poster to precede |
| -it with a version in their native language. (Faced with a post in a |
| -language that is not understood it is natural to scroll down to see |
| -if there is any accompanying javascript code that might explain the |
| -problem; a following English translation would be discovered along |
| -the way). A reader of the group who understands the language used |
| -may be able to contribute improvements to the English translation even |
| -if they cannot directly address the question raised. |
| -</p> |
| - |
| -<p id="ps1Lang_4"> |
| -However, even though the most common language used in postings to |
| -comp.lang.javascript is English, the fact that the group is |
| -international and that English should not be expected to be the first |
| -language of contributors to the group means that the English used |
| -should be formally correct (to the best of the posters ability). |
| -Normal English sentence structure should be observed, particularly in |
| -terms of capitalisation (which serves to aid reading for everyone). But |
| -above all, shorthand abbreviations should not be used, no matter how |
| -common they may be in English speaking cultures, as they would not |
| -normally be part of the teaching of English as a foreign language. This |
| -applies especially to text-message shorthand as they are very much a |
| -product of local culture and circumstances in a way that is not |
| -relevant to Usenet as a medium or appropriate to an international |
| -newsgroup. |
| -</p> |
| - |
| -<p id="ps1Lang_5"> |
| -In the context of an international forum it is also probably best to |
| -avoid references that may be ambiguous outside of a national context. |
| -Date formats are an obvious example, with the ISO 8601 <code>YYYY-MM-DD</code> format |
| -being more appropriate than any preferred local form. Also, references |
| -to national bodies by acronym alone will not necessarily convey |
| -sufficient meaning to an international audience. |
| -</p> |
| - |
| -<h2 id="ps1OToc">On and Off Topic Posting</h2> |
| - |
| -<p id="ps1OToc_1"> |
| -ECMA 262 is the formal specification for ECMAScript, the |
| -standard adopted by javascript implementations and thus the |
| -specification for javascript. |
| -</p> |
| - |
| -<h3>ECMAScript and Browsers</h3> |
| -<p id="ps1OToc_2"> |
| -As comp.lang.javascript deals with ECMAScript and ECMAScript was |
| -designed as a general scripting language for scripting any object |
| -model, questions relating to any application of ECMAScript are |
| -appropriate. The group has a general bias towards the use of |
| -ECMAScript in web browsers in an Internet context, and questions |
| -asked without additional qualification will tend to be assumed to |
| -be related to that environment and context. As a result it is a |
| -very good idea for questions asked that are not related to that |
| -default context; Intranet, other hosts, OS automation, etc., to |
| -include details of that context. |
| -</p> |
| - |
| -<h3 id="ps1OToc_3">Javascript (not Java)</h3> |
| -<p> |
| -Because of the name "JavaScript" being applied to the |
| -language early in its existence there is often confusion between |
| -javascript and the Java programming language. The two are distinct |
| -and very different languages. Questions relating to Java programming, |
| -Java Applets, Java Server Pages (JSP), etc., would be better asked in |
| -comp.lang.java.* groups. Only the use of ECMAScript to interact with, |
| -say, Java Applets would be on topic, and then the questions should |
| -relate to the ECMAScript aspect of the problem. |
| -</p> |
| - |
| -<h3 id="ps1OToc_4">Other Languages</h3> |
| -<p> |
| -Questions relating exclusively to other scripting languages, |
| - mark-up languages ((x)<span class="initialism" title="HyperText Mark-up Language"><abbr title="HyperText Mark-up Language">HTML</abbr></span>) and style sheets |
| -(<span class="initialism" title="Cascading Style Sheet"><abbr title="Cascading Style Sheet">CSS</abbr></span>, XSL) are off topic and should be addressed to more |
| -appropriate newsgroups. |
| -</p> |
| - |
| -<h3 id="ps1OToc_5">The FAQ</h3> |
| -<p> |
| -The comp.lang.javascript newsgroup may also validly become its own |
| -subject, particularly the content and maintenance of the FAQ resources. |
| -But as a subject that is most appropriately raised and discussed by |
| -the individuals who invest their time in the group rather than |
| -passers-by. |
| -</p> |
| - |
| -<h3 id="ps1OToc_6">Usenet Behavior (don't)</h3> |
| -<p> |
| -Usenet, and particularly appropriate behaviour on and for Usenet, is |
| -also often raised. This is largely unwelcome but inevitable. Hopefully |
| -this document should contribute to a reduction in that noise by stating |
| -the group's attitude towards Usenet postings in greater detail than can |
| -be accommodated in the FAQ proper. |
| -</p> |
| - |
| -<h3 id="ps1OToc_7">Spam (don't)</h3> |
| -<p> |
| -Other things that are off topic for the group include obvious things |
| -like pyramid and get rich quick schemes, commercial advertising (with |
| -some rare exceptions mentioned below), job adverts, spurious |
| -invitations to visit web sites and anything else that might be |
| -reasonably regarded as spam. |
| -</p> |
| - |
| -<h3>Announcements</h3> |
| -<p id="ps1OToc_8"> |
| -Announcements of product releases and events of particular relevance |
| -to javascript are welcome but, for products no more often than once |
| -pre major release, and for events preferably only once and certainly |
| -not more often than at two month intervals leading up to the event. |
| -Be aware that product announcements (particularly commercial |
| -javascript) are likely to attract reviews, which should not be |
| -expected to be uncritical. |
| -</p> |
| - |
| -<h2 id="ps1Txt">Plain-Text Only</h2> |
| - |
| -<p id="ps1Txt_1"> |
| -Messages are posted in plain-text. There is no requirement for Usenet |
| -newsreader software to recognise, support or display any other |
| -content type, such as <span class="initialism" title="HyperText Mark-up Language"><abbr title="HyperText Mark-up Language">HTML</abbr></span>, and it is felt that messages posted to |
| -comp.lang.javascript should be available to any and all newsreader |
| -software. Any form of attachments are also ruled out. |
| -</p> |
| - |
| -<p id="ps1Txt_2"> |
| -It has also been observed that while most of the world may be happy |
| -to use the newsreader bundled with their operating system, experts in |
| -various aspects of computing will often go out and acquire software |
| -that they believe superior for the task they have for it. Meaning that |
| -the people best equipped to offer help in the group are also the people |
| -least likely to be using the newsreader that you are familiar with. |
| -The expectation should be that others are using software that conforms |
| -to the applicable standards and not that they are using software with |
| -any particular set of additional or "enhanced" features, no |
| -matter how common they may seem. Plain-text posts will be readable by |
| -everyone, other content types may be subject to more comment on the |
| -inappropriateness of the content type than answers intended to address |
| -the question raised. |
| -</p> |
| - |
| -<h2 id="ps1Post">Interleaved Posting, Bottom Posting and Not Top Posting</h2> |
| - |
| -<h3 id="ps1InBPost">Interleaved Posting, Bottom Posting</h3> |
| - |
| -<p id="ps1InBPost_1"> |
| -The posting style in messages intended as responses to other messages |
| -is an area where a long established pattern of behaviour has been |
| -recognised as most appropriate for the medium and become an established |
| -convention. |
| -</p> |
| - |
| -<p id="ps1InBPost_2"> |
| -Material quoted from the previous message is attributed to its author |
| -and indented with a marker character (usually >). It is trimmed down |
| -to just sufficient to provide the context in which the response is made |
| -(marking the fact that an edit has been made with one of several |
| -common notations, such as: <snip>, [snip], [ ... ], etc.) and |
| -the responding text is placed <em>below</em> the quoted material |
| -to which it is responding, separated from it by a blank line. |
| -</p> |
| - |
| -<p id="ps1InBPost_3"> |
| -If the response addresses several points from the previous message |
| -then the parts of the quoted text providing the context for each |
| -point are separated by the responses to each point. Producing an |
| -interleaved post. If the quoted material is in one block then the |
| -response text goes after it at the bottom. Producing a bottom post. |
| -</p> |
| - |
| -<p id="ps1InBPost_4"> |
| -It is not possible to distinguish between bottom posting and an |
| -interleaved post that is only responding to one point in the previous |
| -message. Personally, I prefer interleaved responses but neither will |
| -result in an adverse reaction. The important points are that quoted |
| -material should be trimmed to the minimum that provides sufficient |
| -context and that responses should follow that quoted material. |
| -The conversation, and its chronological sequence, flows in the normal |
| -direction of reading; top to bottom. |
| -</p> |
| - |
| -<p id="ps1InBPost_5"> |
| -Failing to quote any of the preceding message is not necessarily |
| -wrong, so long as the text posted makes sense without the preceding |
| -message, for example, by summarising the points being responded to. |
| -But generally it is easier to provide the context for a response with |
| -a quoted snippet. But responses need to have a context. |
| -</p> |
| - |
| -<h3 id="ps1TopPs">Top Posting (don't)</h3> |
| - |
| -<p id="ps1TopPs_1"> |
| -Top posting is placing the response above the quoted material that is |
| -being responded to. The chronological sequence of conversation becomes |
| -the reverse of the normal top to bottom reading sequence and, without |
| -additional text summarising the points being responded to, it is |
| -difficult to determine exactly which points such a reply relates to. |
| -</p> |
| - |
| -<p id="ps1TopPs_2"> |
| -The worst possible style of response posting is top posting over a full |
| -verbatim quote of the previous message, but even placing a response |
| -above a trimmed quote is wrong. It renders the conversational aspects |
| -of a response backwards, requiring people to scroll up and down to |
| -reconstruct the context of the response and generally making it hard |
| -work to understand the message. The answers come before the questions |
| -and the comments precede their subjects. |
| -</p> |
| - |
| -<p id="ps1TopPs_3"> |
| -People do attempt to justify top posting. A common excuse made by top |
| -posters is that their newsreader places the cursor at the top of the |
| -message so that is the natural place to write the reply. That excuse |
| -is worthless as newsreader software does not dictate the style of |
| -posting and a cursor that starts at the top of a post does not have |
| -to stay there. Indeed it should not be expected to stay there, as the |
| -first responsibility of the respondent is to trim the quoted material |
| -down to just what is necessary to provide context for their response. |
| -A process that may reasonably be achieved by moving down through the |
| -quoted material deleting whatever is unneeded and marking those edits. |
| -And having done that the cursor will be at or near the bottom. |
| -</p> |
| - |
| -<p id="ps1TopPs_4"> |
| -The other common excuse for top posting is that avoids excessive |
| -scrolling in order to find the response. The need for excessive |
| -scrolling in an interleaved or bottom posted message is most likely |
| -an indicator that the quoted material has not been suitably, or |
| -sufficiently, trimmed. But a top posters apparent desire to avoid |
| -scrolling is of no value to the regular users of Usenet who are |
| -accustomed to interleaved/bottom posting. They may take the top |
| -post as a preamble and still scroll down to see if any specific |
| -points have been responded to, not discovering that hey have wasted |
| -their time until they get to the bottom. A very short top post, |
| -without a blank line separating it from the following attribution |
| -line, may easily be missed by someone expecting the quoted material |
| -to come first, meaning that they do not discover where to look until |
| -they have scrolled to the bottom, and then they need to back scroll |
| -to the top. The perception is wrong, top posting results in much more |
| -unnecessary scrolling than it avoids, and that misperception impacts on |
| -regular user of Usenet; the very people whose help and co-operation is |
| -being sought. |
| -</p> |
| - |
| -<p id="ps1TopPs_5"> |
| -<strong>Never top post to comp.lang.javascript</strong>. There is an |
| -established convention in posting styles on Usenet, and |
| -comp.lang.javascript. It is most efficient for everyone if newcomers |
| -follow that convention even if it seems strange to do so at first. In |
| -the long run it makes life easier for everyone, and the sooner that is |
| -recognised the less likelihood there is of being taken for a fool. |
| -</p> |
| - |
| -<h2 id="ps1Trim">What to Trim</h2> |
| - |
| -<p id="ps1Trim_1"> |
| -As a general guide, quoted material should almost never exceed the |
| -text posted in response. Exceptions might occur when both consist |
| -of exactly one line or sentence, or maybe a short code block that |
| -only needs a one line comment. |
| -</p> |
| - |
| -<p id="ps1Trim_2"> |
| -Deciding what to trim is a matter of judgment and takes a bit of |
| -practice to get right. There are few hard and fast rules and the best |
| -general advice has got to be to observe the behaviour of others |
| -positing to the group. |
| -</p> |
| - |
| -<p id="ps1Trim_3"> |
| -It is necessary to preserve the context in |
| -which a response is made but some things can be trimmed automatically: |
| -Signatures (if present); the section at the end of a post (and they |
| -should always, and only, be at the end, no matter where any individual |
| -newsreader may try to insert them) which starts with a separator |
| -consisting of "dash dash space newline(aka return)" on a |
| -line of its own, followed by material that is not directly |
| -related to the post but may be of more general interest or related |
| -to the individual who makes the post, should <strong>always</strong> |
| -be trimmed from quoted material. It is never normally relevant to a |
| -posted response, but even if a signature is being directly commented |
| -upon it is vital to remove the signature separator at least, and best |
| -to trim anything it contains that is not being commented upon. |
| -</p> |
| - |
| -<p id="ps1Trim_4"> |
| -In comp.lang.javascript there is rarely much point in quoting |
| -javascript code that is not being directly commented upon or |
| -corrected. The indenting character (and possible line wrapping) |
| -renders any quoted code syntactically invalid so anyone wanting |
| -to use the code will have to go back to the message in which it |
| -originally appeared anyway. That would certainly apply to a post |
| -wishing to thank someone who had provided a complete scripted |
| -demonstration for their efforts. |
| -</p> |
| - |
| -<p id="ps1Trim_5"> |
| -No matter what gets trimmed the material that stays should not be |
| -altered in terms of spelling, words used and their order, etc. A |
| -quote should be a quote not an interpretation. |
| -</p> |
| - |
| -<h2 id="ps1Marg">Margins and Line Wrapping</h2> |
| -<h3 id="ps1Mar">Margins</h3> |
| - |
| -<p id="ps1Mar_1"> |
| -A line in a plane text Usenet post could be quite long, and some |
| -newsreaders would automatically wrap that line to the window in |
| -which it was being displayed. Others would provide horizontal scroll |
| -bars (usually undesirable) and yet others may not be able to access |
| -characters beyond the 80<sup>th</sup> (unlikely these days). There |
| -are no rules for handling excessively long lines but Usenet is old |
| -and has lived through the time when 80 character wide displays were |
| -commonplace. Along the way it became the convention that Usenet posts |
| -should have lines no longer than between 70 and 80 characters. And |
| -that avoids the need for any specified requirement in the handling of |
| -long lines by newsreader software. Lines in that range are unlikely to |
| -need to be wrapped for display and will not normally generate |
| -horizontal scroll bars. It is also the case that humans generally |
| -(and sometimes strongly) prefer to read text that is no more than about |
| -80 character per line. |
| -</p> |
| - |
| -<p id="ps1Mar_2"> |
| -It is widely recommended that newsreader software should be configured |
| -to automatically wrap at about 72 characters when posting, which works |
| -well for posted text but can be problematic for posting long URLs and |
| -particularly in our context, posted source code. Others suggest that |
| -software should not be allowed to wrap posted code at all and that the |
| -poster should always do it manually. In either case it is the |
| -individual composing the post that is responsible for, and should be in |
| -control of, the wrapping of the content to ensure that it is suitable |
| -for posting to the group. |
| -</p> |
| - |
| -<h3 id="ps1Lw">Line Wrapping</h3> |
| - |
| -<p id="ps1Lw_1"> |
| -Most URLs are less than 72 character long anyway but some, such as |
| -references to Usenet articles in the archives at groups.google.com, |
| -are longer. Some newsreader software is smart enough to recognise a |
| -URL and not apply its default margin settings to them but in any event |
| -delimiting them with "<URL:" at the beginning and |
| -">" at the end (preferably with the URL separated from |
| -the delimiters with spaces) should be sufficient to indicate to a |
| -reader that a line wrapped URL will need some remedial action. |
| -</p> |
| - |
| -<p id="ps1Lw_2"> |
| -Restricting margins to 72 characters usually does not need to affect |
| -the functionality of posted code either. Allowing a newsreader to |
| -line wrap posted code as it sees fit will usually render that code |
| -faulty (and difficult to read) and that will make it difficult for |
| -a reader to differentiate between problems within the original code |
| -and problems arising form line wrapping. |
| -</p> |
| - |
| -<h3 id="ps1Lw_3">Code Reformatting</h3> |
| -<p> |
| -Javascript (ECMAScript) is extremely tolerant of white space (including |
| -line breaks) within its source code. There are in fact only a couple of |
| -places where white space characters are not allowed. For example, a |
| -line break may not be placed between the <code>return</code> keyword |
| -and any expression that is to be returned. As a result it is almost |
| -always possible to spread a line of javascript that would exceed the |
| -newsreaders wrapping margin across two or more lines without affecting |
| -its functionality or syntactic correctness. |
| -</p> |
| - |
| -<p id="ps1Lw_4"> |
| -One of the main reasons that Javascript is so tolerant of white space |
| -is to allow the structure of the source code (how the code is laid out |
| -in a text editor/post) to convey additional meaning (usually related to |
| -structure of the code/function/program) and maximise clarity for human |
| -readers. The breaking of long lines of source code across several lines |
| -should be done in a way that does not detract from the clarity of the |
| -code. |
| -</p> |
| - |
| -<h4 id="ps1Lw_5">Blocks</h4> |
| -<p> |
| -The main source code structuring consideration that adds clarity is |
| -block indenting. A block is defined with curly brackets <code>{</code> |
| -and <code>}</code> and represents a block statement (which may contain |
| -zero or more other statements). It is normal to indent the statements |
| -within a block by one tab character, though that tab is usually set to |
| -4 or fewer spaces (two spaces is frequently recommended) width as the |
| -normal default 8 spaces width is a bit |
| -too deep for most practical uses. However, <em>tab character should not be |
| -used for indention in Usenet posts at all</em> as newsreader default tab |
| -settings may often be 8 characters but may also be zero characters, |
| -defeating the purpose indentation in posted code entirely. Good text |
| -editors will usually offer a facility to convert tabs to any number of |
| -spaces, which can be used to prepare code for posting. Indenting in |
| -code posted to Usenet should be done with space characters. 4 or fewer |
| -(two is often recommended) per level of indentation. |
| -</p> |
| - |
| -<p id="ps1Lw_6"> |
| -There are various common styles of block indenting, of which I prefer |
| -to leave the opening <code>{</code> at the end of the control statement |
| -(on the same line) and list the block contents as one statement per |
| -line, indented by 4 <em>or fewer</em> spaces, with the closing |
| -<code>}</code> on a new line indented so that it lines up vertically |
| -with the start of the control statement, e.g.:- |
| -</p> |
| - |
| -<pre id="ps1Lw_ex1"> |
| -function doSomething(oArea){ |
| - var nArea = oArea.nWidth * oArea.nHeight; |
| - var result = true; |
| - if(!nArea){ |
| - removeRegion(oArea); |
| - result = false; |
| - }else if(oArea.nWidth < oArea.nHeight){ |
| - result = oArea.reShape(nArea); |
| - } |
| - return result; |
| -} |
| - |
| -<span class="commentJS">/* The same function may also be commonly formatted:- */</span> |
| - |
| -function doSomething(oArea) |
| -{ |
| - var nArea = oArea.nWidth * oArea.nHeight; |
| - var result = true; |
| - if(!nArea) |
| - { |
| - removeRegion(oArea); |
| - result = false; |
| - } |
| - else if(oArea.nWidth < oArea.nHeight) |
| - { |
| - result = oArea.reShape(nArea); |
| - } |
| - return result; |
| -} |
| - |
| -<span class="commentJS">/* -or:- */</span> |
| - |
| -function doSomething(oArea) |
| - { |
| - var nArea = oArea.nWidth * oArea.nHeight; |
| - var result = true; |
| - if(!nArea) |
| - { |
| - removeRegion(oArea); |
| - result = false; |
| - } |
| - else if(oArea.nWidth < oArea.nHeight) |
| - { |
| - result = oArea.reShape(nArea); |
| - } |
| - return result; |
| - } |
| -</pre> |
| - |
| -<p id="ps1Lw_7"> |
| -It is not that important which style of block indenting is used, |
| -everyone has their own preferred style, but it is important that |
| -<em>a</em> style of block indenting is used in code posted to the |
| -group. In all cases the indenting serves to make the structure of |
| -the function apparent in the structure of the source code. It is |
| -an aid to human readers of the code and saves a great deal of time |
| -for anyone attempting to offer help and so needing to understand |
| -the code. |
| -</p> |
| - |
| -<p id="ps1Lw_8"> |
| -Sometimes the line wrapping problem can be avoided by reducing the |
| -number of space characters by which the blocks are indented. However, |
| -if a statement must be broken across several lines |
| -it could be indented to a different level than it's own start, and it |
| -could also be indented at a different level to its block contents (if |
| -any). If block indenting is at, say, 4 space intervals then indenting a |
| -broken line at 1 to 3 characters should serve to make it clear that |
| -it is indenting separate from the general block structure of the |
| -code, e.g.:- |
| -</p> |
| - |
| -<pre id="ps1Lw_ex2"> |
| -function getRootElement_OrDefault(deflt){ |
| - if((typeof document.compatMode == "string")&& |
| - (document.compatMode.indexOf("CSS") != -1)&& |
| - (document.documentElement)){ <span class="commentJS">//<< broken statement</span> |
| - return document.documentElement; |
| - }else if(document.body){ |
| - return document.body; |
| - }else{ |
| - return deflt; |
| - } |
| -} |
| - |
| -</pre> |
| - |
| -<p id="ps1Lw_9"> |
| -Another alternative for formatting statements broken across lines |
| -might be to disregard the indenting on the left and line the code |
| -that belongs to the broken statement up on the right hand side. |
| -e.g.:- |
| -</p> |
| - |
| -<pre id="ps1Lw_ex3"> |
| -this.position = function(){ |
| - var twiceSize; |
| - if(--delay <= 0){ |
| - step(); |
| - if(((z+=fv) >= planeDepth)|| |
| - ((dy+dm) > windowCenterY)|| |
| - ((dx+dm) > windowCenterX)|| |
| - (v < 0)){ <span class="commentJS">//right aligned broken statement</span> |
| - this.reset(); |
| - step(); |
| - } |
| - div.top = (sy+(py*dy)-dm)+cssUnitsOrZero; |
| - div.left = (sx+(px*dx)-dm)+cssUnitsOrZero; |
| - divClip.height = (twiceSize = (dm << 1)+cssUnitsOrZero); |
| - divClip.width = twiceSize; |
| - } |
| - next.position(); |
| -}; |
| -</pre> |
| - |
| -<p id="ps1Lw_10"> |
| -Thus the ability to insert line breaks liberally throughout javascript |
| -source code allows almost all code to be formatted in a fully |
| -functional, well structured and clear way within the restricted |
| -margins appropriate in posts to comp.lang.javascript. Efforts put into |
| -preparing posted code to be clear and comprehensible to its Usenet |
| -audience will be rewarded. But it is important to start any formatting |
| -required with the actual code in use, rather than attempting to |
| -re-type it, in order not to introduce errors that are not present in |
| -the original and so have nothing to do with the original problem. |
| -Having prepared the formatting of the code to suite Usenet it is |
| -important to re-test it to ensure that it is still as functional, that |
| -no errors have been introduced and that it still exhibits whatever |
| -behaviour it was that motivated the post in the first place. |
| -</p> |
| - |
| -<h3 id="ps1LwQu">Line Wrapping in Quoted Material</h3> |
| - |
| -<p id="ps1LwQu_1"> |
| -If a news post has been wrapped at, say, 72 characters and it is |
| -responded to then the indenting character used to mark quoted material |
| -will add to the length of that line. Maybe pushing it over the length |
| -at which the reply will be wrapped. The result, if posted without |
| -adjustment, may look something like this:- |
| -</p> |
| - |
| -<pre id="ps1LwQu_ex1"> |
| -An example OP wrote: |
| -> A long line of text quoted from the previous post, that was wrapped |
| -at |
| -> 72 characters in that post but has been extended to 74 characters |
| -long |
| -> lines because of the addition of the indenting characters that mark |
| -it |
| -> as a quotation, but has been re-wrapped to 72 characters in the |
| -posted |
| -> follow-up that is quoting it. |
| - |
| -The comment posted in response to the material quoted above. Originally |
| -wrapped in the response at 72 characters. |
| -</pre> |
| - |
| -<p id="ps1LwQu_2"> |
| -The effect is that the words "at", "long", |
| -"it" and "posted" are no |
| -longer marked as part of the quotation but instead appear to be badly |
| -formatted and meaningless comments on that quoted material. Which has |
| -itself gained the appearance of being incompetently trimmed. The effect |
| -escalates with additional responses, loosing more meaning and becoming |
| -less and less clear as to whom any particular part of the text is |
| -attributable. |
| -</p> |
| - |
| -<pre id="ps1LwQu_ex2"> |
| -The First Responder wrote: |
| -> An example OP wrote: |
| ->> The First Responder wrote: |
| ->>> An example OP wrote: |
| ->>>> A long line of text quoted from the previous post, that was |
| -wrapped |
| ->>> at |
| ->>>> 72 characters in that post but has been extended to 74 characters |
| ->>> long |
| ->>>> lines because of the addition of the indenting characters that |
| -mark |
| ->>> it |
| ->>>> as a quotation, but has been re-wrapped to 72 characters in the |
| ->>> posted |
| ->>>> follow-up that is quoting it. |
| ->>> |
| ->>> The comment posted in response to the material quoted above. |
| ->> Originally |
| ->>> wrapped in the response at 72 characters. |
| -> |
| ->> This response is the OP's reply to the comments on the original |
| ->> post. It quoted the previous posts in full and was wrapped at 72 |
| ->> characters. |
| -> |
| ->And the original responder added this. |
| - |
| -The conversation ended with the OP thanking the responder for their |
| -comments. (but who said what?) |
| -</pre> |
| - |
| -<p id="ps1LwQu_3"> |
| -The solution is to be aware that this may happen and re-wrap that |
| -quoted material so that it is not effected by the automatic line |
| -wrapping when a post is sent, or to increase the wrapping margins by |
| -the number of characters inserted to mark a quotation (so long as the |
| -result does not exceed 80 characters). Some newsreader software can |
| -handle this automatically, and add on software exists for other |
| -products (such as OE), but ultimately the responsibility for properly |
| -marking and attributing quoted material belongs with the individual |
| -making the post. |
| -</p> |
| - |
| -<p id="ps1LwQu_4"> |
| -If the two had taken the effect of the progressive lengthening of lines |
| -in quoted material into account the result would have looked like |
| -this:- |
| -</p> |
| - |
| -<pre id="ps1LwQu_ex3"> |
| -The First Responder wrote: |
| -> An example OP wrote: |
| ->> The First Responder wrote: |
| ->>> An example OP wrote: |
| ->>>> A long line of text quoted from the previous post, that was |
| ->>>> wrapped at 72 characters in that post but has been extended to 74 |
| ->>>> characters long lines because of the addition of the indenting |
| ->>>> characters that mark it as a quotation, but has been re-wrapped to |
| ->>>> 72 characters in the posted follow-up that is quoting it. |
| ->>> |
| ->>> The comment posted in response to the material quoted above. |
| ->>> Originally wrapped in the response at 72 characters. |
| -> |
| ->> This response is the OP's reply to the comments on the original |
| ->> post. It quoted the previous posts in full and was wrapped at 72 |
| ->> characters. |
| -> |
| ->And the original responder added this. |
| - |
| -The conversation ended with the OP thanking the responder for their |
| -comments. |
| -</pre> |
| - |
| -<p id="ps1LwQu_5"> |
| -It would have been clear form the number of quote indicating characters |
| -who exactly had said what and the quoted material would have been |
| -easier to read and understand. Though in practice there probably should |
| -have been much more trimming along the way as the whole conversation |
| -would probably not have been needed to show the context of each |
| -response. |
| -</p> |
| - |
| - |
| -<h2 id="ps1Code">General Code Postings, and when to use a URL</h2> |
| - |
| -<p id="ps1Code_1"> |
| -Often a question cannot usefully be answered without being accompanied |
| -with javascript source code. Even a very detailed explanation of a |
| -process will not tend to narrow the possibilities down to just one |
| -method, and deciding whether a reported effect is due to a |
| -characteristic of an execution environment or code that is taking the |
| -wrong approach cannot be done without seeing the source code. |
| -</p> |
| - |
| -<p id="ps1Code_2"> |
| -In some cases small snippets of code, say an individual function's |
| -definition, might be sufficient. Though it is usually necessary to know |
| -how such a function is being called and what arguments it is using. But |
| -ideally questions should be accompanied by an easily testable example |
| -that demonstrates the characteristics that provoked the question. |
| -</p> |
| - |
| -<p id="ps1Code_3"> |
| -Easily testable because there is no better aid to debugging than being |
| -able to reproduce a problem. Time spent turning a snippet of code into |
| -testable web page (or whatever) is not rewarded if the results do not |
| -exhibit the problem described. And asking many people to repeat that |
| -process when it could have been done by the questioner once, in a way |
| -that guaranteed a demonstration of the problem, is not a good use of |
| -the group or the time of its participants. |
| -</p> |
| - |
| -<p id="ps1Code_4"> |
| -However, posting the entire source code of a web page that happens to |
| -include the problematic script is rarely the answer. For one thing web |
| -pages often import <span class="initialism" title="Cascading Style Sheet"><abbr title="Cascading Style Sheet">CSS</abbr></span>, other script files and graphics (the latter |
| -simply could not be posted to the group). But web pages also often |
| -consist of large amounts of <span class="initialism" title="HyperText Mark-up Language"><abbr title="HyperText Mark-up Language">HTML</abbr></span>, which would require careful |
| -re-wrapping to fit within the posting margins and be left correct, and |
| -much of the <span class="initialism" title="HyperText Mark-up Language"><abbr title="HyperText Mark-up Language">HTML</abbr></span> would be irrelevant to the post. |
| -</p> |
| - |
| -<p id="ps1Code_5"> |
| -There is also the question of bandwidth in transmission and capacity in |
| -storage. Every post is stored, at least for a time, on every news server |
| -carrying the group world wide and usually also on the hard disk of |
| -everyone who reads the group. And to get from server to server, and |
| -eventually to the many readers, it must be transmitted, consuming |
| -bandwidth related to the size of the post. The more irrelevant |
| -information that any post contains the more those resources are wasted |
| -(this is also a reason for appropriate trimming of quoted material). |
| -</p> |
| - |
| -<p id="ps1Code_6"> |
| -The comp.lang.javascript FAQ makes the injunction that posting code of |
| -more than 500 lines is unacceptable. That is the theoretical upper |
| -limit that should never be exceeded, but a post of even half that |
| -length would have to be exceptional. |
| -</p> |
| - |
| -<p id="ps1Code_7"> |
| -The easiest way of demonstrating a problem in context without posting |
| -excessive amounts of code and <span class="initialism" title="HyperText Mark-up Language"><abbr title="HyperText Mark-up Language">HTML</abbr></span> is to make a page that exhibits the |
| -problem available online and post the URL of that page along with the |
| -question. Possibly accompanied by a snippet of the code highlighting |
| -the suspected cause. |
| -</p> |
| - |
| -<p id="ps1Code_8"> |
| -The circumstances under which making a page that demonstrates the |
| -problem available online is advisable are, whenever that page is |
| -interacting within a frameset, or whenever images play a significant |
| -part in a problem. As those circumstances are time consuming to |
| -reproduce from posted code and cannot always be recreated for testing. |
| -But any request to have people examine excessive amounts of code |
| -and/or <span class="initialism" title="HyperText Mark-up Language"><abbr title="HyperText Mark-up Language">HTML</abbr></span> should also be made available on line instead of in a post. |
| -</p> |
| - |
| -<p id="ps1Code_9"> |
| -Unfortunately not all participants in the group are viewing Usenet in a |
| -way that makes easily following a URL to an example page viable. Often |
| -downloading new Usenet posts as a batch and then viewing them off line. |
| -Re-connecting to view an example page is not always desirable (due to |
| -local conditions, slow modem connections and potential associated |
| -expense) and can be unrewarding if the page viewed is a mush of <abbr title="What You See Is What You Get">WYSIWYG</abbr> |
| -generated bloated <span class="initialism" title="HyperText Mark-up Language"><abbr title="HyperText Mark-up Language">HTML</abbr></span>-like noise. Where it takes a considerable time |
| -to even locate the cause of what may still turn out to be a trivial |
| -problem. |
| -</p> |
| - |
| -<p id="ps1Code_10"> |
| -Then again there are people using the group who much prefer examples to |
| -be available online. Either way what is not wanted is for questions to |
| -be asked without making the corresponding code available in some way, |
| -or the posting of excessive amounts of code. |
| -</p> |
| - |
| -<p id="ps1Code_11"> |
| -A good compromise, and a valuable debugging technique, is the creation |
| -of a demonstration test-case page. A page containing no more than |
| -sufficient <span class="initialism" title="HyperText Mark-up Language"><abbr title="HyperText Mark-up Language">HTML</abbr></span> and javascript to allow others to reproduce the problem |
| -and see the relevant code without anything extraneous. Such a test-case |
| -page would almost always be short enough to post with the question |
| -(properly formatted) and could additionally be made available online for |
| -the convenience of those that would prefer to use a URL to load it |
| -directly into a browser for testing. |
| -</p> |
| - |
| -<p id="ps1Code_12"> |
| -Creating such a test-case page can be valuable in itself as attempting |
| -to reduce a problem from a larger context to an isolated demonstration |
| -will often reveal the cause of that problem along the way. The act of |
| -cutting out what initially seems irrelevant often reveals that the |
| -problem in fact results form an unexpected interaction with something |
| -that was assumed to be unconnected. And if the problem can be |
| -demonstrated in isolation then it is relatively easy for readers of the |
| -question to reproduce the problem and identify its cause, resulting in |
| -less discussion of superfluous issues and usually a quicker resolution |
| -of the question. |
| -</p> |
| - |
| -<p id="ps1Code_13"> |
| -It is very important to test test-case pages prior to posting them to |
| -ensure that they do indeed exhibit the characteristic that motivated |
| -the question. At least if you want to be taken seriously in future. And |
| -when such a test-case is posted to the group it should be formatted and |
| -indented to facilitate the essayist reading of the code and testing by |
| -no more than copying the page into a text editor and saving it locally |
| -as a <span class="initialism" title="HyperText Mark-up Language"><abbr title="HyperText Mark-up Language">HTML</abbr></span> file. |
| -</p> |
| - |
| - |
| -<h2 id="ps1Quest">Well Asked Questions Get the Best Answers</h2> |
| - |
| -<p id="ps1Quest_1"> |
| -Beyond any considerations of posting style and formatting, the quality |
| -of questions asked has a considerable impact upon the number and |
| -quality of answers given, and the time taken to elicit a useful |
| -response. Vague questions are likely to be answered with requests for |
| -clarification. Terse general questions are likely to elicit yes or no |
| -answers (often both). And questions that have been asked, and well |
| -answered, before (especially frequently or in the recent past) are as |
| -likely as not to be ignored. |
| -</p> |
| - |
| -<p id="ps1Quest_2"> |
| -When asking a question it would almost always be a good idea to put |
| -yourself in the position of the reader of the question, read it back to |
| -yourself and ask yourself; Does this question actually ask what I |
| -want to know, and is it sufficiently clear and detailed to elicit that |
| -answer? |
| -</p> |
| - |
| -<p id="ps1Quest_3"> |
| -The following is a short list of recurring features of badly asked |
| -questions:- |
| -</p> |
| - |
| - |
| -<h3 id="ps1QSub">Appropriate Use of the Subject Header</h3> |
| - |
| -<p id="ps1QSub_1"> |
| -Another Usenet convention holds that the Subject header should not be |
| -expected to be available to a reader of any message. While it is |
| -unlikely that there are any newsreaders currently in use in which the |
| -user is not presented with the Subject header, it remains |
| -inappropriate to ask a question in the subject header (or to assume |
| -that its contents will provide supplementary information about a |
| -question) and doing so is as likely to invoke a lesson in Usenet |
| -etiquette as an answer to the question. But a question is not really |
| -a subject anyway. The subject should describe what the question is |
| -in relation to, and is useful for archive searching and |
| -categorisation rather than as a means of communication. |
| -</p> |
| - |
| -<p id="ps1QSub_2"> |
| -Any question asked should always appear in the body of the post, and in |
| -a form that does not assume the availability of the Subject header to |
| -the reader. |
| -</p> |
| - |
| -<p id="ps1QSub_3"> |
| -The Subject header should also not be wasted. Placing "please |
| -help" and the like in the subject header is unwelcome and |
| -counterproductive. Take the opportunity to construct a Subject |
| -header that states the type of the problem, what it relates to. |
| -Subject headers that state the real subject will attract the |
| -attention of people with a special interest in that subject, |
| -exactly those people best able to offer help. |
| -</p> |
| - |
| -<h3 id="ps1QRes">Doing Your Own Research</h3> |
| - |
| -<p id="ps1QRes_1"> |
| -Many questions, at least the questions literally asked, could quickly |
| -be answered with a little research, and the chances are that regulars |
| -on the group know how easily those answers could have been found with |
| -a little effort. The group is not intended to be a vending machine for |
| -trivial information about javascript, that wouldn't be an interesting |
| -group to participate in. |
| -</p> |
| - |
| -<p id="ps1QRes_2"> |
| -On the other hand, evidence that some effort has been put into |
| -researching a problem before asking a question tends to be looked upon |
| -kindly (though claiming to have exhausted all lines of research when that |
| -is obviously not the case would have the opposite effect). |
| -</p> |
| - |
| -<p id="ps1QRes_3"> |
| -The obvious first place to look for answers is in |
| -<a href="../clj_faq.html">the group's FAQ</a>. That will |
| -mean reading all of the FAQ because the answers to some problems (or |
| -sufficient clues to those answers) will be found within the answers to |
| -seemingly unrelated questions, or the resources linked to from the FAQ. |
| -That in itself is a fairly big task, but if not undertaken will just |
| -result in questions being answered with references back to the FAQ. |
| -There is also a Usenet convention that whenever a newsgroup |
| -(particularly technical groups) provides a FAQ resource, that FQA should |
| -be read by anyone wishing to post to the group <em>prior</em> to making |
| -their first post. So reading the FAQ is <em>not optional</em> anyway. |
| -</p> |
| - |
| -<p id="ps1QRes_4"> |
| -The Internet provides a massive resource for researching virtually any |
| -question, and particularly questions relating to computing. Search |
| -engines are the primary research tool and among those Google search is |
| -extremely useful. But when a question relates to javascript in a way |
| -that indicates that it may be suitable to be asked on |
| -comp.lang.javascript the best place to research the question is |
| -<a href="http://groups.google.com/groups?q=comp.lang.javascript"> |
| -groups.google.com</a>, as that resource holds a searchable archive of |
| -almost all postings ever made to the group. There is an |
| -<a href="http://groups.google.com/advanced_group_search?group=comp.lang.javascript"> |
| -"Advanced Search" page</a>, where entering |
| -"comp.lang.javascript" in the Newsgroup field and suitable keywords |
| -in the other fields provided will return all messages posted to the group |
| -that match the search criteria. As most questions will have been asked |
| -before many answers can be obtained from the groups.google.com archives. |
| -But be aware of the date of posts found as the archive goes back to |
| -1996 and some things have changed over the intervening years. |
| -</p> |
| - |
| -<p id="ps1QRes_5"> |
| -Reading back over recent posts to the group, for a minimum of a week |
| -and preferably more than a month will avoid the need to re-ask a |
| -question that has been asked and answered in recent memory. Not all |
| -news servers will hold all messages over that period so |
| -<a href="http://groups.google.com/groups?q=comp.lang.javascript"> |
| -the group archives at groups.google.com</a> can be useful in this |
| -respect also. |
| -</p> |
| - |
| -<h3 id="ps1DontWork">"It doesn't work"</h3> |
| - |
| -<p id="ps1DontWork_1"> |
| -People don't tend to question code that |
| -does exactly what they want it to do. Sometimes they may ask how it |
| -does exactly what they want but generally it is superfluous to state |
| -that code that does not address a situation doesn't work. |
| -</p> |
| - |
| -<p id="ps1DontWork_2"> |
| -To start with computer code always does exactly what is asked of it, |
| -that is the nature of computers. So it does "work", it is |
| -just that it doesn't do what is wanted of it. And that is a problem |
| -because code that does not do something that is wanted of it cannot |
| -itself explain what that something was. |
| -</p> |
| - |
| -<p id="ps1DontWork_3"> |
| -It is the task of a human designer to decide what is wanted form code, |
| -to specify the task. The reader of a question can do no more than |
| -guess as to the task unless the questioner explains the specification |
| -for the code, and that specification needs to be specific. That |
| -information is needed when assessing what would qualify as |
| -"works" in the context of the question. |
| -</p> |
| - |
| -<p id="ps1DontWork_4"> |
| -But in addition to knowing what would qualify as working it is also |
| -necessary to know in what way code is failing to work. There is a big |
| -difference between code that appears to do nothing when executed, code |
| -that does something undesirable in addition to what is expected of it |
| -and code that does something else entirely. |
| -</p> |
| - |
| -<p id="ps1DontWork_5"> |
| -Instead of stating the self-evident "It doesn't work", the |
| -posters of questions should attempt to provide answers to:- |
| -</p> |
| - |
| -<dl id="ps1DontWork_df"> |
| - <dt id="ps1DontWork_p1">1. What you have done?</dt> |
| - |
| - <dd id="ps1DontWork_d1">Providing access the code (possibly in the form of a test |
| - case), explaining the steps required to initiate the |
| - undesirable effect and the environments (usually web |
| - browsers) where the problem has been observed, so that it |
| - can be reproduced and tested. |
| - <dd> |
| - |
| - <dt id="ps1DontWork_p2">2. What you expected to happen?</dt> |
| - |
| - <dd id="ps1DontWork_d2">Both specifically in the case of the code under discussion and |
| - generally with regard to the design specification. |
| - <dd> |
| - |
| - <dt id="ps1DontWork_p3">3. What really happened?</dt> |
| - |
| - <dd id="ps1DontWork_d3">What was observed to happen and any error messaged generated. |
| - So that when (and if) the problem is reproduced in testing it |
| - is possible to identify it as the effect under discussion. |
| - <dd> |
| -</dl> |
| - |
| -<h3 id="ps1CntX">Explain the Whole Context</h3> |
| - |
| -<p id="ps1CntX_1"> |
| -The context in which a question is asked or a problem exists is very |
| -important to the type of answers given or solutions proposed. Beyond |
| -the obvious required details such as the execution host(s), scripts |
| -used and how they are used, There are details like whether a project |
| -is for the Internet or an Intranet. Because on comp.lang.javascript |
| -the default assumption is that the context will be browser scripting |
| -for the Internet, many approaches/solutions are ruled out, but some may |
| -be completely reasonable and practical in the more restricted context |
| -of a company Intranet (or on more controlled hosts such as the windows |
| -scripting host or server-side javascript). |
| -</p> |
| - |
| -<p id="ps1CntX_2"> |
| -There have been many occasions where many answers to questions have |
| -stressed the unsuitability of particular approaches to use on the |
| -Internet only for the original questioner to respond by explaining |
| -that they don't apply because their context is an Intranet. That |
| -wastes the time of everyone who composed a response to the original |
| -question; if they had been in possession of the real context from the |
| -outset they could have got on with proposing/discussing solutions that |
| -were appropriate, or moved on to something more interesting. |
| -</p> |
| - |
| -<p id="ps1CntX_3"> |
| -But the full context of a question goes beyond such details and answers |
| -the question: why? Often a question will be asking about a particular |
| -approach that, to the questioner, is a perceived solution to a problem. |
| -The answer to the question why would explain what that problem is, and |
| -knowing what that problem is will allow respondents to assess the |
| -suitability of the approach at addressing the problem and possibly |
| -suggest other, and superior, solutions. There is very little that is |
| -genuinely new and unique, whatever the wider problem is the chances are |
| -that someone will be familiar with it and be in a position to identify |
| -the best solution (even if that is just confirming that the proposed |
| -solution is the best available). Questions raised on the group should |
| -always include the answer to the question: why? |
| -</p> |
| - |
| -<h3 id="ps1PR">Proof-Read your Questions</h3> |
| - |
| -<p id="ps1PR_1"> |
| -Proof-read your message two or three times before posting. Ensure that |
| -it is as error free as possible and does convey the question and |
| -provide all of the necessary information in a way that will not be |
| -subject to misinterpretation. |
| -</p> |
| - |
| -<!-- <h2><a name="ps1notHD" id="ps1notHD">comp.lang.javascript is Not a Helpdesk</a></h2> |
| - |
| -<p id="ps1notHD_1"> |
| -The comp.lang.javascript newsgroup is a discussion forum on the subject |
| -of ECMAScript (javascript). It is not a helpdesk and its participants |
| -make their contributions voluntarily in their own time and with their |
| -own resources for whatever reasons they see fit. Just because the |
| -majority of the discussion starts with someone posting a question, |
| -often asking for help with some aspect of javascript, does not mean |
| -that anyone should have any expectation of receiving any help or |
| -assistance from any ensuing discussion. So, although help and |
| -assistance is often (if not usually) offered during the following |
| -discussion, that is just a positive side effect of the group and not |
| -its reason for existing. |
| -</p> |
| - |
| -<p id="ps1notHD_2"> |
| -The real benefit of the group goes to its regular participants, who, |
| -in participating in the discussion, attempting to address the diverse |
| -situations and problems raised and exposing their code to critical |
| -public scrutiny, get to hone their code authoring and script design |
| -skills and knowledge with the active assistance and critical feed-back |
| -of their peers. |
| -</p> |
| - |
| -<p id="ps1notHD_3"> |
| -The whole process would not work as well if people did not post |
| -questions relating to a diversity of problem situations to the group |
| -in the hope of getting some assistance, and people would never do that |
| -if there were not a good chance of actually getting assistance. But the |
| -people posting such questions need to remember that they have no right |
| -to assistance, and cannot demand, or even expect it. Instead, wanting |
| -to take advantage of the potentially beneficial side effect of the |
| -existence of the group, they should encourage the group to give them |
| -assistance, by making doing so as easy and convenient as possible. The |
| -preceding document is intended to make it as clear as possible how to |
| -go about achieving that aim. |
| -</p> --> |
| - |
| -<h2 id="ps1AddR">Additional Reading</h2> |
| - |
| -<ul class="resourceList" id="ps1AddR_l"> |
| - <li><a href="http://www.cs.tut.fi/~jkorpela/usenet/dont.html">The seven don'ts of Usenet<br>http://www.cs.tut.fi/~jkorpela/usenet/dont.html</a></li> |
| - <li><a href="http://oakroadsystems.com/genl/unice.htm">Playing Nice on Usenet<br>http://oakroadsystems.com/genl/unice.htm</a></li> |
| - <li><a href="http://www.netmeister.org/news/learn2quote2.html">How do I quote correctly in Usenet? - Quoting and Answering<br>http://www.netmeister.org/news/learn2quote2.html</a></li> |
| - <li><a href="http://www.xs4all.nl/%7ewijnands/nnq/nquote.html">Quoting Style in Newsgroup Postings<br>http://www.xs4all.nl/%7ewijnands/nnq/nquote.html </a></li> |
| - <li><a href="http://www.cs.tut.fi/~jkorpela/usenet/xpost.html">Why and how to crosspost<br>http://www.cs.tut.fi/~jkorpela/usenet/xpost.html</a></li> |
| - <li><a href="http://kb.indiana.edu/data/affn.html?cust=12244">How can I post a message to more than one Usenet newsgroup?<br>http://kb.indiana.edu/data/affn.html?cust=12244</a></li> |
| - <li><a href="http://catb.org/%7Eesr/faqs/smart-questions.html">How To Ask Questions The Smart Way<br>http://catb.org/%7Eesr/faqs/smart-questions.html</a></li> |
| - <li><a href="http://www.chiark.greenend.org.uk/~sgtatham/bugs.html">How to Report Bugs Effectively<br>http://www.chiark.greenend.org.uk/~sgtatham/bugs.html</a></li> |
| -</ul> |
| -</body> |
| -</html> |
| /cljs/notes/posting/index.html |
| Property changes: |
| Deleted: svn:mime-type |
| ## -1 +0,0 ## |
| -text/plain |
| \ No newline at end of property |
| Index: cljs/notes/type-conversion/index.html |
| =================================================================== |
| --- cljs/notes/type-conversion/index.html (revision 45) |
| +++ cljs/notes/type-conversion/index.html (nonexistent) |
| @@ -1,1319 +0,0 @@ |
| -<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" |
| -"http://www.w3.org/TR/html4/strict.dtd"> |
| -<html lang="en"> |
| -<head> |
| - <title>Javascript Type-Conversion</title> |
| - <meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1"> |
| -<link href="../../faq.css" rel="stylesheet" type="text/css"> |
| -<link href="../notes.css" rel="stylesheet" type="text/css"> |
| -<style type="text/css"> |
| -td { |
| - text-align:center; |
| -} |
| -pre.st { |
| - background-color:#EEEEFF; |
| - margin:0px; |
| - padding:0px; |
| - text-align:left; |
| - border:0px none #EEEEFF; |
| -} |
| -caption { |
| - font-weight:bold; |
| -} |
| -th, td { |
| - vertical-align:baseline; |
| - background-color:#EEEEFF; |
| - color:#000000; |
| - white-space:nowrap; |
| - padding:2px |
| -} |
| -.true { |
| - color:#003444; |
| - background-color:#E0FFE0; |
| -} |
| -.false { |
| - color:#003444; |
| - background-color:#FFE0E0; |
| -} |
| -table { |
| - margin:1em 2.5em; |
| -} |
| - </style> |
| - </head> |
| - <body> |
| - |
| -<h1>Javascript Type-Conversion</h1> |
| -<div id="faqNav"> |
| - <a href="/faq/">FAQ</a> > <a href="/faq/notes/">FAQ Notes</a> |
| -</div> |
| - |
| -<ul> |
| - <li><a href="#tcInt">Introduction</a></li> |
| - <li><a href="#tcBool">Converting to Boolean</a></li> |
| - <li><a href="#tcString">Converting to String</a></li> |
| - <li><a href="#tcNumber">Converting to Number</a></li> |
| - <li><a href="#tcParse">Parsing to Number</a> |
| - <ul> |
| - <li><a href="#tcParseFl">parseFloat</a></li> |
| - <li><a href="#tcParseIn">parseInt</a></li> |
| - <li><a href="#tcPrIntRx">parseInt with a radix argument</a></li> |
| - </ul> |
| - </li> |
| - <li><a href="#tcToInt32">ToInt32</a></li> |
| - <li><a href="#tcUserIn">Converting User Input</a> |
| - <ul> |
| - <li><a href="#tcRegEx">Regular expression examples</a></li> |
| - </ul> |
| - </li> |
| -</ul> |
| - |
| -<h2 id="tcInt">Introduction</h2> |
| - |
| -<p id="tcInt_1"> |
| -Javascript (ECMAScript) is a loosely typed language. That does not mean |
| -that it has no data types just that the value of a variable or a Javascript |
| -object property does not need to have a particular type of value assigned |
| -to it, or that it should always hold the same type of value. Javascript |
| -also freely type-converts values into a type suitable for (or required by) |
| -the context of their use. |
| -</p> |
| - |
| -<p id="tcInt_2"> |
| -Javascript being loosely typed and willing to type-convert still does not |
| -save the programmer from needing to think about the actual type of values |
| -that they are dealing with. A very common error in browser scripting, for |
| -example, is to read the value property of a form control into which the |
| -user is expected to type a number and then add that value to another |
| -number. Because the value properties of form controls are strings (even if |
| -the character sequence they contain represents a number) the attempt to |
| -add that string to a value, even if that value happens to be a number, |
| -results in the second value being type-converted into a string and |
| -concatenated to the end of the first string value from the from control. |
| -</p> |
| - |
| -<p id="tcInt_3"> |
| -That problem arises from the dual nature of the <code>+</code> operator |
| -used for both numeric addition and string concatenation. With which the |
| -nature of the operation performed is determined by the context, where |
| -only if both operands are numbers to start with will the <code>+</code> |
| -operator perform addition. Otherwise it converts all of its operands to |
| -strings and does concatenation. |
| -</p> |
| - |
| -<p id="tcInt_4"> |
| -The following discussion is illustrated with Javascript generated tables |
| -of values resulting from the conversion operations. The headers of those |
| -tables display the values as represented in the Javascript source code |
| -used rather than their internal representation. So, for example |
| -<code>123e-2</code> as a number was the character sequence typed into |
| -the source code, the interpreter reads that and generates the |
| -number value 1.23 from it for internal use. The various values used for |
| -the tests have been chosen to illustrate aspects of type |
| -converting, those aspects may not apply to all of the tables presented. |
| -However, all of the test values are included in all of the tables (except |
| -where no type converting occurs) for full comparison. The bodies of the |
| -tables list the results of the various type conversion operations. |
| -</p> |
| - |
| -<p id="tcInt_5"> |
| -If you are accepting/using this page's <span class="initialism" title="Cascading Style Sheet"><abbr title="Cascading Style Sheet">CSS</abbr></span> style suggestions the type |
| -of the values at various stages is illustrated by the colour of the text |
| -used. The following key shows those type/colour relationships, they are |
| -derived from the string values returned by the <code>typeof</code> |
| -operator (which returns <code>"object"</code> |
| -for the <code>null</code> type when in reality <code>null</code> is |
| -distinct from objects). |
| -</p> |
| - |
| -<table id="tcInt_key"> |
| - <tbody> |
| - <tr><th>Key</th></tr> |
| - <tr><td class="st">string</td></tr> |
| - <tr><td class="nm">number</td></tr> |
| - <tr><td class="bl">boolean</td></tr> |
| - <tr><td class="ob">object</td></tr> |
| - <tr><td class="fn" style="text-align:center;">function</td></tr> |
| - <tr><td class="ob">null</td></tr> |
| - <tr><td class="un">undefined</td></tr> |
| - </tbody> |
| -</table> |
| - |
| -<p id="tcInt_6"> |
| -The boolean values of results also have a coloured background to highlight |
| - <code>true</code> or <code>false</code>. |
| -</p> |
| - |
| -<h2 id="tcBool">Converting to Boolean</h2> |
| - |
| -<p id="tcBool_1"> |
| -When evaluating the expression of an <code>if</code> statement the Javascript |
| -interpreter will type-convert the result of that expression to boolean |
| -in order to make its decision. Also various operators internally |
| -type-convert their operands to boolean in order to determine what |
| -action to take. These include the logical operators like AND |
| -(<code>&&</code>), OR (<code>||</code>) and NOT (<code>!</code>). The NOT |
| -operator type-converts its operand to boolean and if that value is |
| -boolean true it returns false and if false it returns true. As the |
| -result of a NOT operation is a boolean value that is the inverse of |
| -the type-converted true-ness of its operand, two NOT operations |
| -together will return a boolean value that is equivalent to the result |
| -of type-converting the operand to boolean:- |
| -</p> |
| - |
| -<pre id="tcBool_ex1"> |
| -var boolValue = !!x; |
| -</pre> |
| - |
| -<p id="tcBool_2"> |
| -That technique has been used to generate the following tables. |
| -</p> |
| - |
| -<p id="tcBool_3"> |
| -An alternative method of generating a boolean value that represents |
| -the type-converted true-ness of a value is to pass that value to |
| -the <code>Boolean</code> constructor called as a function:- |
| -</p> |
| - |
| -<pre id="tcBool_ex2"> |
| -var boolValue = Boolean(x); |
| -</pre> |
| - |
| -<table> |
| - <caption>Double NOT (!!col) : Numeric Values.</caption> |
| - <thead> |
| - <tr> |
| - <th></th> |
| - <th class="nm">-1.6</th> |
| - <th class="nm">-0</th> |
| - <th class="nm">+0</th> |
| - <th class="nm">1</th> |
| - <th class="nm">1.6</th> |
| - <th class="nm">8</th> |
| - <th class="nm">16</th> |
| - <th class="nm">16.8</th> |
| - <th class="nm">123e-2</th> |
| - <th class="nm">-Infinity</th> |
| - <th class="nm">+Infinity</th> |
| - <th class="nm">NaN</th> |
| - </tr> |
| - </thead> |
| - <tbody> |
| - <tr> |
| - <th>!!col</th> |
| - <td class="true">true</td> |
| - <td class="false">false</td> |
| - <td class="false">false</td> |
| - <td class="true">true</td> |
| - <td class="true">true</td> |
| - <td class="true">true</td> |
| - <td class="true">true</td> |
| - <td class="true">true</td> |
| - <td class="true">true</td> |
| - <td class="true">true</td> |
| - <td class="true">true</td> |
| - <td class="false">false</td> |
| - </tr> |
| - </tbody> |
| -</table> |
| - |
| -<p id="tcBool_4"> |
| -When numbers are converted to boolean, zero becomes false and all other |
| -numbers are true. With the excepting of the special numeric value |
| -<code>NaN</code> (Not a Number) which is used when another type is |
| -converted to a number but that conversion does not result in a |
| -meaningful number. <code>NaN</code> is always false. The values of |
| -positive and negative infinity, while not finite numbers, are non-zero |
| -numeric values and always type-convert to boolean <code>true</code>. |
| -</p> |
| - |
| -<table> |
| - <caption>Double NOT (!!col) : String Values.</caption> |
| - <thead> |
| - <tr> |
| - <th></th> |
| - <th class="st">""<br>(empty<br>string)</th> |
| - <th class="st">"-1.6"</th> |
| - <th class="st">"0"</th> |
| - <th class="st">"1"</th> |
| - <th class="st">"1.6"</th> |
| - <th class="st">"8"</th> |
| - <th class="st">"16"</th> |
| - <th class="st">"16.8"</th> |
| - <th class="st">"123e-2"</th> |
| - <th class="st">"010"<br>(Octal)</th> |
| - <th class="st">"0x10"<br>(Hex)</th> |
| - <th class="st">"0xFF"<br>(Hex)</th> |
| - <th class="st">"-010"</th> |
| - <th class="st">"-0x10"</th> |
| - <th class="st">"xx"</th> |
| - </tr> |
| - </thead> |
| - <tbody> |
| - <tr> |
| - <th>!!col</th> |
| - <td class="false">false</td> |
| - <td class="true">true</td> |
| - <td class="true">true</td> |
| - <td class="true">true</td> |
| - <td class="true">true</td> |
| - <td class="true">true</td> |
| - <td class="true">true</td> |
| - <td class="true">true</td> |
| - <td class="true">true</td> |
| - <td class="true">true</td> |
| - <td class="true">true</td> |
| - <td class="true">true</td> |
| - <td class="true">true</td> |
| - <td class="true">true</td> |
| - <td class="true">true</td> |
| - </tr> |
| - </tbody> |
| -</table> |
| - |
| -<p id="tcBool_5"> |
| -Type conversion rules are even simpler for string to boolean conversion |
| -as all non-empty strings always become true and empty strings become |
| -false. |
| -</p> |
| - |
| -<table> |
| - <caption>Double NOT (!!col) : Other Values</caption> |
| - <thead> |
| - <tr> |
| - <th></th> |
| - <th class="un">undefined</th> |
| - <th class="ob">null</th> |
| - <th class="bl">true</th> |
| - <th class="bl">false</th> |
| - <th class="ob">new Object()</th> |
| - <th class="fn">function(){<br> return;<br>}</th> |
| - </tr> |
| - </thead> |
| - <tbody> |
| - <tr> |
| - <th>!!col</th> |
| - <td class="false">false</td> |
| - <td class="false">false</td> |
| - <td class="true">true</td> |
| - <td class="false">false</td> |
| - <td class="true">true</td> |
| - <td class="true">true</td> |
| - </tr> |
| - </tbody> |
| -</table> |
| - |
| -<p id="tcBool_6"> |
| -For the other types, <code>undefined</code> and <code>null</code> are |
| -converted to false, boolean values are not converted and objects and |
| -functions are always true. |
| -</p> |
| - |
| -<p id="tcBool_7"> |
| -This is the most valuable aspect of type-converting to boolean as it |
| -allows a script to distinguish between properties in an environment |
| -that may be undefined or may refer to an object. Treating an undefined |
| -(or null) value as if it was an object will produce errors. So when |
| -there is a doubt (as there usually is where web browsers are concerned) |
| -then code can avoid generating errors by wrapping the code that wants |
| -to access an object in an <code>if</code> test. Supplying the suspect |
| -reference to the object as the expression. The expression will be type |
| -converted to boolean and result in <code>false</code> if the object |
| -does not exist and <code>true</code> if it does. |
| -</p> |
| - |
| -<pre id="tcBool_ex3"> |
| -if(document.documentElement){ |
| - scrollX = document.documentElement.scrollLeft; |
| -} |
| -</pre> |
| - |
| -<p id="tcBool_8"> |
| -The double NOT operation also allows the setting of boolean flags that |
| -can be used to indicate the presence of various objects:- |
| -</p> |
| - |
| -<pre id="tcBool_ex4"> |
| -var hasDocEl = !!document.documentElement; |
| -... |
| -if(hasDocEl){ |
| - scrollX = document.documentElement.scrollLeft; |
| -} |
| -</pre> |
| - |
| -<h2 id="tcString">Converting to String</h2> |
| - |
| -<p id="tcString_1"> |
| -As mentioned above, type conversion to a string most often results |
| -from the action of the + operator whenever one of its operators in |
| -not a number. The easiest way of getting the string that results |
| -from type-conversion is to concatenate a value to an empty string. |
| -That technique has been used to generate the following tables. |
| -</p> |
| - |
| -<p id="tcString_2"> |
| -An alternative method of converting a value into a string is to |
| -pass it as an argument to the <code>String</code> constructor |
| -called as a function:- |
| -</p> |
| - |
| -<pre id="tcString_ex1"> |
| -var stringValue = String(x); |
| -</pre> |
| - |
| -<table> |
| - <caption>type-convert to string ("" + col) : Numeric Values.</caption> |
| - <thead> |
| - <tr> |
| - <th></th> |
| - <th class="nm">-1.6</th> |
| - <th class="nm">-0</th> |
| - <th class="nm">+0</th> |
| - <th class="nm">1</th> |
| - <th class="nm">1.6</th> |
| - <th class="nm">8</th> |
| - <th class="nm">16</th> |
| - <th class="nm">16.8</th> |
| - <th class="nm">123e-2</th> |
| - <th class="nm">-Infinity</th> |
| - <th class="nm">+Infinity</th> |
| - <th class="nm">NaN</th> |
| - </tr> |
| - </thead> |
| - <tbody> |
| - <tr> |
| - <th>"" + col</th> |
| - <td class="st">-1.6</td> |
| - <td class="st">0</td> |
| - <td class="st">0</td> |
| - <td class="st">1</td> |
| - <td class="st">1.6</td> |
| - <td class="st">8</td> |
| - <td class="st">16</td> |
| - <td class="st">16.8</td> |
| - <td class="st">1.23</td> |
| - <td class="st">-Infinity</td> |
| - <td class="st">Infinity</td> |
| - <td class="st">NaN</td> |
| - </tr> |
| - </tbody> |
| -</table> |
| - |
| -<p id="tcString_3"> |
| -Notice that the number generated from the source code <code>123e-2</code> |
| -has resulted in the string <code>"1.23"</code> because that is |
| -the string representation of the internal number created from the source |
| -code. However, Javascript's internal number representations take the form |
| -of IEEE double precision floating point numbers and that means that they |
| -cannot represent all numbers with precision. The results of mathematical |
| -operations may only produce close approximations and when they are |
| -converted to strings the string represents the approximation and may be |
| -unexpected and undesirable. It is often necessary to use custom functions |
| -to generate string representations of numbers in an acceptable format, |
| -the type-conversion mechanism is rarely suited to generating numeric output |
| -intended for presentation. |
| -</p> |
| - |
| -<table> |
| - <caption>type-convert to string ("" + col) : Other Values.</caption> |
| - <thead> |
| - <tr> |
| - <th></th> |
| - <th class="un">undefined</th> |
| - <th class="ob">null</th> |
| - <th class="bl">true</th> |
| - <th class="bl">false</th> |
| - <th class="ob">new Object()</th> |
| - <th class="fn">function(){<br> return;<br>}</th> |
| - </tr> |
| - </thead> |
| - <tbody> |
| - <tr> |
| - <th>"" + col</th> |
| - <td class="st">undefined</td> |
| - <td class="st">null</td> |
| - <td class="st">true</td> |
| - <td class="st">false</td> |
| - <td class="st">[object Object]</td> |
| - <td><pre class="st">function(){ |
| - return; |
| -}</pre></td> |
| - </tr> |
| - </tbody> |
| -</table> |
| - |
| -<p id="tcString_4"> |
| -When objects or functions are type-converted to strings their |
| -<code>toString</code> method is called. These default to |
| -<code>Object.prototype.toString</code> and |
| -<code>Function.prototype.toString</code> but may be overloaded |
| -with a function assigned to a "toString" property of |
| -the object/function. Type-converting a function to a string does |
| -not necessarily result in the function's source code. The behaviour |
| -of <code>Function.prototype.toString</code> is implementation |
| -depended and varies quite a lot, as do the results from |
| -"host objects" and methods (the objects and methods |
| -provided by the environment, such as DOM elements). |
| -</p> |
| - |
| -<h2 id="tcNumber">Converting to Number</h2> |
| - |
| -<p id="tcNumber_1"> |
| -Converting values to numbers, especially strings to numbers, is an |
| -extremely common requirement and many methods can be used. Any |
| -mathematical operator except the concatenation/addition operator |
| -will force type-conversion. So conversion of a string to a number |
| -might entail performing a mathematical operation on the string |
| -representation of the number that would not affect the resulting |
| -number, such as subtracting zero or multiplying by one. |
| -</p> |
| - |
| -<pre id="tcNumber_ex1"> |
| -var numValue = stringValue - 0; |
| -<span class="commentJS">/* or */</span> |
| -var numValue = stringValue * 1; |
| -<span class="commentJS">/* or */</span> |
| -var numValue = stringValue / 1; |
| -</pre> |
| - |
| -<p id="tcNumber_2"> |
| -However, the unary <code>+</code> operator also type-converts its |
| -operand to a number and because it does not do any additional |
| -mathematical operations it is the fastest method for type-converting |
| -a string into a number. |
| -</p> |
| - |
| -<p id="tcNumber_2b"> |
| -Incidentally, the unary <code>-</code> (minus) operator also |
| -type-converts its operand (if necessary) in addition to |
| -subsequently negating its value. |
| -</p> |
| - |
| -<pre id="tcNumber_ex2"> |
| -var numValue = (+stringValue); |
| - |
| -<span class="commentJS">/* The preceding unary + expression has been parenthesised. That is |
| - unnecessary but is often felt to make the code easier to comprehend |
| - and make it clear which operations are being applied. Especially |
| - avoiding confusion with pre and post increment and addition |
| - operations. Compare:- |
| - |
| -var n = anyNumVar++ + +stringVar + ++anotherNumVar; |
| - |
| - - with - |
| - |
| -var n = (anyNumVar++) + (+stringVar) + (++anotherNumVar); |
| - ^^ ^ ^^ |
| - (post increment) + (unary plus) + (pre increment) |
| -*/</span> |
| -</pre> |
| - |
| -<p id="tcNumber_3"> |
| -While unary <code>+</code> is the fastest method for converting a |
| -string to a number a final method is available that uses the |
| -Javascript type-conversion algorithms. The <code>Number</code> |
| -constructor can be called with the string value as its argument |
| -and its return value is a number representing the result of the |
| -type-conversion. |
| -</p> |
| - |
| -<pre id="tcNumber_ex3"> |
| -var numValue = Number(stringValue); |
| -</pre> |
| - |
| -<p id="tcNumber_4"> |
| -The Number constructor is the slowest of the type-converting |
| -methods but when speed is not an overriding consideration its |
| -use does produce the clearest source code. |
| -</p> |
| - |
| -<p id="tcNumber_5"> |
| -The following tables show the results of type-conversion to a number using |
| -the unary <code>+</code> operator. Though all of the preceding |
| -alternative method produce the same results as they all use exactly the |
| -same algorithm to do the conversion. |
| -</p> |
| - |
| -<table> |
| - <caption>type-convert to number (+col) : String Values.</caption> |
| - <thead> |
| - <tr> |
| - <th></th> |
| - <th class="st">""<br>(empty<br>string)</th> |
| - <th class="st">"-1.6"</th> |
| - <th class="st">"0"</th> |
| - <th class="st">"1"</th> |
| - <th class="st">"1.6"</th> |
| - <th class="st">"8"</th> |
| - <th class="st">"16"</th> |
| - <th class="st">"16.8"</th> |
| - <th class="st">"123e-2"</th> |
| - <th class="st">"010"<br>(Octal)</th> |
| - <th class="st">"0x10"<br>(Hex)</th> |
| - <th class="st">"0xFF"<br>(Hex)</th> |
| - <th class="st">"-010"</th> |
| - <th class="st">"-0x10"</th> |
| - <th class="st">"xx"</th> |
| - </tr> |
| - </thead> |
| - <tbody> |
| - <tr> |
| - <th>+col</th> |
| - <td class="nm">0</td> |
| - <td class="nm">-1.6</td> |
| - <td class="nm">0</td> |
| - <td class="nm">1</td> |
| - <td class="nm">1.6</td> |
| - <td class="nm">8</td> |
| - <td class="nm">16</td> |
| - <td class="nm">16.8</td> |
| - <td class="nm">1.23</td> |
| - <td class="nm">10</td> |
| - <td class="nm">16</td> |
| - <td class="nm">255</td> |
| - <td class="nm">-10</td> |
| - <td class="nm">NaN</td> |
| - <td class="nm">NaN</td> |
| - </tr> |
| - </tbody> |
| -</table> |
| - |
| -<p id="tcNumber_6"> |
| -The important considerations when converting strings to numbers with |
| -the type-converting methods is the results from strings that do not |
| -represent numbers. The empty string is converted into the number zero, |
| -depending on the application this can be harmless or disastrous, but |
| -it is important to be aware that it is going to happen. In other |
| -contexts strings that follow the Javascript format for octal number |
| -(leading zero) can be problematic but type conversion treats them |
| -as base 10 anyway. However, strings that follow the format for |
| -hexadecimal numbers (leading <code>0x</code> or <code>0X</code>) |
| -are read as hexadecimal. Strings that cannot be read as a number |
| -type-convert to <code>NaN</code>, which can be tested for with |
| -the <code>isNaN</code> function. Strings representing numbers in an |
| -exponential format (<code>"123e-2"</code>) are understood |
| -along with leading minus signs. |
| -</p> |
| - |
| -<table> |
| - <caption>type-convert to number (+col) : Other Values.</caption> |
| - <thead> |
| - <tr> |
| - <th></th> |
| - <th class="un">undefined</th> |
| - <th class="ob">null</th> |
| - <th class="bl">true</th> |
| - <th class="bl">false</th> |
| - <th class="ob">new Object()</th> |
| - <th class="fn">function(){<br> return;<br>}</th> |
| - </tr> |
| - </thead> |
| - <tbody> |
| - <tr> |
| - <th>+col</th> |
| - <td class="nm">NaN</td> |
| - <td class="nm">0</td> |
| - <td class="nm">1</td> |
| - <td class="nm">0</td> |
| - <td class="nm">NaN</td> |
| - <td class="nm">NaN</td> |
| - </tr> |
| - </tbody> |
| -</table> |
| - |
| -<p id="tcNumber_7"> |
| -Objects and functions always type-convert to <code>NaN</code> numbers, as do |
| -<code>undefined</code> values but it is worth noting that <code>null</code> |
| -type-converts to zero. Probably because it is being type-converted to boolean |
| -first and then to number and, as is clear from the boolean results |
| -above, <code>null</code> would become boolean <code>false</code> which |
| -would then become numeric zero. There is almost no need to type convert |
| -these types of values into numbers. How they convert is only really |
| -relevant to a consideration of the accidental result of converting a |
| -value that is expected to be a string but actually turns out to be one |
| -of these (and/or performing an mathematical operation with one of these as an operand). |
| -</p> |
| - |
| -<h2 id="tcParse">Parsing to Number</h2> |
| - |
| -<p id="tcParse_1"> |
| -An alternative method of converting a string into a number is to use |
| -one of the global functions designed to parse a string and return a |
| -number. The <code>parseFloat</code> function accepts a string argument |
| -and returns a floating point number resulting from parsing that string. |
| -Non-string arguments are first type-converted to a string as described |
| -above. |
| -</p> |
| - |
| -<p id="tcParse_2"> |
| -The string parsing functions read the string character by character until |
| -they encounter a character that cannot be part of the number, at which |
| -point they stop and return a number based on the characters that they |
| -have seen that can be part of the number. This feature of their action |
| -can be usefully exploited, for example, given a string representing a |
| -<span class="initialism" title="Cascading Style Sheet"><abbr title="Cascading Style Sheet">CSS</abbr></span> length value such as <code>"34.5em"</code> |
| -<code>parseFloat</code> would be able to ignore the <code>"em"</code> |
| -because those characters cannot be combined with the preceding set to |
| -produce a valid number. The returned number would be 34.5, the numeric |
| -part of the <span class="initialism" title="Cascading Style Sheet"><abbr title="Cascading Style Sheet">CSS</abbr></span> string stripped of its units. |
| -</p> |
| - |
| -<h3 id="tcParseFl">parseFloat</h3> |
| - |
| -<table> |
| - <caption>parseFloat(col) : String Values.</caption> |
| - <thead> |
| - <tr> |
| - <th></th> |
| - <th class="st">""<br>(empty<br>string)</th> |
| - <th class="st">"-1.6"</th> |
| - <th class="st">"0"</th> |
| - <th class="st">"1"</th> |
| - <th class="st">"1.6"</th> |
| - <th class="st">"8"</th> |
| - <th class="st">"16"</th> |
| - <th class="st">"16.8"</th> |
| - <th class="st">"123e-2"</th> |
| - <th class="st">"010"<br>(Octal)</th> |
| - <th class="st">"0x10"<br>(Hex)</th> |
| - <th class="st">"0xFF"<br>(Hex)</th> |
| - <th class="st">"-010"</th> |
| - <th class="st">"-0x10"</th> |
| - <th class="st">"xx"</th> |
| - </tr> |
| - </thead> |
| - <tbody> |
| - <tr> |
| - <th>parseFloat(col)</th> |
| - <td class="nm">NaN</td> |
| - <td class="nm">-1.6</td> |
| - <td class="nm">0</td> |
| - <td class="nm">1</td> |
| - <td class="nm">1.6</td> |
| - <td class="nm">8</td> |
| - <td class="nm">16</td> |
| - <td class="nm">16.8</td> |
| - <td class="nm">1.23</td> |
| - <td class="nm">10</td> |
| - <td class="nm">0</td> |
| - <td class="nm">0</td> |
| - <td class="nm">-10</td> |
| - <td class="nm">0</td> |
| - <td class="nm">NaN</td> |
| - </tr> |
| - </tbody> |
| -</table> |
| - |
| -<p id="tcParseFl_1"> |
| -With <code>parseFloat</code> empty strings return <code>NaN </code> |
| -along with strings that cannot be subject to numeric interpretation. |
| -The exponential format is understood and the leading zero in the |
| -octal format does not hinder the string's interpretation as a |
| -decimal number. Hexadecimal strings are interpreted as the number |
| -zero because the following <code>"x"</code> cannot be |
| -interpreted as part of a number so parsing stops after the leading zero. |
| -</p> |
| - |
| -<table> |
| - <caption>parseFloat(col) : Other Values.</caption> |
| - <thead> |
| - <tr> |
| - <th></th> |
| - <th class="un">undefined</th> |
| - <th class="ob">null</th> |
| - <th class="bl">true</th> |
| - <th class="bl">false</th> |
| - <th class="ob">new Object()</th> |
| - <th class="fn">function(){<br> return;<br>}</th> |
| - </tr> |
| - </thead> |
| - <tbody> |
| - <tr> |
| - <th>parseFloat(col)</th> |
| - <td class="nm">NaN</td> |
| - <td class="nm">NaN</td> |
| - <td class="nm">NaN</td> |
| - <td class="nm">NaN</td> |
| - <td class="nm">NaN</td> |
| - <td class="nm">NaN</td> |
| - </tr> |
| - </tbody> |
| -</table> |
| - |
| -<p id="tcParseFl_2"> |
| -Non-string values are first converted into a string that is employed |
| -by <code>parseFloat</code>. As that type-conversion to a string would |
| -not normally result in a string that could be interpreted as a number |
| -the result is <code>NaN</code>. Objects and functions may have custom |
| -<code>toString</code> methods that may return strings that could be |
| -interpreted as numbers but that would be an unusual requirement. |
| -</p> |
| - |
| -<h3 id="tcParseIn">parseInt</h3> |
| - |
| -<p id="tcParseIn_1"> |
| -The <code>parseInt</code> function works in a similar way to |
| -<code>parseFloat</code> except that it is trying to interpret its |
| -string argument into an integer and as a result recognises fewer |
| -character as possible candidates to be part of that number. |
| -</p> |
| - |
| -<p id="tcParseIn_2"> |
| -<code>parseInt</code> is occasionally used as a means of turning a |
| -floating point number into an integer. It is very ill suited to that |
| -task because if its argument is of numeric type it will first be |
| -converted into a string and then parsed as a number, very inefficient. |
| -This can produce very wrong results with numbers such as |
| -<code>2e-200</code>, for which the next smaller integer is zero, but |
| -with which <code>parseInt</code> returns <code>2</code>. Also, because |
| -of the number format used by javascript, numbers are often represented |
| -by near approximations. So, for example, 1/2 + 1/3 + 1/6 = |
| -0.9999999999999999, which isn't quite one and parseInt would return |
| -zero if asked to act on the result of the operation. |
| -</p> |
| - |
| -<p id="tcParseIn_3"> |
| -For rounding |
| -numbers to integers one of <code>Math.round</code>, <code>Math.ceil</code> |
| -and <code>Math.floor</code> are preferable, and for a desired result |
| -that can be expressed as a 32 bit signed integer the bitwise operation |
| -described below might also suit. |
| -</p> |
| - |
| -<table> |
| - <caption>parseInt(col) : Numeric Values.</caption> |
| - <thead> |
| - <tr> |
| - <th></th> |
| - <th class="nm">-1.6</th> |
| - <th class="nm">-0</th> |
| - <th class="nm">+0</th> |
| - <th class="nm">1</th> |
| - <th class="nm">1.6</th> |
| - <th class="nm">8</th> |
| - <th class="nm">16</th> |
| - <th class="nm">16.8</th> |
| - <th class="nm">123e-2</th> |
| - <th class="nm">-Infinity</th> |
| - <th class="nm">+Infinity</th> |
| - <th class="nm">NaN</th> |
| - </tr> |
| - </thead> |
| - <tbody> |
| - <tr> |
| - <th>parseInt(col)</th> |
| - <td class="nm">-1</td> |
| - <td class="nm">0</td> |
| - <td class="nm">0</td> |
| - <td class="nm">1</td> |
| - <td class="nm">1</td> |
| - <td class="nm">8</td> |
| - <td class="nm">16</td> |
| - <td class="nm">16</td> |
| - <td class="nm">1</td> |
| - <td class="nm">NaN</td> |
| - <td class="nm">NaN</td> |
| - <td class="nm">NaN</td> |
| - </tr> |
| - </tbody> |
| -</table> |
| - |
| -<p id="tcParseIn_4"> |
| -When it is acting on number the effect of the initial type-conversion |
| -of the argument to a string is evident in the results. Note that the |
| -value <code>123e-2</code> is internally the number <code>1.23</code> |
| -and that type converts into the string <code>"1.23"</code>, |
| -so that entry in the table above might look odd but it is correct. |
| -</p> |
| - |
| -<table> |
| - <caption>parseInt(col) : String Values.</caption> |
| - <thead> |
| - <tr> |
| - <th></th> |
| - <th class="st">""<br>(empty<br>string)</th> |
| - <th class="st">"-1.6"</th> |
| - <th class="st">"0"</th> |
| - <th class="st">"1"</th> |
| - <th class="st">"1.6"</th> |
| - <th class="st">"8"</th> |
| - <th class="st">"16"</th> |
| - <th class="st">"16.8"</th> |
| - <th class="st">"123e-2"</th> |
| - <th class="st">"010"<br>(Octal)</th> |
| - <th class="st">"0x10"<br>(Hex)</th> |
| - <th class="st">"0xFF"<br>(Hex)</th> |
| - <th class="st">"-010"</th> |
| - <th class="st">"-0x10"</th> |
| - <th class="st">"xx"</th> |
| - </tr> |
| - </thead> |
| - <tbody> |
| - <tr> |
| - <th>parseInt(col)</th> |
| - <td class="nm">NaN</td> |
| - <td class="nm">-1</td> |
| - <td class="nm">0</td> |
| - <td class="nm">1</td> |
| - <td class="nm">1</td> |
| - <td class="nm">8</td> |
| - <td class="nm">16</td> |
| - <td class="nm">16</td> |
| - <td class="nm">123</td> |
| - <td class="nm">8</td> |
| - <td class="nm">16</td> |
| - <td class="nm">255</td> |
| - <td class="nm">-8</td> |
| - <td class="nm">-16</td> |
| - <td class="nm">NaN</td> |
| - </tr> |
| - </tbody> |
| -</table> |
| - |
| -<p id="tcParseIn_5"> |
| -Strings in octal and hexadecimal number formats do represent integers |
| -and <code>parseInt</code> is capable of interpreting them in accordance |
| -with the rules for Javascript source code, even when they have leading |
| -minus signs. |
| -</p> |
| - |
| -<table> |
| - <caption>parseInt(col) : Other Values.</caption> |
| - <thead> |
| - <tr> |
| - <th></th> |
| - <th class="un">undefined</th> |
| - <th class="ob">null</th> |
| - <th class="bl">true</th> |
| - <th class="bl">false</th> |
| - <th class="ob">new Object()</th> |
| - <th class="fn">function(){<br> return;<br>}</th> |
| - </tr> |
| - </thead> |
| - <tbody> |
| - <tr> |
| - <th>parseInt(col)</th> |
| - <td class="nm">NaN</td> |
| - <td class="nm">NaN</td> |
| - <td class="nm">NaN</td> |
| - <td class="nm">NaN</td> |
| - <td class="nm">NaN</td> |
| - <td class="nm">NaN</td> |
| - </tr> |
| - </tbody> |
| -</table> |
| - |
| -<p id="tcParseIn_6"> |
| -As <code>parseInt</code> type-converts its non-string arguments to |
| -strings it always produces the same results for <code>boolean</code>, |
| -<code>null</code>, <code>undefined</code>, object and function |
| -arguments as <code>parseFloat</code> (assuming objects and functions |
| -do not have custom <code>toString</code> methods). |
| -</p> |
| - |
| -<h3 id="tcPrIntRx">parseInt with a radix argument</h3> |
| - |
| -<p id="tcPrIntRx_1"> |
| -It is rarely desirable to allow <code>parseInt</code> to deduce the |
| -base in which the number is represented from the string as leading zeros are |
| -rarely intended to indicate data in octal format (particularly with |
| -user input). To deal with this problem <code>parseInt</code> recognises |
| -a second, radix, argument that can be used to specify the base in which the |
| -string is to be interpreted. Specifying a second argument of 10 causes |
| -<code>parseInt</code> to interpret the strings as only base 10. |
| -</p> |
| - |
| -<table> |
| - <caption>parseInt(col, 10) : String Values.</caption> |
| - <thead> |
| - <tr> |
| - <th></th> |
| - <th class="st">""<br>(empty<br>string)</th> |
| - <th class="st">"-1.6"</th> |
| - <th class="st">"0"</th> |
| - <th class="st">"1"</th> |
| - <th class="st">"1.6"</th> |
| - <th class="st">"8"</th> |
| - <th class="st">"16"</th> |
| - <th class="st">"16.8"</th> |
| - <th class="st">"123e-2"</th> |
| - <th class="st">"010"<br>(Octal)</th> |
| - <th class="st">"0x10"<br>(Hex)</th> |
| - <th class="st">"0xFF"<br>(Hex)</th> |
| - <th class="st">"-010"</th> |
| - <th class="st">"-0x10"</th> |
| - <th class="st">"xx"</th> |
| - </tr> |
| - </thead> |
| - <tbody> |
| - <tr> |
| - <th>parseInt(col, 10)</th> |
| - <td class="nm">NaN</td> |
| - <td class="nm">-1</td> |
| - <td class="nm">0</td> |
| - <td class="nm">1</td> |
| - <td class="nm">1</td> |
| - <td class="nm">8</td> |
| - <td class="nm">16</td> |
| - <td class="nm">16</td> |
| - <td class="nm">123</td> |
| - <td class="nm">10</td> |
| - <td class="nm">0</td> |
| - <td class="nm">0</td> |
| - <td class="nm">-10</td> |
| - <td class="nm">0</td> |
| - <td class="nm">NaN</td> |
| - </tr> |
| - </tbody> |
| -</table> |
| - |
| -<p id="tcPrIntRx_2"> |
| -The string in octal format is now interpreted as base 10 and the |
| -hexadecimal strings can now only be zero as parsing has to stop |
| -when the <code>"x"</code> is encountered. |
| -</p> |
| - |
| -<p id="tcPrIntRx_3"> |
| -Number bases 2 to 36 can be used with <code>parseInt</code>. The |
| -following is base 16. |
| -</p> |
| - |
| -<table> |
| - <caption>parseInt(col, 16) : String Values.</caption> |
| - <thead> |
| - <tr> |
| - <th></th> |
| - <th class="st">""<br>(empty<br>string)</th> |
| - <th class="st">"-1.6"</th> |
| - <th class="st">"0"</th> |
| - <th class="st">"1"</th> |
| - <th class="st">"1.6"</th> |
| - <th class="st">"8"</th> |
| - <th class="st">"16"</th> |
| - <th class="st">"16.8"</th> |
| - <th class="st">"123e-2"</th> |
| - <th class="st">"010"<br>(Octal)</th> |
| - <th class="st">"0x10"<br>(Hex)</th> |
| - <th class="st">"0xFF"<br>(Hex)</th> |
| - <th class="st">"-010"</th> |
| - <th class="st">"-0x10"</th> |
| - <th class="st">"xx"</th> |
| - </tr> |
| - </thead> |
| - <tbody> |
| - <tr> |
| - <th>parseInt(col, 16)</th> |
| - <td class="nm">NaN</td> |
| - <td class="nm">-1</td> |
| - <td class="nm">0</td> |
| - <td class="nm">1</td> |
| - <td class="nm">1</td> |
| - <td class="nm">8</td> |
| - <td class="nm">22</td> |
| - <td class="nm">22</td> |
| - <td class="nm">4670</td> |
| - <td class="nm">16</td> |
| - <td class="nm">16</td> |
| - <td class="nm">255</td> |
| - <td class="nm">-16</td> |
| - <td class="nm">-16</td> |
| - <td class="nm">NaN</td> |
| - </tr> |
| - </tbody> |
| -</table> |
| - |
| -<p id="tcPrIntRx_4"> |
| -The hexadecimal <code>0x</code> format is recognised again with the |
| -base 16 interpretation. |
| -</p> |
| - |
| -<p id="tcPrIntRx_5"> |
| -Finally base 3:- |
| -</p> |
| - |
| -<table> |
| - <caption>parseInt(col, 3) : Numeric Values.</caption> |
| - <thead> |
| - <tr> |
| - <th></th> |
| - <th class="nm">-1.6</th> |
| - <th class="nm">-0</th> |
| - <th class="nm">+0</th> |
| - <th class="nm">1</th> |
| - <th class="nm">1.6</th> |
| - <th class="nm">8</th> |
| - <th class="nm">16</th> |
| - <th class="nm">16.8</th> |
| - <th class="nm">123e-2</th> |
| - <th class="nm">-Infinity</th> |
| - <th class="nm">+Infinity</th> |
| - <th class="nm">NaN</th> |
| - </tr> |
| - </thead> |
| - <tbody> |
| - <tr> |
| - <th>parseInt(col, 3)</th> |
| - <td class="nm">-1</td> |
| - <td class="nm">0</td> |
| - <td class="nm">0</td> |
| - <td class="nm">1</td> |
| - <td class="nm">1</td> |
| - <td class="nm">NaN</td> |
| - <td class="nm">1</td> |
| - <td class="nm">1</td> |
| - <td class="nm">1</td> |
| - <td class="nm">NaN</td> |
| - <td class="nm">NaN</td> |
| - <td class="nm">NaN</td> |
| - </tr> |
| - </tbody> |
| -</table> |
| - |
| -<p id="tcPrIntRx_6"> |
| -The consequences of the type-converting of numeric arguments to |
| -strings is evident again. The number <code>8</code> is coming out |
| -as <code>NaN</code> because the <code>"8"</code> character |
| -cannot be interpreted as base 3, leaving an empty sequence of |
| -acceptable characters and producing the same result as an empty string. |
| -</p> |
| - |
| -<table> |
| - <caption>parseInt(col, 3) : String Values.</caption> |
| - <thead> |
| - <tr> |
| - <th></th> |
| - <th class="st">""<br>(empty<br>string)</th> |
| - <th class="st">"-1.6"</th> |
| - <th class="st">"0"</th> |
| - <th class="st">"1"</th> |
| - <th class="st">"1.6"</th> |
| - <th class="st">"8"</th> |
| - <th class="st">"16"</th> |
| - <th class="st">"16.8"</th> |
| - <th class="st">"123e-2"</th> |
| - <th class="st">"010"<br>(Octal)</th> |
| - <th class="st">"0x10"<br>(Hex)</th> |
| - <th class="st">"0xFF"<br>(Hex)</th> |
| - <th class="st">"-010"</th> |
| - <th class="st">"-0x10"</th> |
| - <th class="st">"xx"</th> |
| - </tr> |
| - </thead> |
| - <tbody> |
| - <tr> |
| - <th>parseInt(col, 3)</th> |
| - <td class="nm">NaN</td> |
| - <td class="nm">-1</td> |
| - <td class="nm">0</td> |
| - <td class="nm">1</td> |
| - <td class="nm">1</td> |
| - <td class="nm">NaN</td> |
| - <td class="nm">1</td> |
| - <td class="nm">1</td> |
| - <td class="nm">5</td> |
| - <td class="nm">3</td> |
| - <td class="nm">0</td> |
| - <td class="nm">0</td> |
| - <td class="nm">-3</td> |
| - <td class="nm">0</td> |
| - <td class="nm">NaN</td> |
| - </tr> |
| - </tbody> |
| -</table> |
| - |
| -<h2 id="tcToInt32">ToInt32</h2> |
| - |
| -<p id="tcToInt32_1"> |
| -<code>ToInt32</code> is an <em>internal</em> function only available to the |
| -Javascript implementation and cannot be called directly from scripts |
| -in the way that <code>parseInt</code> can. It is a bit unusual to mention it in |
| -connection with converting Javascript values to numbers but it can |
| -be used in a limited set of circumstances. The bitwise operators such |
| -as bitwise OR (<code>|</code>) and bitwise AND (<code>&</code>) operate on |
| -numbers so they type-convert their operands to numbers. However, they |
| -also only operate on 32 bit signed integers so given the (possibly |
| -type-converted) numeric value they call the <em>internal</em> |
| -<code>ToInt32</code> function with that number as its argument and |
| -use the returned value as their operand. That returned value is always |
| -a 32 bit signed integer. |
| -</p> |
| - |
| -<p id="tcToInt32_2"> |
| -The effect can be like <code>parseInt</code> combined with type-converting |
| -to numbers. While the result is limited in range to 32 bits, it is |
| -<em>always</em> numeric and never <code>NaN</code>, or ± |
| -<code>Infinity</code>. |
| -</p> |
| - |
| -<p id="tcToInt32_3"> |
| -As with using mathematical operators in operations that have no effect on |
| -the value of any resulting number it is possible to perform a bitwise |
| -operation that will not affect the value returned from the call to |
| -<code>ToInt32</code>. The tables below were generated using a bitwise |
| -OR zero operation. |
| -</p> |
| - |
| -<table> |
| - <caption> ToInt32 (col|0) : Numeric Values.</caption> |
| - <thead> |
| - <tr> |
| - <th></th> |
| - <th class="nm">-1.6</th> |
| - <th class="nm">-0</th> |
| - <th class="nm">+0</th> |
| - <th class="nm">1</th> |
| - <th class="nm">1.6</th> |
| - <th class="nm">8</th> |
| - <th class="nm">16</th> |
| - <th class="nm">16.8</th> |
| - <th class="nm">123e-2</th> |
| - <th class="nm">-Infinity</th> |
| - <th class="nm">+Infinity</th> |
| - <th class="nm">NaN</th> |
| - </tr> |
| - </thead> |
| - <tbody> |
| - <tr> |
| - <th>col|0</th> |
| - <td class="nm">-1</td> |
| - <td class="nm">0</td> |
| - <td class="nm">0</td> |
| - <td class="nm">1</td> |
| - <td class="nm">1</td> |
| - <td class="nm">8</td> |
| - <td class="nm">16</td> |
| - <td class="nm">16</td> |
| - <td class="nm">1</td> |
| - <td class="nm">0</td> |
| - <td class="nm">0</td> |
| - <td class="nm">0</td> |
| - </tr> |
| - </tbody> |
| -</table> |
| - |
| -<p id="tcToInt32_4"> |
| -<code>NaN</code> and ±<code>Infinity</code> become zero and |
| -floating point values are <em>truncated</em> to integers. |
| -</p> |
| - |
| -<table> |
| - <caption> ToInt32 (col|0) : String Values.</caption> |
| - <thead> |
| - <tr> |
| - <th></th> |
| - <th class="st">""<br>(empty<br>string)</th> |
| - <th class="st">"-1.6"</th> |
| - <th class="st">"0"</th> |
| - <th class="st">"1"</th> |
| - <th class="st">"1.6"</th> |
| - <th class="st">"8"</th> |
| - <th class="st">"16"</th> |
| - <th class="st">"16.8"</th> |
| - <th class="st">"123e-2"</th> |
| - <th class="st">"010"<br>(Octal)</th> |
| - <th class="st">"0x10"<br>(Hex)</th> |
| - <th class="st">"0xFF"<br>(Hex)</th> |
| - <th class="st">"-010"</th> |
| - <th class="st">"-0x10"</th> |
| - <th class="st">"xx"</th> |
| - </tr> |
| - </thead> |
| - <tbody> |
| - <tr> |
| - <th>col|0</th> |
| - <td class="nm">0</td> |
| - <td class="nm">-1</td> |
| - <td class="nm">0</td> |
| - <td class="nm">1</td> |
| - <td class="nm">1</td> |
| - <td class="nm">8</td> |
| - <td class="nm">16</td> |
| - <td class="nm">16</td> |
| - <td class="nm">1</td> |
| - <td class="nm">10</td> |
| - <td class="nm">16</td> |
| - <td class="nm">255</td> |
| - <td class="nm">-10</td> |
| - <td class="nm">0</td> |
| - <td class="nm">0</td> |
| - </tr> |
| - </tbody> |
| -</table> |
| - |
| -<p id="tcToInt32_5"> |
| -String values that would type-convert to <code>NaN</code> are returned |
| -as zero from <code>ToInt32</code>. |
| -</p> |
| - |
| -<table> |
| - <caption> ToInt32 (col|0) : Other Values.</caption> |
| - <thead> |
| - <tr> |
| - <th></th> |
| - <th class="un">undefined</th> |
| - <th class="ob">null</th> |
| - <th class="bl">true</th> |
| - <th class="bl">false</th> |
| - <th class="ob">new Object()</th> |
| - <th class="fn">function(){<br> return;<br>}</th> |
| - </tr> |
| - </thead> |
| - <tbody> |
| - <tr> |
| - <th>col|0</th> |
| - <td class="nm">0</td> |
| - <td class="nm">0</td> |
| - <td class="nm">1</td> |
| - <td class="nm">0</td> |
| - <td class="nm">0</td> |
| - <td class="nm">0</td> |
| - </tr> |
| - </tbody> |
| -</table> |
| - |
| -<p id="tcToInt32_6"> |
| -Even <code>undefined</code>, objects and functions are converted to zero value |
| -numbers by this operation. Note though that boolean <code>true</code> is |
| -converted to the number 1. |
| -</p> |
| - |
| - |
| -<h2 id="tcUserIn">Converting User Input</h2> |
| - |
| -<p id="tcUserIn_1"> |
| -Most of the mechanisms for getting input from the user, |
| -<code><input type="text"></code> and |
| -<code>prompt</code> for example, provide their results in the form |
| -of strings. If the user is expected to input a number they still |
| -might enter anything (at the least they may just make a typo). If |
| -the string needs to be converted into a number for later operations |
| -one of the methods mentioned above can be chosen based on what best |
| -suits the nature of the input expected but some of the results |
| -generated with erroneous input may be difficult to detect and handle. |
| -</p> |
| - |
| -<p id="tcUserIn_2"> |
| -Prior to converting a string to a number it may be advantageous |
| -to use a Regular Expression to test the contents of the string |
| -to ensure that they conform to an acceptable format. That would |
| -serve to eliminate some of the string values that may otherwise |
| -suffer from the quirks of the string to number converting |
| -processes when applied to unexpected string values. |
| -</p> |
| - |
| - |
| -<h3 id="tcRegEx">Regular expression examples</h3> |
| - |
| -<pre id="tcRegExEm"> |
| -/^\d+$/ <span class="commentJS">//All-digit</span> |
| -/^\s*[-+]?\d+\s*$/ <span class="commentJS">//Unbroken Signed integer & spaces</span> |
| -/^\d{1,5}$/ <span class="commentJS">//1 to 5 digits</span> |
| -/^\d+\.\d\d$/ <span class="commentJS">//Money</span> |
| -/^\d+(\.\d{2})$/ <span class="commentJS">//Money</span> |
| -/^\d{1,3}(,\d\d\d)*\.\d\d$/ <span class="commentJS">//comma-separated money - 12,432.57</span> |
| - |
| - <span class="commentJS">// optional comma-separated money - 12,432.57 or 12432.57</span> |
| -/^\d{1,3}(,\d\d\d)*\.\d\d$|^\d+\.\d\d$/ |
| - |
| -</pre> |
| -</body> |
| -</html> |
| /cljs/notes/type-conversion/index.html |
| Property changes: |
| Deleted: svn:mime-type |
| ## -1 +0,0 ## |
| -text/plain |
| \ No newline at end of property |
| Index: cljs/notes/detect-browser/index.html |
| =================================================================== |
| --- cljs/notes/detect-browser/index.html (revision 45) |
| +++ cljs/notes/detect-browser/index.html (nonexistent) |
| @@ -1,1413 +0,0 @@ |
| -<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" |
| - "http://www.w3.org/TR/html4/strict.dtd"> |
| -<html lang="en"> |
| -<head> |
| -<title>Browser Detection (and What to Do Instead)</title> |
| -<meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1"> |
| -<link href="../../faq.css" rel="stylesheet" type="text/css"> |
| -<link href="../notes.css" rel="stylesheet" type="text/css"> |
| -<style type="text/css"> |
| -.tip { |
| - border: 1px solid #ccc; |
| - padding: 1ex; |
| - background: #fcfcfc; |
| - font-size: 90%; |
| -} |
| -</style> |
| -</head> |
| -<body> |
| -<h1 id="bdTop">Browser Detection (and What to Do Instead)</h1> |
| -<div id="faqNav"> |
| - <a href="../../">FAQ</a> > <a href="../">FAQ Notes</a> |
| -</div> |
| -<p> |
| -By Richard Cornford, edited by Garrett Smith |
| -</p> |
| -<ul> |
| - <li><a href="#bdIntro">Introduction</a></li> |
| - <li><a href="#bdValid">Avoiding Structural Differences in the Browser DOMs</a></li> |
| - <li><a href="#bdDif">Browsers Differences</a></li> |
| - <li><a href="#bdFailS">Failed Strategies: Browser Detecting</a> |
| - <ul> |
| - <li><a href="#bdUAS">Assumptions Based on navigator.userAgent</a></li> |
| - <li><a href="#bdOI">Assumptions Based on DOM Objects: Object inference</a></li> |
| - </ul> |
| - </li> |
| - <li><a href="#bdFD">A Strategy That Works: Object/Feature Detecting.</a> |
| - <ul> |
| - <li><a href="#bdGEID">Example 1: IDed Element Retrieval</a></li> |
| - <li><a href="#bdScroll">Example 2: Scroll Values</a></li> |
| - <li><a href="#bdReplace">Example 3: String.prototype.replace</a></li> |
| - </ul> |
| - </li> |
| - <li><a href="#bdDesPb">The Javascript Design Problem</a></li> |
| - |
| -</ul> |
| - |
| -<h2 id="bdIntro">Introduction</h2> |
| - |
| -<p id="bdIntro_1"> |
| -Under normal circumstances computer programs are written for a known |
| -environment. The programmer knows what to expect; which APIs will be |
| -available, how they will behave and so on. Java is an ideal example |
| -of this, providing a theoretically consistent set of APIs and language |
| -features across all Java Virtual Machine (JVM) implementations. But |
| -this is also true in most other circumstances. The programmer of C++ |
| -for the Windows operating system will know what MFC classes are |
| -available and how to program them. Their expectations will be |
| -rewarded, if they posses the required knowledge. |
| -</p> |
| - |
| -<p id="bdIntro_2"> |
| -Client side javascript for the Internet, on the other hand, has the |
| -possibly unique problem of having to be authored with no specific |
| -knowledge of the environment in which it will be executed. The |
| -client side environment will usually be a web browser and web |
| -browsers do tend to have many common features (and increasingly |
| -standardised features) but the author cannot know which version of |
| -which browser will be making any HTTP request (or |
| -whether it is a browser at all). It is not even possible to tell in |
| -advance whether the User Agent will be capable of executing |
| -javascript; all of those that can include a user configurable option |
| -to disable it anyway. |
| -</p> |
| - |
| -<p id="bdIntro_3"> |
| -Javascript authors for the Internet must realise that they are dealing |
| -with the unknown and that any, and all, scripts will fail to execute |
| -somewhere. The challenge is to get the most from your javascript when |
| -it is available but to cope with their failure in a meaningful way. |
| -</p> |
| - |
| -<p id="bdIntro_4"> |
| -I once read a description of a variant on the game of chess, played |
| -at military academies. Two players sit at separate boards set up with |
| -only their own pieces, out of sight of each other, and a referee |
| -supervises the game. Each player makes their move in turn and the |
| -referee is responsible for informing them how the other's move impacts |
| -on their own pieces and how the other's disposition of pieces impact |
| -on their intended move. The player is informed only when one of their |
| -own pieces is taken, when one of their moves is affected by |
| -interacting with one of their opponents pieces (i.e. a player may want |
| -to move a bishop across the board but the referee may inform them that |
| -their move was stopped four squares early when the bishop took a pawn |
| -from the other side) and when one of their opponents pieces is |
| -sitting on a square adjacent to one of their own. |
| -</p> |
| - |
| -<p id="bdIntro_5"> |
| -The game is used to teach battlefield strategy. To win a player must |
| -probe and test to deduce his opponent's disposition, while planing and |
| -executing a response that will achieve the desired checkmate. It is |
| -this sort of strategy that needs to be added to the normal programming |
| -problems in order that javascript may cope with its unknown execution |
| -environment, with the significant difference that the strategy, its |
| -tests and all of the paths of execution must be fully planed out before |
| -the code can even starts executing. |
| -</p> |
| - |
| -<h2 id="bdValid">Avoiding Structural Differences in the Browser DOMs</h2> |
| - |
| -<p id="bdValid_1"> |
| -While the point of this article is to introduce techniques for handling |
| -the differences between web browsers and their DOM implementations it |
| -is also possible to avoid some types of differences especially related |
| -to the structure of the DOM that is being scripted. |
| -</p> |
| - |
| -<p id="bdValid_2"> |
| -If I was asked to recommend one action most likely to promote the |
| -authoring of cross-browser scripts it would be: <strong><em>Start |
| -from a basis of valid <span class="initialism" title="HyperText Mark-up Language"><abbr title="HyperText Mark-up Language" |
| ->HTML</abbr></span></em></strong>.</p> |
| - |
| -<p id="bdValid_3"> |
| -Browsers presented with invalid <span class="initialism" title="HyperText Mark-up Language"><abbr title="HyperText Mark-up Language">HTML</abbr></span> will usually attempt to error |
| -correct it in order to do the best possible job of displaying it. |
| -Some browsers, particularly IE, are tolerant of all sorts of strange |
| -formulations of mark-up. Valid <span class="initialism" title="HyperText Mark-up Language"><abbr title="HyperText Mark-up Language">HTML</abbr></span> has a tree-like structure, elements |
| -may completely contain others but they cannot overlap, and there are |
| -rules about which elements may appear in which contexts. The DOM that |
| -is to be scripted also has a tree-like structure and there is a very |
| -simple relationship between the tree-like structure of valid <span class="initialism" title="HyperText Mark-up Language"><abbr title="HyperText Mark-up Language">HTML</abbr></span> and |
| -the DOM constructed from it. So any browser presented with valid <span class="initialism" title="HyperText Mark-up Language"><abbr title="HyperText Mark-up Language">HTML</abbr></span> |
| -will be able to directly translate that <span class="initialism" title="HyperText Mark-up Language"><abbr title="HyperText Mark-up Language">HTML</abbr></span> into a corresponding DOM |
| -using well specified rules, resulting in a DOM that is of predictable |
| -and consistent structure on all of the browsers that can build a DOM. |
| -</p> |
| - |
| -<p id="bdValid_4"> |
| -Invalid <span class="initialism" title="HyperText Mark-up Language"><abbr title="HyperText Mark-up Language">HTML</abbr></span> will not translate as naturally into a DOM, or even a |
| -tree-like structure. If the browser is going to build a DOM with the |
| -source provided it is going to have to apply error correcting rules |
| -and attempt to build the best DOM it can. But the error correcting |
| -rules are not standardised, not even published. So different browsers |
| -have no choice but apply different rules and that directly results in |
| -the building of DOMs with different (and in extremes, radically |
| -different) structures. |
| -</p> |
| - |
| -<p id="bdValid_5"> |
| -As a result, using invalid <span class="initialism" title="HyperText Mark-up Language"><abbr title="HyperText Mark-up Language">HTML</abbr></span> directly produces differences in the |
| -DOMs produced by different browsers. No matter how good the application |
| -of techniques for dealing with the differences between browsers, it |
| -does not make sense to do anything that will provoke more differences |
| -than are unavoidable. |
| -</p> |
| - |
| -<p id="bdValid_6"> |
| -The authoring of invalid <span class="initialism" title="HyperText Mark-up Language"><abbr title="HyperText Mark-up Language">HTML</abbr></span>, justified because "It works in |
| -browser XYZ", gives the authors of accompanying scripts the |
| -impression that cross-browser scripting is harder than it is. If they |
| -had started with valid <span class="initialism" title="HyperText Mark-up Language"><abbr title="HyperText Mark-up Language">HTML</abbr></span> they would never have encountered any of |
| -the structural inconsistencies that invalid <span class="initialism" title="HyperText Mark-up Language"><abbr title="HyperText Mark-up Language">HTML</abbr></span> can provoke. |
| -</p> |
| - |
| -<h2 id="bdDif">Browsers Differences</h2> |
| - |
| -<p id="bdDif_1"> |
| -As browsers have evolved they have offered more features to javascript. |
| -Different manufactures have adopted the features of other browsers, |
| -while adding new features, that may in turn have been adopted by (or |
| -will be adopted by) their competitors. Various sets of common features |
| -have emerged and some have been formalised by the W3C into a sequence |
| -of standard DOM specifications. Along the way an increasing number of |
| -javascript capable browsers have emerged. In addition to desktop PC |
| -browsers, javascript capable browsers exist for a whole range of |
| -devices; PDAs, mobile telephones (Microwave ovens, refrigerators). |
| -</p> |
| - |
| -<p id="bdDif_2"> |
| -Unfortunately it is the case that the browsers on the smaller devices |
| -cannot offer the range of features available to a desktop PC and even |
| -as the technology improves and features are added to the smaller |
| -browsers the problem will not improve as browsers will become available |
| -on a wider range of devices while the desktop PC browsers will continue |
| -to march ahead of them. |
| -</p> |
| - |
| -<p id="bdDif_3"> |
| -Over the years various strategies have been attempted to tackle this |
| -problem and some have failed miserably. |
| -</p> |
| - |
| -<h2 id="bdFailS">Failed Strategies: Browser Detecting</h2> |
| - |
| -<h3 id="bdUAS">Assumptions Based on navigator.userAgent</h3> |
| - |
| -<p id="bdUAS_1"> |
| -One of the most popular strategies for handling the differences between |
| -web browsers was browser detecting based on the User Agent string. |
| -Browsers possessing a <code>navigator</code> object also provide a |
| -property of that object: <code>navigator.userAgent</code> containing a |
| -string that (in theory) identifies the browser. Its application went |
| -something like:- |
| -</p> |
| - |
| -<pre id="bdUAS_ex1"> |
| -<span class="commentJS">/* Warning: never use this script, or any script based on, or resembling, it. |
| -*/</span> |
| -var userAgent = self.navigator.userAgent; |
| -var appName = self.navigator.appName; |
| -var isOpera = false; |
| -var isOpera5 = false; |
| -var isOpera6p = false; |
| -var isIE = false; |
| -var isIE4 = false; |
| -var isIE5p = false; |
| -var isMozilla1p = false; |
| -var isNet4 = false; |
| -var isNet5p = false; |
| -var operaVersion = 0; |
| -var ieVersion = 0; |
| -var appVersion = self.navigator.appVersion; |
| -var brSet = false; |
| - |
| -function brSetup(){ |
| - for(var c = 3;c < appVersion.length;c++){ |
| - var chr = appVersion.charAt(c); |
| - if(isNaN(chr)){ |
| - appVersion = appVersion.substring(0, c); |
| - break; |
| - } |
| - } |
| - if((userAgent.indexOf('webtv') < 0) && |
| - (userAgent.indexOf('hotjava') < 0)){ |
| - if(userAgent.indexOf('Opera') >= 0){ |
| - var ind = (userAgent.indexOf('Opera')+6); |
| - if(((ind+1) < userAgent.length)&&(ind >= 6)){ |
| - isOpera = true; |
| - var bsVersion = parseInt(userAgent.substring(ind, ind+1)); |
| - if(!isNaN(bsVersion)){ |
| - operaVersion = bsVersion; |
| - if(operaVersion >= 6){ |
| - isOpera6p = true; |
| - }else if(operaVersion >= 5){ |
| - isOpera5 = true; |
| - } |
| - } |
| - } |
| - }else if(appName.indexOf('Microsoft Internet Explorer') >= 0){ |
| - var ind = (userAgent.indexOf('MSIE')+5); |
| - if(((ind+1) < userAgent.length)&&(ind >= 5)){ |
| - isIE = true; |
| - var bsVersion = parseInt(userAgent.substring(ind, ind+1)); |
| - if(!isNaN(bsVersion)){ |
| - ieVersion = bsVersion; |
| - if(ieVersion >= 5){ |
| - isIE5p = true; |
| - }else if(ieVersion >= 4){ |
| - isIE4 = true; |
| - } |
| - } |
| - } |
| - }else if(appName.indexOf('Netscape') >= 0){ |
| - if((self.navigator.vendor)&& |
| - (self.navigator.vendor.indexOf('Netscape') >= 0)&& |
| - (userAgent.indexOf('Gecko') >= 0)){ |
| - isNet5p = true; |
| - }else if((userAgent.indexOf('Netscape') < 0)&& |
| - (userAgent.indexOf('Gecko') >= 0)&& |
| - (appVersion >= 5)){ |
| - isMozilla1p = true; |
| - }else if((appVersion < 5)&& |
| - (userAgent.indexOf('compatible') < 0)){ |
| - isNet4 = true; |
| - } |
| - } |
| - } |
| - brSet = true; |
| -} |
| -</pre> |
| - |
| -<p id="bdUAS_2"> |
| -This version also uses some other properties of the |
| -<code>navigator</code> object; <code>appName</code> and |
| -<code>appVersion</code>. |
| -</p> |
| - |
| -<p id="bdUAS_3"> |
| -Superficially this type of script seems to be saying quite a lot about |
| -what browser is executing the script. Knowing that the |
| -<code>isIE5p</code> variable is boolean <code>true</code> seems to be |
| -a reasonable indicator that the browser in question is Internet |
| -Explorer Version 5 or above and from that all of the available features |
| -on the IE 5+ DOM could be assumed to exist. |
| -</p> |
| - |
| -<p id="bdUAS_4"> |
| -Unfortunately, if this type of script ever was an effective determiner |
| -of the browser type, it is not now. The first problem is that you cannot |
| -write this type of script to take into account all web browsers. The |
| -script above is only interested in Internet Explorer, Netscape and |
| -(some) Mozilla derived browsers and Opera. Any other browser will not |
| -be identified, and that will include a number of W3C DOM conforming |
| -fully dynamic visual browsers quite capable of delivering on even quite |
| -demanding code. |
| -</p> |
| - |
| -<p id="bdUAS_5"> |
| -The second problem is that scripts like this one, and server-side |
| -counter-parts (reading the HTTP User Agent header) were used to |
| -<em>exclude</em> browsers that did not fall into a set of browsers |
| -known to the author, regardless of whether those browsers were |
| -capable of displaying the offending site or not. |
| -</p> |
| - |
| -<p id="bdUAS_6"> |
| -As more browsers were written, their authors discovered that if they |
| -honestly reported their type and version in their User Agent string |
| -they would likely be excluded from sites that they would |
| -otherwise be quite capable of displaying. To get around this problem |
| -browsers began spoofing the more popular versions, sending HTTP User |
| -Agent headers, and reporting <code>navigator.userAgent</code> strings, |
| -that were indistinguishable from, say, IE. |
| -</p> |
| - |
| -<p id="bdUAS_7"> |
| -As a result, when the above script reports <code>isIE5p</code> as true, it is |
| -possible that the browser that is executing the script is one of |
| -numerous current browsers. Many of those browsers support sufficient |
| -features found on IE5+ to allow most scripts to execute but the |
| -trueness of <code>isIE5p</code> is not a valid indicator that the |
| -browser will support <em>all</em> of the IE 5+ DOM. |
| -</p> |
| - |
| -<p id="bdUAS_8"> |
| -Now you might decide that a browser that lies about its identity |
| -deserves what it gets (though they started lying in order to make |
| -themselves usable in the face of near-sighted <span class="initialism" title="HyperText Mark-up Language"><abbr title="HyperText Mark-up Language">HTML</abbr></span> and script authors) |
| -but is worth bearing in mind that the IE 5 |
| -<code>navigator.userAgent</code> string is: |
| -<code>"Mozilla/4.0 (compatible; MSIE 5.01; Windows NT)"</code>. |
| -IE 5 is in fact spoofing Netscape 4, and Microsoft started to do that |
| -for precisely the same reasons that motivate many current browsers to |
| -send User Agent headers, and report <code>navigator.userAgent</code> |
| -strings that are indistinguishable form those of Microsoft browsers. |
| -</p> |
| - |
| -<p id="bdUAS_9"> |
| -No browser manufacture wants (or ever has wanted) their browser to be |
| -needlessly excluded from displaying a web site that it is perfectly |
| -capable of handling just because the author of that site does not |
| -know it by name. And to prevent that they have followed Microsoft and |
| -taken action that has rendered the <code>userAgent</code> string (and |
| -the HTTP User Agent header) meaningless. |
| -</p> |
| - |
| -<p id="bdUAS_10"> |
| -We are now at a point where the contents of the User Agent strings |
| -bear no relationship at all to the capabilities and features of the |
| -browser that is reporting it. The situation has gone so far that a |
| -number of javascript experts have stated that a standard quality test |
| -for an unknown script would include searching the source code of the |
| -script for the string <code>"userAgent"</code> and dismissing |
| -the script out of hand if that string is found. |
| -</p> |
| - |
| -<h3 id="bdOI">Assumptions Based on DOM Objects: Object inference</h3> |
| - |
| -<p id="bdOI_1"> |
| -A second browser detecting strategy uses the objects present in various |
| -browser DOMs and make the assumption that the presence (or absence) of |
| -one or more objects indicates that a browser is a particular type or |
| -version. I quickly found this example of typical code of this type:- |
| -</p> |
| - |
| -<pre id="bdOI_ex1"> |
| -<span class="commentJS">/* Warning: never use this script, or any script based on, or resembling, it. |
| -*/</span> |
| -var isDOM=(document.getElementById)?true:false; |
| -var isIE4=(document.all&&!isDOM)?true:false; |
| -var isIE5p=(document.all&&isDOM)?true:false; |
| -var isIE=(document.all)?true:false; |
| -var isOP=(window.opera)?true:false; |
| -var isNS4=(document.layers)?true:false; |
| -</pre> |
| - |
| -<p id="bdOI_2"> |
| -Javascript performs automatic type conversion so when a boolean result |
| -is expected from an expression that evaluates to a non-boolean value |
| -that non-boolean value is (internally) converted to a boolean value |
| -(using the rules defined in the ECMAScript specification) and that |
| -boolean is used as the result. |
| -</p> |
| - |
| -<p id="bdOI_3"> |
| -Take the first line:- |
| -</p> |
| - |
| -<pre id="bdOI_ex2"> |
| -var isDOM=(document.getElementById)?true:false; |
| -</pre> |
| - |
| -<p id="bdOI_4"> |
| -The conditional expression requires that the expression preceding the <code>?</code> |
| -have a boolean result. The <code>document.getElementById</code> |
| -property accessor can resolve as one of two values depending on whether |
| -the <code>getElementById</code> function is supported in the browser in |
| -question. If it is supported then the accessor resolves as a function |
| -object, and is type converted to boolean <code>true</code>. If |
| -<code>getElementById</code> is not supported the accessor resolves as |
| -undefined, and undefined type converts to boolean |
| -<code>false</code>. Thus the expression preceding the question mark |
| -resolves as <code>true</code> or <code>false</code> and based on that |
| -result <code>true</code> or <code>false</code> are assigned to the |
| -variable <code>isDOM</code>. |
| -</p> |
| - |
| -<div class="tip"> |
| - <h4>Boolean Conversion Tip: !!</h4> |
| - <p id="bdOI_5"> |
| - Incidentally, this code is not the optimum method of assigning a boolean |
| - value based on the type converted to boolean result of a property accessor. |
| - It is better to use the javascript NOT operator ( <code>!</code> ) twice |
| - or to pass the object reference as the argument to the <code>Boolean</code> |
| - constructor called as a function. The not operator will type convert its |
| - operand to boolean and then invert it so <code>false</code> becomes |
| - <code>true</code> and <code>true</code> becomes <code>false</code>. |
| - Passing that result as the operand for a second not operator inverts |
| - the boolean again so a reference to a function object results in boolean |
| - <code>true</code> and an undefined reference results in boolean |
| - <code>false</code>. The <code>Boolean</code> constructor called as a |
| - function converts its argument to boolean and returns that value. The |
| - statement would become:- |
| - </p> |
| - |
| - <pre id="bdOI_ex3"> |
| - var isDOM = !!document.getElementById; |
| - |
| - <span class="commentJS">/* - or - */</span> |
| - |
| - var isDOM = Boolean(document.getElementById); |
| - </pre> |
| - |
| - <p id="bdOI_6"> |
| - Which is shorter and faster than the original version and certainly |
| - more direct. |
| - </p> |
| -</div> |
| - |
| -<h4>Inductive Generalization Fallacy</h4> |
| -<p id="bdOI_7"> |
| -The problem with this type of browser detecting script is that it is |
| -used to make assumptions about the browser's capabilities that are |
| -rarely valid. For example, this <code>isDOM</code> result, based on |
| -the browser's support for <code>document.getElementById</code>, is |
| -often used as the basis for the assumption that the browser has a |
| -fully dynamic DOM with methods such as |
| -<code>document.createElement</code>, <code>replaceChild</code> and |
| -<code>appendChild</code>. Browsers do not live up to that expectation, |
| -some are not that dynamic and while they may implement some of the Core |
| -DOM level 1 methods such as <code>getElementById</code> They do not |
| -necessarily implement large parts of the various DOM standards, |
| -including all of the dynamic <code>Node</code> manipulation methods. |
| -</p> |
| - |
| -<p id="bdOI_8"> |
| -The result of the <code>isIE5p</code> test is intended to indicate that |
| -the browser is Internet Explorer 5.0 or above. However, Opera 7, |
| -IceBrowser 5.4, Web Browser 2.0 (palm OS), Konquerer, Safari, NetFront, |
| -iCab and others will all produce a <code>true</code> value in |
| -<code>isIE5p</code> because they implement <code>getElementById</code> |
| -and the <code>document.all</code> collection. As a result, code that |
| -assumes that it will have <em>all</em> of the capabilities of IE 5.0+ |
| -available to it when <code>isIE5p</code> is <code>true</code> will as |
| -often as not be mistaken. |
| -</p> |
| - |
| -<p id="bdOI_9"> |
| -This problem applies to all of the tests above with the possible |
| -exception of the <code>window.opera</code> test. I am unaware of a |
| -second browser type that has implemented an <code>opera</code> object |
| -on the window object. But then Opera 7 is a radically different, and |
| -much more dynamic browser that its preceding versions, though they all |
| -possess a <code>window.opera</code> object. |
| -</p> |
| - |
| -<p id="bdOI_10"> |
| -To get around the problem that multiple browsers implement the same |
| -features (even if they start off unique to one browser) script authors |
| -have attempted to find more discriminating features to test. For |
| -example, the following script extract is intended to work only on IE |
| -5.0+ browsers:- |
| -</p> |
| - |
| -<pre id="bdOI_ex4"> |
| -var isIE5p = !!window.ActiveXObject; |
| -... |
| -function copyToClip(myString){ |
| - if(!isIE5p) return; |
| - window.clipboardData.setData("text",myString); |
| -} |
| -</pre> |
| - |
| -<p id="bdOI_11"> |
| -The <code>ActiveXObject</code> constructor is intended to be |
| -discriminating of an IE browser. However, this type if script still |
| -does not work. It has placed the competing browser manufacturers in |
| -exactly the same position as they were in when scripts tested the |
| -<code>navigator.userAgent</code> string and excluded them from |
| -accessing a site because they honestly reported that they where not |
| -IE. As a result I already know of one browser that has implemented |
| -a <code>window.ActiveXObject</code> function, it probably is a dummy |
| -and exists in the browsers DOM specifically to defeat the exclusion |
| -of that browser based on tests like the one above. |
| -</p> |
| - |
| -<p id="bdOI_12"> |
| -The assumptions that the existence of one (or two) feature(s) in a |
| -javascript environment infers the existence of any feature beyond |
| -the ones tested is invalid. It is only used by those ignorant of the |
| -potential for diversity, imitation and the patterns of evolution in |
| -browser DOMs. |
| -</p> |
| - |
| -<p id="bdOI_13"> |
| -No matter how specifically the objects from which the inferences are |
| -derived are chosen, the technique itself sows the seeds of its own |
| -invalidity, an object that may actually validly be used to infer that |
| -a browser is of a particular type/version today probably will not still |
| -be valid next year. Adding a maintenance burden to a task that already |
| -presupposes an omniscient knowledge of <em>all</em> browser DOMs just |
| -in order to be effectively implemented at present. |
| -</p> |
| - |
| - |
| -<h2 id="bdFD">A Strategy That Works: Object/Feature Detecting</h2> |
| - |
| -<p id="bdFD_1"> |
| -The main point of the previous discussion is to convey the idea that it |
| -is impossible to detect exactly which type of browser (or version of |
| -that browser) a script is being executed on. The use that such scripts |
| -have been put to in the past (to exclude browsers from sites that |
| -they probably could have successfully handled) has motivated the |
| -manufactures of browsers to render browser detecting nonviable |
| -as a strategy for dealing with the variations in browser DOMs. |
| -</p> |
| - |
| -<p id="bdFD_2"> |
| -Fortunately, not being able to identify a web browser type or version |
| -with more accuracy than could be achieved by generating a random number |
| -and then biasing the result by your favourite (meaningless, because |
| -they too are based on browser detecting and suffer exactly the same |
| -unreliability) browser usage statistics, does not need to impact upon |
| -your ability to script web browsers at all. A viable alternative |
| -strategy has been identified and developed to the point where it is |
| -possible to author javascript to be used on web pages without any |
| -interest in the type or version of the browser at all. |
| -</p> |
| - |
| -<p id="bdFD_3"> |
| -That alternative strategy is known as object or feature detecting. I |
| -prefer to use the term "feature detecting", partly because the |
| -resulting code often needs to test and probe a wider range of |
| -features than just those that could be described as objects, but |
| -mostly because "object detecting" is occasionally |
| -erroneously applied to the object inference style of script described |
| -above. |
| -</p> |
| - |
| -<p id="bdFD_4"> |
| -Feature detecting seeks to match an attempt to execute as script (or a |
| -part of a script) with the execution environment by seeking to test |
| -features of that environment where the results of the test have a |
| -direct one-to-one relationship with the features that need to be |
| -supported in the environment for the code to successfully execute. It |
| -is the direct one-to-one relationship in the implemented tests that |
| -avoids the need to identify the specific browser because whatever |
| -browser it is it either will support all of the required features or |
| -it will not. That would mean testing the feature itself (to ensure |
| -that it exists on the browser) and possibly aspects of the behaviour |
| -of that feature. |
| -</p> |
| - |
| -<p id="bdFD_5"> |
| -Taking the previous example that illustrated how the |
| -<code>ActiveXObject</code> constructor might be used as the basis for |
| -a script that inferred the existence of, and ability to use, the |
| -<code>clipboardData</code> feature implemented on window IE. Rather |
| -than inferring the browser's support for the <code>clipboardData</code> |
| -feature from some other unrelated feature it should be fairly obvious |
| -that the feature that should be tested for prior to attempting to write |
| -to the clipboard <em>is</em> the <code>clipboardData</code> object, and |
| -further, that calling the <code>setData</code> method of that object |
| -should necessitate checking that it too is implemented:- |
| -</p> |
| - |
| -<pre id="bdFD_ex1"> |
| -function copyToClip(myString){ |
| - if((typeof clipboardData != 'undefined')&& |
| - (clipboardData.setData)){ |
| - clipboardData.setData("text",myString); |
| - } |
| -} |
| -</pre> |
| - |
| -<p id="bdFD_6"> |
| -In this way the tests that determine whether the |
| -<code>clipboardData.setData</code> method is called have a direct |
| -one-to-one relationship with the browser's support for the feature. It |
| -is not necessary to be interested in whether the browser is the |
| -expected windows IE that is known to implement the feature, or whether |
| -it is some other browser that has decided to copy IE's implementation |
| -and provide the feature itself. If the feature is there (at least to |
| -the required extent) it is used and if it is not there no attempt is |
| -made to use it. |
| -</p> |
| - |
| -<p id="bdFD_7"> |
| -The above feature detecting tests are done using two operations. The |
| -first employs the <code>typeof</code> operator, which returns a string |
| -depending on the type of its operand. That string is one of |
| -<code>"undefined"</code>, <code>"object"</code>, |
| -<code>"function"</code>, <code>"boolean"</code> |
| -<code>"string"</code> and <code>"number"</code> |
| -and the test compares the returned string with the string |
| -<code>"undefined"</code>. The <code>clipboardData</code> |
| -object is not used unless typeof does not return |
| -<code>"undefined"</code>. |
| -</p> |
| - |
| - |
| -<p id="bdFD_8"> |
| -The second test is a type-converting test. The logical AND |
| -(<code>&&</code>) operator internally converts its operands to |
| -boolean in order to make its decision about what value it will return. |
| -If <code>clipboardData.setData</code> is undefined it will type-convert |
| -to boolean <code>false</code>, while if it is an object or a function |
| -the result of the conversion will be boolean <code>true</code>. |
| -</p> |
| - |
| -<p id="bdFD_9"> |
| -However, that function is not a particularly clever application of |
| -feature detecting because, while it avoids the function throwing errors |
| -in an attempt to execute <code>clipboardData.setData</code> on a browser |
| -thatdoes not support it, it will do nothing on a browser that does not |
| -support it. That is a problem when the user has been presented with a |
| -GUI component that gives them the impression that their interaction |
| -will result in something being written to the clipboard but when they |
| -use it nothing happens. And of course nothing was going to happen if |
| -the browser in use did not support javascript or it had been disabled. |
| -</p> |
| - |
| -<p id="bdFD_10"> |
| -Ensuring that a script will not attempt to use a feature that is not |
| -supported is not sufficient to address the design challenge of crating |
| -scripts for the Internet. Testing the browser for the features that it |
| -does support makes it practical to handle a spectrum of browser DOMs |
| -but the script design task also involves planning how to handle the |
| -range of possibilities. A range that goes from guaranteed failure to |
| -execute at all on browser that do not support javascript, to full |
| -support for all of the required features. |
| -</p> |
| - |
| -<p id="bdFD_11"> |
| -You can tell when the browser does not support the |
| -<code>clipboardData</code> feature from the script prior to using it |
| -but the user has no way of knowing why a button that promised them |
| -some action has failed to do anything. So in addition to matching the |
| -script to the browser's ability to execute it, it is also necessary to |
| -match the GUI, and the user's resulting expectations, to what the |
| -script is going to be able to deliver. |
| -</p> |
| - |
| -<p id="bdFD_12"> |
| -Suppose the <code>copyToClip</code> function was called from an |
| -<code>INPUT</code> element of <code>type="button"</code> |
| -and was intended to copy a company e-mail address into the clipboard, |
| -the <span class="initialism" title="HyperText Mark-up Language"><abbr title="HyperText Mark-up Language">HTML</abbr></span> code for the button might look like:- |
| -</p> |
| - |
| -<pre id="bdFD_ex2"> |
| -<input type="button" |
| - value="copy our contact e-mail address to your clipboard" |
| - onclick="copyToClip('info@example.com')"> |
| -</pre> |
| - |
| -<p id="bdFD_13"> |
| -We know that that <span class="initialism" title="HyperText Mark-up Language"><abbr title="HyperText Mark-up Language">HTML</abbr></span> will do nothing if javascript is |
| -disabled/unavailable and we know that it will do nothing if the browser |
| -does not support the required features, so one option would be to use a |
| -script to write the button <span class="initialism" title="HyperText Mark-up Language"><abbr title="HyperText Mark-up Language">HTML</abbr></span> into the document in the position in |
| -which the button was wanted when the browser provided the facility:- |
| -</p> |
| - |
| -<pre id="bdFD_ex3"> |
| -<script type="text/javascript"> |
| - if((typeof clipboardData != 'undefined')&& |
| - (clipboardData.setData)&& |
| - (document.write)){ |
| - document.write('<input type="button"', |
| - 'value="copy our contact e-mail address', |
| - ' to your clipboard" onclick="', |
| - 'copyToClip(\'info@example.com\')">'); |
| - } |
| -</script> |
| -</pre> |
| - |
| -<p id="bdFD_14"> |
| -Now the user will never see the button unless the browser supports the |
| -required features <em>and</em> javascript is enabled. The user never |
| -gets an expectation that the script will not be able to deliver (at |
| -least that is the theory, it is still possible for the user's browser |
| -configuration to prevent scripts from writing to the clipboard, but |
| -the user might be expected to know how their browser is configured and |
| -understand that the button is not in a position to override it). |
| -</p> |
| - |
| -<p id="bdFD_15"> |
| -If the <code>copyToClip</code> function is only ever called from |
| -buttons that are written only following the required feature detection |
| -then it can be simplified by the removal of the test from its body as |
| -it would be shielded from generating errors on nonsupporting browsers by |
| -the fact that there would be no way for it to be executed. |
| -</p> |
| - |
| -<p id="bdFD_16"> |
| -The <code>document.write</code> method is not the only way of adding |
| -GUI components to a web page in a way that can be subject to the |
| -verification of the features that render those components meaningful. |
| -Alternatives include writing to a parent element's |
| -<code>innerHTML</code> property (where supported, see |
| -<a href="/faq/#updateContent">FAQ: How do I modify the content of the current page?</a>), or using the W3C DOM |
| -<code>document.crateElement</code> (or <code>createElementNS</code>) |
| -methods and appending the created element at a suitable location within |
| -the DOM. Either of these two approaches are suited to adding the |
| -components after the page has finished loading, but that can be useful |
| -as some feature testing is not practical before that point. The |
| -approach used can be chosen based on the requirements of the script. |
| -If the script is going to be using the |
| -<code>document.createElement</code> method itself then it is a good |
| -candidate as a method for inserting any required GUI components, |
| -similarly with <code>innerHTML</code>. The <code>document.write</code> |
| -method is universally supported in <span class="initialism" title="HyperText Mark-up Language"><abbr title="HyperText Mark-up Language">HTML</abbr></span> DOMs but is not necessarily |
| -available at all in XHTML DOMs. |
| -</p> |
| - |
| -<p id="bdFD_17"> |
| -Other ways of handling the possibility that the browser will not |
| -support either javascript or the features required by the script used |
| -is to design the <span class="initialism" title="HyperText Mark-up Language"><abbr title="HyperText Mark-up Language">HTML</abbr></span>/<span class="initialism" title="Cascading Style Sheet"><abbr title="Cascading Style Sheet">CSS</abbr></span> parts of the page so that the script, upon |
| -verifying support for the features it requires, can modify, manipulate |
| -and transform the resulting elements in the DOM. But in the absence of |
| -sufficient script support the unmodified <span class="initialism" title="HyperText Mark-up Language"><abbr title="HyperText Mark-up Language">HTML</abbr></span> presents all of the |
| -required content, navigation, etc. |
| -</p> |
| - |
| -<p id="bdFD_18"> |
| -This can be particularly significant with things like navigation menus. |
| -One style of design would place the content of the navigation menus, |
| -the URLs and text, in javascript structures such as Arrays. But either |
| -of javascript being disabled/unavailable on the client or the absence |
| -of the features required to support a functional javascript menu would |
| -leave the page without any navigation at all. Generally that would not |
| -be a viable web page, and not that good for search engine placement as |
| -search engine robots do not tend to execute javascript either so they |
| -would be left unable to navigate a site featuring such a menu and so |
| -unable to rank its content for listing. |
| -</p> |
| - |
| -<p id="bdFD_19"> |
| -A better approach to menu design would have the navigation menu content |
| -defined in the <span class="initialism" title="HyperText Mark-up Language"><abbr title="HyperText Mark-up Language">HTML</abbr></span>, possibly as nested list elements of some sort, and |
| -once the script has ascertained that the browser is capable of executing |
| -it and providing the menu in an interactive form it can modify the <span class="initialism" title="Cascading Style Sheet"><abbr title="Cascading Style Sheet">CSS</abbr></span> |
| -<code>position</code>, <code>display</code> and <code>visibility</code> |
| -properties, move the elements to their desired location, attach event |
| -handlers and generally get on with the task of providing a javascript |
| -menu. And the worst that happens when the browser does not support |
| -scripting or the required features is that the user (and any search |
| -engine robots) finds the navigation in the page as a series of nested |
| -lists containing links. Fully functional, if not quite as impressive as |
| -it could have been had the script been supported. This is termed |
| -"clean degradation" and goes hand in hand with feature |
| -detecting during the process of planing and implementing a browser |
| -script for the Internet. |
| -</p> |
| - |
| -<h3 id="bdGEID">Example 1: IDed Element Retrieval</h3> |
| - |
| -<p id="bdGEID_1"> |
| -An important aspect of feature detecting is that it allows a script to |
| -take advantage of possible fall-back options. Having deduced that a |
| -browser lacks the preferred feature it still may be possible to |
| -achieve the desired goal by using an alternative feature that is know |
| -to exist on some browsers. A common example of this is retrieving an |
| -element reference from the DOM given a string representing the |
| -<code>ID</code> attribute of that element. The preferred method would |
| -be the W3C Core DOM standard <code>document.getElementById</code> |
| -method which is supported on the widest number of browsers. If that |
| -method was not available but the browser happened to support the |
| -<code>document.all</code> collection then it could be used for the |
| -element retrieval as a fall-back option. And for some types of |
| -elements, such as <span class="initialism" title="Cascading Style Sheet"><abbr title="Cascading Style Sheet">CSS</abbr></span> positioned elements on Netscape 4 (where the |
| -<code>document.layers</code> collection may be used to retrieve such |
| -a reference), additional options may be available. |
| -</p> |
| - |
| -<pre id="bdGEID_ex1"> |
| -function getElementWithId(id){ |
| - var obj; |
| - if(document.getElementById){ |
| - <span class="commentJS">/* Prefer the widely supported W3C DOM method, if |
| - available:- |
| - */</span> |
| - obj = document.getElementById(id); |
| - }else if(document.all){ |
| - <span class="commentJS">/* Branch to use document.all on document.all only |
| - browsers. Requires that IDs are unique to the page |
| - and do not coincide with NAME attributes on other |
| - elements:- |
| - */</span> |
| - obj = document.all[id]; |
| - }else if(document.layers){ |
| - <span class="commentJS">/* Branch to use document.layers, but that will only work for |
| - <span class="initialism" title="Cascading Style Sheet"><abbr title="Cascading Style Sheet">CSS</abbr></span> positioned elements and LAYERs that are not nested. A |
| - recursive method might be used instead to find positioned |
| - elements within positioned elements but most DOM nodes on |
| - document.layers browsers cannot be referenced at all. |
| - */</span> |
| - obj = document.layers[id]; |
| - } |
| - <span class="commentJS">/* If no appropriate/functional element retrieval mechanism |
| - exists on this browser this function returns null:- |
| - */</span> |
| - return obj||null; |
| -} |
| -</pre> |
| - |
| -<p id="bdGEID_2"> |
| -Although that function is not very long or complex (without its |
| -comments) it does demonstrate a consequence of one style of |
| -implementation of feature detecting, it repeats the test each time |
| -it is necessary to retrieve an element using its ID. If not too many |
| -elements need retrieving that may not be significant, but if many |
| -elements needed retrieving in rapid succession and performance was |
| -significant then the overhead of performing the feature detection on |
| -each retrieval may add up and impact on the resulting |
| -script. |
| -</p> |
| - |
| -<p id="bdGEID_3"> |
| -An alternative is to assign one of many functions to a global |
| -<code>getElementWithId</code> variable based on the results of the |
| -feature detecting tests, as the script loads. |
| -</p> |
| - |
| -<pre id="bdGEID_ex2"> |
| -var getElementWithId; |
| -if(document.getElementById){ |
| - <span class="commentJS">/* Prefer the widely supported W3C DOM method, if |
| - available:- |
| - */</span> |
| - getElementWithId = function(id){ |
| - return document.getElementById(id); |
| - } |
| -}else if(document.all){ |
| - <span class="commentJS">/* Branch to use document.all on document.all only |
| - browsers. Requires that IDs are unique to the page |
| - and do not coincide with NAME attributes on other |
| - elements:- |
| - */</span> |
| - getElementWithId = function(id){ |
| - return document.all[id]; |
| - } |
| -}else if(document.layers){ |
| - <span class="commentJS">/* Branch to use document.layers, but that will only work for <span class="initialism" title="Cascading Style Sheet"><abbr title="Cascading Style Sheet">CSS</abbr></span> |
| - positioned elements. This function uses a recursive method |
| - to find positioned elements within positioned elements but most |
| - DOM nodes on document.layers browsers cannot be referenced at |
| - all. This function is expected to be called with only one |
| - argument, exactly like the over versions. |
| - */</span> |
| - getElementWithId = function(id, baseLayers){ |
| - <span class="commentJS">/* If the - baseLayers - parameter is not provided default |
| - its value to the document.layers collection of the main |
| - document: |
| - */</span> |
| - baseLayers = baseLayers||document.layers; |
| - <span class="commentJS">/* Assign the value of the property of the - baseLayers - |
| - object (possibly defaulted to the document.layers |
| - collection) with the property name corresponding to the |
| - - id - parameter to the local variable - obj: |
| - */</span> |
| - var obj = baseLayers[id]; |
| - <span class="commentJS">/* If - obj - remains undefined (no element existed with the |
| - given - id -) try searching the indexed members of |
| - - baseLayers - to see if any of their layers collections |
| - contain the element with the corresponding - id: |
| - */</span> |
| - if(!obj){ <span class="commentJS">//Element not found</span> |
| - <span class="commentJS">/* Loop through the indexed members of - baseLayers: */</span> |
| - for(var c = 0;c < baseLayers.length;c++){ |
| - if((baseLayers[c])&& <span class="commentJS">//Object at index - c.</span> |
| - (baseLayers[c].document)&& <span class="commentJS">//It has a - document.</span> |
| - <span class="commentJS">/* And a layers collection on that document: */</span> |
| - (baseLayers[c].document.layers)){ |
| - <span class="commentJS">/* Recursively call this function passing the - id - as |
| - the first parameter and the layers collection from |
| - within the document found on the layer at index - c |
| - - in - baseLayers - as the second parameter and |
| - assign the result to the local variable - obj: |
| - */</span> |
| - obj=getElementWithId(id,baseLayers[c].document.layers); |
| - <span class="commentJS">/* If - obj - is now not null then we have found the |
| - required element and can break out of the - for - |
| - loop: |
| - */</span> |
| - if(obj)break; |
| - } |
| - } |
| - } |
| - <span class="commentJS">/* If - obj - will type-convert to boolean true (it is not null |
| - or undefined) return it, else return null: |
| - */</span> |
| - return obj||null; |
| - } |
| -}else{ |
| - <span class="commentJS">/* No appropriate element retrieval mechanism exists on |
| - this browser. So assign this function as a safe dummy. |
| - Values returned form calls to getElementWithId probably |
| - should be tested to ensure that they are non-null prior |
| - to use anyway so this branch always returns null:- |
| - */</span> |
| - getElementWithId = function(id){ |
| - return null; |
| - } |
| -} |
| - |
| -<span class="commentJS">/* |
| -Usage:- |
| - |
| -var elRef = getElementWithId("ID_string"); |
| -if(elRef){ |
| - ... //element was found |
| -}else{ |
| - ... //element could not be found. |
| -} |
| -*/</span> |
| -</pre> |
| - |
| -<p id="bdGEID_4"> |
| -The feature detecting tests are performed once as the page loads and |
| -one of many function expressions assigned to the |
| -<code>getElementWithId</code> global variable as a result. The |
| -assigned function is the one most capable of retrieving the required |
| -element on the browser in use but it is still necessary to check that |
| -the returned value in not <code>null</code> and plan for the |
| -possibility of failure in the element retrieval process. It is |
| -guaranteed to fail on any browser that does not implement at least one |
| -of the element retrieval mechanisms used as the default function just |
| -returns <code>null</code>. |
| -</p> |
| - |
| -<p id="bdGEID_5"> |
| -It may not be sufficient to provide a function that does the best job |
| -of element retrieval that can be done on the browser in use. Other |
| -scripts, or parts of the script, may need to know how successful their |
| -attempts to retrieve elements are likely to be. The |
| -<code>getElementWithId</code> version that uses |
| -<code>document.layers</code> cannot retrieve elements that are not <span class="initialism" title="Cascading Style Sheet"><abbr title="Cascading Style Sheet">CSS</abbr></span> |
| -positioned and that may not be good enough for some scripts, while it |
| -may not matter to others. The <code>document.getElementById</code> and |
| -<code>document.all</code> versions should be able to retrieve any |
| -element given its <code>ID</code>. An opting would be to set a couple |
| -of boolean flags to indicate how successful element retrieval can be |
| -expected to be. Defaulting the flags to <code>false</code> and setting |
| -them to <code>true</code> in the branches that assign the various |
| -function expressions. Then if other code is interested in what can be |
| -expected from the <code>getElementWithId</code> function, say in order |
| -to decide how to configure, or default itself, it can check the |
| -pertinent flag. |
| -</p> |
| - |
| -<pre id="bdGEID_ex3"> |
| -var getElementWithId; |
| -var canGetAnyElement = false; <span class="commentJS">//default any element flag</span> |
| -var canGetCSSPositionedElements = false; <span class="commentJS">//default <span class="initialism" title="Cascading Style Sheet"><abbr title="Cascading Style Sheet">CSS</abbr></span> positioned flag</span> |
| -if(document.getElementById){ |
| - canGetAnyElement = true; <span class="commentJS">//set any element flag to true</span> |
| - canGetCSSPositionedElements = true; <span class="commentJS">//set <span class="initialism" title="Cascading Style Sheet"><abbr title="Cascading Style Sheet">CSS</abbr></span> positioned flag true</span> |
| - getElementWithId = ... |
| -}else if(document.all){ |
| - canGetAnyElement = true; <span class="commentJS">//set any element flag to true</span> |
| - canGetCSSPositionedElements = true; <span class="commentJS">//set <span class="initialism" title="Cascading Style Sheet"><abbr title="Cascading Style Sheet">CSS</abbr></span> positioned flag true</span> |
| - getElementWithId = ... |
| -}else if(document.layers){ |
| - canGetCSSPositionedElements = true; <span class="commentJS">//set <span class="initialism" title="Cascading Style Sheet"><abbr title="Cascading Style Sheet">CSS</abbr></span> positioned flag true</span> |
| - <span class="commentJS">/* The - canGetAnyElement - flag is not set in this branch because |
| - the document.layers collection does not make *all* elements |
| - available. |
| - */</span> |
| - getElementWithId = ... |
| -}else{ |
| - <span class="commentJS">/* Neither flag is set when the dummy function is assigned because |
| - it is guaranteed not to be able to retrieve any elements: |
| - */</span> |
| - getElementWithId = function(id){ |
| - return null; |
| - } |
| -} |
| -... |
| -if(canGetCSSPositionedElements){ |
| - <span class="commentJS">/* Expect to be able to retrieve <span class="initialism" title="Cascading Style Sheet"><abbr title="Cascading Style Sheet">CSS</abbr></span> positioned elements. |
| - */</span> |
| - ... |
| - if(canGetAnyElement){ |
| - <span class="commentJS">/* Expect to also be able to retrieve any other elements that |
| - have an ID attribute. |
| - */</span> |
| - ... |
| - } |
| -} |
| -</pre> |
| - |
| -<p id="bdGEID_6"> |
| -The flags do not directly reflect which feature is going to be used |
| -for element retrieval, instead they reflect what can be expected from |
| -the <code>getElementWithId</code> function on the current browser. |
| -Allowing a script that requires a particular level of performance |
| -(say the retrieval of any element) to determine whether it will have |
| -that facility but without denying the facility from a script with a |
| -less demanding requirement. |
| -</p> |
| - |
| -<h3 id="bdScroll">Example 2: Scroll Values</h3> |
| - |
| -<p id="bdScroll_1"> |
| -Another common task that needs to be approached differently on |
| -different browsers is the retrieval of the extent to which the user |
| -has scrolled a web page. The majority of browsers provide properties |
| -of the global object called <code>pageXOffset</code> and |
| -<code>pageYOffset</code>, which hold the relevant values. Some make the |
| -equivalent browsers available as scrollLeft and scrollTop properties on |
| -the "root" element (either in addition to the |
| -<code>pageX/YOffset</code> properties or instead of them). The task is |
| -complicated further by the fact that which element is the |
| -"root" element depends on various factors, it was always the |
| -<code>document.body</code> element in the past but newer (<span class="initialism" title="Cascading Style Sheet"><abbr title="Cascading Style Sheet">CSS</abbr></span>) |
| -standards compliant browsers (and browsers that can operate in various |
| -modes, including standards compliant mode) make the |
| -<code>document.documentElement</code> the root element. Then there may |
| -be browsers that do not make the scrolling values available at all. |
| -</p> |
| - |
| -<p id="bdScroll_2"> |
| -Because the <code>pageXOffset</code> and <code>pageYOffset</code> |
| -properties are implemented on the largest number of browsers, and their |
| -use avoids the need to worry about the "root" element, they |
| -are the preferred values to use. In there absence the problem moves on |
| -to identifying the "root" element, which is made easier by |
| -the browsers that understand standards compliant mode and provide a |
| -<code>document.compatMode</code> string property to announce which mode |
| -they are in. If the string property is missing or the value of that |
| -string is other than <code>"CSS1Compat"</code> then it is the |
| -<code>document.body</code> object that needs to be read for the |
| -scrolling values, else the <code>document.documentElement</code> should |
| -be read. Testing for the presence of any of the scroll values |
| -themselves needs to done with a <code>typeof</code> test because they |
| -are numeric values and if implemented but set to zero a type-converting |
| -test would return <code>false</code> but that would not be an indicator |
| -of their absence. |
| -</p> |
| - |
| -<p id="bdScroll_3"> |
| -The following is an example that employs feature detection to decide |
| -which scroll values to read:- |
| -</p> |
| - |
| -<pre id="bdScroll_ex1"> |
| -<span class="commentJS">/* The - getPageScroll - global variable is assigned a reference to a |
| - function and when that function is called initially it configures |
| - the script to read the correct values, if available, and then |
| - returns a reference to the object - interface - which provides |
| - methods that retrieve the scroll values. Subsequent invocations of |
| - the getPageScroll function do not repeat the configuration, they |
| - just return a reference to the same interface object. Because the |
| - configuration stage may need to check whether the document.body |
| - element exists the function cannot be called until the browser has |
| - parsed the opening body tag as prior to that point there is no |
| - document.body element. |
| - |
| - Usage:- |
| - var scrollInterface = getPageScroll(); |
| - var scrollX = scrollInterface.getScrollX(); |
| - var scrollY = scrollInterface.getScrollY(); |
| - |
| - The interface methods return NaN if the browser provides no method |
| - of reading the scroll values. A returned NaN value can be tested for |
| - with the - isNaN - global function, but it should not be necessary |
| - to perform the isNaN test on more than the first retrieval because |
| - if the returned value is NaN it will always be NaN and if it is not |
| - it should never be. |
| - |
| - if(isNaN(scrollX)){ |
| - //No scroll value retrieval mechanism was available on this browser |
| - } |
| - |
| - (* The script performs an inline execution of a function expression |
| - which returns the function object that is assigned to the - |
| - getPageScroll - global variable. This produces a closure that |
| - preserves the local variables of the executed function expression, |
| - allowing the execution context of the function expression to provide |
| - a repository for the configuration results, keeping them out of the |
| - global namespace. The format is:- |
| - |
| - v--- Anonymous function expression --v |
| - var variable = (function(){ ...; return returnValue; })(); |
| - Inline execution of the function expression ----^^ |
| - |
| - The value returned by the inline execution of the anonymous function |
| - expression is assigned to the variable. If that returned value is a |
| - reference to an inner function object then the assignment will form |
| - a closure.) |
| -*/</span> |
| -var getPageScroll = (function(){ |
| - <span class="commentJS">/* The local variable "global" is assigned the value - this - |
| - because the function expression is executing in the global |
| - context and - this - refers to the global object in that |
| - context. The global object is usually the - window - object on |
| - web browsers but this local variable is going to be used in the |
| - configuration tests for convenience: |
| - */</span> |
| - var global = this; |
| - <span class="commentJS">/* notSetUp - Is a flag to indicate when the script has done the |
| - setup configuration: |
| - */</span> |
| - var notSetUp = true; |
| - <span class="commentJS">/* readScroll - Is initially a dummy object that is used to return |
| - the NaN values whenever no functional scroll value retrieval |
| - mechanism is available on the browser. It is assigned a |
| - reference to the object from which the scroll values can be read |
| - if the feature detection determines that to be possible: |
| - */</span> |
| - var readScroll = {scrollLeft:NaN,scrollTop:NaN}; |
| - <span class="commentJS">/* Using the local variables - readScrollX - and readScrollY - to |
| - hold the property names allows the same functions to read both |
| - the pageX/YOffset properties of the global object and the |
| - scrollTop/Left properties of the "root" element by assigning |
| - different values to the variables. These are the defaults: |
| - */</span> |
| - var readScrollX = 'scrollLeft'; |
| - var readScrollY = 'scrollTop'; |
| - <span class="commentJS">/* The - itrface - local variable is assigned a reference to an |
| - object and it is this object that is returned whenever |
| - getPageScroll() is called. The object has two properties, |
| - getScrollX and getScrollY, which are assigned the values of two |
| - anonymous function expressions. These functions are inner |
| - functions and as a result have access to the local variables of |
| - the function that contains them (the anonymous function |
| - expression that is executed inline in order to assign value to |
| - the getPageScroll global variable). The use a square bracket |
| - property accessor to read a value of whatever object has been |
| - assigned to the variable - readScroll - with a property name |
| - that corresponds to the value assigned to whichever of the |
| - variables - readScrollX - or - readScrollY - are employed, |
| - allows the functions to use the simplest code poible to provide |
| - values for all of the possible permutations resting from the |
| - feature detection derived configuration: |
| - */</span> |
| - var itrface = { |
| - getScrollX:function(){ |
| - return readScroll[readScrollX]; |
| - }, |
| - getScrollY:function(){ |
| - return readScroll[readScrollY]; |
| - } |
| - }; |
| - <span class="commentJS">/* The - setUp - inner function is called to perform the feature |
| - detection and configure the variables that will be employed in |
| - reading the correct scroll values. It sets the - notSetUp - flag |
| - to false once it has been executed so that configuration only |
| - happens the first time that a request for the interface object |
| - is made: |
| - */</span> |
| - function setUp(){ |
| - <span class="commentJS">/* As the paeX/YOffset properties are the preferred values to |
| - use they are tested for first. They are not both tested |
| - because if one exists the other can be assumed to exist for |
| - symmetry. The testing method is a - typeof - test to see if |
| - the value is a number. A type-converting test cannot be used |
| - because the number zero would result in boolean false and a |
| - pageXOffset value will be zero if the page has not been |
| - scrolled: |
| - */</span> |
| - if(typeof global.pageXOffset == 'number'){ |
| - <span class="commentJS">/* If pageXOffset is a number then the value of the - |
| - global - variable (assigned a reference to the global |
| - object earlier) is assigned to the - readScroll - |
| - variable and the strings "pageXOffset" and "pageYOffset" |
| - are assigned to the - readScrollX - and - readScrollY - |
| - variables so they will be the property names used to |
| - access the - readScroll- (now the global) object. |
| - */</span> |
| - readScroll = global; |
| - readScrollY = 'pageYOffset'; |
| - readScrollX = 'pageXOffset'; |
| - }else{ |
| - <span class="commentJS">/* If pageXOffset is undefined it is time to find out which |
| - object is the "root" element. First, does the browser |
| - have a - document.compatMode - string, if it does then |
| - is its value "BackCompat", "QuirksMode" or "CSS1Compat". |
| - Instead of comparing the string directly it is searched |
| - for the substring "<span class="initialism" title="Cascading Style Sheet"><abbr title="Cascading Style Sheet">CSS</abbr></span>" which might make the script more |
| - robust in the face of possible future "CSSnCompat" |
| - modes, which are unlikely to demand that the "root" |
| - element is moved again. |
| - |
| - The tests also verifies that there is a - |
| - document.documentElement - to read and that its |
| - - scrollLeft - property is a number: |
| - */</span> |
| - if((typeof document.compatMode == 'string')&& |
| - (document.compatMode.indexOf('CSS') >= 0)&& |
| - (document.documentElement)&& |
| - (typeof document.documentElement.scrollLeft=='number')){ |
| - <span class="commentJS">/* The - readScrollX - and - readScrollY - variables |
| - are already defaulted to the required strings so it |
| - is only necessary to assign a reference to the - |
| - document.documentElement - to the - readScroll - |
| - variable: |
| - */</span> |
| - readScroll = document.documentElement; |
| - <span class="commentJS">/* If the browser is not in the appropriate mode the scroll |
| - values should be read from the document.body - element, |
| - assuming it exists on this browser and that the |
| - - scrollLeft - property is a number: |
| - */</span> |
| - }else if((document.body)&& |
| - (typeof document.body.scrollLeft == 'number')){ |
| - <span class="commentJS">/* The - readScrollX - and - readScrollY - variables |
| - are already defaulted to the required strings so it |
| - is only necessary to assign a reference to the - |
| - document.body - to the - readScroll - variable: |
| - */</span> |
| - readScroll = document.body; |
| - } |
| - <span class="commentJS">/* No other scroll value reading options exist so if - |
| - readScroll - has not been assigned a new value by this |
| - point it will remain a reference to the object with the |
| - NaN value properties. |
| - */</span> |
| - } |
| - notSetUp = false; <span class="commentJS">//No need to repeat configuration.</span> |
| - } |
| - <span class="commentJS">/* The inline execution of the anonymous function expression |
| - returns with the following statement. It returns an inner |
| - function expression and it is that function that will be called |
| - when getPageScroll() is executed. Doing this forms a closure, |
| - preserving all of the local variables and functions defined |
| - within the executed anonymous function expression. Calling that |
| - returned function as - getPageScroll() - executes the setUp |
| - function, but only if it has not already been called, and |
| - returns a reference to the - itrface - object. |
| - */</span> |
| - return (function(){ |
| - if(notSetUp){ <span class="commentJS">//If the - notSetUp - variable is still true.</span> |
| - setUp(); <span class="commentJS">//Execute the - setUp - function.</span> |
| - } |
| - return itrface; <span class="commentJS">//returns a reference to - itrface</span> |
| - }); |
| -})(); <span class="commentJS">//inline-execution of anonymous function expression, one-off!</span> |
| -</pre> |
| - |
| -<p id="bdScroll_4"> |
| -The effect of this code is to match the browser's ability to provide |
| -the scrolling information with a script's desire to read it through a |
| -simple and efficient interface that acts based on the results of |
| -featured detecting tests that it applies only once, and if the browser |
| -does not support any methods of reading the scroll values the return |
| -values form the interface method indicate that fact by being NaN. It |
| -does not matter that Netscape 4 will be reading the global |
| -<code>pageX/YOffset</code> properties, that IE 4 will read the |
| -<code>scrollTop/Left</code> properties from <code>document.body</code> |
| -or that IE 6 will read those values from one of two possible objects |
| -based on the <code>document.compatMode</code> value. What is important |
| -is that if unknown browser XYZ provides any of those mechanisms for |
| -reporting the scroll values the script is going to be able to use them, |
| -without ever knowing (or caring) that it is browser XYZ that it is |
| -executing on. |
| -</p> |
| - |
| -<h3 id="bdReplace">Example 3: String.prototype.replace</h3> |
| - |
| -<p id="bdReplace_1"> |
| -Feature detecting is not restricted to features of the DOM, it can be |
| -extended to include features of the javascript language implementation. |
| -For example the <code>String.prototype.replace</code> function in later |
| -language versions will accept a function reference as its second |
| -argument, while earlier versions only accept a string in that context. |
| -Code that wants to use the function argument facility of the |
| -<code>replace</code> method will fail badly if it is not supported on |
| -the browser. |
| -</p> |
| - |
| -<p id="bdReplace_2"> |
| -As usual, a feature-detecting test for the implementation's ability to |
| -support function arguments with the <code>replace</code> method has to |
| -be a direct test on that feature. The following example test takes |
| -advantage of the fact that a browser that only supports the string |
| -argument version of <code>replace</code> will type-convert a function |
| -reference used in that context into a string. The <code>replace</code> |
| -method uses a Regular Expression (its first argument) to |
| -identify parts of a string and then replaces them with a string that is |
| -provided as its second argument. If the second argument is a function, |
| -and the browser supports the function argument, that function is called |
| -and its return value replaces the identified parts of the string. |
| -</p> |
| - |
| -<p id="bdReplace_3"> |
| -By providing a function expression that returns an empty string as its |
| -second argument and a Regular Expression that identifies the entire |
| -original string as the first argument, the operation of the |
| -<code>replace</code> method will result in an empty string if the |
| -function argument is supported. But if only string arguments are |
| -supported then the function will be type-converted into a string and |
| -that string will not be an empty string so the result of the |
| -evaluation of the <code>replace</code> method will not be an empty |
| -string. Applying a NOT (<code>!</code>) operation to the resulting |
| -string type-converts the empty string into a boolean value, inverts |
| -it and returns <code>true</code>, the non-empty string would result |
| -in <code>false</code>. |
| -</p> |
| - |
| -<pre id="bdReplace_ex1"> |
| -<span class="commentJS">/* The original string is the one letter string literal "a". The |
| - Regular Expression /a/ identifies that entire string, so it is the |
| - entire original string that will be replaced. The second argument is |
| - the function expression - function(){return '';} -, so the entire |
| - original string will be replaced with an empty string if the |
| - function expression is executed. If it is instead type-converted |
| - into a string that string will not be an empty string. The NOT (!) |
| - operation type-converts its operand to boolean and then inverts it |
| - so the results of the test is boolean true if function references |
| - are supported in the second argument for the - replace - method, and |
| - false when not supported: |
| -*/</span> |
| -if(!('a'.replace(/a/, (function(){return '';})))){ |
| - ... <span class="commentJS">//function references OK.</span> |
| -}else{ |
| - ... <span class="commentJS">//no function references with replace.</span> |
| -} |
| -</pre> |
| - |
| -<p id="bdReplace_4"> |
| -The common thread with feature detecting is that it is the code that is |
| -going to use the features, and the nature of those features, that |
| -defines how support for the required feature needs to be tested. Once |
| -you get used to the idea it starts to become obvious which tests need |
| -to be applied to verify a browser's support for a feature, and then it |
| -is time to work on the efficient application of feature detection. |
| -</p> |
| - |
| -<h2 id="bdDesPb">The Javascript Design Problem</h2> |
| - |
| -<p id="bdDesPb_1"> |
| -Javascript as a language is not that complex, it may have its quirks |
| -but it can be defined entirely in the 173 pages of the ECMA |
| -specification (3rd edition). The challenge of authoring javascript |
| -comes form the diversity of execution environments. When authoring for |
| -the Internet nothing is known about the receiving software in advance, |
| -and even when that software is a web browser that will execute |
| -javascript, there is still a spectrum of possible DOM implementations |
| -to contend with. |
| -</p> |
| - |
| -<p id="bdDesPb_2"> |
| -The combination of the facts that it is impossible to determine which |
| -browser is executing the script, and that it is impossible to be |
| -familiar with all browser DOMs can be rendered insignificant by using |
| -feature detection to match code execution with any browser's ability to |
| -support it. But there is still going to be a diversity of |
| -outcomes, ranging from total failure to execute any scripts (on |
| -browsers that do not support javascript, or have it disabled) to full |
| -successful execution on the most capable javascript enabled browsers. |
| -</p> |
| - |
| -<p id="bdDesPb_3"> |
| -The challenge when designing scripts is to cope with all of the |
| -possibilities in a way that makes sense for everyone. As those |
| -possibilities will always include browsers incapable of executing |
| -javascript at all, the starting point must be pages based on (valid) |
| -<span class="initialism" title="HyperText Mark-up Language"><abbr title="HyperText Mark-up Language">HTML</abbr></span> that contain all of the required content, allow the necessary |
| -navigation and are as functional as they purport to be (possibly with |
| -the backing of server-side scripting, which does not have any of the |
| -problems of client side scripting). On top of that reliable foundation |
| -it is possible to layer the scripts. Feature detecting and adding |
| -scripted enhancements when the browser is capable of supporting them, |
| -cleanly degrading to the underlying and reliable <span class="initialism" title="HyperText Mark-up Language"><abbr title="HyperText Mark-up Language">HTML</abbr></span> when it is not. |
| -</p> |
| - |
| -<p id="bdDesPb_4"> |
| -A well designed script, implementing a suitable strategy, can enhance |
| -the underlying <span class="initialism" title="HyperText Mark-up Language"><abbr title="HyperText Mark-up Language">HTML</abbr></span> page, exploiting the browser's capabilities to the |
| -maximum extent possible and still exhibit planed behaviour in the |
| -absence of any (or all) desired features and degrade cleanly where |
| -necessary. Nobody should either consider themselves a skilled Internet |
| -javascript author, or deprecate javascript as a language and/or browser |
| -scripting as a task, until they have demonstrated an ability to write |
| -a non-trivial script that achieves that goal. |
| -</p> |
| -</body> |
| -</html> |
| /cljs/notes/detect-browser/index.html |
| Property changes: |
| Deleted: svn:mime-type |
| ## -1 +0,0 ## |
| -text/plain |
| \ No newline at end of property |
| Index: cljs/notes/index.html |
| =================================================================== |
| --- cljs/notes/index.html (revision 45) |
| +++ cljs/notes/index.html (nonexistent) |
| @@ -1,90 +0,0 @@ |
| -<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" |
| -"http://www.w3.org/TR/html4/strict.dtd"> |
| -<html lang="en"> |
| -<head> |
| -<title>Notes on the comp.lang.javascript FAQ</title> |
| -<meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1"> |
| -<link href="../faq.css" rel="stylesheet" type="text/css"> |
| -<link href="notes.css" rel="stylesheet" type="text/css"> |
| -</head> |
| -<body> |
| - |
| -<h1>Notes on the comp.lang.javascript FAQ</h1> |
| - |
| -<div id="faqNav"> |
| - <a href="../">FAQ</a> > FAQ Notes |
| -</div> |
| - |
| -<h2 id="toc">Table of Contents</h2> |
| -<ul id="contTable"> |
| - <li>Posting tips |
| - <ul> |
| - <li> |
| - <a href="posting/">Questions and Replies</a> |
| - </li> |
| - <li> |
| - <a href="code-guidelines/">Code Guidelines</a> |
| - </li> |
| - <li> |
| - <a href="review/">Code Review Guidelines</a> |
| - </li> |
| - </ul> |
| - </li> |
| - <li>Numbers |
| - <dl> |
| - <dt>Why does K = parseInt('09') set K to 0?</dt> |
| - <dd><a href="type-conversion/#tcPrIntRx" |
| - >Javascript Type-Conversion - parseInt with a radix argument</a> |
| - </dd> |
| - </dl> |
| - </li> |
| - <li>DOM and Forms |
| - <dl> |
| - <!--dt>How can I see in javascript if a web browser accepts cookies?</dt> |
| - <dd> |
| - <a href="cookies/">Privacy filters on proxies</a> |
| - </dd--> |
| - <dt> |
| - How do I get the value of a form control? |
| - </dt> |
| - <dd> |
| - <a href="form-access/">Referencing Forms and Form Controls</a> |
| - </dd> |
| - <dd> |
| - <a href="/faq/names/">Unsafe Names for Form Controls</a> |
| - </dd> |
| - <dt>How do I detect Opera/Netscape/IE?</dt> |
| - <dd> |
| - <a href="detect-browser/">Browser Detection (and What to Do Instead)</a> |
| - </dd> |
| - <!-- |
| - <dt>My element is named myselect[], how do I access it?</dt> |
| - <dd> |
| - <a href="square_brackets/">Javascript Square Bracket Notation - Illegal characters in Identifier-strings</a> |
| - </dd> |
| - <dt>How do I access the property of an object using a string? |
| - <dd><a href="square_brackets">Javascript Square Bracket Notation</a> |
| - </dd> |
| - --> |
| - </dl> |
| - </li> |
| - <li>Functions |
| - <ul> |
| - <li><a href="closures/">Javascript Closures</a></li> |
| - <li><a href="http://kangax.github.io/nfe/">Named Function Expressions</a></li> |
| - </ul> |
| - </li> |
| - |
| - <!--li>Miscellaneous |
| - <ol> |
| - <li><a href="charter/">The comp.lang.javascript Charter</a></li> |
| - <li><a href="script_tags/">How to Include Scripts in |
| - <abbr class="initialism" title="HyperText Mark-up Language">HTML</abbr> Documents</a></li> |
| - <li><a href="misc/">Tricks and Tips</a></li> |
| - </ol> |
| - </li--> |
| - <!--li><a href="contributors/">Contributors</a></li--> |
| -</ul> |
| - |
| -</body> |
| -</html> |
| /cljs/notes/index.html |
| Property changes: |
| Deleted: svn:mime-type |
| ## -1 +0,0 ## |
| -text/plain |
| \ No newline at end of property |
| Index: cljs/notes/square-brackets/index.html |
| =================================================================== |
| --- cljs/notes/square-brackets/index.html (revision 45) |
| +++ cljs/notes/square-brackets/index.html (nonexistent) |
| @@ -1,373 +0,0 @@ |
| -<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" |
| -"http://www.w3.org/TR/html4/strict.dtd"> |
| -<html lang="en"> |
| -<head> |
| -<title>Square Bracket Notation</title> |
| -<meta http-equiv="Content-Type" CONTENT="text/html; charset=iso-8859-1"> |
| -<link href="../../faq.css" rel="stylesheet" type="text/css"> |
| -<link href="../notes.css" rel="stylesheet" type="text/css"> |
| -<meta name="ROBOTS" content="NOINDEX NOFOLLOW"> |
| -</head> |
| -<body> |
| -<h1>Javascript Square Bracket Notation</h1> |
| -<div id="faqNav"> |
| - <a href="../../">FAQ</a> > <a href="../">FAQ Notes</a> |
| - |
| -</div> |
| -<ul> |
| - <li><a href="#intro">Introduction</a></li> |
| - <li><a href="#sBs">Square Bracket Syntax</a></li> |
| - <li><a href="#vId">String Variables as Identifiers</a></li> |
| - <li><a href="#eId">String Expressions as Identifiers</a></li> |
| - <li><a href="#aVa">Global Variable access with the Square Bracket Notation</a></li> |
| - <li><a href="#illc">Illegal characters in Identifier-strings</a></li> |
| -</ul> |
| -<h2 id="intro">Introduction</h2> |
| - |
| -<p id="intro_1">To be useful javascript needs to be able to access the properties of |
| -objects. It is impossible to learn javascript without understanding the |
| -dot notation that is normally used to access the properties of objects. |
| -</p> |
| - |
| -<p id="intro_2">Javascript also offers an alternative property accessor notation |
| -using square brackets in a way that is similar to the way in which the |
| -indexed members of an Array are accessed, except that a string is used |
| -between the square brackets. This alternative notation is extremely |
| -powerful and useful but gets very little coverage in most books on |
| -javascript and that seems to leave novice javascript programmers |
| -unaware that they even have this option.</p> |
| - |
| -<p id="intro_3">The coverage in javascript books can be very poor. Looking back at |
| -some of the books that I first used to learn javascript, one devotes |
| -exactly one paragraph to property accessors and another actually states |
| -that the square bracket notation can only be used with integer indexes |
| -to access Arrays and array-like structures.</p> |
| - |
| -<p id="intro_4">With an understanding of dot notation and few clues that an |
| -alternative exists, novice (and a few surprisingly experienced) |
| -javascript programmers often turn to the <code>eval</code> function, |
| -constructing a string that represents a dot notation accessor |
| -(frequently retrieving the property names from javascript variables) |
| -and then passing it to the <code>eval</code> function in order to |
| -access the object property that it refers to. The <code>eval</code> |
| -function is just not needed to perform this type of property access |
| -and it is a relatively inefficient way of doing so (plus, some embedded |
| -browsers lack the resources to implement an <code>eval</code> function). |
| -</p> |
| - |
| -<h2 id="sBs">Square Bracket Syntax</h2> |
| -<p id="sBs_1">If you can access the property of an object using dot |
| -notation, such as:-</p> |
| - |
| -<pre id="sBs_ex1">document.body</pre> |
| - |
| -<p id="sBs_2">- you can also use the square bracket notation:-</p> |
| - |
| -<pre id="sBs_ex2">document['body']</pre> |
| - |
| -<p id="sBs_3">- in which the dot and the identifier to the right of the dot are |
| -replaced with a set of square brackets containing a string that |
| -represents the identifier that was to the right of the dot.</p> |
| - |
| -<p id="sBs_4">The Property Accessors section of javascript language specification |
| -(ECMA 262) makes it clear that the dot notation and the square bracket |
| -notation are parallel ways of accessing the properties of objects.</p> |
| - |
| -<blockquote cite="http://www.ecma-international.org/publications/files/ecma-st/Ecma-262.pdf"> |
| -<dl> |
| - <dt>ECMA 262 3rd Edition. Section 11.2.1 Property Accessors</dt> |
| - <dd> |
| - Properties are accessed by name, using either the dot notation: |
| -<pre > |
| -MemberExpression.Identifier |
| -CallExpression.Identifier |
| -</pre> |
| - or the bracket notation: |
| -<pre> |
| -MemberExpression[ Expression ] |
| -CallExpression[ Expression ] |
| -</pre> |
| - The dot notation is explained by the following syntactic conversion: |
| - <pre>MemberExpression.Identifier</pre> |
| - is identical in its behaviour to |
| - <pre>MemberExpression[ <identifier-string> ]</pre> |
| - and similarly |
| - <pre>CallExpression.Identifier</pre> |
| - is identical in its behaviour to |
| - <pre >CallExpression[ <identifier-string> ]</pre> |
| - where <code><identifier-string></code> is a string literal |
| - containing the same sequence of characters as the Identifier. |
| - <dd> |
| -</dl> |
| -</blockquote> |
| - |
| -<p id="sBs_5">In the following simple <span class="initialism" title="HyperText Mark-up Language"><abbr title="HyperText Mark-up Language">HTML</abbr></span> page:-</p> |
| - |
| -<pre id="sBs_ex3"> |
| -<html> |
| - <head> |
| - <title></title> |
| - </head> |
| - <body> |
| - <form name="formName" action="#"> |
| - <input type="text" name="inpName" value="Example value text"> |
| - </form> |
| - </body> |
| -</html> |
| -</pre> |
| - |
| -<p id="sBs_6">- which contains a form named <code>"formName"</code> with |
| -one input element named <code>"inpName"</code>. Various forms |
| -of dot notation property accessor can be used to reference the |
| -<code>"value"</code> property of the input element. One of |
| -the simplest is:-</p> |
| - |
| -<pre id="sBs_ex4"> |
| -var stringOfValue = document.formName.inpName.value; |
| -</pre> |
| - |
| -<p id="sBs_7">This dot notation has three dots, so there are three points at which |
| -the square bracket notation could be used in place of the dot notation |
| -(these are all equivalent).</p> |
| - |
| -<pre id="sBs_ex5"> |
| -var stringOfValue = document["formName"].inpName.value; |
| - |
| -var stringOfValue = document.formName["inpName"].value; |
| - |
| -var stringOfValue = document.formName.inpName["value"]; |
| -</pre> |
| - |
| -<p id="sBs_8">The following combinations are also all equivalent to the original |
| -dot notation:-</p> |
| - |
| -<pre id="sBs_ex6"> |
| -var stringOfValue = document["formName"].inpName["value"]; |
| - |
| -var stringOfValue = document["formName"]["inpName"].value; |
| - |
| -var stringOfValue = document["formName"]["inpName"]["value"]; |
| - |
| -var stringOfValue = window["document"]["formName"]["inpName"]["value"]; |
| -</pre> |
| - |
| -<p id="sBs_9">Where the dot notation follows the dot with the identifier for the |
| -property that is to be accessed, the square bracket notation replaces |
| -the dot and identifier with square brackets that contain a string that |
| -represents the identifier for the property (the property name).</p> |
| - |
| -<h2 id="vId">String Variables as Identifiers</h2> |
| - |
| -<p id="vId_1">The string used within the square brackets does not need to be a |
| -string literal. It can be any expression that results in a string. |
| -This is where the square bracket notation becomes most useful as the |
| -expression could be a reference to a string variable that holds the |
| -property name as its value, or a function call that returns a string, |
| -or an expression that concatenates two strings, or any combination of |
| -these.</p> |
| - |
| -<p id="vId_2">This means that the identifier needed to access a property does not |
| -need to be coded into a javascript. Consider the following simple |
| -function:-</p> |
| - |
| -<pre id="vId_ex1"> |
| -function setPropertyToValue(oObj, sPropName, value){ |
| - oObj[sPropName] = value; |
| -} |
| -</pre> |
| - |
| -<p id="vId_3">- provided with a reference to an object (<code>oObj</code>), the |
| -name of a property (<code>sPropName</code>) and a value for that |
| -property (<code>value</code>), it will set the value of the property |
| -without needing to know what the name of the property that it is |
| -setting is. Called as |
| -<code>setPropertyToValue(document.formName.inpName, "value", "new value")</code> |
| -it will set the value of the field in the example form above to the |
| -string <code>"new value"</code>. However, called as |
| -<code>setPropertyToValue(window, "location", "http://www.google.com")</code> |
| -and the same function will navigate a web browser to the URL provided |
| -as the final parameter. Although this is a forced example you should be |
| -able to see that the square bracket notation offers considerable power |
| -and flexibility.</p> |
| - |
| -<p id="vId_4">Any variable that holds a string value can be used between the |
| -square brackets to form a property accessor. Variables that hold |
| -non-strings will have their value internally type converted into a |
| -string and that string will be used as the property name. This is not very |
| -useful, especially if the variables contain references to objects or |
| -functions, as the returned string is likely to be implementation |
| -dependent.</p> |
| - |
| -<h2 id="eId">String Expressions as Identifiers</h2> |
| - |
| -<p id="eId_1">The ability to build the string used as the property name can be |
| -very useful in loops and with dynamically generating web pages (server |
| -side) that have variable length content. The strings can be the result |
| -of expressions that concatenate string literals with variables |
| -(particularly loop counters).</p> |
| - |
| -<p id="eId_2">Given the form:-</p> |
| - |
| -<pre id="eId_ex1"> |
| -<form name="formName" action="#"> |
| - <input type="text" name="field_1"> |
| - <input type="text" name="field_2"> |
| - <input type="text" name="field_3"> |
| -</form> |
| -</pre> |
| - |
| -<p id="eId_3">- the following loop will clear the value property of each element |
| -it turn:-</p> |
| - |
| -<pre id="eId_ex2"> |
| -for(var c = 1;c < 4;c++){ |
| - document.forms["formName"].elements["field_"+c].value = ""; |
| -} |
| -</pre> |
| - |
| -<p id="eId_4">If a server side process had created the <span class="initialism" title="HyperText Mark-up Language"><abbr title="HyperText Mark-up Language">HTML</abbr></span> form with |
| -<code>n</code> elements, named <code>field_1, field_2 ... field_n</code> |
| -, then all the server side process would have to do to have the loop |
| -clear each and every input element would be to change the <code>4</code> |
| -in the example to the value of <code>n+1</code>.</p> |
| - |
| -<p id="eId_5">Concatenation is the most common type of expression used with the |
| -square bracket notation but any javascript expression could be used. |
| -A function that returned a string could be used.</p> |
| - |
| -<p id="eId_6">In the following (rather contrived) example :-</p> |
| - |
| -<pre id="eId_ex3"> |
| -function getRootElName(){ |
| - if(document.compatMode && (document.compatMode == "CSS1Compat")){ |
| - return "documentElement"; |
| - }else{ |
| - return "body"; |
| - } |
| -} |
| - |
| -var verticalScroll = document[getRootElName()].scrollTop; |
| -</pre> |
| -<p id="eId_7">- the <code>scrollTop</code> value is read from either the |
| -<code>document.body</code> or <code>document.documentElement</code> |
| -depending on the value of <code>document.compatMode</code>. Passing |
| -strings about is far from the best way of achieving what the code |
| -above does but there will be circumstances when returning a string |
| -from a function call for use in a property accessor is potentially |
| -useful.</p> |
| - |
| -<h2 id="aVa">Global Variable access with the Square Bracket Notation</h2> |
| - |
| -<p id="aVa_1">The square bracket notation requires that there be some sort of |
| -object reference to the left of the brackets.</p> |
| - |
| -<pre id="aVa_ex1">["document"] <span class="commentJS">//Array literal, not a Property Accessor!</span></pre> |
| - |
| -<p id="aVa_2">-will produce an error if an attempt is made to assign a value to it, |
| -as it will be treated as an Array literal, if an attempt to read from |
| -it is made the one element array containing the string within the |
| -brackets is returned. Global variables are normally referenced by their |
| -one identifier alone. This would seem to exclude global variables from |
| -the possibility of being referenced using a string that held their |
| -identifier name or an expression that built, or returned, their name. |
| -However, javascript global variables (and global function names for |
| -that matter) are properties of a global object. Any identifier that |
| -holds a reference to the global object can be used to the left of the |
| -square brackets to form a property accessor that refers to a global |
| -variable.</p> |
| - |
| -<p id="aVa_3">In a web browser the global object is the window (or frame) in which |
| -the script is running. Each window (or frame) object contains a number |
| -of properties, at least two of which are references to the window |
| -(global object) itself. These properties are 'window' and 'self'. |
| -These property names can be used as the identifier to the left of the |
| -square brackets when referring to global variables. So given a global |
| -variable defined as:-</p> |
| - |
| -<pre id="aVa_ex2"> |
| -var anyName = 0; |
| -</pre> |
| - |
| -<p id="aVa_4">- that global variable can be referenced as:-</p> |
| - |
| -<pre id="aVa_ex3"> |
| -window["anyName"] |
| -</pre> |
| - |
| -<p id="aVa_5">As with any other use of the square bracket notation, the string |
| -within the brackets can be held in a variable or constructed/returned |
| -by an expression.</p> |
| - |
| -<p id="aVa_6">Code that is executing in the global context, the code within global |
| -functions (except Object constructors invoked with the <code>new</code> |
| -keyword) and inline code outside of any functions, could also use the |
| -<code>this</code> keyword to refer to the global object. The |
| -<code>this</code> keyword refers to an object depending on the |
| -execution context. For code executing in the global context |
| -<code>this</code> is the global object (on a web browser, the window |
| -object). As a result, the above variable could be referred to as |
| -<code>this["anyName"]</code>, but only in code that is |
| -executing in the global context.</p> |
| - |
| -<p id="aVa_7">However, using the <code>this</code> keyword is very likely to be |
| -confusing, especially in scripts that include custom javascript objects |
| -where the methods (and constructors) of those objects would be using |
| -<code>this</code> to refer to their own object instances.</p> |
| - |
| -<p id="aVa_8">Some javascript implementations do not have a property of the global |
| -object that refers to the global object. Rather than trying to use the |
| -<code>this</code> keyword to access global variables it is possible to |
| -create your own global variable that refers to the global object.</p> |
| - |
| -<pre id="aVa_ex4"> |
| -var myGlobal = this; |
| -</pre> |
| - |
| -<p id="aVa_9">- executed as inline code at the start of a script will assign a |
| -reference to the global object (<code>this</code> in that context). |
| -From then on all global variables can be referenced with square bracket |
| -notation as:-</p> |
| - |
| -<pre id="aVa_ex5"> |
| -myGlobal["anyName"]; |
| -</pre> |
| - |
| -<p id="aVa_10">- and expect <code>myGlobal</code> to refer to the global object |
| -from any execution context.</p> |
| - |
| -<h2 id="illc">Illegal characters in Identifier-strings</h2> |
| - |
| -<p id="illc_1">One advantage of the square bracket notation over dot notation is |
| -the ability to use characters in identifier-strings that are not legal |
| -identifier characters. It is generally best to avoid giving javascript |
| -properties names and <span class="initialism" title="HyperText Mark-up Language"><abbr title="HyperText Mark-up Language">HTML</abbr></span> elements names/IDs that are not made up |
| -entirely of characters that are legal in the relevant context. However, |
| -it is not always possible to avoid referencing elements with names that |
| -include characters that would be illegal in a javascript identifier. |
| -PHP offers an example of this, multiple form elements given the same |
| -name followed with empty square brackets, such as |
| -<code>name="inpEl[]"</code>, are made available on the server |
| -as an array.</p> |
| - |
| -<p id="illc_2">The square bracket notation would allow an element with such a name |
| -to be referenced as <code> document.forms["formName"].elements["inpEl[]"][0]</code> |
| -for example (the final <code>[0]</code> reflects the fact that |
| -multiple elements with the same name, when accessed by name, generate |
| -collections of elements and individual elements within that collection |
| -need to be referenced by index).</p> |
| - |
| -<ul style="list-style-type:none;margin-top:2.5em;"> |
| - <li>Written by <span class="person">Richard Cornford</span>. March 2003.</li> |
| - <li>With technical corrections and suggestions by:-<br> |
| - <ul style="list-style-type:none;"> |
| - <li><span class="person">Yann-Erwan Perio (Yep)</span>. (Also, thanks for testing the use |
| - of <code>this</code> to reference the global object in WSH |
| - and ASP2.) |
| - </li> |
| - <li><span class="person">Lasse Reichstein Nielsen</span>.</li> |
| - <li><span class="person">Dr John Stockton</span>.</li> |
| - </ul> |
| - </li> |
| -</ul> |
| -</body> |
| -</html> |
| /cljs/notes/square-brackets/index.html |
| Property changes: |
| Deleted: svn:mime-type |
| ## -1 +0,0 ## |
| -text/plain |
| \ No newline at end of property |
| Index: cljs/notes/closures/index.html |
| =================================================================== |
| --- cljs/notes/closures/index.html (revision 45) |
| +++ cljs/notes/closures/index.html (nonexistent) |
| @@ -1,1574 +0,0 @@ |
| -<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" |
| - "http://www.w3.org/TR/html4/strict.dtd"> |
| -<html lang="en"> |
| -<head> |
| -<title>Javascript Closures</title> |
| -<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> |
| -<link href="../../faq.css" rel="stylesheet" type="text/css"> |
| -<link href="../notes.css" rel="stylesheet" type="text/css"> |
| -<style type="text/css"> |
| -CODE { white-space:nowrap; } |
| -.scopeCh { |
| - white-space:nowrap; |
| - font-family:Courier, monospace; |
| -} |
| -</style> |
| -</head> |
| -<body> |
| - |
| -<h1>Javascript Closures</h1> |
| -<div id="faqNav"> |
| - <a href="../../">FAQ</a> > <a href="../">FAQ Notes</a> |
| -</div> |
| - |
| -<ul> |
| - <li><a href="#clIntro">Introduction</a></li> |
| - <li><a href="#clResO">The Resolution of Property Names on Objects</a> |
| - <ul> |
| - <li><a href="#clResA">Assignment of Values</a></li> |
| - <li><a href="#clResR">Reading of Values</a></li> |
| - </ul> |
| - </li> |
| - <li><a href="#clIRExSc">Identifier Resolution, Execution Contexts and scope chains</a> |
| - <ul> |
| - <li><a href="#clExCon">The Execution Context</a></li> |
| - <li><a href="#clScCh">scope chains and [[scope]]</a></li> |
| - <li><a href="#clIdRes">Identifier Resolution</a></li> |
| - </ul> |
| - </li> |
| - <li><a href="#clClose">Closures</a> |
| - <ul> |
| - <li><a href="#clAtGb">Automatic Garbage Collection</a></li> |
| - <li><a href="#clFrmC">Forming Closures</a></li> |
| - </ul> |
| - </li> |
| - <li><a href="#clClDo">What can be done with Closures?</a> |
| - <ul> |
| - <li><a href="#clSto">Example 1: setTimeout with Function References</a></li> |
| - <li><a href="#clObjI">Example 2: Associating Functions with Object Instance Methods</a></li> |
| - <li><a href="#clEncap">Example 3: Encapsulating Related Functionality</a></li> |
| - <li><a href="#clOtE">Other Examples</a></li> |
| - </ul> |
| - </li> |
| - <li><a href="#clAc">Accidental Closures</a></li> |
| - <li><a href="#clMem">The Internet Explorer Memory Leak Problem</a></li> |
| -</ul> |
| - |
| -<h2 id="clIntro">Introduction</h2> |
| - |
| -<blockquote cite="http://groups.google.com/groups?selm=wu535hos.fsf@hotpop.com"> |
| - <dl> |
| - <dt id="clDefN">Closure</dt> |
| - <dd>A "closure" is an expression (typically a function) that |
| - can have free variables together with an environment that binds |
| - those variables (that "closes" the expression). |
| - <dd> |
| - </dl> |
| -</blockquote> |
| - |
| -<p> |
| -Closures are one of the most powerful features of ECMAScript |
| -(javascript) but they cannot be property exploited without |
| -understanding them. They are, however, relatively easy to create, |
| -even accidentally, and their creation has potentially harmful |
| -consequences, particularly in some relatively common web browser |
| -environments. To avoid accidentally encountering the drawbacks and |
| -to take advantage of the benefits they offer it is necessary to |
| -understand their mechanism. This depends heavily on the role of |
| -scope chains in identifier resolution and so on the resolution of |
| -property names on objects. |
| -</p> |
| - |
| -<p> |
| -The simple explanation of a Closure is that ECMAScript allows inner |
| -functions; function definitions and function expressions that are |
| -inside the function bodes of other functions. And that those inner |
| -functions are allowed access to all of the local variables, parameters |
| -and declared inner functions within their outer function(s). A closure |
| -is formed when one of those inner functions is made accessible outside |
| -of the function in which it was contained, so that it may be executed |
| -after the outer function has returned. At which point it still has |
| -access to the local variables, parameters and inner function |
| -declarations of its outer function. Those local variables, parameter |
| -and function declarations (initially) have the values that they had |
| -when the outer function returned and may be interacted with by the |
| -inner function. |
| -</p> |
| - |
| -<p> |
| -Unfortunately, properly understanding closures requires an |
| -understanding of the mechanism behind them, and quite a bit of |
| -technical detail. While some of the ECMA 262 specified algorithms have |
| -been brushed over in the early part of the following explanation, much |
| -cannot be omitted or easily simplified. Individuals familiar with |
| -object property name resolution may skip that section but only people |
| -already familiar with closures can afford to skip the following |
| -sections, and they can stop reading now and get back to exploiting |
| -them. |
| -</p> |
| - |
| -<h2 id="clResO">The Resolution of Property Names on Objects</h2> |
| - |
| -<p> |
| -ECMAScript recognises two categories of object, "Native Object" |
| -and "Host Object" with a sub-category of native objects called |
| -"Built-in Object" (ECMA 262 3rd Ed Section 4.3). Native objects |
| -belong to the language and host objects are provided by the environment, |
| -and may be, for example, document objects, DOM nodes and the like. |
| -</p> |
| - |
| -<p> |
| -Native objects are loose and dynamic bags of named properties (some |
| -implementations are not that dynamic when it comes to the built in |
| -object sub-category, though usually that doesn't matter). The defined |
| -named properties of an object will hold a value, which may be a |
| -reference to another Object (functions are also Objects in this sense) |
| -or a primitive value: String, Number, Boolean, Null or Undefined. The |
| -Undefined primitive type is a bit odd in that it is possible to assign |
| -a value of Undefined to a property of an object but doing so does not |
| -remove that property from the object; it remains a defined named |
| -property, it just holds the value <code>undefined</code>. |
| -</p> |
| - |
| -<p> |
| -The following is a simplified description of how property values are |
| -read and set on objects with the internal details brushed over to the |
| -greatest extent possible. |
| -</p> |
| - |
| -<h3><a name="clResA" id="clResA">Assignment of Values</a></h3> |
| - |
| -<p> |
| -Named properties of objects can be created, or values set on existing |
| -named properties, by assigning a value to that named property. So |
| -given:- |
| -</p> |
| - |
| -<pre> |
| -var objectRef = new Object(); <span class="commentJS">//create a generic javascript object.</span> |
| -</pre> |
| - |
| -<p> |
| -A property with the name "testNumber" can be created as:- |
| -</p> |
| - |
| -<pre> |
| -objectRef.testNumber = 5; |
| -<span class="commentJS">/* - or:- */</span> |
| -objectRef["testNumber"] = 5; |
| -</pre> |
| - |
| -<p> |
| -The object had no "testNumber" property prior to the |
| -assignment but one is created when the assignment is made. Any |
| -subsequent assignment does not need to create the property, it just |
| -re-sets its value:- |
| -</p> |
| - |
| -<pre> |
| -objectRef.testNumber = 8; |
| -<span class="commentJS">/* - or:- */</span> |
| -objectRef["testNumber"] = 8; |
| -</pre> |
| - |
| -<p> |
| -Javascript objects have prototypes that can themselves be objects, as |
| -will be described shortly, and that prototype may have named |
| -properties. But this has no role in assignment. If a value is assigned |
| -and the actual object does not have a property with the corresponding |
| -name a property of that name is created and the value is assigned to |
| -it. If it has the property then its value is re-set. |
| -</p> |
| - |
| -<h3><a name="clResR" id="clResR">Reading of Values</a></h3> |
| - |
| -<p> |
| -It is in reading values from object properties that prototypes come |
| -into play. If an object has a property with the property name used in |
| -the property accessor then the value of that property is returned:- |
| -</p> |
| - |
| -<pre> |
| -<span class="commentJS">/* Assign a value to a named property. If the object does not have a |
| - property with the corresponding name prior to the assignment it |
| - will have one after it:- |
| -*/</span> |
| -objectRef.testNumber = 8; |
| - |
| -<span class="commentJS">/* Read the value back from the property:- */</span> |
| - |
| -var val = objectRef.testNumber; |
| -<span class="commentJS">/* and - val - now holds the value 8 that was just assigned to the |
| - named property of the object. */</span> |
| - </pre> |
| - |
| -<p> |
| -But all objects may have prototypes, and prototypes are objects so they, in |
| -turn, may have prototypes, which may have prototypes, and so on forming |
| -what is called the prototype chain. The prototype chain ends when one |
| -of the objects in the chain has a null prototype. The default prototype for the |
| -<code>Object</code> constructor has a null prototype so:- |
| -</p> |
| - |
| -<pre> |
| -var objectRef = new Object(); <span class="commentJS">//create a generic javascript object.</span> |
| -</pre> |
| - |
| -<p> |
| -Creates an object with the prototype <code>Object.prototype</code> that itself has a |
| -null prototype. So the prototype chain for <code>objectRef</code> contains only one |
| -object: <code>Object.prototype</code>. However:- |
| -</p> |
| - |
| -<pre> |
| -<span class="commentJS">/* A "constructor" function for creating objects of a - |
| - MyObject1 - type. |
| -*/</span> |
| -function MyObject1(formalParameter){ |
| - <span class="commentJS">/* Give the constructed object a property called - testNumber - and |
| - assign it the value passed to the constructor as its first |
| - argument:- |
| - */</span> |
| - this.testNumber = formalParameter; |
| -} |
| - |
| -<span class="commentJS">/* A "constructor" function for creating objects of a - |
| - MyObject2 - type:- |
| -*/</span> |
| -function MyObject2(formalParameter){ |
| - <span class="commentJS">/* Give the constructed object a property called - testString - |
| - and assign it the value passed to the constructor as its first |
| - argument:- |
| - */</span> |
| - this.testString = formalParameter; |
| -} |
| - |
| -<span class="commentJS">/* The next operation replaces the default prototype associated with |
| - all MyObject2 instances with an instance of MyObject1, passing the |
| - argument - 8 - to the MyObject1 constructor so that its - |
| - testNumber - property will be set to that value:- |
| -*/</span> |
| -MyObject2.prototype = new MyObject1( 8 ); |
| - |
| -<span class="commentJS">/* Finally, create an instance of - MyObject2 - and assign a reference |
| - to that object to the variable - objectRef - passing a string as the |
| - first argument for the constructor:- |
| -*/</span> |
| - |
| -var objectRef = new MyObject2( "String_Value" ); |
| -</pre> |
| - |
| -<p> |
| -The instance of <code>MyObject2</code> referred to by the <code>objectRef</code> variable has a |
| -prototype chain. The first object in that chain is the instance of |
| -<code>MyObject1</code> that was created and assigned to the prototype |
| -property of the <code>MyObject2</code> constructor. The instance of |
| -<code>MyObject1</code> has a prototype, the object that was assigned to the function |
| -<code>MyObject1</code>'s prototype property by the implementation. That object has |
| -a prototype, the default <code>Object</code> prototype that corresponds with the |
| -object referred to by <code>Object.prototype</code>. <code>Object.prototype</code> has a null |
| -prototype so the prototype chain comes to an end at this point. |
| -</p> |
| -<p> |
| -When a property accessor attempts to read a named property form the |
| -object referred to by the variable <code>objectRef</code> the whole |
| -prototype chain can enter into the process. In the simple case:- |
| -</p> |
| - |
| -<pre> |
| -var val = objectRef.testString; |
| -</pre> |
| - |
| -<p> |
| -- the instance of <code>MyObject2</code> referred to by <code>objectRef</code> has |
| -a property with the name "testString" so it is the value of |
| -that property, set to "String_Value", that is assigned to the |
| -variable <code>val</code>. However:- |
| -</p> |
| - |
| -<pre> |
| -var val = objectRef.testNumber; |
| -</pre> |
| - |
| -<p> |
| -- cannot read a named property form the instance of |
| -<code>MyObject2</code> itself as it has no such property but the |
| -variable <code>val</code> is set to the value of <code>8</code> rather |
| -than undefined because having failed to find a corresponding named |
| -property on the object itself the interpreter then examines the object |
| -that is its prototype. Its prototype is the instance of |
| -<code>MyObject1</code> and it was created with a property named |
| -"testNumber" with the value <code>8</code> assigned to that property, so |
| -the property accessor evaluates as the value <code>8</code>. Neither |
| -<code>MyObject1</code> or <code>MyObject2</code> have defined a |
| -<code>toString</code> method, but if a property accessor attempts to |
| -read the value of a <code>toString</code> property from |
| -<code>objectRef</code>:- |
| -</p> |
| - |
| -<pre> |
| -var val = objectRef.toString; |
| -</pre> |
| - |
| -<p> |
| -- the <code>val</code> variable is assigned a reference to a function. |
| -That function is the <code>toString</code> property of |
| -<code>Object.prototype</code> and is returned because the process of |
| -examining the prototype of <code>objectRef</code>, when |
| -<code>objectRef</code> turns out not to have a "toString" |
| -property, is acting on an object, so when that prototype is found to |
| -lack the property its prototype is examined in turn. Its prototype |
| -is <code>Object.prototype</code>, which does have a |
| -<code>toString</code> method so it is a reference to that function |
| -object that is returned. |
| -</p> |
| - |
| -<p> |
| -Finally:- |
| -</p> |
| - |
| -<pre> |
| -var val = objectRef.madeUpProperty; |
| -</pre> |
| - |
| -<p> |
| -- returns <code>undefined</code>, because as the process of working up the prototype |
| -chain finds no properties on any of the object with the name |
| -"madeUpPeoperty" it eventually gets to the prototype of |
| -<code>Object.prototype</code>, which is null, and the process ends |
| -returning <code>undefined</code>. |
| -</p> |
| - |
| -<p> |
| -The reading of named properties returns the first value found, on the |
| -object or then from its prototype chain. The assigning of a value to a |
| -named property on an object will create a property on the object itself |
| -if no corresponding property already exists. |
| -</p> |
| - |
| -<p> |
| -This means that if a value was assigned as |
| -<code>objectRef.testNumber = 3</code> a "testNumber" property |
| -will be created on the instance of <code>MyObject2</code> itself, and |
| -any subsequent attempts to read that value will retrieve that value as |
| -set on the object. The prototype chain no longer needs to be examined |
| -to resolve the property accessor, but the instance of |
| -<code>MyObject1</code> with the value of <code>8</code> assigned to its |
| -"testNumber" property is unaltered. The assignment to the |
| -<code>objectRef</code> object masks the corresponding property in its |
| -prototype chain. |
| -</p> |
| - |
| -<p> |
| -Note: ECMAScript defines an internal <code>[[prototype]]</code> |
| -property of the internal Object type. This property is not directly accessible with |
| -scripts, but it is the chain of objects referred to with the |
| -internal <code>[[prototype]]</code> property that is used in property |
| -accessor resolution; the object's prototype chain. A public |
| -<code>prototype</code> property exists to allow the assignment, |
| -definition and manipulation of prototypes in association with the |
| -internal <code>[[prototype]]</code> property. The details of the |
| -relationship between to two are described in ECMA 262 (3rd edition) |
| -and are beyond the <dfn>scope</dfn> of this discussion. |
| -</p> |
| - |
| -<h2 id="clIRExSc">Identifier Resolution, Execution Contexts and scope chains</h2> |
| - |
| -<h3 id="clExCon">The Execution Context</h3> |
| - |
| -<p> |
| -An <dfn>execution context</dfn> is an abstract concept used by the ECMSScript |
| -specification (ECMA 262 3rd edition) to define the behaviour required |
| -of ECMAScript implementations. The specification does not say anything |
| -about how <dfn>execution contexts</dfn> should be implemented but execution |
| -contexts have associated attributes that refer to specification defined |
| -structures so they might be conceived (and even implemented) as objects |
| -with properties, though not public properties. |
| -</p> |
| - |
| -<p> |
| -All javascript code is executed in an <dfn>execution context</dfn>. Global code |
| -(code executed inline, normally as a JS file, or <span class="initialism" title="HyperText Mark-up Language"><abbr title="HyperText Mark-up Language">HTML</abbr></span> page, loads) gets |
| -executed in <dfn>global</dfn> <dfn>execution context</dfn>, and each invocation of a function (possibly as a constructor) has an associated |
| -<dfn>execution context</dfn>. Code executed with the <code>eval</code> function |
| -also gets a distinct execution context but as <code>eval</code> is |
| -never normally used by javascript programmers it will not be discussed |
| -here. The specified details of <dfn>execution contexts</dfn> are to be found in |
| -section 10.2 of ECMA 262 (3rd edition). |
| -</p> |
| - |
| -<p> |
| -When a javascript function is called it enters an <dfn>execution context</dfn>, |
| -if another function is called (or the same function recursively) a new |
| -<dfn>execution context</dfn> is created and execution enters that context for the |
| -duration of the function call. Returning to the original execution |
| -context when that called function returns. Thus running javascript code |
| -forms a stack of <dfn>execution contexts</dfn>. |
| -</p> |
| - |
| -<p> |
| -When an <dfn>execution context</dfn> is created a number of things happen in a |
| -defined order. First, in the <dfn>execution context</dfn> of a function, an |
| -"Activation" object is created. The activation object is |
| -another specification mechanism. It can be considered as an object |
| -because it ends up having accessible named properties, but it is not a |
| -normal object as it has no prototype (at least not a defined prototype) |
| -and it cannot be directly referenced by javascript code. |
| -</p> |
| - |
| -<p> |
| -The next step in the creation of the <dfn>execution context</dfn> for a function |
| -call is the creation of an <code>arguments</code> object, which is an |
| -array-like object with integer indexed members corresponding with the |
| -arguments passed to the function call, in order. It also has |
| -<code>length</code> and <code>callee</code> properties (which are not |
| -relevant to this discussion, see the spec for details). A property of |
| -the Activation object is created with the name "arguments" |
| -and a reference to the <code>arguments</code> object is assigned to |
| -that property. |
| -</p> |
| - |
| -<p> |
| -Next the <dfn>execution context</dfn> is assigned a <dfn>scope</dfn>. A <dfn>scope</dfn> consists of a |
| -list (or chain) of objects. Each function object has an internal |
| -<code>[[scope]]</code> property (which we will go into more detail |
| -about shortly) that also consists of a list (or chain) of objects. |
| -The <dfn>scope</dfn> that is assigned to the <dfn>execution context</dfn> of a function call |
| -consists of the list referred to by the <code>[[scope]]</code> property |
| -of the corresponding function object with the Activation object added |
| -at the front of the chain (or the top of the list). |
| -</p> |
| - |
| -<p> |
| -Then the process of "variable instantiation" takes place using an object |
| -that ECMA 262 refers to as the "Variable" object. However, |
| -the Activation object is used as the Variable object (note this, it is |
| -important: they are the same object). Named properties of the Variable |
| -object are created for each of the function's formal parameters, and if |
| -arguments to the function call correspond with those parameters the |
| -values of those arguments are assigned to the properties (otherwise the |
| -assigned value is <code>undefined</code>). Inner function definitions |
| -are used to create function objects which are assigned to properties of |
| -the Variable object with names that correspond to the function name |
| -used in the function declaration. The last stage of variable |
| -instantiation is to create named properties of the Variable object |
| -that correspond with all the local variables declared within the |
| -function. |
| -</p> |
| - |
| -<p> |
| -The properties created on the Variable object that correspond with |
| -declared local variables are initially assigned <code>undefined</code> |
| -values during variable instantiation, the actual initialisation of |
| -local variables does not happen until the evaluation of the |
| -corresponding assignment expressions during the execution of the |
| -function body code. |
| -</p> |
| - |
| -<p> |
| -It is the fact that the Activation object, with its |
| -<code>arguments</code> property, and the Variable object, with named |
| -properties corresponding with function local variables, are the same |
| -object, that allows the identifier <code>arguments</code> to be treated |
| -as if it was a function local variable. |
| -</p> |
| - |
| -<p> |
| -Finally a value is assigned for use with the <code>this</code> keyword. |
| -If the value assigned refers to an object then property accessors |
| -prefixed with the <code>this</code> keyword reference properties of |
| -that object. If the value assigned (internally) is null then the |
| -<code>this</code> keyword will refer to the global object. |
| -</p> |
| - |
| -<p> |
| -The global execution context gets some slightly different handling as |
| -it does not have arguments so it does not need a defined Activation |
| -object to refer to them. The global execution context does need a <dfn>scope</dfn> |
| -and its <dfn>scope chain</dfn> consists of exactly one object, the global object. |
| -The global execution context does go through variable instantiation, |
| -its inner functions are the normal top level function declarations that |
| -make up the bulk of javascript code. The global object is used as the |
| -Variable object, which is why globally declared functions become |
| -properties of the global object. As do globally declared variables. |
| -</p> |
| - |
| -<p> |
| -The global execution context also uses a reference to the global object |
| -for the <code>this</code> object. |
| -</p> |
| - |
| -<h3 id="clScCh">scope chains and [[scope]]</h3> |
| - |
| -<p> |
| -The <dfn>scope chain</dfn> of the execution context for a function call is |
| -constructed by adding the execution context's Activation/Variable |
| -object to the front of the <dfn>scope chain</dfn> held in the function |
| -object's <code>[[scope]]</code> property, so it is important to |
| -understand how the internal <code>[[scope]]</code> property is |
| -defined. |
| -</p> |
| - |
| -<p> |
| -In ECMAScript functions are objects, they are created during variable |
| -instantiation from function declarations, during the evaluation of |
| -function expressions or by invoking the <code>Function</code> |
| -constructor. |
| -</p> |
| - |
| -<p> |
| -Function objects created with the <code>Function</code> constructor |
| -always have a <code>[[scope]]</code> property referring to a <dfn>scope |
| -chain</dfn> that only contains the global object. |
| -</p> |
| - |
| -<p> |
| -Function objects created with function declarations or function |
| -expressions have the <dfn>scope chain</dfn> of the execution context in which |
| -they are created assigned to their internal <code>[[scope]]</code> |
| -property. |
| -</p> |
| - |
| -<p> |
| -In the simplest case of a global function declaration such as:- |
| -</p> |
| - |
| -<pre> |
| -function exampleFunction(formalParameter){ |
| - ... <span class="commentJS">// function body code</span> |
| -} |
| -</pre> |
| - |
| -<p> |
| -- the corresponding function object is created during the variable |
| -instantiation for the global execution context. The global execution |
| -context has a <dfn>scope chain</dfn> consisting of only the global object. Thus |
| -the function object that is created and referred to by the property of |
| -the global object with the name "exampleFunction" is |
| -assigned an internal <code>[[scope]]</code> property referring to a |
| -<dfn>scope chain</dfn> containing only the global object. |
| -</p> |
| - |
| -<p> |
| -A similar <dfn>scope chain</dfn> is assigned when a function expression is |
| -executed in the global context:- |
| -</p> |
| - |
| -<pre> |
| -var exampleFuncRef = function(){ |
| - ... <span class="commentJS">// function body code</span> |
| -} |
| -</pre> |
| - |
| -<p> |
| -- except in this case a named property of the global object is created |
| -during variable instantiation for the global execution context but the |
| -function object is not created, and a reference to it assigned to the |
| -named property of the global object, until the assignment expression is |
| -evaluated. But the creation of the function object still happens in the |
| -global execution context so the <code>[[scope]]</code> property of the |
| -created function object still only contains the global object in the |
| -assigned scope chain. |
| -</p> |
| - |
| -<p> |
| -Inner function declarations and expressions result in function objects |
| -being created within the execution context of a function so they get |
| -more elaborate scope chains. Consider the following code, which defines |
| -a function with an inner function declaration and then executes the |
| -outer function:- |
| -</p> |
| - |
| -<pre> |
| -function exampleOuterFunction(formalParameter){ |
| - function exampleInnerFuncitonDec(){ |
| - ... <span class="commentJS">// inner function body</span> |
| - } |
| - ... <span class="commentJS">// the rest of the outer function body.</span> |
| -} |
| - |
| -exampleOuterFunction( 5 ); |
| -</pre> |
| - |
| -<p> |
| -The function object corresponding with the outer function declaration |
| -is created during variable instantiation in the global execution context |
| -so its <code>[[scope]]</code> property contains the one item scope |
| -chain with only the global object in it. |
| -</p> |
| - |
| -<p> |
| -When the global code executes the call to the |
| -<code>exampleOuterFunction</code> a new execution context is created for |
| -that function call and an Activation/Variable object along with it. |
| -The <dfn>scope</dfn> of that new execution context becomes the chain consisting of |
| -the new Activation object followed by the chain refereed to by the |
| -outer function object's <code>[[scope]]</code> property (just the |
| -global object). Variable instantiation for that new execution context |
| -results in the creation of a function object that corresponds with the |
| -inner function definition and the <code>[[scope]]</code> property of |
| -that function object is assigned the value of the <dfn>scope</dfn> from the |
| -execution context in which it was created. A <dfn>scope chain</dfn> that contains |
| -the Activation object followed by the global object. |
| -</p> |
| - |
| -<p> |
| -So far this is all automatic and controlled by the structure and |
| -execution of the source code. The <dfn>scope chain</dfn> of the execution context |
| -defines the <code>[[scope]]</code> properties of the function objects |
| -created and the <code>[[scope]]</code> properties of the function |
| -objects define the <dfn>scope</dfn> for their execution contexts (along with the |
| -corresponding Activation object). But ECMAScript provides the |
| -<code>with</code> statement as a means of modifying the scope chain. |
| -</p> |
| - |
| -<p> |
| -The <code>with</code> statement evaluates an expression and if that |
| -expression is an object it is added to the <dfn>scope chain</dfn> of the current |
| -execution context (in front of the Activation/Variable object). The |
| -<code>with</code> statement then executes another statement (that may |
| -itself be a block statement) and then restores the execution context's |
| -<dfn>scope chain</dfn>to what it was before. |
| -</p> |
| - |
| -<p> |
| -A function declaration could not be affected by a <code>with</code> |
| -statement as they result in the creation of function objects during |
| -variable instantiation, but a function expression can be evaluated |
| -inside a <code>with</code> statement:- |
| -</p> |
| - |
| -<pre> |
| -<span class="commentJS">/* create a global variable - y - that refers to an object:- */</span> |
| -var y = {x:5}; <span class="commentJS">// object literal with an - x - property</span> |
| -function exampleFuncWith(){ |
| - var z; |
| - <span class="commentJS">/* Add the object referred to by the global variable - y - to the |
| - front of he scope chain:- |
| - */</span> |
| - with(y){ |
| - <span class="commentJS">/* evaluate a function expression to create a function object |
| - and assign a reference to that function object to the local |
| - variable - z - :- |
| - */</span> |
| - z = function(){ |
| - ... <span class="commentJS">// inner function expression body;</span> |
| - } |
| - } |
| - ... |
| -} |
| - |
| -<span class="commentJS">/* execute the - exampleFuncWith - function:- */</span> |
| -exampleFuncWith(); |
| -</pre> |
| - |
| -<p> |
| -When the <code>exampleFuncWith</code> function is called the resulting |
| -execution context has a <dfn>scope chain</dfn> consisting of its Activation object |
| -followed by the global object. The execution of the <code>with</code> |
| -statement adds the object referred to by the global variable |
| -<code>y</code> to the front of that <dfn>scope chain</dfn> during the evaluation |
| -of the function expression. The function object created by the |
| -evaluation of the function expression is assigned a |
| -<code>[[scope]]</code> property that corresponds with the <dfn>scope</dfn> of the |
| -execution context in which it is created. A <dfn>scope chain</dfn> consisting of |
| -object <code>y</code> followed by the Activation object from the |
| -execution context of the outer function call, followed by the global |
| -object. |
| -</p> |
| - |
| -<p> |
| -When the block statement associated with the <code>with</code> |
| -statement terminates the <dfn>scope</dfn> of the execution context is restored |
| -(the <code>y</code> object is removed), but the function object has |
| -been created at that point and its <code>[[scope]]</code> property |
| -assigned a reference to a <dfn>scope chain</dfn> with the <code>y</code> object |
| -at its head. |
| -</p> |
| - |
| -<h3><a name="clIdRes" id="clIdRes">Identifier Resolution</a></h3> |
| - |
| -<p> |
| -Identifiers are resolved against the scope chain. ECMA 262 categorises |
| -<code>this</code> as a keyword rather than an identifier, which is not |
| -unreasonable as it is always resolved dependent on the |
| -<code>this</code> value in the execution context in which it is used, |
| -without reference to the scope chain. |
| -</p> |
| - |
| -<p> |
| -Identifier resolution starts with the first object in the scope chain. |
| -It is checked to see if it has a property with a name that corresponds |
| -with the identifier. Because the <dfn>scope chain</dfn> is a chain of objects |
| -this checking encompasses the prototype chain of that object (if it |
| -has one). If no corresponding value can be found on the first object |
| -in the <dfn>scope chain</dfn> the search progresses to the next object. And so on until |
| -one of the objects in the chain (or one of its prototypes) has a |
| -property with a name that corresponds with the identifier or the scope |
| -chain is exhausted. |
| -</p> |
| - |
| -<p> |
| -The operation on the identifier happens in the same way as the use of |
| -property accessors on objects described above. The object identified |
| -in the <dfn>scope chain</dfn> as having the corresponding property takes the |
| -place of the object in the property accessor and the identifier acts |
| -as a property name for that object. The global object is always at the |
| -end of the scope chain. |
| -</p> |
| - |
| -<p> |
| -As execution contexts associated with function calls will have the |
| -Activation/Variable object at the front of the chain, identifiers used |
| -in function bodies are effectively first checked to see whether they |
| -correspond with formal parameters, inner function declaration names or |
| -local variables. Those would be resolved as named properties of the |
| -Activation/Variable object. |
| -</p> |
| - |
| -<h2><a name="clClose" id="clClose">Closures</a></h2> |
| - |
| -<h3><a name="clAtGb" id="clAtGb">Automatic Garbage Collection</a></h3> |
| - |
| -<p> |
| -ECMAScript uses automatic garbage collection. The specification |
| -does not define the details, leaving that to the implementers to sort |
| -out, and some implementations are known to give a very low priority to |
| -their garbage collection operations. But the general idea is that if an |
| -object becomes un-referable (by having no remaining references to it |
| -left accessible to executing code) it becomes available for garbage |
| -collection and will at some future point be destroyed and any resources |
| -it is consuming freed and returned to the system for re-use. |
| -</p> |
| - |
| -<p> |
| -This would normally be the case upon exiting an execution context. The |
| -<dfn>scope chain</dfn> structure, the Activation/Variable object and any objects |
| -created within the execution context, including function objects, would |
| -no longer be accessible and so would become available for garbage |
| -collection. |
| -</p> |
| - |
| -<h3><a name="clFrmC" id="clFrmC">Forming Closures</a></h3> |
| - |
| -<p> |
| -A closure is formed by returning a function object that was created |
| -within an execution context of a function call from that function call |
| -and assigning a reference to that inner function to a property of another |
| -object. Or by directly assigning a reference to such a function object |
| -to, for example, a global variable, a property of a globally accessible |
| -object or an object passed by reference as an argument to the outer |
| -function call. e.g:- |
| -</p> |
| - |
| -<pre> |
| -function exampleClosureForm(arg1, arg2){ |
| - var localVar = 8; |
| - function exampleReturned(innerArg){ |
| - return ((arg1 + arg2)/(innerArg + localVar)); |
| - } |
| - <span class="commentJS">/* return a reference to the inner function defined as - |
| - exampleReturned -:- |
| - */</span> |
| - return exampleReturned; |
| -} |
| - |
| -var globalVar = exampleClosureForm(2, 4); |
| -</pre> |
| - |
| -<p> |
| -Now the function object created within the execution context of the |
| -call to <code>exampleClosureForm</code> cannot be garbage collected |
| -because it is referred to by a global variable and is still accessible, |
| -it can even be executed with <code>globalVar(n)</code>. |
| -</p> |
| - |
| -<p> |
| -But something a little more complicated has happened because the |
| -function object now referred to by <code>globalVar</code> was created |
| -with a <code>[[scope]]</code> property referring to a scope chain |
| -containing the Activation/Variable object belonging to the execution |
| -context in which it was created (and the global object). Now the |
| -Activation/Variable object cannot be garbage collected either as the |
| -execution of the function object referred to by <code>globalVar</code> |
| -will need to add the whole <dfn>scope chain</dfn> from its <code>[[scope]]</code> |
| -property to the <dfn>scope</dfn> of the execution context created for each call to |
| -it. |
| -</p> |
| - |
| -<p> |
| -A closure is formed. The inner function object has the free variables |
| -and the Activation/Variable object on the function's <dfn>scope chain</dfn> is |
| -the environment that binds them. |
| -</p> |
| - |
| -<p> |
| -The Activation/Variable object is trapped by being |
| -referred to in the <dfn>scope chain</dfn> assigned to the internal |
| -<code>[[scope]]</code> property of the function object now referred to |
| -by the <code>globalVar</code> variable. The Activation/Variable object |
| -is preserved along with its state; the values of its properties. Scope |
| -resolution in the execution context of calls to the inner function will |
| -resolve identifiers that correspond with named properties of that |
| -Activation/Variable object as properties of that object. The value of |
| -those properties can still be read and set even though the execution |
| -context for which it was created has exited. |
| -</p> |
| - |
| -<p> |
| -In the example above that Activation/Variable object has a state that |
| -represents the values of formal parameters, inner function definitions |
| -and local variables, at the time when the outer function returned |
| -(exited its execution context). The <code>arg1</code> property has the |
| -value <code>2</code>,the <code>arg2</code> property the value |
| -<code>4</code>, <code>localVar</code> the value <code>8</code> and an |
| -<code>exampleReturned</code> property that is a reference to the inner |
| -function object that was returned form the outer function. (We will be |
| -referring to this Activation/Variable object as "ActOuter1" in later |
| -discussion, for convenience.) |
| -</p> |
| - |
| -<p> |
| -If the <code>exampleClosureForm</code> function was called again as:- |
| -</p> |
| - |
| -<pre> |
| -var secondGlobalVar = exampleClosureForm(12, 3); |
| -</pre> |
| - |
| -<p> |
| -- a new execution context would be created, along with a new Activation |
| -object. And a new function object would be returned, with its own |
| -distinct <code>[[scope]]</code> property referring to a scope chain |
| -containing the Activation object form this second execution context, |
| -with <code>arg1</code> being <code>12</code> and <code>arg2</code> |
| -being <code>3</code>. (We will be referring to this Activation/Variable |
| -object as "ActOuter2" in later discussion, for convenience.) |
| -</p> |
| - |
| -<p> |
| -A second and distinct closure has been formed by the second execution |
| -of <code>exampleClosureForm</code>. |
| -</p> |
| - |
| -<p> |
| -The two function objects created by the execution of |
| -<code>exampleClosureForm</code> to which references have been assigned |
| -to the global variable <code>globalVar</code> and |
| -<code>secondGlobalVar</code> respectively, return the expression |
| -<code>((arg1 + arg2)/(innerArg + localVar))</code>. Which applies |
| -various operators to four identifiers. How these identifiers are |
| -resolved is critical to the use and value of closures. |
| -</p> |
| - |
| -<p> |
| -Consider the execution of the function object referred to by |
| -<code>globalVar</code>, as <code>globalVar(2)</code>. A new execution |
| -context is created and an Activation object (we will call it |
| -"ActInner1"), which is added to the head of the scope chain |
| -referred to the <code>[[scope]]</code> property of the executed |
| -function object. ActInner1 is given a property named |
| -<code>innerArg</code>, after its formal parameter and the argument |
| -value <code>2</code> assigned to it. The <dfn>scope chain</dfn> for this new |
| -execution context is: <span class="scopeCh">ActInner1-></span> |
| -<span class="scopeCh">ActOuter1-></span> |
| -<span class="scopeCh">global object</span>. |
| -</p> |
| - |
| -<p> |
| -Identifier resolution is done against the <dfn>scope chain</dfn> so in order |
| -to return the value of the expression |
| -<code>((arg1 + arg2)/(innerArg + localVar))</code> the values of the |
| -identifiers will be determined by looking for properties, with names |
| -corresponding with the identifiers, on each object in the scope chain |
| -in turn. |
| -</p> |
| - |
| -<p> |
| -The first object in the chain is ActInner1 and it has a property named |
| -<code>innerArg</code> with the value <code>2</code>. All of the other |
| -3 identifiers correspond with named properties of ActOuter1; |
| -<code>arg1</code> is <code>2</code>, <code>arg2</code> is |
| -<code>4</code> and <code>localVar</code> is <code>8</code>. The |
| -function call returns <code>((2 + 4)/(2 + 8))</code>. |
| -</p> |
| - |
| -<p> |
| -Compare that with the execution of the otherwise identical function |
| -object referred to by <code>secondGlobalVar</code>, as |
| -<code>secondGlobalVar(5)</code>. Calling the Activation object for |
| -this new execution context "ActInner2", the scope chain |
| -becomes: <span class="scopeCh">ActInner2-></span> |
| -<span class="scopeCh">ActOuter2-></span> |
| -<span class="scopeCh">global object</span>. ActInner2 returns |
| -<code>innerArg</code> as <code>5</code> and ActOuter2 returns |
| -<code>arg1</code>, <code>arg2</code> and <code>localVar</code> as |
| -<code>12</code>, <code>3</code> and <code>8</code> respectively. The |
| -value returned is <code>((12 + 3)/(5 + 8))</code>. |
| -</p> |
| - |
| -<p> |
| -Execute <code>secondGlobalVar</code> again and a new Activation object |
| -will appear at the front of the <dfn>scope chain</dfn> but ActOuter2 will still |
| -be next object in the chain and the value of its named properties will |
| -again be used in the resolution of the identifiers <code>arg1</code>, |
| -<code>arg2</code> and <code>localVar</code>. |
| -</p> |
| - |
| -<p> |
| -This is how ECMAScript inner functions gain, and maintain, access to the formal |
| -parameters, declared inner functions and local variables of the |
| -execution context in which they were created. And it is how the |
| -forming of a closure allows such a function object to keep referring |
| -to those values, reading and writing to them, for as long as it |
| -continues to exist. The Activation/Variable object from the execution |
| -context in which the inner function was created remains on the scope |
| -chain referred to by the function object's <code>[[scope]]</code> |
| -property, until all references to the inner function are freed and |
| -the function object is made available for garbage collection (along |
| -with any now unneeded objects on its scope chain). |
| -</p> |
| - |
| -<p> |
| -Inner function may themselves have inner functions, and the inner |
| -functions returned from the execution of functions to form closures |
| -may themselves return inner functions and form closures of their own. |
| -With each nesting the <dfn>scope chain</dfn> gains extra Activation objects |
| -originating with the execution contexts in which the inner function |
| -objects were created. The ECMAScript specification requires a scope |
| -chain to be finite, but imposes no limits on their length. |
| -Implementations probably do impose some practical limitation but no |
| -specific magnitude has yet been reported. The potential for nesting |
| -inner functions seems so far to have exceeded anyone's desire to |
| -code them. |
| -</p> |
| - |
| -<h2><a name="clClDo" id="clClDo">What can be done with Closures?</a></h2> |
| - |
| -<p> |
| -Strangely the answer to that appears to be anything and everything. |
| -I am told that closures enable ECMAScript to emulate anything, so the |
| -limitation is the ability to conceive and implement the emulation. That |
| -is a bit esoteric and it is probably better to start with something a |
| -little more practical. |
| -</p> |
| - |
| - |
| -<h3><a name="clSto" id="clSto">Example 1: setTimeout with Function References</a></h3> |
| - |
| - |
| -<p> |
| -A common use for a closure is to provide parameters for the execution |
| -of a function prior to the execution of that function. For example, |
| -when a function is to be provided as the first argument to the |
| -<code>setTimout</code> function that is common in web browser |
| -environments. |
| -</p> |
| - |
| -<p> |
| -<code>setTimeout</code> schedules the execution of a function (or a |
| -string of javascript source code, but not in this context), provided as |
| -its first argument, after an interval expressed in milliseconds (as its |
| -second argument). If a piece of code wants to use |
| -<code>setTimeout</code> it calls the <code>setTimeout</code> function |
| -and passes a reference to a function object as the first argument and |
| -the millisecond interval as the second, but a reference to a function |
| -object cannot provide parameters for the scheduled execution of that |
| -function. |
| -</p> |
| - |
| -<p> |
| -However, code could call another function that returned a reference to |
| -an inner function object, with that inner function object being passed |
| -by reference to the <code>setTimeout</code> function. The parameters to |
| -be used for the execution of the inner function are passed with the |
| -call to the function that returns it. <code>setTimout</code> executes |
| -the inner function without passing arguments but that inner function |
| -can still access the parameters provided by the call to the outer |
| -function that returned it:- |
| -</p> |
| - |
| -<pre> |
| -function callLater(paramA, paramB, paramC){ |
| - <span class="commentJS">/* Return a reference to an anonymous inner function created |
| - with a function expression:- |
| - */</span> |
| - return (function(){ |
| - <span class="commentJS">/* This inner function is to be executed with - setTimeout |
| - - and when it is executed it can read, and act upon, the |
| - parameters passed to the outer function:- |
| - */</span> |
| - paramA[paramB] = paramC; |
| - }); |
| -} |
| - |
| -... |
| - |
| -<span class="commentJS">/* Call the function that will return a reference to the inner function |
| - object created in its execution context. Passing the parameters that |
| - the inner function will use when it is eventually executed as |
| - arguments to the outer function. The returned reference to the inner |
| - function object is assigned to a local variable:- |
| -*/</span> |
| -var functRef = callLater(elStyle, "display", "none"); |
| -<span class="commentJS">/* Call the setTimeout function, passing the reference to the inner |
| - function assigned to the - functRef - variable as the first argument:- |
| -*/</span> |
| -hideMenu=setTimeout(functRef, 500); |
| -</pre> |
| - |
| -<h3><a name="clObjI" id="clObjI">Example 2: Associating Functions with Object Instance Methods</a></h3> |
| - |
| -<p> |
| -There are many other circumstances when a reference to a function |
| -object is assigned so that it would be executed at some future time |
| -where it is useful to provide parameters for the execution of that |
| -function that would not be easily available at the time of execution |
| -but cannot be known until the moment of assignment. |
| -</p> |
| - |
| -<p> |
| -One example might be a javascript object that is designed to |
| -encapsulate the interactions with a particular DOM element. It has |
| -<code>doOnClick</code>, <code>doMouseOver</code> and |
| -<code>doMouseOut</code> methods and wants to execute those methods |
| -when the corresponding events are triggered on the DOM element, but |
| -there may be any number of instances of the javascript object created |
| -associated with different DOM elements and the individual object |
| -instances do not know how they will be employed by the code that |
| -instantiated them. The object instances do not know how to reference |
| -themselves globally because they do not know which global variables |
| -(if any) will be assigned references to their instances. |
| -</p> |
| - |
| -<p> |
| -So the problem is to execute an event handling function that has an |
| -association with a particular instance of the javascript object, and |
| -knows which method of that object to call. |
| -</p> |
| - |
| -<p> |
| -The following example uses a small generalised closure based function |
| -that associates object instances with element event handlers. |
| -Arranging that the execution of the event handler calls the specified |
| -method of the object instance, passing the event object and a reference |
| -to the associated element on to the object method and returning the |
| -method's return value. |
| -</p> |
| - |
| -<pre> |
| -<span class="commentJS">/* A general function that associates an object instance with an event |
| - handler. The returned inner function is used as the event handler. |
| - The object instance is passed as the - obj - parameter and the name |
| - of the method that is to be called on that object is passed as the - |
| - methodName - (string) parameter. |
| -*/</span> |
| -function associateObjWithEvent(obj, methodName){ |
| - <span class="commentJS">/* The returned inner function is intended to act as an event |
| - handler for a DOM element:- |
| - */</span> |
| - return (function(e){ |
| - <span class="commentJS">/* The event object that will have been parsed as the - e - |
| - parameter on DOM standard browsers is normalised to the IE |
| - event object if it has not been passed as an argument to the |
| - event handling inner function:- |
| - */</span> |
| - e = e||window.event; |
| - <span class="commentJS">/* The event handler calls a method of the object - obj - with |
| - the name held in the string - methodName - passing the now |
| - normalised event object and a reference to the element to |
| - which the event handler has been assigned using the - this - |
| - (which works because the inner function is executed as a |
| - method of that element because it has been assigned as an |
| - event handler):- |
| - */</span> |
| - return obj[methodName](e, this); |
| - }); |
| -} |
| - |
| -<span class="commentJS">/* This constructor function creates objects that associates themselves |
| - with DOM elements whose IDs are passed to the constructor as a |
| - string. The object instances want to arrange than when the |
| - corresponding element triggers onclick, onmouseover and onmouseout |
| - events corresponding methods are called on their object instance. |
| -*/</span> |
| -function DhtmlObject(elementId){ |
| - <span class="commentJS">/* A function is called that retrieves a reference to the DOM |
| - element (or null if it cannot be found) with the ID of the |
| - required element passed as its argument. The returned value |
| - is assigned to the local variable - el -:- |
| - */</span> |
| - var el = getElementWithId(elementId); |
| - <span class="commentJS">/* The value of - el - is internally type-converted to boolean for |
| - the - if - statement so that if it refers to an object the |
| - result will be true, and if it is null the result false. So that |
| - the following block is only executed if the - el - variable |
| - refers to a DOM element:- |
| - */</span> |
| - if(el){ |
| - <span class="commentJS">/* To assign a function as the element's event handler this |
| - object calls the - associateObjWithEvent - function |
| - specifying itself (with the - this - keyword) as the object |
| - on which a method is to be called and providing the name of |
| - the method that is to be called. The - associateObjWithEvent |
| - - function will return a reference to an inner function that |
| - is assigned to the event handler of the DOM element. That |
| - inner function will call the required method on the |
| - javascript object when it is executed in response to |
| - events:- |
| - */</span> |
| - el.onclick = associateObjWithEvent(this, "doOnClick"); |
| - el.onmouseover = associateObjWithEvent(this, "doMouseOver"); |
| - el.onmouseout = associateObjWithEvent(this, "doMouseOut"); |
| - ... |
| - } |
| -} |
| -DhtmlObject.prototype.doOnClick = function(event, element){ |
| - ... <span class="commentJS">// doOnClick method body</span>. |
| -} |
| -DhtmlObject.prototype.doMouseOver = function(event, element){ |
| - ... <span class="commentJS">// doMouseOver method body.</span> |
| -} |
| -DhtmlObject.prototype.doMouseOut = function(event, element){ |
| - ... <span class="commentJS">// doMouseOut method body.</span> |
| -} |
| -</pre> |
| - |
| -<p> |
| -And so any instances of the <code>DhtmlObject</code> can associate themselves |
| -with the DOM element that they are interested in without any need |
| -to know anything about how they are being employed by other code, |
| -impacting on the global namespace or risking clashes with other |
| -instances of the <code>DhtmlObject</code>. |
| -</p> |
| - |
| -<h3><a name="clEncap" id="clEncap">Example 3: Encapsulating Related Functionality</a></h3> |
| - |
| -<p> |
| -Closures can be used to create additional scopes that can be used to |
| -group interrelated and dependent code in a way that minimises the risk |
| -of accidental interaction. Suppose a function is to build a string and |
| -to avoid the repeated concatenation operations (and the creation of |
| -numerous intermediate strings) the desire is to use an array to store |
| -the parts of the string in sequence and then output the results using |
| -the <code>Array.prototype.join</code> method (with an empty string as its argument). |
| -The array is going to act as a buffer for the output, but defining it |
| -locally to the function will result in its re-creation on each |
| -execution of the function, which may not be necessary if the only |
| -variable content of that array will be re-assigned on each function |
| -call. |
| -</p> |
| - |
| -<p> |
| -One approach might make the array a global variable so that it can be |
| -re-used without being re-created. But the consequences of that will be |
| -that, in addition to the global variable that refers to the function |
| -that will use the buffer array, there will be a second global property |
| -that refers to the array itself. The effect is to render the code less |
| -manageable, as, if it is to be used elsewhere, its author has to remember |
| -to include both the function definition and the array definition. It |
| -also makes the code less easy to integrate with other code because |
| -instead of just ensuring that the function name is unique within the |
| -global namespace it is necessary to ensure that the Array on which it |
| -is dependent is using a name that is unique within the global |
| -namespace. |
| -</p> |
| - |
| -<p> |
| -A Closure allows the buffer array to be associated (and neatly |
| -packaged) with the function that is dependent upon it and |
| -simultaneously keep the property name to which the buffer array as |
| -assigned out of the global namespace and free of the risk of name |
| -conflicts and accidental interactions. |
| -</p> |
| - |
| -<p> |
| -The trick here is to create one additional execution context by |
| -executing a function expression in-line and have that function |
| -expression return an inner function that will be the function that is |
| -used by external code. The buffer array is then defined as a local |
| -variable of the function expression that is executed in-line. That only |
| -happens once so the Array is only created once, but is available to |
| -the function that depends on it for repeated use. |
| -</p> |
| - |
| -<p> |
| -The following code creates a function that will return a string of |
| -<span class="initialism" title="HyperText Mark-up Language"><abbr title="HyperText Mark-up Language">HTML</abbr></span>, much of which is constant, but those constant character |
| -sequences need to be interspersed with variable information provided |
| -as parameter to the function call. |
| -</p> |
| - |
| -<p> |
| -A reference to an inner function object is returned from the in-line |
| -execution of a function expression and assigned to a global variable |
| -so that it can be called as a global function. The buffer array is |
| -defined as a local variable in the outer function expression. It is |
| -not exposed in the global namespace and does not need to be re-created |
| -whenever the function that uses it is called. |
| -</p> |
| - |
| -<pre> |
| -<span class="commentJS">/* A global variable - getImgInPositionedDivHtml - is declared and |
| - assigned the value of an inner function expression returned from |
| - a one-time call to an outer function expression. |
| - |
| - That inner function returns a string of <span class="initialism" title="HyperText Mark-up Language"><abbr title="HyperText Mark-up Language">HTML</abbr></span> that represents an |
| - absolutely positioned DIV wrapped round an IMG element, such that |
| - all of the variable attribute values are provided as parameters |
| - to the function call:- |
| -*/</span> |
| -var getImgInPositionedDivHtml = (function(){ |
| - <span class="commentJS">/* The - buffAr - Array is assigned to a local variable of the |
| - outer function expression. It is only created once and that one |
| - instance of the array is available to the inner function so that |
| - it can be used on each execution of that inner function. |
| - |
| - Empty strings are used as placeholders for the date that is to |
| - be inserted into the Array by the inner function:- |
| - */</span> |
| - var buffAr = [ |
| - '<div id="', |
| - '', <span class="commentJS">//index 1, DIV ID attribute</span> |
| - '" style="position:absolute;top:', |
| - '', <span class="commentJS">//index 3, DIV top position</span> |
| - 'px;left:', |
| - '', <span class="commentJS">//index 5, DIV left position</span> |
| - 'px;width:', |
| - '', <span class="commentJS">//index 7, DIV width</span> |
| - 'px;height:', |
| - '', <span class="commentJS">//index 9, DIV height</span> |
| - 'px;overflow:hidden;\"><img src=\"', |
| - '', <span class="commentJS">//index 11, IMG URL</span> |
| - '\" width=\"', |
| - '', <span class="commentJS">//index 13, IMG width</span> |
| - '\" height=\"', |
| - '', <span class="commentJS">//index 15, IMG height</span> |
| - '\" alt=\"', |
| - '', <span class="commentJS">//index 17, IMG alt text</span> |
| - '\"><\/div>' |
| - ]; |
| - <span class="commentJS">/* Return the inner function object that is the result of the |
| - evaluation of a function expression. It is this inner function |
| - object that will be executed on each call to - |
| - getImgInPositionedDivHtml( ... ) -:- |
| - */</span> |
| - return (function(url, id, width, height, top, left, altText){ |
| - <span class="commentJS">/* Assign the various parameters to the corresponding |
| - locations in the buffer array:- |
| - */</span> |
| - buffAr[1] = id; |
| - buffAr[3] = top; |
| - buffAr[5] = left; |
| - buffAr[13] = (buffAr[7] = width); |
| - buffAr[15] = (buffAr[9] = height); |
| - buffAr[11] = url; |
| - buffAr[17] = altText; |
| - <span class="commentJS">/* Return the string created by joining each element in the |
| - array using an empty string (which is the same as just |
| - joining the elements together):- |
| - */</span> |
| - return buffAr.join(''); |
| - }); <span class="commentJS">//:End of inner function expression.</span> |
| -})(); |
| -<span class="commentJS">/*^^- :The inline execution of the outer function expression. */</span> |
| -</pre> |
| - |
| -<p> |
| -If one function was dependent on one (or several) other functions, but |
| -those other functions were not expected to be directly employed by any |
| -other code, then the same technique could be used to group those |
| -functions with the one that was to be publicly exposed. Making a |
| -complex multi-function process into an easily portable and encapsulated |
| -unit of code. |
| -</p> |
| - |
| -<h3><a name="clOtE" id="clOtE">Other Examples</a></h3> |
| - |
| -<p> |
| -Probably one of the best known applications of closures is |
| -<a href="http://www.crockford.com/javascript/private.html">Douglas |
| -Crockford's technique for the emulation of private instance variables |
| -in ECMAScript objects</a>. Which can be extended to all sorts of |
| -structures of <dfn>scope</dfn> contained nested accessibility/visibility, including |
| -<a href="http://myweb.tiscali.co.uk/cornford/js_info/private_static.html"> |
| -the emulation of private static members for ECMAScript objects</a>. |
| -</p> |
| - |
| -<p> |
| -The possible application of closures are endless, understanding how |
| -they work is probably the best guide to realising how they can be |
| -used. |
| -</p> |
| - |
| -<h2 id="clAc">Accidental Closures</h2> |
| - |
| -<p> |
| -Rendering any inner function accessible outside of the body of the |
| -function in which it was created will form a closure. That makes |
| -closures very easy to create and one of the consequences is that |
| -javascript authors who do not appreciate closures as a language feature |
| -can observe the use of inner functions for various tasks and employ |
| -inner functions, with no apparent consequences, not realising that |
| -closures are being created or what the implications of doing that are. |
| -</p> |
| - |
| -<p> |
| -Accidentally creating closures can have harmful side effects as the |
| -following section on the IE memory leak problem describes, but they can |
| -also impact of the efficiency of code. It is not the closures |
| -themselves, indeed carefully used they can contribute significantly |
| -towards the creation of efficient code. It is the use of inner |
| -functions that can impact on efficiency. |
| -</p> |
| - |
| -<p> |
| -A common situation is where inner functions are used is as event |
| -handlers for DOM elements. For example the following code might be used |
| -to add an onclick handler to a link element:- |
| -</p> |
| - |
| -<pre> |
| -<span class="commentJS">/* Define the global variable that is to have its value added to the |
| - - href - of a link as a query string by the following function:- |
| -*/</span> |
| -var quantaty = 5; |
| -<span class="commentJS">/* When a link passed to this function (as the argument to the function |
| - call - linkRef -) an onclick event handler is added to the link that |
| - will add the value of a global variable - quantaty - to the - href - |
| - of that link as a query string, then return true so that the link |
| - will navigate to the resource specified by the - href - which will |
| - by then include the assigned query string:- |
| -*/</span> |
| -function addGlobalQueryOnClick(linkRef){ |
| - <span class="commentJS">/* If the - linkRef - parameter can be type converted to true |
| - (which it will if it refers to an object):- |
| - */</span> |
| - if(linkRef){ |
| - <span class="commentJS">/* Evaluate a function expression and assign a reference to the |
| - function object that is created by the evaluation of the |
| - function expression to the onclick handler of the link |
| - element:- |
| - */</span> |
| - linkRef.onclick = function(){ |
| - <span class="commentJS">/* This inner function expression adds the query string to |
| - the - href - of the element to which it is attached as |
| - an event handler:- |
| - */</span> |
| - this.href += ('?quantaty='+escape(quantaty)); |
| - return true; |
| - }; |
| - } |
| -} |
| -</pre> |
| - |
| -<p> |
| -Whenever the <code>addGlobalQueryOnClick</code> function is called a |
| -new inner function is created (and a closure formed by its assignment). |
| -From the efficiency point of view that would not be significant if the |
| -<code>addGlobalQueryOnClick</code> function was only called once or |
| -twice, but if the function was heavily employed many distinct function |
| -objects would be created (one for each evaluation of the inner function |
| -expression). |
| -</p> |
| - |
| -<p> |
| -The above code is not taking advantage of the fact that inner functions |
| -are becoming accessible outside of the function in which they are being |
| -created (or the resulting closures). As a result exactly the same effect |
| -could be achieved by defining the function that is to be used as the |
| -event handler separately and then assigning a reference to that |
| -function to the event handling property. Only one function object would |
| -be created and all of the elements that use that event handler would |
| -share a reference to that one function:- |
| -</p> |
| - |
| -<pre> |
| -<span class="commentJS">/* Define the global variable that is to have its value added to the |
| - - href - of a link as a query string by the following function:- |
| -*/</span> |
| -var quantaty = 5; |
| - |
| -<span class="commentJS">/* When a link passed to this function (as the argument to the function |
| - call - linkRef -) an onclick event handler is added to the link that |
| - will add the value of a global variable - quantaty - to the - href - |
| - of that link as a query string, then return true so that the link |
| - will navigate to the resource specified by the - href - which will |
| - by then include the assigned query string:- |
| -*/</span> |
| -function addGlobalQueryOnClick(linkRef){ |
| - <span class="commentJS">/* If the - linkRef - parameter can be type converted to true |
| - (which it will if it refers to an object):- |
| - */</span> |
| - if(linkRef){ |
| - <span class="commentJS">/* Assign a reference to a global function to the event |
| - handling property of the link so that it becomes the |
| - element's event handler:- |
| - */</span> |
| - linkRef.onclick = forAddQueryOnClick; |
| - } |
| -} |
| -<span class="commentJS">/* A global function declaration for a function that is intended to act |
| - as an event handler for a link element, adding the value of a global |
| - variable to the - href - of an element as an event handler:- |
| -*/</span> |
| -function forAddQueryOnClick(){ |
| - this.href += ('?quantaty='+escape(quantaty)); |
| - return true; |
| -} |
| -</pre> |
| - |
| -<p> |
| -As the inner function in the first version is not being used to exploit |
| -the closures produced by its use, it would be more efficient not to use |
| -an inner function, and thus not repeat the process of creating many |
| -essentially identical function objects. |
| -</p> |
| - |
| -<p> |
| -A similar consideration applies to object constructor functions. It is |
| -not uncommon to see code similar to the following skeleton constructor:- |
| -</p> |
| - |
| - |
| -<pre> |
| -function ExampleConst(param){ |
| - <span class="commentJS">/* Create methods of the object by evaluating function expressions |
| - and assigning references to the resulting function objects |
| - to the properties of the object being created:- |
| - */</span> |
| - this.method1 = function(){ |
| - ... <span class="commentJS">// method body.</span> |
| - }; |
| - this.method2 = function(){ |
| - ... <span class="commentJS">// method body.</span> |
| - }; |
| - this.method3 = function(){ |
| - ... <span class="commentJS">// method body.</span> |
| - }; |
| - <span class="commentJS">/* Assign the constructor's parameter to a property of the object:- |
| - */</span> |
| - this.publicProp = param; |
| -} |
| -</pre> |
| - |
| -<p> |
| -Each time the constructor is used to create an object, with |
| -<code>new ExampleConst(n)</code>, a new set of function objects are |
| -created to act as its methods. So the more object instances that are |
| -created the more function objects are created to go with them. |
| -</p> |
| - |
| -<p> |
| -Douglas Crockford's technique for emulating private members on |
| -javascript objects exploits the closure resulting form assigning |
| -references to inner function objects to the public properties of a |
| -constructed object from within its constructor. But if the methods of |
| -an object are not taking advantage of the closure that they will form |
| -within the constructor the creation of multiple function objects for |
| -each object instantiation will make the instantiation process slower |
| -and more resources will be consumed to accommodate the extra function |
| -objects created. |
| -</p> |
| - |
| -<p> |
| -In that case it would be more efficient to create the function object |
| -once and assign references to them to the corresponding properties of |
| -the constructor's <code>prototype</code> so they may be shared by all |
| -of the objects created with that constructor:- |
| -</p> |
| - |
| -<pre> |
| -function ExampleConst(param){ |
| - <span class="commentJS">/* Assign the constructor's parameter to a property of the object:- |
| - */</span> |
| - this.publicProp = param; |
| -} |
| -<span class="commentJS">/* Create methods for the objects by evaluating function expressions |
| - and assigning references to the resulting function objects to the |
| - properties of the constructor's prototype:- |
| -*/</span> |
| -ExampleConst.prototype.method1 = function(){ |
| - ... <span class="commentJS">// method body.</span> |
| -}; |
| -ExampleConst.prototype.method2 = function(){ |
| - ... <span class="commentJS">// method body.</span> |
| -}; |
| -ExampleConst.prototype.method3 = function(){ |
| - ... <span class="commentJS">// method body.</span> |
| -}; |
| - |
| -</pre> |
| -<h2><a name="clMem" id="clMem">The Internet Explorer Memory Leak Problem</a></h2> |
| - |
| -<p> |
| -The Internet Explorer web browser (verified on versions 4 to 6 (6 is |
| -current at the time of writing)) has a fault in its garbage collection |
| -system that prevents it from garbage collecting ECMAScript and some |
| -host objects if those host objects form part of a "circular" |
| -reference. The host objects in question are any DOM Nodes (including |
| -the document object and its descendants) and ActiveX objects. If a |
| -circular reference is formed including one or more of them, then |
| -none of the objects involved will be freed until the browser is closed |
| -down, and the memory that they consume will be unavailable to the |
| -system until that happens. |
| -</p> |
| - |
| -<p> |
| -A circular reference is when two or more objects refer to each other in |
| -a way that can be followed and lead back to the starting point. Such |
| -as object 1 has a property that refers to object 2, object 2 has a |
| -property that refers to object 3 and object 3 has a property that |
| -refers back to object 1. With pure ECMAScript objects as soon as no |
| -other objects refer to any of objects 1, 2 or 3 the fact that they only |
| -refer to each other is recognised and they are made available for |
| -garbage collection. But on Internet Explorer, if any of those objects |
| -happen to be a DOM Node or ActiveX object, the garbage collection |
| -cannot see that the circular relationship between them is isolated |
| -from the rest of the system and free them. Instead they all stay in |
| -memory until the browser is closed. |
| -</p> |
| - |
| -<p> |
| -Closures are extremely good at forming circular references. If a |
| -function object that forms a closure is assigned as, for example, and |
| -event handler on a DOM Node, and a reference to that Node is assigned |
| -to one of the Activation/Variable objects in its <dfn>scope chain</dfn> then a |
| -circular reference exists. |
| -<span class="scopeCh">DOM_Node.onevent -></span> |
| -<span class="scopeCh">function_object.[[scope]] -></span> |
| -<span class="scopeCh">scope_chain -></span> |
| -<span class="scopeCh">Activation_object.nodeRef -></span> |
| -<span class="scopeCh">DOM_Node</span>. |
| -It is very easy to do, and a bit of browsing around a site that forms |
| -such a reference in a piece of code common to each page can consume |
| -most of the systems memory (possibly all). |
| -</p> |
| - |
| -<p> |
| -Care can be taken to avoid forming circular references and remedial |
| -action can be taken when they cannot otherwise be avoided, such as |
| -using IE's onunload event to null event handling function |
| -references. Recognising the problem and understanding closures |
| -(and their mechanism) is the key to avoiding this problem with IE. |
| -</p> |
| - |
| -<p id="rToc"> |
| -<a href="faq_notes.html#toc">comp.lang.javascript FAQ notes T.O.C.</a> |
| -</p> |
| - |
| -<ul style="list-style-type:none;margin-top:2.5em;"> |
| - <li>Written by <span class="person">Richard Cornford</span>. March 2004.</li> |
| - <li>With corrections and suggestions by:-<br> |
| - <ul style="list-style-type:none;"> |
| - <li><span class="person">Martin Honnen</span>.</li> |
| - <li><span class="person">Yann-Erwan Perio (Yep)</span>.</li> |
| - <li><span class="person">Lasse Reichstein Nielsen</span>. (<a href="#clDefN">definition of closure</a>)</li> |
| - <li><span class="person">Mike Scirocco</span>.</li> |
| - <li><span class="person">Dr John Stockton</span>.</li> |
| - <li><span class="person">Garrett Smith</span>.</li> |
| - </ul> |
| - </li> |
| -</ul> |
| -</body> |
| -</html> |
| /cljs/notes/closures/index.html |
| Property changes: |
| Deleted: svn:mime-type |
| ## -1 +0,0 ## |
| -text/plain |
| \ No newline at end of property |
| Index: cljs/notes/notes.css |
| =================================================================== |
| --- cljs/notes/notes.css (revision 45) |
| +++ cljs/notes/notes.css (nonexistent) |
| @@ -1,34 +0,0 @@ |
| -#contTable { |
| - font-size: 120%; |
| -} |
| -#contTable, #contTable li dt { |
| - font-weight: bold; |
| -} |
| - |
| -#contTable dl { |
| - margin-left: 1.1em; |
| - font-size: 86%; |
| -} |
| - |
| -#contTable dl * { |
| - margin-left: 0; |
| - padding-left: 0; |
| -} |
| - |
| -#contTable dl dd { |
| - margin-left: 2.2em; |
| -} |
| - |
| -#contTable li * { |
| - font-weight: normal; |
| -} |
| - |
| -div { |
| - background: transparent; |
| - border: 0; |
| - padding: 0; |
| -} |
| - |
| -#faqNav a { |
| - font-weight: 700; |
| -} |
| /cljs/notes/notes.css |
| Property changes: |
| Deleted: svn:mime-type |
| ## -1 +0,0 ## |
| -text/plain |
| \ No newline at end of property |
| Index: cljs/notes/code-guidelines/index.html |
| =================================================================== |
| --- cljs/notes/code-guidelines/index.html (revision 45) |
| +++ cljs/notes/code-guidelines/index.html (nonexistent) |
| @@ -1,615 +0,0 @@ |
| -<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" |
| - "http://www.w3.org/TR/html4/strict.dtd"> |
| -<html lang="en"> |
| -<head> |
| -<meta http-equiv="Content-type" content="text/html;charset=UTF-8"> |
| -<title>Code Guidelines for Rich Internet Application Development</title> |
| - |
| -<link rel="schema.DC" href="http://www.purl.org/dc/elements/1.1/"> |
| -<meta name="DC.title" lang="en" content="Code Guidlines for Rich Internet Applications"> |
| -<meta name="DC.date" scheme="W3CDTF" content="2010-05-29"> |
| -<meta name="DC.source" content="http://www.ecma-international.org/publications/standards/Ecma-262.htm"> |
| -<meta name="DC.publisher" content="Garrett Smith"> |
| -<meta name="DC.Publisher.Address" content="dhtmlkitchen@gmail.com"> |
| -<meta name="DCTERMS.audience" content="Programmers, web developers"> |
| -<meta name="DC.description" content="Guidlines and Best Practices for javascript (ECMAScript) in web applications."> |
| -<meta name="DC.source" content="http://www.ecma-international.org/publications/standards/Ecma-262.htm"> |
| -<meta name="DC.source" content="http://www.w3.org/TR/html4/"> |
| - |
| -<meta name="DCTERMS.language" scheme="RFC1766" content="en"> |
| -<link rel="DCTERMS.isReferencedBy" href="/faq/notes/" > |
| - |
| -<meta name="DC.source" content="news:comp.lang.javascript"> |
| - |
| - |
| -<link href="../../faq.css" rel="stylesheet" type="text/css"> |
| -<link href="../notes.css" rel="stylesheet" type="text/css"> |
| -<style type="text/css"> |
| -li { |
| - font-weight: bold; |
| -} |
| -li p, li div, ul ul ul li { |
| - font-weight: normal; |
| -} |
| -h4 { |
| - margin: .5ex; |
| - font-size: 1em; |
| -} |
| -</style> |
| - |
| -</head> |
| -<body> |
| -<h1>Code Guidelines for Rich Internet Application Development</h1> |
| -<div id="faqNav"> |
| - <a href="../../">FAQ</a> > <a href="../">FAQ Notes</a> |
| -</div> |
| -<p> |
| -By Garrett Smith, with contributions from Asen Bozhilov, RobG, John G Harris, David Mark, and Dmitry Soshnikov. |
| -</p> |
| -<h2>Abstract</h2> |
| -<p> |
| - This document points to the causes of errors and problems related to javascript |
| - for web applications and provides explanation of what to do instead. |
| -</p> |
| -<p> |
| - When followed, these guidelines can improve the code |
| - stability and maintainability of a Rich Internet Application deployed |
| - across a wide range of web browsers. |
| -</p> |
| -<p> |
| - For code reviews, this document and the |
| - <a href="../review/">Code Review Guidelines</a> should be read by the code author and code reviewer. |
| -</p> |
| -<h2>Guidelines</h2> |
| -<ul> |
| - <li>Markup |
| - <ul> |
| - <li> |
| - <p>Use valid html <a href="http://validator.w3.org">validator.w3.org</a>.</p> |
| - <p> |
| - Code that uses malformed, nonconforming HTML is expecting nonstandard behavior. |
| - When a web browser encounters a problem in HTML, it must perform error correction. |
| - Since there are no error correction mechanisms defined in HTML 4, browsers |
| - handle the problem in proprietary ways. |
| - </p> |
| - <p> |
| - When the browser parses a document, it creates a DOM representation of it. |
| - If the browser performed error correction when parsing, the outcome is a |
| - different DOM. For an example with a detailed explanation, see: |
| - <a href="http://ln.hixie.ch/?start=1037910467&count=1" |
| - >Tag Soup: How UAs handle <x> <y> </x> </y></a> |
| - and also <a href="http://jibbering.com/faq/notes/detect-browser/#bdValid" |
| - >Avoiding Structural Differences in the Browser DOMs</a>. |
| - </p> |
| - <p> |
| - The W3C validator results either with green <code>PASS</code> or with one or more errors |
| - at which point it is clear that the code is not completed to |
| - standard. |
| - </p> |
| - </li> |
| - <li> |
| - <p>Use standards mode, with HTML <code>DOCTYPE</code> first (neither comments nor xml declaration preceeding it).</p> |
| - </li> |
| - <li> |
| - <p>Reduce the markup to simplest semantic markup necessary.</p> |
| - <p>Simpler code is easier to read.</p> |
| - <p> |
| - More markup means more bytes transferred over the wire, |
| - more parsing for the browser, and a larger DOM for scripts |
| - to traverse. |
| - </p> |
| - </li> |
| - <li><p>Set the HTTP content-type text/html.</p></li> |
| - <li> |
| - <p>Set charset in HTTP or, if using a <code>META</code> tag, as |
| - <a href="http://www.w3.org/TR/html4/charset.html#spec-char-encoding">early as possible</a> |
| - in the <code>HEAD</code>. |
| - </p> |
| - </li> |
| - <li> |
| - <p> |
| - Escape ETAGO delimiter with backwards solidus (backslash). |
| - See also : <a href="http://www.cs.tut.fi/~jkorpela/www/revsol.html" |
| - >The reverse solidus (backslash, <code>\</code>) in Web authoring</a>. |
| - </p> |
| - <p> |
| - A reverse solidus (backslash) should appear before the solidus |
| - symbol in the sequence "</", resulting in "<\/", and not "<" + "/". |
| - <a href="http://www.w3.org/TR/html4/appendix/notes.html#h-B.3.2.1" |
| - >ETAGO in SCRIPT and STYLE</a>. |
| - </p> |
| - </li> |
| - <li> |
| - <p> |
| - Do not use <code>javascript:</code> pseudo protocol. |
| - <a href="../../#javascriptURI">FAQ: I have <a href="javascript:somefunction()"> what ... ?</a> |
| - </p> |
| - </li> |
| - </ul> |
| - <h3>Validation Note</h3> |
| - <p> |
| - The <a href="http://validator.w3.org/docs/help.html#validandconform">W3C |
| - validator does not validate conformance</a>. Conformance errors can |
| - cause problems and must be recognized and corrected. See also: |
| - <a href="http://www.w3.org/TR/html4/appendix/notes.html#notes-invalid-docs" |
| - >Appendix B: Performance, Implementation, and Design Notes: Invalid Documents</a>, |
| - which states <cite>This specification does not define how conforming |
| - user agents handle general error conditions...</cite> |
| - </p> |
| - |
| - <p> |
| - When the code does not do what is wanted of it, it is important to understand |
| - why. The HTML validator can help because it can report HTML errors (and much more quickly |
| - than a tired human eye could). |
| - </p> |
| - |
| - <p> |
| - Poring over a long list of validation errors to find the validation error(s) |
| - that could be related to the code not doing what is wanted of it is error-prone, |
| - time-consuming guesswork. When an HTML error is found, the next task is finding |
| - when that error crept in, why it is there, what other code is relying |
| - on the problematic area, who wrote that other code, where is he now, so a |
| - possible fix can be discussed, etc. Using invalid HTML is a waste of time. |
| - Instead, by always using valid HTML, clear expectations can be made of what |
| - the code should be doing. |
| - </p> |
| - |
| - <p> |
| - Running the W3C validator is a little extra effort that saves a lot of time. |
| - See also: <a href="http://validator.w3.org/docs/why.html">W3C: Why Validate?</a> |
| - </p> |
| - </li> |
| - |
| - <li> |
| - CSS |
| - <ul> |
| - <li> |
| - <p> |
| - Use valid css. (Excepting vendor extensions and css 3 features). |
| - <a href="http://jigsaw.w3.org/css-validator/">http://jigsaw.w3.org/css-validator/</a> |
| - </p> |
| - </li> |
| - <li> |
| - <p> |
| - Class and id selectors should have semantic meaning. See also: |
| - <a href="http://www.w3.org/QA/Tips/goodclassnames">Use class with semantics in mind</a>. |
| - Selectors such as <code>.redButton</code>, <code>#ItalicStatement</code> are meaningless. |
| - Instead, use class and id that represent an object or state. |
| - </p> |
| - Example: |
| - <pre>.errorButton, #warningMessage, .active-panel</pre> |
| - <p> |
| - This makes the code meaningful even when the styles change. |
| - </p> |
| - </li> |
| - </ul> |
| - </li> |
| - <li> |
| - Script: |
| - <ul> |
| - <li>Variables |
| - <ul> |
| - <li> |
| - <p> |
| - Declare variables in the narrowest possible scope, never global. |
| - </p> |
| - </li> |
| - <li> |
| - <p> |
| - Do not assign to undeclared identifiers (do not forget <code>var</code>). |
| - </p> |
| - </li> |
| - <li> |
| - <p> |
| - Give each identifier a meaningful name. |
| - </p> |
| - </li> |
| - </ul> |
| - </li> |
| - <li id="methods">Methods |
| - <ul> |
| - <li> |
| - Avoid initialization routines that loop through the DOM. |
| - Instead, use event delegation and inspect the target (see design |
| - section). |
| - </li> |
| - <li>Avoid methods that do too much or have side effects. Methods should be simple and do one thing.</li> |
| - <li>Avoid long parameter lists. The fewer the better.</li> |
| - <li>Do not include non-localized strings in scripts (excepting developer error messages).</li> |
| - <li>Be clear and consistent with their return type.</li> |
| - <li>Test not only that it succeeds correctly (happy path), |
| - but also that it fails correctly (sad path). </li> |
| - </ul> |
| - </li> |
| - <li id="design">Design |
| - <ul> |
| - <li>Avoid creating and using useless methods, e.g. |
| - <pre>goog.isDef = function(val) { |
| - return val !== undefined; |
| -}; |
| -</pre> |
| - </li> |
| - <li> |
| - Do not use non-standard or inconsistent ECMAScript methods (<code>substr</code>, |
| - <code>escape</code>, <code>getYear</code>, <code>parseInt</code> with no radix). Instead, use |
| - <code>substring</code>, <code>encodeURIComponent</code>, <code>getFullYear</code>, |
| - and <code>parseInt(<var>s</var>, 10)</code> with a radix, respectively. |
| - </li> |
| - <li> |
| - Do not use non-standard syntax such as "function statement" |
| - (see also: <a href="/faq/#functionStatement">FAQ: What is a function statement?</a> and |
| - <a href="http://kangax.github.io/nfe/" |
| - >Named Function Expressions</a>). |
| - </li> |
| - <li> |
| - Consider refactoring a function with conditionals to dynamic dispatch or |
| - function redefinition. |
| - </li> |
| - <li> |
| - Avoid modifying objects you don't own. |
| - <p> |
| - A piece of code that modifies any object it does not own is not |
| - clear to the client of the API where those changes are coming from. |
| - </p> |
| - |
| - <p> |
| - Modifying built-ins has been known to cause forwards-compatibility problems |
| - and conflict with other code. Modifying host objects can result in |
| - javascript errors. |
| - </p> |
| - |
| - <p> |
| - Instead, use another approach. For example, define your own object, possibly hidden |
| - in a closure. |
| - </p> |
| - |
| - <p> |
| - Modifying host objects or host objects' constructors' prototypes with new properties |
| - is unspecified. The practice has been known to be the source of cross-browser problems. |
| - </p> |
| - |
| - <p> |
| - Where DOM host objects are implemented with prototypes, the prototype chain |
| - is implementation-dependent (not specified). The interface-based API design of the |
| - <a href="http://www.w3.org/TR/DOM-Level-2-HTML/">W3C DOM</a> does not forbid a |
| - sub-interface from providing a more specific implementation that could shadow |
| - the a user-defined method of the same name further up in the prototype chain. |
| - </p> |
| - <p> |
| - The W3C DOM does not prevent implementations from creating their own |
| - interfaces. Quite often implementations do create interfaces that are |
| - interwoven through the interface hierarchy. Such interfaces may or may |
| - not be accessible to code. |
| - </p> |
| - </li> |
| - </ul> |
| - </li> |
| - <li> |
| - Strings: |
| - <ul> |
| - <li> |
| - Use efficient string concatenation techniques. Do not repeatedly create |
| - and discard temporary strings. |
| - </li> |
| - <li> |
| - Instead use <code>String.prototype.concat(a, b, c)</code> or |
| - <code>htmlArray.push(a, b, c);</code> |
| - </li> |
| - </ul> |
| - </li> |
| - <li> |
| - Loops: |
| - <ul> |
| - <li> |
| - Avoid chains of identifiers in loop. |
| - Replace a long chain of identifiers with a variable. |
| - </li> |
| - <li> |
| - Do not traverse over elements to modify the style or add an event |
| - callback to each element. |
| - <div> |
| - |
| - <p> |
| - For Styles, replace a loop that applies styles to descendants by |
| - adding a class token to the nearest common ancestor (<a |
| - href="descendant-sel.html">example</a>). |
| - </p> |
| - <ol> |
| - <li> |
| - Add a style rule to the stylesheet with selector text |
| - <code>.special-state .special-descendant-class</code>. |
| - </li> |
| - <li> |
| - In the HTML, for each element to be to dynamically updated, add |
| - the class attribute <code>"special-descendant-class"</code>. |
| - </li> |
| - <li> |
| - In the script, add the class "special-state" to the ancestor |
| - and. |
| - The style rule defined in the stylesheet will be applied to |
| - the descendants with <code>"special-descendant-class"</code>. |
| - </li> |
| - </ol> |
| - <p> |
| - For events, use event delegation. That is, replace a loop that adds a |
| - callback to each element in a collection with a callback on a common ancestor. |
| - </p> |
| - </div> |
| - </li> |
| - </ul> |
| - </li> |
| - <li>Statements: |
| - <ul> |
| - <li> |
| - <p> |
| - Do not use <code>==</code> where strict equality is required. |
| - Where strict equality is required, the strict equality operator <code>===</code> must be used. |
| - The strict equality operator should always be used to compare objects. |
| - </p> |
| - </li> |
| - <li> |
| - <p> |
| - Do not use Boolean conversion of value that may be acceptably falsish, |
| - e.g. <code>if(e.pageX)</code>. |
| - </p> |
| - <p> |
| - Instead check the property using <code>typeof</code>. For example: |
| - <code>if(typeof e.pageX == "number")</code>. |
| - </p> |
| - </li> |
| - <li> |
| - <p> |
| - Do not use useless statements (e.g. <code>typeof it == "array"</code>). In addition to |
| - contributing to code size and runtime performance, useless statements make the |
| - code harder to understand. |
| - </p> |
| - </li> |
| - </ul> |
| - </li> |
| - <li id="regex"> |
| - Regular Expressions |
| - <ul> |
| - <li> |
| - Be simple, but do not match the wrong thing. |
| - A complex regular expression is harder to understand than a simple one. |
| - |
| - <p> |
| - The context of a Regular Expression is as important as what it can match. |
| - A complex regular expression is harder to understand than a simple one. |
| - Simple regular expressions are preferred. It is sometimes acceptable for the |
| - expression to match the wrong thing, just so long as the context in which it |
| - is used precludes or handles that. |
| - </p> |
| - <pre> |
| -// Wrong: Matches 137, 138... |
| -ARROW_KEY_EXP : /37|38|39|40/; |
| - |
| -// Right: matches only arrow keys. |
| -ARROW_KEY_EXP : /^(?:37|38|39|40)$/; |
| - |
| -// Simple: Can match the wrong thing, but that can be handled. |
| -var iso8601Exp = /^\s*([\d]{4})-(\d\d)-(\d\d)\s*$/; |
| -</pre> |
| - <p> |
| - Trying to match leap years would be excessively complex. |
| - Instead, the date validation can be addressed where the expression is used. |
| - </p> |
| - <p> |
| - As with functions, test not only that it succeeds correctly, |
| - but also that it fails correctly. |
| - </p> |
| - </li> |
| - </ul> |
| - </li> |
| - <li id="formatting"> |
| - Formatting: |
| - <ul> |
| - <li> |
| - Code should not be formatted with tabs. |
| - Space indentation should be used consistently. |
| - </li> |
| - <li> |
| - Code should be formatted to a maximal line length. For newsgroup code, |
| - it should not exceed 72 chars. |
| - </li> |
| - <li id="asi">Semicolons: |
| - <h4>Semicolons, Newlines, and ASI (Automatic Semicolon Insertion)</h4> |
| - <p> |
| - Avoid mistakes caused by <dfn title="Automatic Semicolon Insertion">ASI</dfn>. |
| - </p> |
| - |
| - <p> |
| - In ECMAScript, line terminators affect how a program is interpreted. This is a design |
| - mistake of the language of which the details are complicated. The following guidelines |
| - can help avoid ASI problems with both <dfn>restricted productions</dfn> and productions that |
| - are not restricted. |
| - </p> |
| - <h5>Line Terminators: Restricted Productions</h5> |
| - |
| - <p> |
| - <dfn>Restricted productions</dfn> include only the postfix operators and the control |
| - statements <code>return</code>, <code>throw</code>, <code>continue</code>, and |
| - <code>break</code>. ASI affects a <dfn>restricted productions</dfn> |
| - when a line terminator is introduced. The following guidelines help avoid that mistake: |
| - </p> |
| - <h5>ASI Guidelines for <dfn>restricted productions</dfn>:</h5> |
| - <ul> |
| - <li> |
| - A postfix <code>++</code> or <code>--</code> operator must appear |
| - on the same line as its operand. |
| - </li> |
| - <li>An Expression in a <code>return</code> or <code>throw</code> statement must |
| - start on the same line as the <code>return</code> or <code>throw</code> token. |
| - </li> |
| - <li> |
| - An Identifier in a <code>break</code> or <code>continue</code> statement |
| - must be on the same line as the <code>break</code> or <code>continue</code> token. |
| - </li> |
| - </ul> |
| - |
| - <h5>Guidelines for Semicolons in Source Code:</h5> |
| - <ul> |
| - <li> |
| - <p> |
| - Don't rely on ASI. Use semicolons explicitly. |
| - </p> |
| - <p> |
| - A program that uses semicolons explicitly is less |
| - susceptible to different interpretation caused by |
| - changes in line terminators and expressions. |
| - </p> |
| - <p> |
| - For more details, please see: <a href="asi.html" |
| - >Automatic Semicolon Insertion : Unrestricted Productions</a> |
| - </p> |
| - </li> |
| - </ul> |
| - <h5>Extraneous Semicolons and The Empty Statement, ;</h5> |
| - <p> |
| - While it is important use semicolons explicitly, where required, |
| - there are cases where a semicolon should not be added. |
| - </p> |
| - <p> |
| - The <dfn>Statement</dfn>s that do not end in semicolon all end in close |
| - curly braces instead. They are : |
| - </p> |
| -<pre> |
| -Block: |
| - { ... } |
| - |
| -SwitchStatement: |
| - switch ( ... ) { ... } |
| - |
| -TryStatement: |
| - try ... catch ( ... ) { ... } |
| - try ... finally { ... } |
| -</pre> |
| - |
| - <p> |
| - Something that isn't a statement but looks like one: |
| - </p> |
| -<pre> |
| -Function Declaration: |
| - function x{ ... } |
| -</pre> |
| - <p> |
| - A semicolon that immediately follows a FunctionDeclaration |
| - is interpreted as an <dfn>EmptyStatement</dfn>. Useless |
| - statements should be avoided. |
| - </p> |
| - </li> |
| - </ul> |
| - </li> |
| - <li id="dom"> |
| - DOM: |
| - <ul> |
| - <li id="unrelatedInference"> |
| - Do not use poor or unrelated inferences such as <a href="../detect-browser/">browser detection</a> |
| - (see also <a href="../../#detectBrowser">FAQ: How do I detect Opera/Safari/IE?</a>). |
| - <pre>// Unrelated inference: |
| -if(typeof window.innerHeight == "number") // it isn't IE |
| -// Good inference: |
| -if(typeof window.innerHeight == "number") // innerHeight available. |
| - |
| -// Unrelated inference based on proprietary XUL feature (Borrowed from MooTools). |
| -// See also: Bug 340571 - getBoxObjectFor leaking-onto-the-Web disaster |
| -// https://bugzilla.mozilla.org/show_bug.cgi?id=340571 |
| -gecko: function(){ |
| - return (document.getBoxObjectFor == undefined) ? false : ((document.getElementsByClassName) ? 19 : 18); |
| -} |
| -</pre> |
| - </li> |
| - <li> |
| - Use standards W3C DOM approach preferentially and proprietary DOMs as a fallback. |
| - </li> |
| - <li> |
| - If an approach requires several branches for handling browser variance, |
| - look for a different approach that works in all tested browsers. |
| - </li> |
| - <li> |
| - Do not traverse the DOM on page load; do not traverse the DOM |
| - using user-defined css query selector. |
| - </li> |
| - <li> |
| - Instead of traversing the DOM, use Event delegation. |
| - </li> |
| - </ul> |
| - </li> |
| - <li id="hostObjects"> |
| - Host Objects: |
| - <ul> |
| - <li>Operators: |
| - <ul> |
| - <li> |
| - Do not use <code>delete</code> operator with host object This will cause errors in IE, and others: |
| - <pre>delete window.location; //Security error" code: "1000"</pre> |
| - </li> |
| - <li> |
| - Do not add any expando properties (<code>unselectable</code> is safe). |
| - See also: <a href="http://msdn.microsoft.com/en-us/library/ms533747(v=VS.85).aspx" |
| - >msdn expando</a>. |
| - </li> |
| - <li> |
| - Host objects that error upon <code>[[Get]]</code> access are often |
| - <code>ActiveX</code> objects. These include, but are not limited to: |
| - <ul> |
| - <li> |
| - Disconnected nodes whose <code>parentNode</code> is not an element (<code>node.offsetParent</code>). |
| - </li> |
| - <li> |
| - <code>XMLHttpRequest</code> methods (<code>open</code>, <code>send</code>, etc). |
| - </li> |
| - <li> |
| - filters: <code>elem.filters.alpha</code>, <code>elem.style.filters.alpha</code>, etc. |
| - </li> |
| - <li> |
| - <code>document.styleSheets[99999] </code>- Error from <code>[[Get]]</code> for a |
| - nonexistent numeric property of a <code>styleSheets</code> collection. |
| - </li> |
| - <li> |
| - <code>link.href</code> for <code>nntp:</code> links in IE. |
| - </li> |
| - <li> |
| - <code>NodeList</code> in Safari 2 - do not attempt access a |
| - nonexistent property |
| - (e.g. <code>document.childNodes.slice</code>). |
| - </li> |
| - </ul> |
| - </li> |
| - </ul> |
| - </li> |
| - <li>Type conversion |
| - <dl> |
| - <dt><code>[[ToString]]</code></dt> |
| - <dd>Perform string conversion by starting concatenation with a string value. |
| - See <a href="http://groups.google.bg/group/comp.lang.javascript/msg/1528f612e31f09fe" |
| - >Newsgroup message explanation</a>. |
| - </dd> |
| - </dl> |
| - </li> |
| - </ul> |
| - </li> |
| - <li> |
| - Comments: |
| - <ul> |
| - <li> |
| - Avoid too many comments; let the code speak for itself. |
| - </li> |
| - <li> |
| - Avoid comments that are likely to become obsolete or are redundant. |
| - </li> |
| - <li> |
| - Explain <em>why</em>, not <em>what</em>. |
| - Comments should help explain things that are not obvious. |
| - </li> |
| - <li> |
| - Comments should never contain inaccurate statements or terminology, |
| - should never be misleading, and should be well-written. |
| - </li> |
| - </ul> |
| - </li> |
| - </ul> |
| - </li> |
| -</ul> |
| -</body> |
| -</html> |
| /cljs/notes/code-guidelines/index.html |
| Property changes: |
| Deleted: svn:mime-type |
| ## -1 +0,0 ## |
| -text/plain |
| \ No newline at end of property |
| Index: cljs/notes/code-guidelines/descendant-sel.html |
| =================================================================== |
| --- cljs/notes/code-guidelines/descendant-sel.html (revision 45) |
| +++ cljs/notes/code-guidelines/descendant-sel.html (nonexistent) |
| @@ -1,102 +0,0 @@ |
| - <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" |
| - "http://www.w3.org/TR/html4/strict.dtd"> |
| - |
| -<html lang="en"> |
| -<head> |
| -<meta http-equiv="Content-type" content="text/html;charset=UTF-8"> |
| -<link rel="Index" href="../"> |
| -<title>Toggle Class To Trigger Descendant Selector Rules</title> |
| - |
| -<style type="text/css"> |
| -/* Make table pretty */ |
| -table { |
| - border: 1px solid #8893af; |
| - background: #dfe3ff; |
| - width: 33em; |
| - font-family: verdana, sans-serif; |
| - margin: 12px; |
| -} |
| -tr { |
| - background: #eef6ff; |
| -} |
| - |
| -td { |
| - padding: 4px; |
| -} |
| - |
| -/* The descendant selector trick */ |
| -.even .odd-row, .odd tr { |
| - display: none; |
| -} |
| - |
| -.odd .odd-row { |
| - display: block; |
| - display: table-row; |
| -} |
| - |
| -.odd-row { |
| - background: #fdfeff; |
| -} |
| -</style> |
| - |
| -<script type="text/javascript"> |
| -function showEven() { |
| - var testTable = document.getElementById("testTable"); |
| - testTable.className = "even"; |
| -} |
| - |
| -function showOdd() { |
| - var testTable = document.getElementById("testTable"); |
| - testTable.className = "odd"; |
| -} |
| - |
| -function showAll() { |
| - var testTable = document.getElementById("testTable"); |
| - testTable.className = ""; |
| -} |
| -</script> |
| -</head> |
| - |
| -<body> |
| -<h1>Toggle Class To Trigger Descendant Selector Rules</h1> |
| -<h2>Description</h2> |
| -<p> |
| - By toggling a class name on the table, the descendant selector is applied and certain rows are shown |
| - and hidden. |
| -</p> |
| -<h2>Demonstration</h2> |
| -<div> |
| - <button onclick="showEven()">showEven()</button> |
| - <button onclick="showOdd()">showOdd()</button> |
| - <button onclick="showAll()">showAll()</button> |
| -</div> |
| - |
| -<table id="testTable"> |
| - <tr> |
| - <td>even row, even row, even row, even row, even row, even row</td> |
| - </tr> |
| - <tr class="odd-row"> |
| - <td>odd row, odd row, odd row, odd row, odd row, odd row</td> |
| - </tr> |
| - <tr> |
| - <td>even row, even row, even row, even row, even row, even row</td> |
| - </tr> |
| - <tr class="odd-row"> |
| - <td>odd row, odd row, odd row, odd row, odd row, odd row</td> |
| - </tr> |
| - <tr> |
| - <td>even row, even row, even row, even row, even row, even row</td> |
| - </tr> |
| - <tr class="odd-row"> |
| - <td>odd row, odd row, odd row, odd row, odd row, odd row</td> |
| - </tr> |
| - <tr> |
| - <td>even row, even row, even row, even row, even row, even row</td> |
| - </tr> |
| - <tr class="odd-row"> |
| - <td>odd row, odd row, odd row, odd row, odd row, odd row</td> |
| - </tr> |
| -</table> |
| -</body> |
| - |
| -</html> |
| /cljs/notes/code-guidelines/descendant-sel.html |
| Property changes: |
| Deleted: svn:mime-type |
| ## -1 +0,0 ## |
| -text/plain |
| \ No newline at end of property |
| Index: cljs/notes/code-guidelines/asi.html |
| =================================================================== |
| --- cljs/notes/code-guidelines/asi.html (revision 45) |
| +++ cljs/notes/code-guidelines/asi.html (nonexistent) |
| @@ -1,152 +0,0 @@ |
| -<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" |
| - "http://www.w3.org/TR/html4/strict.dtd"> |
| -<html lang="en"> |
| -<head> |
| -<meta http-equiv="Content-type" content="text/html;charset=UTF-8"> |
| - |
| -<link rel="schema.DC" href="http://www.purl.org/dc/elements/1.1/"> |
| - |
| -<meta name="DC.title" lang="en" content="Automatic Semicolon Insertion - Unrestricted Productions"> |
| -<meta name="DC.date" scheme="W3CDTF" content="2010-05-29"> |
| - |
| -<meta name="DC.source" content="http://www.ecma-international.org/publications/standards/Ecma-262.htm"> |
| -<meta name="DC.publisher" content="Garrett Smith"> |
| -<meta name="DC.Publisher.Address" content="dhtmlkitchen@gmail.com"> |
| -<meta name="DCTERMS.audience" content="Programmers, web developers"> |
| -<meta name="DC.description" content="How Automatic Semicolon Insertion affects an ECMAScript program."> |
| -<meta name="DC.source" content="http://www.ecma-international.org/publications/standards/Ecma-262.htm"> |
| -<meta name="DCTERMS.language" scheme="RFC1766" content="en"> |
| -<link rel="DCTERMS.isReferencedBy" href="./#asi" > |
| - |
| -<meta name="DC.source" content="news:comp.lang.javascript"> |
| - |
| -<link href="../../faq.css" rel="stylesheet" type="text/css"> |
| -<link href="../notes.css" rel="stylesheet" type="text/css"> |
| -<title>Automatic Semicolon Insertion - Unrestricted Productions</title> |
| -</head> |
| -<body> |
| -<h1>Automatic Semicolon Insertion</h1> |
| -<p> |
| - Article by Garrett Smith |
| -</p> |
| -<p> |
| - This document is an addendum to <a href="./#asi" |
| - >Code Guidelines for Rich Internet Application Development</a>. |
| -</p> |
| -<h2>Unrestricted Productions</h2> |
| -<p> |
| - Productions that are not <dfn>restricted</dfn> can be created accidentally where |
| - <abbr title="automatic semicolon insertion">ASI</abbr> has been used. This is often |
| - the result of where the developer forgot to use a |
| - semicolon. Regardless, the problems it creates can occur when the order of <dfn>Statements</dfn> |
| - changes or when line terminators are added or removed, including those that appear in comments. |
| - Where semicolons are needed, it is recommended that they appear explicitly. |
| -</p> |
| -<ul> |
| - <li> |
| - <dfn>Arguments</dfn> and property access operations can be created accidentally when the |
| - program relies on <abbr title="automatic semicolon insertion">ASI</abbr>. |
| - </li> |
| - <li> |
| - Line terminators in comments affect <abbr title="automatic semicolon insertion">ASI</abbr> but behavior in implementations, |
| - notably JScript, vary. |
| - </li> |
| - </ul> |
| - <h3>Grouping Operator or Arguments?</h3> |
| - <p> |
| - The parentheses following an <dfn>Expression</dfn> |
| - interpreted as <dfn>Arguments</dfn>, implicating the <dfn>Expression</dfn> in |
| - a <dfn>CallExpression</dfn>: |
| - </p> |
| -<pre>var MyWidget = function(){ |
| - this.name = "mike"; |
| -} |
| -/** |
| - * Initialize Widget |
| - */ |
| -(function() { |
| - /*...*/ |
| -});</pre> |
| - <p> |
| - |
| - The <dfn>FunctionExpression</dfn> that appears on the right hand side of the assignment |
| - to the identifier <code>MyWidget</code> would be called because the parentheses, |
| - which were intended to be a <dfn>Grouping Operator</dfn>, are interpreted as <dfn>Arguments</dfn> |
| - in a <dfn>CallExpression</dfn>, resulting in <code>MyWidget</code> having the value |
| - <code>undefined</code> and <code>window.name</code> getting the value <code>"mike"</code>. |
| - </p> |
| - |
| - <p> |
| - This can be explained by the fact that a program is scanned from left to right, |
| - repeatedly taking the longest possible sequence of characters as the next input element. |
| - Since a <dfn>CallExpression</dfn> is not a <dfn>restricted production</dfn>, the program |
| - would be interpreted as: |
| - </p> |
| - <pre> |
| -var MyWidget = function(){ |
| - this.name = "mike"; |
| -}(function() {}); |
| -</pre> |
| -<h3>ArrayLiteral or Property Accessor?</h3> |
| -<p> |
| -An <dfn>ArrayLiteral</dfn> can be interpreted as property accessor after the |
| -removal of a <dfn>restricted production</dfn>. In this case, <dfn>Expression</dfn> <code>g--</code>. |
| -</p> |
| -<pre> |
| -var g = 12 |
| -g-- |
| -[].slice.call([1,2,3])</pre> |
| -<p> |
| -The program is interpreted as: |
| -</p> |
| -<pre> |
| -var g = 12<kbd>;</kbd> |
| -g--<kbd>;</kbd> |
| -[].slice.call([1,2,3]) |
| -</pre> |
| -<p> |
| -When the postfix operator is removed, a <dfn>SyntaxError</dfn> results. Given the input: |
| -</p> |
| -<pre> |
| -var g = 12 |
| ---g |
| -[].slice.call([1,2,3]) |
| -</pre> |
| -<p>The program is interpreted as:-</p> |
| -<pre> |
| -var g = 12; |
| ---g[].slice.call([1,2,3]) |
| -</pre> |
| -<p> |
| -- and that program is not valid syntax so it results in a <dfn>SyntaxError</dfn>. |
| -</p> |
| -<h3>Line Terminators in Comments</h3> |
| -<p> |
| - A LineTerminator in any <dfn>MultilineComment</dfn> affects |
| - <abbr title="automatic semicolon insertion">ASI</abbr>. From ECMAScript Edition 5 specification, 5.1.2: |
| -</p> |
| -<blockquote> |
| -<p> |
| - A <dfn>MultiLineComment</dfn> (that is, a comment of the form /*...*/ |
| - regardless of whether it spans more than one line) is likewise simply |
| - discarded if it contains no line terminator; but if a <dfn>MultiLineComment</dfn> |
| - contains one or more line terminators, then it is replaced by a single |
| - line terminator, which becomes part of the stream of input elements |
| - for the syntactic grammar. |
| -</p> |
| -</blockquote> |
| - |
| -<p> |
| - Not all implementations follow rules of whitespace in MultiLineComment. JScript is one |
| - such implementation that does not process a <dfn>MultiLineComment</dfn> that contains |
| - a <dfn>LineTerminator</dfn> as a <dfn>LineTerminator</dfn>. |
| -</p> |
| -<p> |
| - A program that uses semicolons explicitly avoids such problems and is less |
| - susceptible to behavior changes (including script errors) caused by inadvertent changes in |
| - line terminators and expressions, including those introduced |
| - by build tools (e.g. minficication). |
| -</p> |
| - |
| -</body> |
| -</html> |
| /cljs/notes/code-guidelines/asi.html |
| Property changes: |
| Deleted: svn:mime-type |
| ## -1 +0,0 ## |
| -text/plain |
| \ No newline at end of property |
| Index: cljs/notes/review/index.html |
| =================================================================== |
| --- cljs/notes/review/index.html (revision 45) |
| +++ cljs/notes/review/index.html (nonexistent) |
| @@ -1,105 +0,0 @@ |
| -<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" |
| - "http://www.w3.org/TR/html4/strict.dtd"> |
| -<html lang="en"> |
| -<head> |
| -<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> |
| -<title>Code Review Guidelines - comp.lang.javascript</title> |
| -<link href="../../faq.css" rel="stylesheet" type="text/css"> |
| -<link href="../notes.css" rel="stylesheet" type="text/css"> |
| -</head> |
| -<body> |
| -<h1>Code Review Guidelines</h1> |
| -<div id="faqNav"> |
| - <a href="../../">FAQ</a> > <a href="../">FAQ Notes</a> |
| -</div> |
| -<p> |
| - Article by Garrett Smith |
| -</p> |
| -<p> |
| -Peer code review is where software developers review each others' |
| -development code. |
| -</p> |
| - |
| -<h2>Benefits</h2> |
| -<p> |
| -The number one benefit to code reviews is code quality. Code reviews make the code |
| -better. Here are some other benefits: |
| -</p> |
| - |
| -<ul> |
| - <li> |
| - Spreads understanding about the code being reviewed. |
| - </li> |
| - <li> |
| - Helps find bugs before they get to QA and avoids QA churn. |
| - </li> |
| - <li> |
| - Helps identify potential problems, bad practices, or maldesign. |
| - </li> |
| - <li> |
| - Preparation for review will require the code author to check his |
| - code against the <a href="../code-guidelines/">code guidelines</a> and |
| - clean it up (bugs fixed prior to review). |
| - </li> |
| - |
| - <li> |
| - Encourages collaboration. |
| - </li> |
| - |
| - <li> |
| - Keeps code cleaner and more maintainable. |
| - </li> |
| -</ul> |
| -<h2>How to perform the Review</h2> |
| -<p> |
| -Take your time understand the problem and how it is addressed in the solution. |
| -</p> |
| - |
| -<p> |
| -Focus on a small piece at a time. |
| -</p> |
| - |
| -<p> |
| -A code review should be objective and should state actual problems. |
| -Saying "the code is bad" is not a helpful review. Instead, explain |
| -the problem clearly. If the problem is severe, then say why. |
| -</p> |
| - |
| -<h2>Preparation of Reviewed Code</h2> |
| -<p> |
| -This section is for the the reviewee (the person whose code is being reviewed). |
| -</p> |
| - |
| -<p> |
| -The reviewee should prepare for a code review by following the |
| -the <a href="../code-guidelines/">code guidelines</a>. |
| -</p> |
| - |
| -<h3>Posting Code for Review and Code Reviews</h3> |
| -<p> |
| -When posting code to the newsgroup, it is important to make sure |
| -to transmit it such that it can be easily read and understood. |
| -</p> |
| - |
| -<ul> |
| - <li>Format the code to 72 char width. </li> |
| - |
| - <li>Replace any spaces in the source code with tabs.</li> |
| - |
| - <li>Post small sections at a time. |
| - <p>By focusing carefully on small |
| - sections, the code review can find more bugs. The reviewer may want to |
| - spend an hour reviewing the code, then come back to re-review his notes |
| - and comments for another hour. |
| - </p> |
| - </li> |
| -</ul> |
| - |
| -<h3>Rebuttals</h3> |
| -<p> |
| -The reveiwee may challenge a criticism and, if the challenge cannot be |
| -rebutted, the criticism shall be withdrawn. |
| -</p> |
| - |
| -</body> |
| -</html> |
| /cljs/notes/review/index.html |
| Property changes: |
| Deleted: svn:mime-type |
| ## -1 +0,0 ## |
| -text/plain |
| \ No newline at end of property |
| Index: cljs/notes/form-access/index.html |
| =================================================================== |
| --- cljs/notes/form-access/index.html (revision 45) |
| +++ cljs/notes/form-access/index.html (nonexistent) |
| @@ -1,729 +0,0 @@ |
| -<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" |
| - "http://www.w3.org/TR/html4/strict.dtd"> |
| -<html lang="en"> |
| -<head><title>Referencing Forms and Form Controls</title> |
| -<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> |
| -<link href="../../faq.css" rel="stylesheet" type="text/css"> |
| -<link href="../notes.css" rel="stylesheet" type="text/css"> |
| -<style type="text/css"> |
| -.commentJS { |
| - background-color: #FFFFCC; |
| - color: #004800; |
| -} |
| -P CODE { |
| - background-color: #FFFFDD; |
| - color: #000000; |
| - padding: 0ex; |
| - margin: 0ex; |
| -} |
| -</style> |
| -</head> |
| -<body> |
| - |
| -<h1 id="faHead">Referencing Forms and Form Controls</h1> |
| -<div id="faqNav"> |
| - <a href="../../">FAQ</a> > <a href="../">FAQ Notes</a> |
| -</div> |
| - |
| -<ul> |
| - <li><a href="#faInt">Introduction</a> |
| - <ul> |
| - <li><a href="#faInF">Forms</a></li> |
| - <li><a href="#faInC">Form Controls</a></li> |
| - </ul> |
| - </li> |
| - <li><a href="#faShrt">Shortcut Accessors</a></li> |
| - <li><a href="#faComMis">The Most Common Mistake</a></li> |
| - <li><a href="#faAnon">Anonymous Form References</a></li> |
| - <li><a href="#faBut">Radio Button and Other Control Collections</a></li> |
| - <li><a href="#faEff">Efficient use of Form Accessors</a></li> |
| -</ul> |
| - |
| -<h2 id="faInt">Introduction</h2> |
| -<h3 id="faInF">Forms</h3> |
| -<p id="faInF_1"> |
| -When the W3C defined the <span class="initialism" title="HyperText Mark-up Language"><abbr title="HyperText Mark-up Language">HTML</abbr></span> DOM specification much of what they included |
| -represented a formalisation of existing browser behaviour. In particular they |
| -defined "convenience" properties on the <code>HTMLDocument</code> |
| -interface that reproduce document level collections common in preceding |
| -browsers. Of specific interest here is the <code>document.forms</code> |
| -collection, which makes all of the <code>FORM</code> elements on a page |
| -available as (zero based) indexed members of the collection. Allowing, |
| -for example, the second <code>FORM</code> element on a page to be |
| -referenced as:- |
| -</p> |
| - |
| -<pre id="faInF_ex1"> |
| -var formElement = document.forms[1]; |
| -</pre> |
| - |
| -<p id="faInF_2"> |
| -<span class="initialism" title="HyperText Mark-up Language"><abbr title="HyperText Mark-up Language">HTML</abbr></span> (but not necessarily XHTML) <code>FORM</code> elements are allowed |
| -<code>NAME</code> attributes and the <code>document.forms</code> collection |
| -also makes <code>FORM</code> elements with <code>NAME</code> attributes |
| -available as named members, under a property name that corresponds with |
| -value of the <code>NAME</code> attribute. So given a form with the |
| -attribute <code>name="myForm"</code> the form can be referenced |
| -as:- |
| -</p> |
| - |
| -<pre id="faInF_ex2"> |
| -var formElement = document.forms.myForm; |
| - |
| -<span class="commentJS">/* - or - */</span> |
| - |
| -var formElement = document.forms["myForm"]; |
| - |
| -<span class="commentJS">/* The latter, bracket notation, does not impose the same restrictions |
| - on the character sequence used for the name as is imposed by the |
| - preceding dot notation, which is restricted to only using character |
| - sequences that would fulfill the ECMAScript definition of an |
| - identifier. |
| - |
| - Bracket notation is often preferred when accessing form elements as |
| - it helps to document itself by making it clear in the source code |
| - which property names originate in the <span class="initialism" title="HyperText Mark-up Language"><abbr title="HyperText Mark-up Language">HTML</abbr></span> rather than the DOM. |
| -*/</span> |
| -</pre> |
| - |
| -<p id="faInF_3"> |
| -The <code>document.forms</code> collection had exhibited this behaviour |
| -in all of the preceding browsers that implemented it (which included |
| -all the browsers that understood what a form was) and as a result |
| -represents the most cross-browser method of accessing <code>FORM</code> |
| -elements. It is both W3C <span class="initialism" title="HyperText Mark-up Language"><abbr title="HyperText Mark-up Language">HTML</abbr></span> DOM standard compliant and |
| -back-compatible with pre-existing browsers. |
| -</p> |
| - |
| -<p id="faInF_4"> |
| -The W3C went on to require <code>FORM</code> elements with |
| -<code>ID</code> attributes to also be made available as named properties |
| -of the <code>document.forms</code> collection. That represented a |
| -formalisation of behaviour already exhibited in IE 4 but not by |
| -Netscape 4 (and earlier). Referencing <code>ID</code>ed <code>FORM</code> |
| -elements as named properties of the <code>document.forms</code> collection |
| -should work reliably in all W3C <span class="initialism" title="HyperText Mark-up Language"><abbr title="HyperText Mark-up Language">HTML</abbr></span> DOM compliant browsers but some |
| -back-compatibility will be sacrificed if <code>ID</code>s are used instead |
| -of <code>NAME</code>s (though not nearly as much as would be lost if |
| -<code>ID</code>ed form elements were referenced using the |
| -<code>document.getElementById</code> method). |
| -</p> |
| - |
| -<p id="faInF_5"> |
| -When writing <span class="initialism" title="HyperText Mark-up Language"><abbr title="HyperText Mark-up Language">HTML</abbr></span> that conforms to a DTD that allows <code>FORM</code> |
| -elements to have <code>NAME</code> attributes it is possible to also give |
| -the <code>FORM</code> element an <code>ID</code> attribute that corresponds |
| -with its <code>NAME</code> attribute (so long as the <code>ID</code> is |
| -unique on the page). The form will appear as a member of the |
| -<code>document.forms</code> collection under a property name that |
| -corresponds with the value of the <code>NAME</code> and <code>ID</code> |
| -attributes (as they are identical). |
| -</p> |
| - |
| -<h3 id="faInC">Form Controls</h3> |
| - |
| -<p id="faInC_1"> |
| -Traditionally browsers that implemented the <code>document.forms</code> |
| -collection also made the controls within a form available as a |
| -collection accessible as a property of the <code>FORM</code> element |
| -under the name <code>elements</code>. The W3C <span class="initialism" title="HyperText Mark-up Language"><abbr title="HyperText Mark-up Language">HTML</abbr></span> DOM also formalised |
| -this collection in the <code>HTMLFormElement</code> interface. |
| -Controls within a form can be referenced as integer indexed members of |
| -that collection:- |
| -</p> |
| - |
| -<pre id="faInC_ex1"> |
| -var formElement = document.forms["myForm"]; |
| -var controlElement = formElement.elements[2]; <span class="commentJS">//Third control in the form.</span> |
| -</pre> |
| - |
| -<p id="faInC_2"> |
| -Controlls with <code>NAME</code> attributes are again made available as |
| -named properties of the collection. So a control with |
| -<code>name="myControl"</code> can be referenced as:- |
| -</p> |
| - |
| -<pre id="faInC_ex2"> |
| -var controlElement = formElement.elements["myControl"]; |
| -</pre> |
| - |
| -<p id="faInC_3"> |
| -Again the W3C also specified that controls with <code>ID</code> |
| -attributes should be made available as named members of the |
| -elements collection under their <code>ID</code>s (with the same |
| -implications for back-compatibility with really ancient browsers). |
| -All official (x)<span class="initialism" title="HyperText Mark-up Language"><abbr title="HyperText Mark-up Language">HTML</abbr></span> DTDs allow form controls to have |
| -<code>NAME</code> attributes because without a <code>NAME</code> |
| -attribute the value of the control cannot be sent as a |
| -name/value pair when the form is submitted. |
| -</p> |
| - |
| -<h2 id="faShrt">Shortcut Accessors</h2> |
| - |
| -<p id="faShrt_1"> |
| -In addition to making named <code>FORM</code> elements available |
| -as named properties of the <code>document.forms</code> collection |
| -web browsers also make them available as named properties of the |
| -<code>document</code> object. So:- |
| -</p> |
| - |
| -<pre id="faShrt_ex1"> |
| -var formElement = document.myForm; |
| -</pre> |
| - |
| -<p id="faShrt_2"> |
| --will reference the same FORM element as:- |
| -</p> |
| - |
| -<pre id="faShrt_ex2"> |
| -var formElement = document.forms.myForm; |
| -</pre> |
| - |
| -<p id="faShrt_3"> |
| -And the same is true using bracket notation:- |
| -</p> |
| - |
| -<pre id="faShrt_ex3"> |
| -var formElement = document["myForm"]; |
| - |
| -<span class="commentJS">/* instead of:- */ </span> |
| - |
| -var formElement = document.forms["myForm"]; |
| -</pre> |
| - |
| -<p id="faShrt_4"> |
| -The W3C did not include this shortcut in the <span class="initialism" title="HyperText Mark-up Language"><abbr title="HyperText Mark-up Language">HTML</abbr></span> DOM specifications |
| -so code that uses it cannot be described as standards compliant and, |
| -while nobody has been able to name an <span class="initialism" title="HyperText Mark-up Language"><abbr title="HyperText Mark-up Language">HTML</abbr></span> browser where the shortcut |
| -accessors do not work when referencing named <code>FORM</code> |
| -elements, it would still be possible for a future standards compliant |
| -browser not to support the shortcut accessors. |
| -</p> |
| - |
| -<p id="faShrt_5"> |
| -<code>FORM</code> elements that only have <code>ID</code> attributes |
| -cannot be accessed as properties of the <code>document</code> object |
| -under a property name that corresponds with their <code>ID</code> |
| -attributes. While by W3C <span class="initialism" title="HyperText Mark-up Language"><abbr title="HyperText Mark-up Language">HTML</abbr></span> DOM specification (but not necessarily |
| -on older browsers) <code>ID</code>ed forms are made available as named |
| -properties of the <code>document.forms</code> collections under a |
| -property name that corresponds with the <code>ID</code>. |
| -</p> |
| - |
| -<p id="faShrt_6"> |
| -Form controls can be referenced as named properties of the |
| -<code>FORM</code> element that contains them with a shortcut accessor:- |
| -</p> |
| - |
| -<pre id="faShrt_ex4"> |
| -var formControl = formElement.myControl; |
| - |
| -<span class="commentJS">/* instead of :- */</span> |
| - |
| -var formControl = fromElement.elements.myControl; |
| -</pre> |
| - |
| -<p id="faShrt_7"> |
| -But in the case of form controls, elements with <code>ID</code> |
| -attributes may be available as properties of the <code>FORM</code> |
| -element under a property name that corresponds with their |
| -<code>ID</code> (at least on more recent browsers). |
| -</p> |
| - |
| -<p id="faShrt_8"> |
| -The main argument in favour of using shortcut accessors (apart from the |
| -reduced amount of typing) is that they are resolved fractionally quicker |
| -than accessors that employ the <code>forms</code> and |
| -<code>elements</code> collections. That follows from the fact that fewer |
| -object references need to be resolved before the reference to the element |
| -of interest is returned. |
| -</p> |
| - |
| -<p id="faShrt_9"> |
| -While arguments against the shortcut accessors point out that named image, |
| -embed and other elements are also made available as named properties of |
| -the <code>document</code> object, making it ambiguous when reading the |
| -source code whether the shortcut accessor is referring to a form or some |
| -other named property of the <code>document</code> object. When a |
| -<code>FORM</code> element is referenced as a member of the |
| -<code>document.forms</code> collection, or a control as a member of the |
| -<code>elements</code> collection, there can be no doubt while reading |
| -the source code as to the type of element that is the subject of the |
| -reference. |
| -</p> |
| - |
| -<h2 id="faComMis">The Most Common Mistake</h2> |
| - |
| -<p id="faComMis_1"> |
| -The most common mistake made when defining the form <span class="initialism" title="HyperText Mark-up Language"><abbr title="HyperText Mark-up Language">HTML</abbr></span> that a script |
| -will interact with follows from the existence of the shortcut accessors |
| -for form controls. It is to give the control a <code>NAME</code> (or |
| -possibly <code>ID</code>) that corresponds with an existing property of |
| -<code>FORM</code> elements. And the most common example of that is an |
| -<code>INPUT</code> element of <code>type="submit"</code> with |
| -the <code>NAME</code> "submit". Because the named controls are |
| -made available as named properties of the <code>FORM</code> element this |
| -<code>INPUT</code> element is made available under the property name |
| -<code>"submit"</code>. Unfortunately <code>FORM</code> elements |
| -already have a property with the name <code>"submit"</code>, it |
| -is the <code>submit</code> method that can be used to submit the form |
| -with a script. The misguided choice of name for the <code>INPUT</code> |
| -element effectively renders the form's <code>submit</code> method |
| -unscriptable. And the same is true for all controls with names that |
| -correspond any with existing <code>FORM</code> element properties. |
| -</p> |
| - |
| -<p id="faComMis_2"> |
| -Because ECMAScript is case sensitive it may only be necessary to |
| -capitalise the name of the <code>INPUT</code> element to avoid the |
| -conflict. However, it would probably be safest to adopt a naming |
| -convention for form controls that ensured that they do not |
| -correspond with existing properties of the <code>FORM</code> elements |
| -regardless of case. Especially as theW3C <span class="initialism" title="HyperText Mark-up Language"><abbr title="HyperText Mark-up Language">HTML</abbr></span> specification implies |
| -that referring to named properties of collections can be case |
| -insensitive in <span class="initialism" title="HyperText Mark-up Language"><abbr title="HyperText Mark-up Language">HTML</abbr></span> DOMs. In reality I don't know of any |
| -implementations in which it is but it would be better to err on the side |
| -of caution. |
| -</p> |
| - |
| -<p id="faComMis_3"> |
| -Another naming conflict that should be avoided would arise if named form |
| -controls had names that correspond with the string representations of |
| -integers, such as <code>name="1"</code> as they will almost |
| -certainly result in inconsistent results (across browsers) when being |
| -referenced because the controls are already available by integer index |
| -and it would become unclear which control was being referenced by |
| -accessors such as <code>formElement.elements[1]</code> or |
| -<code>formElement.elements["1"]</code> (by the ECMAScript |
| -specification the preceding two property accessors are equivalent). |
| -Unless the control with the name <code>"1"</code> also |
| -happened to be the control with the index 1. This problem would also |
| -apply to <code>FORM</code> elements within the <code>document.forms</code> |
| -collection. |
| -</p> |
| - |
| -<p id="faComMis_4"> |
| -Generally it is best to only give form controls names that cannot |
| -conflict with existing properties of <code>FORM</code> elements |
| -and <code>FORM</code> elements names that cannot conflict with |
| -existing properties of the <code>document.forms</code> collection |
| -or the <code>document</code> object. |
| -</p> |
| - |
| -<h2 id="faAnon">Anonymous Form References</h2> |
| - |
| -<p id="faAnon_1"> |
| -Because <code>FORM</code> elements are available as integer indexed |
| -member of the <code>document.forms</code> collection it is not |
| -necessary to know the name of a form (or for the form to have a |
| -name) to acquire a reference to it. While being able to refer to a |
| -form anonymously with its index might seem like a good approach |
| -towards making more general/flexible functions for form validation |
| -and the like, in practice referring to forms by their index actually |
| -makes code less flexible and harder to maintain. As soon as the |
| -number or layout of forms on a page is changed their indexes also |
| -change, requiring that all of the references by index be located |
| -and altered. |
| -</p> |
| - |
| -<p id="faAnon_2"> |
| -One method of avoiding having to know the name of a <code>FORM</code> |
| -element within a function that is to act upon a form is to pass a |
| -reference to the form object as an argument in the function call. |
| -This is easiest achieved from the code provided as the value for |
| -an event handling attribute because that code is used by the browser |
| -to create an event handling function that is assigned as a method of |
| -the element to which it is attached. And in any function executed as |
| -a method of an object the <code>this</code> keyword is a reference to |
| -the object with which the execution of the method is associated. The |
| -most common need to anonymously pass a reference to a <code>FORM</code> |
| -element is as an argument to a form validation function in the |
| -onsubmit handler of the form. In that case the event handling function |
| -is a method of the <code>FORM</code> element so the <code>this</code> |
| -keyword refers to the form directly:- |
| -</p> |
| - |
| -<pre id="faAnon_ex1"> |
| -function validateForm(formRef){ |
| - <span class="commentJS">/* Use the reference to the form passed as the formal |
| - parameter - formRef - to acquire a reference to the form |
| - control with the name "textField": |
| - */</span> |
| - var el = formRef && formRef.elements["textField"]; |
| - <span class="commentJS">/* If the control reference exists return its value property |
| - converted to a boolean value (false if empty, true otherwise) |
| - else return true so the form is submitted and the server can |
| - do the validation: |
| - */</span> |
| - return !el || Boolean(el.value); |
| -} |
| -... |
| -<form action="http://example.com/somePage.asp" |
| - onsubmit="return validateForm(this);"> |
| - <input type="text" name="textField" value=""> |
| - <input type="submit" name="Submit_Button" value="Submit"> |
| -</form> |
| -</pre> |
| - |
| -<p id="faAnon_3"> |
| -Because the above function receives the reference to the form that it |
| -is to validate as an argument when it is called it can also be used |
| -with any number of other forms. Although in the case of the above |
| -function each of those forms would need to contain a field called |
| -<code>"textField"</code>, but that string name could also be |
| -passed as an argument, making the function more general. |
| -</p> |
| - |
| -<p id="faAnon_4"> |
| -Form control objects all have a property named |
| -<code>"form"</code> that holds a reference to the |
| -<code>FORM</code> element that contains them. As a result the event |
| -handling functions attached to form controls can pass an anonymous |
| -reference to the form that contains them as <code>this.form</code>. |
| -Obviously a function called from an event handler on a control can |
| -be passes an anonymous reference to the control itself as |
| -<code>this</code>. |
| -</p> |
| - |
| -<h2 id="faBut">Radio Button and Other Control Collections</h2> |
| - |
| -<p id="faBut_1"> |
| -Radio button controls work to provide a selection of one item of many |
| -when each of the radio button alternatives has the same |
| -<code>NAME</code> attribute. But it is also possible to give other types |
| -of control the same <code>NAME</code> attribute. |
| -</p> |
| - |
| -<p id="faBut_2"> |
| -When controls that share the same <code>NAME</code> attribute they can |
| -still be accessed as integer indexed members of the <code>FORM</code> |
| -element's <code>elements</code> collection but when the member of the |
| -<code>elements</code> collection is accessed using the <code>NAME</code> |
| -attribute value as a property name browsers return a collection all of |
| -the elements with the corresponding NAME attributes. So given the <span class="initialism" title="HyperText Mark-up Language"><abbr title="HyperText Mark-up Language">HTML</abbr></span>:- |
| -</p> |
| - |
| -<pre id="faBut_ex1"> |
| -<form name="testForm" action="http://example.com/somePage.jsp"> |
| - <ul style="list-style-type:none;"> |
| - <li><input type="radio" name="radioSet" value="R1">option 1</li> |
| - <li><input type="radio" name="radioSet" value="R2">option 2</li> |
| - <li><input type="radio" name="radioSet" value="R3">option 3</li> |
| - <li><input type="radio" name="radioSet" value="R4">option 4</li> |
| - </ul> |
| - <input type="submit" name="Submit_Button" value="Send"> |
| -</form> |
| -</pre> |
| - |
| -<p id="faBut_3"> |
| -A property accessor referring to the member of the <code>FORM</code>'s |
| -<code>elements</code> collection by the property name |
| -<code>"radioSet"</code> will not return a reference to any one |
| -of the named radio buttons but instead returns a collection of all of the |
| -like-named radio controls. |
| -</p> |
| - |
| -<p id="faBut_4"> |
| -The individual radio buttons within that collection are referred to as |
| -integer indexed members of that collection. So to find the button that |
| -is checked one might loop through all of the members of the collection |
| -of like-named radio buttons and copy a reference to the button with its |
| -<code>checked</code> property set to boolean <code>true</code>. |
| -</p> |
| - |
| - |
| -<pre id="faBut_ex2"> |
| -var radioCollection, checkedButton; |
| -var frm = document.forms["testForm"]; |
| -if(frm){ |
| - radioCollection = frm.elements["radioSet"]; |
| - if(radioCollection){ |
| - <span class="commentJS">/* The collection of like-named radio buttons has a length |
| - property and that is used to limit a for loop:- |
| - */</span> |
| - for(var c = 0;c < radioCollection.length;c++){ |
| - <span class="commentJS">/* The individual radio buttons are accessed as indexed |
| - members of the collection using the loop counter - c |
| - - from the for loop: |
| - */</span> |
| - if(radioCollection[c].checked){ |
| - <span class="commentJS">/* When a radio button element is found with its |
| - checked property set to boolean true a reference |
| - to that element is assigned to the local variable |
| - - checkedButton - and the loop is terminated with |
| - the - break - statement as only one button in a set |
| - of like-named radio buttons will be checked at a |
| - time, so any remaining buttons in the collection |
| - must have checked properties set to false: |
| - */</span> |
| - checkedButton = radioCollection[c]; |
| - break; |
| - } |
| - } |
| - if(checkedButton){ |
| - <span class="commentJS">/* Do something with the reference to the checked radio |
| - button (if any). |
| - */</span> |
| - ... |
| - } |
| - } |
| -} |
| -</pre> |
| - |
| -<p id="faBut_5"> |
| -It is not unusual when a form is generated by a server-side script that |
| -some forms may have one or more like-named controls. If there is only |
| -one control inserted in the form then accessing a member of the |
| -<code>elements</code> collection with its name will return a reference |
| -to that one control, but if there are multiple elements the returned |
| -reference will be to a collection of such controls. While it may be |
| -possible to branch client-side code that wants to interact with those |
| -controls to handle the two alternatives it adds an unnecessary |
| -maintenance burden to do so. |
| -</p> |
| - |
| -<p id="faBut_6"> |
| -As handling a returned collection usually involves looping through that |
| -collection the simplest way of implementing the client-side code to |
| -deal with both collections and individual controls being returned by |
| -named properties of the <code>elements</code> collection is to |
| -normalise the references to individual controls so that they can be |
| -handled as if they were a collection. Looping through a collection |
| -involves using the <code>length</code> property of the collection to |
| -limit the loop statement and accessing the controls within the |
| -collection by integer index. This is exactly the way in which code |
| -would loop through the elements of an <code>Array</code>. To allow a |
| -script to handle both possibilities with the same code the return of |
| -a reference to an individual control could be detected and then that |
| -reference used to create a one-element <code>Array</code>. Subsequent |
| -code would then treat the <code>Array</code> as if it was a collection and |
| -loop through it, but as there is only one element the loop body would |
| -only be executed once. |
| -</p> |
| - |
| -<pre id="faBut_ex3"> |
| -var radioCollection, checkedButton; |
| -var frm = document.forms["testForm"]; |
| -if(frm){ |
| - radioCollection = frm.elements["radioSet"]; |
| - if(radioCollection){ |
| - <span class="commentJS">/* But the returned reference might not be a collection in this |
| - case. Instead it may be a reference to just one control if |
| - there is only one in this form with the name "radioSet". |
| - If it is a reference to an individual control it is going to |
| - be necessary to normalise it. Because radio button controls |
| - do not have - length - properties and collections do that is |
| - the property that is going to be tested: |
| - */</span> |
| - if(typeof radioCollection.length != "number"){ |
| - <span class="commentJS">/* The length property is not a number so this cannot be a |
| - collection and must be normalised so that the following |
| - loop statement can handle it correctly. Normalisation is |
| - done by making a reference to the control currently |
| - referred to by the - radioCollection - local variable |
| - into the first (and only) element of a new Array object |
| - and then assigning a reference to that array to the - |
| - radioCollection - local variable: |
| - */</span> |
| - radioCollection = [radioCollection]; |
| - } |
| - <span class="commentJS">/* The execution of the body of the - for - loop is limited by |
| - the - length - property of the collection/Array. |
| - */</span> |
| - for(var c = 0;c < radioCollection.length;c++){ |
| - <span class="commentJS">/* The individual radio buttons are accessed as indexed |
| - members of the collection/Array using the loop counter |
| - - c - from the for loop: |
| - */</span> |
| - if(radioCollection[c].cheked){ |
| - checkedButton = radioCollection[c]; |
| - break; |
| - } |
| - } |
| - if(checkedButton){ |
| - <span class="commentJS">/* do something with the reference to the checked radio |
| - button (if any). |
| - */</span> |
| - ... |
| - } |
| - } |
| -} |
| -</pre> |
| - |
| -<p id="faBut_7"> |
| -While it is normal for radio button controls to be like-named it is |
| -also possible for all other controls to be included in a form with |
| -multiple controls of the same type and like names. The same |
| -referencing techniques can be used with any type of control (even |
| -mixed types with like-names, though that is almost never done). But |
| -deciding whether a reference needs to be normalised by making it into |
| -the only element of an <code>Array</code> by testing the |
| -<code>length</code> property of that reference to see if it doesn't |
| -exist will not work with <code>SELECT</code> elements as they have |
| -a <code>length</code> property of their own. It also would not help |
| -to be testing some other characteristic of a collection, such as their |
| -<code>item</code> method, as <code>SELECT</code> elements usually have |
| -all of the methods and properties of a collection as they are |
| -implemented as collections of <code>OPTION</code> elements. |
| -</p> |
| - |
| -<p id="faBut_8"> |
| -Turning the problem around and testing a returned reference to see if |
| -it has the characteristics of a <code>SELECT</code> element (such as |
| -an <code>options</code> property) would be better but some collection |
| -implementations have all of the properties and methods of the first |
| -element within that collection as well as the properties and methods |
| -of a collection (e.g. on IceBrowser 5). That means that it would not be |
| -easy to distinguish a collection of <code>SELECT</code> controls |
| -from an individual <code>SELECT</code> control. However, a more |
| -elaborate test might go:- |
| -</p> |
| - |
| -<pre id="faBut_ex4"> |
| -<span class="commentJS">/* Normalise a reference that may be an individual from control |
| - (including SELECT elements) or may be a collection of controls |
| - into a form that can be handled in a - for - loop controlled with |
| - its - length - property and accessed by integer index. |
| -*/</span> |
| -if((typeof contrlCollection.length != "number")|| <span class="commentJS">//no length propety:</span> |
| - <span class="commentJS">/* or:- */</span> |
| - ((contrlCollection.options)&& <span class="commentJS">//it has an options colleciton and:</span> |
| - ((!contrlCollection[0])|| <span class="commentJS">//no object at index 0 - not a collection</span> |
| - <span class="commentJS">/* or:- */</span> |
| - (contrlCollection[0] == contrlCollection.options[0])))){ |
| - <span class="commentJS">/* The object at index 0 in contrlCollection is the same object |
| - as is at index 0 in contrlCollection.options so this must be |
| - an individual SELECT element not a collection of them because a |
| - collection of SELECT elements would not have an OPTION element |
| - at index zero. |
| - */</span> |
| - contrlCollection = [contrlCollection]; |
| -} |
| -</pre> |
| - |
| -<h2 id="faEff">Efficient use of Form Accessors</h2> |
| - |
| -<p id="faEff_1"> |
| -Code that interacts with <code>FORM</code> elements and controls |
| -through the <code>document.forms</code> collection and the form's |
| -<code>elements</code> collection usually does not do enough work to |
| -make the efficiency of the code significant. But with large forms with |
| -many controls an inefficiently coded validation function (or some other |
| -interaction, like keeping running totals) can negatively impact on the |
| -user's experience. It can also be argued that considering the |
| -efficiency of implementation is a worthwhile habit even when it would |
| -make no perceivable difference. |
| -</p> |
| - |
| -<p id="faEff_2"> |
| -A significant aspect of the efficient coding of form interacting code |
| -is the re-resolving of references to various objects. This trivial |
| -example code copies the values of 5 <code>INPUT</code> elements to |
| -local variables:- |
| -</p> |
| - |
| -<pre id="faEff_ex1"> |
| -var txt1 = document.forms["formName"].elements["field1"].value; |
| -var txt2 = document.forms["formName"].elements["field2"].value; |
| -var txt3 = document.forms["formName"].elements["field3"].value; |
| -var txt4 = document.forms["formName"].elements["field4"].value; |
| -var txt5 = document.forms["formName"].elements["field5"].value; |
| -</pre> |
| - |
| -<p id="faEff_3"> |
| -The shortcut accessors require the resolution of fewer object |
| -references:- |
| -</p> |
| - |
| -<pre id="faEff_ex2"> |
| -var txt1 = document["formName"]["field1"].value; |
| -var txt2 = document["formName"]["field2"].value; |
| -var txt3 = document["formName"]["field3"].value; |
| -var txt4 = document["formName"]["field4"].value; |
| -var txt5 = document["formName"]["field5"].value; |
| -</pre> |
| - |
| -<p id="faEff_4"> |
| -But their use still involves re-resolving the form object each time a |
| -form control is accessed. It would be unnecessary to re-resolve this |
| -reference if a reference to the form was assigned to a local variable:- |
| -</p> |
| - |
| -<pre id="faEff_ex3"> |
| -<span class="commentJS">/* Assign a reference to the form object to the local variable - frm - |
| - and then make subsequent control references relative to that local |
| - variable: |
| -*/</span> |
| -var frm = document.forms["formName"]; |
| -var txt1 = frm.elements["field1"].value; |
| -var txt2 = frm.elements["field2"].value; |
| -var txt3 = frm.elements["field3"].value; |
| -var txt4 = frm.elements["field4"].value; |
| -var txt5 = frm.elements["field5"].value; |
| -</pre> |
| - |
| -<p id="faEff_5"> |
| -The effect would be much the same as when a reference to the form |
| -object has been passed to a function and control references are |
| -accessed relative to the parameter holding the form reference. |
| -</p> |
| - |
| -<p id="faEff_6"> |
| -It is still not optimum to be re-resolving the <code>elements</code> |
| -collection, and it is practical to assign a reference to that object |
| -to a local variable instead of a reference to the form object:- |
| -</p> |
| - |
| -<pre id="faEff_ex4"> |
| -<span class="commentJS">/* Assign a reference to the form's elements collection to the local |
| - variable - frmEls - and then make subsequent control references |
| - relative to that local variable: |
| -*/</span> |
| -var frmEls = document.forms["formName"].elements; |
| -var txt1 = frmEls["field1"].value; |
| -var txt2 = frmEls["field2"].value; |
| -var txt3 = frmEls["field3"].value; |
| -var txt4 = frmEls["field4"].value; |
| -var txt5 = frmEls["field5"].value; |
| -</pre> |
| - |
| -<p id="faEff_7"> |
| -With the original long form accessor the resolution starts with |
| -resolving the <code>"document"</code> identifier. The |
| -identifier is first looked for among the local variables of the |
| -function (as a named property of the internal |
| -"Variable" object, by ECMA specification), |
| -when it is not found the scope chain is searched, object by object |
| -down the chain, for a property with the corresponding name. When the |
| -scope resolution for <code>"document"</code> gets to the |
| -global object (at the end of the scope chain) it will find a property |
| -called <code>"document"</code>, a reference to the |
| -<code>document</code> object, and the first identifier in the accessor |
| -will have been resolved. The next identifier is |
| -<code>"forms"</code> and that is located as a property of the |
| -<code>document</code>. Then the <code>"formName"</code> |
| -property is identified in the <code>forms</code> collection. Next the |
| -<code>"elements"</code> property of the form is located, |
| -followed by the control name in that object and finally the |
| -<code>"value"</code> property of the control is returned. |
| -</p> |
| - |
| -<p id="faEff_8"> |
| -When a reference to the <code>elements</code> collection is assigned to |
| -a local variable the first identifier in the property accessor is |
| -identified as that local variable, the control name is identified as a |
| -property of the <code>elements</code> collection referenced and the |
| -<code>"value"</code> property of the control is returned. |
| -</p> |
| - |
| -<p id="faEff_9"> |
| -Obviously there is a big difference in the amount of work involved in |
| -acquiring the <code>value</code> of the control in each case. That |
| -difference will not be that significant if only a couple of values are |
| -accessed, but even with as few as half a dozen control property |
| -accesses the second approach will obviously be much more efficient, |
| -and with increasing numbers of controls the difference could easily |
| -become apparent to the user. |
| -</p> |
| -</body> |
| -</html> |
| /cljs/notes/form-access/index.html |
| Property changes: |
| Deleted: svn:mime-type |
| ## -1 +0,0 ## |
| -text/plain |
| \ No newline at end of property |
| Index: cljs/res/[MS-ES3].pdf |
| =================================================================== |
| Cannot display: file marked as a binary type. |
| svn:mime-type = application/octet-stream |
| /cljs/res/[MS-ES3].pdf |
| Property changes: |
| Deleted: svn:mime-type |
| ## -1 +0,0 ## |
| -application/octet-stream |
| \ No newline at end of property |
| Index: cljs/res/ISO_8601-2004_E.pdf |
| =================================================================== |
| Cannot display: file marked as a binary type. |
| svn:mime-type = application/octet-stream |
| /cljs/res/ISO_8601-2004_E.pdf |
| Property changes: |
| Deleted: svn:mime-type |
| ## -1 +0,0 ## |
| -application/octet-stream |
| \ No newline at end of property |
| Index: cljs/res/[MS-ES3EX].pdf |
| =================================================================== |
| Cannot display: file marked as a binary type. |
| svn:mime-type = application/octet-stream |
| /cljs/res/[MS-ES3EX].pdf |
| Property changes: |
| Deleted: svn:mime-type |
| ## -1 +0,0 ## |
| -application/octet-stream |
| \ No newline at end of property |
| Index: .settings/org.eclipse.wst.common.project.facet.core.xml |
| =================================================================== |
| --- .settings/org.eclipse.wst.common.project.facet.core.xml (revision 45) |
| +++ .settings/org.eclipse.wst.common.project.facet.core.xml (nonexistent) |
| @@ -1,7 +0,0 @@ |
| -<?xml version="1.0" encoding="UTF-8"?> |
| -<faceted-project> |
| - <fixed facet="php.component"/> |
| - <fixed facet="php.core.component"/> |
| - <installed facet="php.core.component" version="1"/> |
| - <installed facet="php.component" version="5.3"/> |
| -</faceted-project> |
| /.settings/org.eclipse.wst.common.project.facet.core.xml |
| Property changes: |
| Deleted: svn:mime-type |
| ## -1 +0,0 ## |
| -text/plain |
| \ No newline at end of property |
| Index: .settings/org.eclipse.php.core.prefs |
| =================================================================== |
| --- .settings/org.eclipse.php.core.prefs (revision 45) |
| +++ .settings/org.eclipse.php.core.prefs (nonexistent) |
| @@ -1,2 +0,0 @@ |
| -eclipse.preferences.version=1 |
| -include_path=0;/FAQs |
| /.settings/org.eclipse.php.core.prefs |
| Property changes: |
| Deleted: svn:mime-type |
| ## -1 +0,0 ## |
| -text/plain |
| \ No newline at end of property |
| Index: selfhtml.de/index.html |
| =================================================================== |
| --- selfhtml.de/index.html (revision 45) |
| +++ selfhtml.de/index.html (nonexistent) |
| @@ -1,258 +0,0 @@ |
| -<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" |
| - "http://www.w3.org/TR/html4/strict.dtd"> |
| -<html> |
| -<head> |
| -<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> |
| -<meta name="generator" content="HTML Tidy, see www.w3.org"> |
| - |
| -<title>JavaScript- und Java-Linkliste</title> |
| - |
| -<style type="text/css"> |
| -a[href ^="http:"]:before { |
| - content: "\2192"; |
| - text-decoration: none; |
| - color: inherit; |
| - background-color: inherit; |
| -} |
| - |
| -ul a[href ^="http:"]:before { |
| - content: ""; |
| -} |
| -</style> |
| -</head> |
| - |
| -<body> |
| -<h1>JavaScript- und Java-Linkliste</h1> |
| - |
| -<h2>Vorwort</h2> |
| - |
| -<p>Dies ist ein informativer Text, der (technische) Fakten |
| -vermittelt, <strong>keine</strong> Meinungen!</p> |
| - |
| -<p>Bei FAQs (<b>F</b>requently <b>A</b>sked <b>Q</b>uestions = |
| -häufig gestellte Fragen) und bei Fragen, die darauf hindeuten, dass dem |
| -Teilnehmer der Unterschied zwischen Java und JavaScript nicht klar ist, |
| -sollte hierauf verwiesen werden.</p> |
| - |
| -<p>Hilfreiche Kommentare und Verbesserungsvorschläge bitte <strong>nur</strong> |
| -per E-Mail an faq@PointedEars.de <strong>direkt</strong> an mich. Alles |
| -andere bitte nach /dev/tonne, danke.</p> |
| - |
| -<p>Vielen Dank für die Idee zu diesem Posting an <a |
| - href="http://homepage.boku.ac.at/partl/">Dr. Hubert Partl</a>, der |
| -einen ähnlichen Text regelmässig in den <a |
| - href="http://einklich.net/usenet/usenet1.htm">Usenet</a>-Newsgroups |
| -<a href="news:de.comp.lang.javascript">de.comp.lang.javascript</a> |
| -und <a href="news:de.comp.lang.java">de.comp.lang.java</a> (hier |
| -mit einem Klick zum Abo) postet.</p> |
| - |
| -<hr> |
| - |
| -<h2>Worum geht es?</h2> |
| - |
| -<p>Viele Fragen, die gestellt werden, wurden vorher bereits |
| -diskutiert und beantwortet. Das erneute Stellen dieser Fragen <strong>nervt</strong> |
| -die Teilnehmer, die hier schon länger mitlesen und -posten (kurz: |
| -Regulars, von engl. "regular" = regelmässig), denn niemand möchte die |
| -gleiche Frage immer wieder beantworten.</p> |
| - |
| -<p>Das hat dann oft gereizte Reaktionen zur Folge und der Fragende |
| -wundert sich darüber, denn er stellt ja die Frage aus seiner Perspektive |
| -das erste Mal.</p> |
| - |
| -<p>Um Auseinandersetzungen zu vermeiden, mögen bitte die Regulars |
| -einfach auf dieses Dokument verweisen und die Frager versuchen, Probleme |
| -<strong>vor</strong> dem Posten über die Links in dieser FAQ sowie |
| -einschlägige Literatur und <strong>Selbst</strong>studium (einfach mal |
| -was ausprobieren!) zu lösen.</p> |
| - |
| -<p>Weitere Information zum Auffinden von früheren Antworten findet |
| -man(n) auf der <a href="http://dcljs.de/">Website der Gruppe</a>. |
| -<p>Ausserdem gibt es regelmässig Verwechslungen zwischen den beiden |
| -<strong>Programmiersprachen</strong> <a href="#java">Java</a> und <a |
| - href="#js">JavaScript</a>. Java ist <strong>nicht</strong> JavaScript |
| -(kurz: Java <strong>!=</strong> JavaScript), und umgekehrt.</p> |
| - |
| -<hr> |
| - |
| -<h2><a name="js">JavaScript</a></h2> |
| - |
| -<p>Script-Sprache z.B. innerhalb von HTML-Dokumenten.</p> |
| - |
| -<p><a href="#ecmascript">ECMAScript</a>-Implementation von <a |
| - href="#netscape">Netscape</a> (siehe Microsoft <a href="#jscript">JScript</a>).</p> |
| - |
| -<p>Wird von Netscape Navigator bis 4.x (Mozilla/4.0) und Netscape <a |
| - href="#gecko">Gecko</a> (Rendering-Engine von Mozilla/5.0 -- d.h. |
| -Mozilla SeaMonkey, Mozilla Firefox/Thunderbird, Netscape 6+, Camino, |
| -...) verwendet.</p> |
| - |
| -<p>(X)HTML-Element: <code>script</code></p> |
| -<ul> |
| - <li><a href="http://www.w3.org/TR/html4/interact/scripts.html">Normative |
| - Version</a> (englisch)</li> |
| - <li><a |
| - href="http://edition-w3.de/TR/1999/REC-html401-19991224/interact/scripts.html">Vorveröffentlichung |
| - der Deutschen Übersetzung</a></li> |
| -</ul> |
| - |
| -<p>.js-Dateien (üblich), wenn als externe Scripte eingebunden</p> |
| - |
| -<h2>Referenzen</h2> |
| - |
| -<ul> |
| - <li><a name="ecmascript" id="ecmascript" |
| - href="http://www.mozilla.org/js/language/">ECMAScript (ECMA-262)</a> |
| - (englisch)</li> |
| - |
| - <li><a name="netscape">Mozilla Developer Center (MDC)</a> |
| - (englisch):<br> |
| - <ul> |
| - <li><a href="http://developer.mozilla.org/en/docs/JavaScript">JavaScript</a></li> |
| - |
| - <li><a href="http://developer.mozilla.org/en/docs/DOM">DOM</a></li> |
| - |
| - <li><a name="gecko" id="gecko" |
| - href="http://developer.mozilla.org/en/docs/Gecko_DOM_Reference">Gecko |
| - DOM Reference</a> (englisch)</li> |
| - </ul> |
| - </li> |
| - |
| - <li>W3C-DOM Level 2 (englisch): |
| - <ul> |
| - <li><a href="http://www.w3.org/TR/DOM-Level-2/">Core</a></li> |
| - <li><a href="http://www.w3.org/TR/DOM-Level-2-Events/">Events</a></li> |
| - <li><a href="http://www.w3.org/TR/DOM-Level-2-HTML/">HTML</a></li> |
| - <li><a href="http://www.w3.org/TR/DOM-Level-2-Style/">Style</a></li> |
| - </ul> |
| - </li> |
| - |
| - <li>Microsoft Developer Network (MSDN) Library (englisch): |
| - <ul> |
| - <li><a name="jscript" id="jscript" |
| - href="http://msdn.microsoft.com/library/en-us/script56/html/js56jsoriJScript.asp">JScript</a>: |
| - <a href="#ecmascript">ECMAScript</a>-Implementation von Microsoft, |
| - wird u.a. von der IE-Browserkomponente, <a href="http://asp.net/">Active |
| - Server Pages (ASP)</a> und dem Windows Script Host verwendet.</li> |
| - |
| - <li><a |
| - href="http://msdn.microsoft.com/nhp/Default.asp?contentid=28001169">Windows |
| - Script Documentation</a></li> |
| - |
| - <li><a |
| - href="http://msdn.microsoft.com/workshop/author/dhtml/reference/dhtml_reference_entry.asp">HTML |
| - and DHTML Reference</a> (DOM-Referenz zur IE-Browserkomponente)</li> |
| - </ul> |
| - </li> |
| -</ul> |
| - |
| -<h3>FAQs, FFQs</h3> |
| - |
| -<ul> |
| - <li><a href="http://dcljs.de/faq/">FAQ -- |
| - Frequently Asked Questions -- Häufig gestellte Fragen</a></li> |
| - |
| - <li><a name="ffq" id="ffq" href="http://praast.de/ffq/">FFQ |
| - -- Frequently Forbidden Questions -- "Verbotene" Fragen</a></li> |
| - |
| - <li><a href="http://dcljs.de/">Website der Newsgroup |
| - de.comp.lang.javascript</a></li> |
| -</ul> |
| - |
| -<h3>Testcases, Tools</h3> |
| - |
| -<ul> |
| - <li><a href="http://www.brain4.de/programmierecke/js/">JavaScript-Ecke |
| - von Ralf Beutler, u.a. zur Abfrage von Maus und Tastatur-Ereignissen</a></li> |
| - |
| - <li><a href="http://PointedEars.de/scripts/test/whatami">Was |
| - bin ich? -- Wie "gut" Browsererkennung ist</a> von Thomas 'PointedEars' |
| - Lahn</li> |
| - |
| - <li><a href="http://PointedEars.de/scripts/test/hoverMe/">hoverMe |
| - -- Vorladen von Bildern und Realisierung des Hover-Effekts</a> von Thomas |
| - 'PointedEars' Lahn (unter Beachtung der Lizenzbestimmungen frei |
| - verwendbar)</li> |
| - |
| - <li><a |
| - href="http://PointedEars.de/scripts/test/ObjectInspector/nightly/latest/index">ObjectInspector</a> |
| - von Thomas 'PointedEars' Lahn (unter Beachtung der Lizenzbestimmungen |
| - frei verwendbar)</li> |
| - |
| - <li><a href="http://PointedEars.de/scripts/js-version-info">JS/ECMAScript-Versionsinformation</a></li> |
| - |
| - <li><a href="http://PointedEars.de/scripts/test/mime-types/">Support |
| - von für JS/ECMAScript registrierten MIME-Typen</a></li> |
| -</ul> |
| - |
| -<h3>Tutorials, Fertigscripte (siehe <a href="#ffq">FFQ</a>)</h3> |
| - |
| -<ul> |
| - <li>"SELFHTML -- HTML-Dateien selbst erstellen" von Stefan Münz: |
| - <ul> |
| - <li><a href="http://selfhtml.teamone.de/javascript/">JavaScript</a></li> |
| - <li><a href="http://selfhtml.teamone.de/dhtml/">Dynamisches |
| - HTML (DHTML)</a></li> |
| - </ul> |
| - </li> |
| - |
| - <li><a href="http://javascript.seite.net/">Kakao |
| - & Kekse -- Die deutsche JavaScript-Seite</a></li> |
| - |
| - <li><a href="http://dhtml.seite.net/">Milch & Zucker -- |
| - Die deutsche DHTML-Seite</a></li> |
| -</ul> |
| - |
| -<hr> |
| - |
| -<h2><a name="java">Java</a></h2> |
| - |
| -<p>Programmiersprache für Applets und Applikationen</p> |
| - |
| -<p>(X)HTML-Elemente: <code>applet</code>, <code>object</code></p> |
| -<ul> |
| - <li><a href="http://www.w3.org/TR/html4/struct/objects.html">Normative |
| - Version</a> (englisch)</li> |
| - <li><a |
| - href="http://edition-w3.de/TR/1999/REC-html401-19991224/struct/objects.html">Vorveröffentlichung |
| - der Deutschen Übersetzung</a></li> |
| -</ul> |
| - |
| -<ul> |
| - <li>Quelltext: .java-Dateien (üblich)</li> |
| - <li>Compiliert: |
| - <ul> |
| - <li>.class-Dateien (zwingend, plattformunabhängig),</li> |
| - <li>.exe-Dateien (plattformabhängig)</li> |
| - </ul> |
| - </li> |
| -</ul> |
| - |
| -<h3>Referenzen</h3> |
| - |
| -<p><a href="http://developer.java.sun.com/developer/infodocs/">Sun |
| -Java Documentation & Training (englisch)</a></p> |
| - |
| -<h3>FAQs, weiterführende Information</h3> |
| - |
| -<ul> |
| - <li><a href="http://www.dclj.de/faq.html">FAQ -- |
| - Frequently Asked Questions -- Häufig gestellte Fragen</a></li> |
| - |
| - <li><a href="http://dclj.de/">Website der Newsgroup |
| - de.comp.lang.java</a></li> |
| -</ul> |
| - |
| -<h3>Tutorials, fertiger Code (siehe <a href="#ffq">FFQ</a>)</h3> |
| - |
| -<ul> |
| - <li>"SELFHTML -- HTML-Dateien selbst erstellen" von Stefan Münz:<br> |
| - <a |
| - href="http://selfhtml.teamone.de/html/multimedia/java_applets.htm#einbinden">Java-Applets |
| - einbinden</a></li> |
| - |
| - <li><a href="http://java.seite.net/">Kaffee & |
| - Kuchen -- Die deutsche Java-Seite</a></li> |
| -</ul> |
| -</body> |
| -</html> |
| \ No newline at end of file |
| /selfhtml.de/index.html |
| Property changes: |
| Deleted: svn:mime-type |
| ## -1 +0,0 ## |
| -text/plain |
| \ No newline at end of property |