/
index.html
98 lines (92 loc) · 3.87 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>DOM Scripting: Web Design with JavaScript and the Document Object Model</title>
<link rel="stylesheet" type="text/css" media="screen" href="styles/basic.css" />
</head>
<body>
<div id="container">
<div id="header">
<a href="http://domscripting.com/"><img src="images/domscripting_small.gif" alt="DOM Scripting" /></a>
<img src="images/webdesignwiththedom.gif" alt="Web Design with JavaScript and the Document Object Model" />
</div>
<h1>Code Examples</h1>
<ol>
<li><h2>A brief history of JavaScript</h2></li>
<li><h2>JavaScript Syntax</h2></li>
<li><h2>The Document Object Model</h2>
<ul>
<li><a href="chapter03/test.html">Test</a>: <code>alert</code> title attribute</li>
</ul>
</li>
<li><h2>A JavaScript image gallery</h2>
<ul>
<li><a href="chapter04/image_gallery/01/gallery.html">Image Gallery 1</a>: no JavaScript</li>
<li><a href="chapter04/image_gallery/02/gallery.html">Image Gallery 2</a>: swapping the pictures</li>
<li><a href="chapter04/image_gallery/03/gallery.html">Image Gallery 3</a>: swapping pictures and text</li>
<li><a href="chapter04/image_gallery/04/gallery.html">Image Gallery 4</a>: styled</li>
</ul>
</li>
<li><h2>Best Practices</h2>
<ul>
<li><a href="chapter05/example.html">Example</a>: unobtrusive popup window</li>
</ul>
</li>
<li><h2>Image Gallery Revisited</h2>
<ul>
<li><a href="chapter06/image_gallery/01/gallery.html">Image Gallery 1</a></li>
<li><a href="chapter06/image_gallery/02/gallery.html">Image Gallery 2</a></li>
<li><a href="chapter06/image_gallery/03/gallery.html">Image Gallery 3</a></li>
</ul>
</li>
<li><h2>Creating markup on the fly</h2>
<ul>
<li><a href="chapter07/01/test.html">Test</a>: <code>document.write</code> inline</li>
<li><a href="chapter07/02/test.html">Test</a>: <code>document.write</code> external</li>
<li><a href="chapter07/03/test.html">Test</a>: <code>alert innerHTML</code></li>
<li><a href="chapter07/04/test.html">Test</a>: updating <code>innerHTML</code></li>
<li><a href="chapter07/05/test.html">Test</a>: <code>alert</code> node info</li>
<li><a href="chapter07/06/test.html">Test</a>: <code>createElement</code></li>
<li><a href="chapter07/07/test.html">Test</a>: <code>createTextNode</code></li>
<li><a href="chapter07/08/test.html">Test</a>: <code>appendChild</code></li>
<li><a href="chapter07/09/test.html">Test</a>: documentFragments</li>
<li><a href="chapter07/10/test.html">Test</a>: documentFragments</li>
</ul>
</li>
<li><h2>Enhancing content</h2>
<ul>
<li><a href="chapter08/abbreviations/explanation.html">Display abbreviations</a></li>
<li><a href="chapter08/citations/explanation.html">Display citations</a></li>
<li><a href="chapter08/accesskeys/explanation.html">Display access keys</a></li>
</ul>
</li>
<li><h2>CSS-DOM</h2>
<ul>
<li><a href="chapter09/example.html">Example</a>: <code>alert</code> changed style info</li>
<li><a href="chapter09/itinerary/itinerary.html">Itinerary</a>: striped table</li>
<li><a href="chapter09/story/story.html">Story</a>: styling first paragraphs</li>
</ul>
</li>
<li><h2>Animated Slideshow</h2>
<ul>
<li><a href="chapter10/test.html">Test</a>: positioning and moving</li>
<li><a href="chapter10/message/message.html">Message</a>: moving 2 elements</li>
<li><a href="chapter10/slideshow/list.html">Slideshow</a>: simple movement</li>
<li><a href="chapter10/slideshow2/list.html">Slideshow</a>: smooth movement</li>
</ul>
</li>
<li><h2>Putting it all together</h2>
<ul>
<li><a href="chapter11/domsters/index.html">Home page</a></li>
<li><a href="chapter11/domsters/about.html">About</a></li>
<li><a href="chapter11/domsters/photos.html">Photos</a></li>
<li><a href="chapter11/domsters/live.html">Live</a></li>
<li><a href="chapter11/domsters/contact.html">Contact</a></li>
</ul>
</li>
<li><h2>The Future of DOM Scripting</h2></li>
</ol>
</div>
</body>
</html>