kennethreitz/dive-into-python3
1
0
Fork 0
mirror of https://github.com/kennethreitz/dive-into-python3.git synced 2026-06-05 15:00:18 +00:00
Code Issues Packages Projects Releases Wiki Activity

js fiddling

Browse Source
This commit is contained in:
Mark Pilgrim
2009-03-22 14:51:44 -04:00
parent 8511a902c2
commit 5254c05f86
5 changed files with 47 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files
dip3.css
+6 -10
View File
@@ -4,12 +4,12 @@ pre,kbd,code,samp{font-family:Consolas,'Andale Mono',Monaco,'Liberation Mono','B
span{font:medium 'Arial Unicode MS',FreeSerif,OpenSymbol,'DejaVu Sans',sans-serif}
pre span{font-family:'Arial Unicode MS','DejaVu Sans',FreeSerif,OpenSymbol,sans-serif}
.baa{font:oblique large Constantia,Baskerville,Palatino,'Palatino Linotype','URW Palladio L',serif}
abbr{font-variant:small-caps;text-transform:lowercase;letter-spacing:0.1em}
abbr{font-variant:small-caps;text-transform:lowercase;letter-spacing:1px}
.q{text-align:right;font-style:oblique}
.q span{font-size:large}
.note{margin-left:4.94em}
.note span{display:block;float:left;font-size:xx-large;line-height:0.875;margin:0 0.22em 0 -1.22em}
.c,pre,.w,.w a,.download{line-height:2.154}
.c,pre,.w,.w a,.d{line-height:2.154}
.f:first-letter{float:left;color:#ddd;padding:0.11em 4px 0 0;font:normal 4em/0.68 serif}
h1,h2,h3,p,ul,ol{margin:1.75em 0;font-size:medium}
@@ -20,7 +20,7 @@ form div{float:right}
.c{text-align:center;margin:2.154em 0}
/* links */
a{background:transparent;text-decoration:none;border-bottom:1px dotted}
a{text-decoration:none;border-bottom:1px dotted}
a:hover{border-bottom:1px solid}
a:link,.w a{color:#26c}
a:visited{color:#93c}
@@ -29,23 +29,19 @@ a:visited{color:#93c}
/* code blocks */
pre{white-space:pre-wrap;padding-left:2.154em;border-left:1px solid #ddd}
.w{float:left}
.c,.w,.w a,.download{font-size:small}
.block,ol,p,blockquote,h1,h2,h3{clear:left}
.c,.w,.w a,.d{font-size:small}
.b,ol,p,blockquote,h1,h2,h3{clear:left}
pre a,.w a{padding:0.4375em 0}
.w a{text-decoration:underline}
kbd{font-weight:bold}
.p{color:#667}
/* hover effect for table rows, list items, and lines in code blocks */
.h{background:#eee;cursor:default}
/* overrides */
li ol,.q{margin:0}
pre a,.w a,pre a:hover{border:0}
.s{text-decoration:line-through}
/* headers */
h1,#noscript{background:PapayaWhip;width:100%} /* all hail PapayaWhip */
h1{background:PapayaWhip;width:100%} /* all hail PapayaWhip */
h1:before{content:"Chapter " counter(h1) ". "}
h1{counter-reset:h2}
h2:before{counter-increment:h2;content:counter(h1) "." counter(h2) ". "}
dip3.js
+34 -17
View File
@@ -4,20 +4,10 @@ var LANGS = {'python2': 'Python 2', 'java': 'Java', 'perl5': 'Perl 5', 'clang':
//google.load("jquery", "1.3");
//google.setOnLoadCallback(function() {
$(document).ready(function() {
var HS = {'visible': 'hide', 'hidden': 'show'};
/*
// toggle-able language comparisons
for (var lang in LANGS) {
$("blockquote.compare").filter("blockquote." + lang).each(function(i) {
$(this).wrapInner('<div class="block"></div>');
$(this).prepend('<div class="w">[ <a href="#" onclick="toggleComparisonNotes(\'' + lang + '\');return false" class="toggle">hide ' + LANGS[lang] + ' notes</a> ]</div>');
});
}
*/
hideTOC();
// "hide", "open in new window", and (optionally) "download" widgets on code & screen blocks
/* "hide", "open in new window", and (optionally) "download" widgets on code & screen blocks */
var HS = {'visible': 'hide', 'hidden': 'show'};
$("pre > code").each(function(i) {
var pre = $(this.parentNode);
if (pre.parents("table").length == 0) {
@@ -26,22 +16,39 @@ $(document).ready(function() {
});
$("pre.code, pre.screen").each(function(i) {
this.id = "autopre" + i;
$(this).wrapInner('<div class="block"></div>');
$(this).wrapInner('<div class="b"></div>');
$(this).prepend('<div class="w">[<a class="toggle" href="javascript:toggleCodeBlock(\'' + this.id + '\')">' + HS['visible'] + '</a>] [<a href="javascript:plainTextOnClick(\'' + this.id + '\')">open in new window</a>]</div>');
$(this).prev("p.download").each(function(i) {
$(this).prev("p.d").each(function(i) {
$(this).next("pre").find("div.w").append(" " + $(this).html());
this.parentNode.removeChild(this);
});
/* create skip links */
var postelm = $(this).next().get(0);
var postid = postelm.id || ("postautopre" + i);
postelm.id = postid;
$(this).before('<p class=skip><a href=#' + postid + '>skip over this code listing</a>');
});
/* make skip links disappear until you tab to them */
$(".skip a").blur(function() {
$(this).css({'position':'absolute','left':'0px','top':'-500px','width':'1px','height':'1px','overflow':'hidden'});
});
$(".skip a").blur();
$(".skip a").focus(function() {
$(this).css({'position':'static','width':'auto','height':'auto'});
});
// synchronized highlighting on callouts and their associated lines within code & screen blocks
var hip = {'background-color':'#eee','cursor':'default'};
var unhip = {'background-color':'inherit','cursor':'inherit'};
$("pre.code, pre.screen").each(function() {
$(this).find("a:not([href])").each(function(i) {
var a = $(this);
var li = a.parents("pre").next("ol").find("li:nth-child(" + (i+1) + ")");
li.add(a).hover(function() { a.addClass("h"); li.addClass("h"); },
function() { a.removeClass("h"); li.removeClass("h"); });
li.add(a).hover(function() { a.css(hip); li.css(hip); },
function() { a.css(unhip); li.css(unhip); });
});
});
@@ -57,6 +64,16 @@ $(document).ready(function() {
});
});
/*
// toggle-able language comparisons
for (var lang in LANGS) {
$("blockquote.compare").filter("blockquote." + lang).each(function(i) {
$(this).wrapInner('<div class="block"></div>');
$(this).prepend('<div class="w">[ <a href="#" onclick="toggleComparisonNotes(\'' + lang + '\');return false" class="toggle">hide ' + LANGS[lang] + ' notes</a> ]</div>');
});
}
*/
}); /* document.ready */
//}); /* google.setOnLoadCallback */
@@ -69,7 +86,7 @@ function toggleComparisonNotes(lang) {
*/
function toggleCodeBlock(id) {
$("#" + id).find("div.block").toggle();
$("#" + id).find("div.b").toggle();
var a = $("#" + id).find("a.toggle");
a.text(a.text() == HS['visible'] ? HS['hidden'] : HS['visible']);
}
strings.html
+2 -1
View File
@@ -5,6 +5,7 @@
<link rel=stylesheet type=text/css href=dip3.css>
<style>
body{counter-reset:h1 3}
.s{text-decoration:line-through}
</style>
</head>
<form action=http://www.google.com/cse><div><input type=hidden name=cx value=014021643941856155761:l5eihuescdw><input type=hidden name=ie value=UTF-8>&nbsp;<input name=q size=31>&nbsp;<input type=submit name=sa value=Search></div></form>
@@ -100,7 +101,7 @@ La Pe&ntilde;a</pre>
<p>Let's take another look at <a href=your-first-python-program.html#divingin><code>humansize.py</code></a>:
<p class=download>[<a href=humansize.py>download <code>humansize.py</code></a>]
<p class=d>[<a href=humansize.py>download <code>humansize.py</code></a>]
<pre><code>
<a>SUFFIXES = {1000: ['KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'], <span>&#x2460;</span></a>
1024: ['KiB', 'MiB', 'GiB', 'TiB', 'PiB', 'EiB', 'ZiB', 'YiB']}
unit-testing.html
+4 -4
View File
@@ -49,7 +49,7 @@ body{counter-reset:h1 7}
<li>The <code>to_roman()</code> function should return the Roman numeral representation for all integers <code>1</code> to <code>3999</code>.
</ol>
<p>It is not immediately obvious how this code does&hellip; well, <em>anything</em>. It defines a class which has no <code>__init__()</code> method. The class <em>does</em> have another method, but it is never called. The entire script has a <code>__main__</code> block, but it doesn't reference the class or its method. But it does do something, I promise.
<p class=download>[<a href=romantest1.py>download <code>romantest1.py</code></a>]
<p class=d>[<a href=romantest1.py>download <code>romantest1.py</code></a>]
<pre><code>import roman1
import unittest
@@ -159,7 +159,7 @@ Traceback (most recent call last):
<li>Overall, the unit test failed because at least one test case did not pass. When a test case doesn't pass, <code>unittest</code> distinguishes between failures and errors. A failure is a call to an <code>assertXYZ</code> method, like <code>assertEqual</code> or <code>assertRaises</code>, that fails because the asserted condition is not true or the expected exception was not raised. An error is any other sort of exception raised in the code you're testing or the unit test case itself.
</ol>
<p><em>Now</em>, finally, you can write the <code>to_roman()</code> function.
<p class=download>[<a href=roman1.py>download <code>roman1.py</code></a>]
<p class=d>[<a href=roman1.py>download <code>roman1.py</code></a>]
<pre><code>roman_numeral_map = (('M', 1000),
('CM', 900),
('D', 500),
@@ -233,7 +233,7 @@ OK</samp></pre>
<p>The <code>to_roman()</code> function should raise an <code>OutOfRangeError</code> when given an integer greater than <code>3999</code>.
</blockquote>
<p>What would that test look like?
<p class=download>[<a href=romantest2.py>download <code>romantest2.py</code></a>]
<p class=d>[<a href=romantest2.py>download <code>romantest2.py</code></a>]
<pre><code>
<a>class ToRomanBadInput(unittest.TestCase): <span>&#x2460;</span></a>
<a> def test_too_large(self): <span>&#x2461;</span></a>
@@ -298,7 +298,7 @@ FAILED (failures=1)</samp></pre>
<li>Of course, the <code>to_roman()</code> function isn't raising the <code>OutOfRangeError</code> exception you just defined, because you haven't told it to do that yet. That's excellent news! It means this is a valid test case &mdash; it fails before you write the code to make it pass.
</ol>
<p>Now you can write the code to make this test pass.
<p class=download>[<a href=roman2.py>download <code>roman2.py</code></a>]
<p class=d>[<a href=roman2.py>download <code>roman2.py</code></a>]
<pre><code>def to_roman(n):
"""convert integer to Roman numeral"""
if n > 3999:
your-first-python-program.html
+1 -1
View File
@@ -17,7 +17,7 @@ th{font-family:inherit !important}
<p id=toc>&nbsp;
<h2 id=divingin>Diving in</h2>
<p class=f>Books about programming usually start with a bunch of boring chapters about fundamentals and eventually work up to building something useful. Let's skip all that. Here is a complete, working Python program. It probably makes absolutely no sense to you. Don't worry about that, because you're going to dissect it line by line. But read through it first and see what, if anything, you can make of it.
<p class=download>[<a href=humansize.py>download <code>humansize.py</code></a>]
<p class=d>[<a href=humansize.py>download <code>humansize.py</code></a>]
<pre><code>SUFFIXES = {1000: ['KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'],
1024: ['KiB', 'MiB', 'GiB', 'TiB', 'PiB', 'EiB', 'ZiB', 'YiB']}