Changeset 815
- Timestamp:
- 04/28/06 15:43:44 (2 years ago)
- Files:
-
- presentations/2006/ajax_experience/slides.html (modified) (21 diffs)
- presentations/2006/ajax_experience/slides.txt (modified) (21 diffs)
Legend:
- Unmodified
- Added
- Removed
- Modified
- Copied
- Moved
presentations/2006/ajax_experience/slides.html
r814 r815 419 419 <h1>toString Ambiguity</h1> 420 420 <ul class="simple"> 421 <li>[1].toString() === "1"</li>422 <li>(1).toString() === "1"</li>423 <li> "1".toString() === "1"</li>421 <li>[1].toString() === '1'</li> 422 <li>(1).toString() === '1'</li> 423 <li>'1'.toString() === '1'</li> 424 424 </ul> 425 425 </div> … … 452 452 <ul class="simple"> 453 453 <li>Most JavaScript comparisons based on toString</li> 454 <li><!-- but [1] == [1] is false! --> 455 </li> 454 <li>[1] == [1] is false!</li> 456 455 <li>compare(a, b) provides consistent results</li> 457 456 <li>Extensible</li> … … 479 478 <dd>unique identifier for your adapter</dd> 480 479 <dt>check:</dt> 481 <dd> predicate,should wrap be called?</dd>480 <dd>should wrap be called?</dd> 482 481 <dt>wrap:</dt> 483 482 <dd>performs the operation</dd> … … 489 488 <pre class="literal-block"> 490 489 function isDOMNode(node) { 491 return typeof(node.nodeType) == "number";490 return typeof(node.nodeType) == 'number'; 492 491 } 493 492 … … 496 495 } 497 496 498 registerComparator( "compareDOM",497 registerComparator('compareDOM', 499 498 isDOMNode, compareDOMNode); 500 499 </pre> … … 504 503 <ul class="simple"> 505 504 <li>Easily build URL query strings</li> 506 <li>queryString([ "foo", "bar"], [1, 2]) == "foo=1&bar=2"</li>507 <li>queryString({foo: 1, bar: 2}) == "foo=1&bar=2"</li>505 <li>queryString(['foo', 'bar'], [1, 2]) == 'foo=1&bar=2'</li> 506 <li>queryString({foo: 1, bar: 2}) == 'foo=1&bar=2'</li> 508 507 </ul> 509 508 </div> … … 511 510 <h1>queryString and DOM</h1> 512 511 <ul> 513 <li><p class="first">queryString( "formNode") == "foo=1&bar=2", given:</p>512 <li><p class="first">queryString('formNode') == 'foo=1&bar=2', given:</p> 514 513 <pre class="literal-block"> 515 514 <form id="formNode"> … … 582 581 <h1>Higher-order Array</h1> 583 582 <dl class="docutils"> 584 <dt>filter( predicate, lst):</dt>585 <dd>Array where predicate(lst[n])</dd>583 <dt>filter(func, lst):</dt> 584 <dd>Array where funcn(lst[n])</dd> 586 585 <dt>map(func, lst):</dt> 587 586 <dd>[func(lst[0]), ...]</dd> … … 692 691 <li>JavaScript has no sprintf</li> 693 692 <li>Thousands separators help readability</li> 694 <li>Java's Number Format Pattern Syntax</li>693 <li>Java's NumberFormat pattern syntax</li> 695 694 </ul> 696 695 </div> … … 717 716 <p>Currency:</p> 718 717 <pre class="literal-block"> 719 >>> money = numberFormatter( "$###,###.##")718 >>> money = numberFormatter('$###,###.##') 720 719 >>> money(1234567.89) 721 720 "$1,234,567.89" … … 726 725 <p>Percent:</p> 727 726 <pre class="literal-block"> 728 >>> percent = numberFormatter( "###,###%")727 >>> percent = numberFormatter('###,###%') 729 728 >>> percent(123.45) 730 729 "12,345%" … … 810 809 <p>A simple list:</p> 811 810 <pre class="literal-block"> 812 var node = createDOM( "ul", null,813 createDOM( "li", null, "first"),814 createDOM( "li", null, "second"));811 var node = createDOM('ul', null, 812 createDOM('li', null, 'first'), 813 createDOM('li', null, 'second')); 815 814 </pre> 816 815 <p>Renders as:</p> … … 824 823 <pre class="literal-block"> 825 824 var node = UL(null, 826 LI( "first"),827 LI( "second"));825 LI('first'), 826 LI('second')); 828 827 </pre> 829 828 </div> … … 832 831 <p>Functional style handy for DOM creation:</p> 833 832 <pre class="literal-block"> 834 var items = [ "first", "second"];833 var items = ['first', 'second']; 835 834 var node = UL(null, map(LI, items)); 836 835 </pre> … … 840 839 <p>First parameter is either an object (attributes), or a string (text node):</p> 841 840 <pre class="literal-block"> 842 var classes = repeat({ "class": "itemclass"});843 844 var items = [ "first", "second"];845 846 var node = UL({ "class": "listclass"},841 var classes = repeat({'class': 'itemclass'}); 842 843 var items = ['first', 'second']; 844 845 var node = UL({'class': 'listclass'}, 847 846 map(LI, classes, items)); 848 847 </pre> … … 853 852 <pre class="literal-block"> 854 853 var classes = cycle( 855 { "class": "even"},856 { "class": "odd"});857 858 var items = [ "first", "second"];854 {'class': 'even'}, 855 {'class': 'odd'}); 856 857 var items = ['first', 'second']; 859 858 860 859 var node = UL(null, … … 887 886 <p>JavaScript:</p> 888 887 <pre class="literal-block"> 889 >>> scrapeText( "scrape_me");888 >>> scrapeText('scrape_me'); 890 889 "text is here" 891 890 </pre> … … 902 901 <p>JavaScript:</p> 903 902 <pre class="literal-block"> 904 >>> formContents( "formNode")903 >>> formContents('formNode') 905 904 [["foo", "bar"], ["1", "2"]] 906 905 </pre> … … 957 956 </dl> 958 957 <ul class="simple"> 959 <li> "rgb(...)"</li>960 <li> "hsl(...)"</li>961 <li> "#RRGGBB"</li>962 <li> "blue"</li>958 <li>'rgb(...)'</li> 959 <li>'hsl(...)'</li> 960 <li>'#RRGGBB'</li> 961 <li>'blue'</li> 963 962 </ul> 964 963 </div> … … 1072 1071 function gotDocument(json) { /* ... */ } 1073 1072 function delay(res) { return wait(2.0, res); } 1074 var d = loadJSONDoc( "example.json");1073 var d = loadJSONDoc('example.json'); 1075 1074 d.addCallback(delay); 1076 1075 d.addCallback(gotDocument); … … 1101 1100 function myClick(e) { 1102 1101 var mouse = e.mouse(); 1103 log( "page coordinates: "+ mouse.page);1104 log( "client coordinates: "+ mouse.client);1102 log('page coordinates: ' + mouse.page); 1103 log('client coordinates: ' + mouse.client); 1105 1104 } 1106 connect( "element_id", "onclick", myClick);1105 connect('element_id', 'onclick', myClick); 1107 1106 </pre> 1108 1107 </div> presentations/2006/ajax_experience/slides.txt
r814 r815 82 82 ================== 83 83 84 * [1].toString() === "1"85 * (1).toString() === "1"86 * "1".toString() === "1"84 * [1].toString() === '1' 85 * (1).toString() === '1' 86 * '1'.toString() === '1' 87 87 88 88 … … 111 111 112 112 * Most JavaScript comparisons based on toString 113 * .. but[1] == [1] is false!113 * [1] == [1] is false! 114 114 * compare(a, b) provides consistent results 115 115 * Extensible … … 138 138 139 139 check: 140 predicate,should wrap be called?140 should wrap be called? 141 141 142 142 wrap: … … 150 150 151 151 function isDOMNode(node) { 152 return typeof(node.nodeType) == "number";152 return typeof(node.nodeType) == 'number'; 153 153 } 154 154 … … 157 157 } 158 158 159 registerComparator( "compareDOM",159 registerComparator('compareDOM', 160 160 isDOMNode, compareDOMNode); 161 161 … … 165 165 166 166 * Easily build URL query strings 167 * queryString([ "foo", "bar"], [1, 2]) == "foo=1&bar=2"168 * queryString({foo: 1, bar: 2}) == "foo=1&bar=2"167 * queryString(['foo', 'bar'], [1, 2]) == 'foo=1&bar=2' 168 * queryString({foo: 1, bar: 2}) == 'foo=1&bar=2' 169 169 170 170 … … 172 172 =================== 173 173 174 * queryString( "formNode") == "foo=1&bar=2", given::174 * queryString('formNode') == 'foo=1&bar=2', given:: 175 175 176 176 <form id="formNode"> … … 253 253 ================== 254 254 255 filter( predicate, lst):256 Array where predicate(lst[n])255 filter(func, lst): 256 Array where funcn(lst[n]) 257 257 258 258 map(func, lst): … … 378 378 * JavaScript has no sprintf 379 379 * Thousands separators help readability 380 * Java's Number Format Pattern Syntax380 * Java's NumberFormat pattern syntax 381 381 382 382 … … 406 406 Currency:: 407 407 408 >>> money = numberFormatter( "$###,###.##")408 >>> money = numberFormatter('$###,###.##') 409 409 >>> money(1234567.89) 410 410 "$1,234,567.89" … … 416 416 Percent:: 417 417 418 >>> percent = numberFormatter( "###,###%")418 >>> percent = numberFormatter('###,###%') 419 419 >>> percent(123.45) 420 420 "12,345%" … … 512 512 A simple list:: 513 513 514 var node = createDOM( "ul", null,515 createDOM( "li", null, "first"),516 createDOM( "li", null, "second"));514 var node = createDOM('ul', null, 515 createDOM('li', null, 'first'), 516 createDOM('li', null, 'second')); 517 517 518 518 Renders as:: … … 527 527 528 528 var node = UL(null, 529 LI( "first"),530 LI( "second"));529 LI('first'), 530 LI('second')); 531 531 532 532 … … 536 536 Functional style handy for DOM creation:: 537 537 538 var items = [ "first", "second"];538 var items = ['first', 'second']; 539 539 var node = UL(null, map(LI, items)); 540 540 … … 545 545 First parameter is either an object (attributes), or a string (text node):: 546 546 547 var classes = repeat({ "class": "itemclass"});548 549 var items = [ "first", "second"];550 551 var node = UL({ "class": "listclass"},547 var classes = repeat({'class': 'itemclass'}); 548 549 var items = ['first', 'second']; 550 551 var node = UL({'class': 'listclass'}, 552 552 map(LI, classes, items)); 553 553 … … 559 559 560 560 var classes = cycle( 561 { "class": "even"},562 { "class": "odd"});563 564 var items = [ "first", "second"];561 {'class': 'even'}, 562 {'class': 'odd'}); 563 564 var items = ['first', 'second']; 565 565 566 566 var node = UL(null, … … 591 591 JavaScript:: 592 592 593 >>> scrapeText( "scrape_me");593 >>> scrapeText('scrape_me'); 594 594 "text is here" 595 595 … … 607 607 JavaScript:: 608 608 609 >>> formContents( "formNode")609 >>> formContents('formNode') 610 610 [["foo", "bar"], ["1", "2"]] 611 611 … … 664 664 Color from any valid CSS color description 665 665 666 - "rgb(...)"667 - "hsl(...)"668 - "#RRGGBB"669 - "blue"666 - 'rgb(...)' 667 - 'hsl(...)' 668 - '#RRGGBB' 669 - 'blue' 670 670 671 671 … … 790 790 function gotDocument(json) { /* ... */ } 791 791 function delay(res) { return wait(2.0, res); } 792 var d = loadJSONDoc( "example.json");792 var d = loadJSONDoc('example.json'); 793 793 d.addCallback(delay); 794 794 d.addCallback(gotDocument); … … 820 820 function myClick(e) { 821 821 var mouse = e.mouse(); 822 log( "page coordinates: "+ mouse.page);823 log( "client coordinates: "+ mouse.client);822 log('page coordinates: ' + mouse.page); 823 log('client coordinates: ' + mouse.client); 824 824 } 825 connect( "element_id", "onclick", myClick);825 connect('element_id', 'onclick', myClick); 826 826 827 827
