2JavaScript
JavaScript HTML CSS
JavaScript
JavaScript CSSWeb CSS JavaScript
A CSS
1C 1998 Netscape Explorer 4Web WaSP JavaScript
CSSWeb
WaSP CSSCSS JavaScript Web
CSS 1998 JavaScript
WaSP
“WaSPWeb ”
WaSP DreamweaverDOMWaSP http://www.webstandards.org
2
Click t
o buy NOW!
PDFXCHANGE
www.docutrack.com Clic
k to buy N
OW!PDFXCHANGE
www.docutrack.com
18 2
CSSJavaScript
DOM 1C document.layers document.all CSS
CSS JavaScript
JavaScript
2002 Stuart Langridge unobtrusive scriptingCSS Web JavaScript
q
q JavaScript
q Web JavaScripthook 4B JavaScript
q .js HTML
DHTML
Stuart http://www.kryogenix.org/code/browser/aqlists/
JavaScript JavaScript
3 JavaScriptJavaScript
JavaScript 2EJavaScript
JavaScript JavaScript W3C DOM4B
CSS HTML CSS JavaScript
unobtrusive ——
Click t
o buy NOW!
PDFXCHANGE
www.docutrack.com Clic
k to buy N
OW!PDFXCHANGE
www.docutrack.com
A CSS 19
Web 21q HTMLq CSSq JavaScript
21 Web HTMLCSS JavaScript
HTML HTML<h1>
HTML
HTML
CSS HTML CSS
JavaScript HTML/CSS HTMLJavaScript
HTML HTML CSS JavaScriptCSS JavaScript
22
screen reader ——
CSS
”
JavaScript
”
HTML
”
Click t
o buy NOW!
PDFXCHANGE
www.docutrack.com Clic
k to buy N
OW!PDFXCHANGE
www.docutrack.com
20 2
22 JavaScript
JavaScript JavaScript2E
q HTML CSS JavaScriptq CSS JavaScript .css .js
CSS JavaScript.css
12 px 0.8 em .css
HTML
CSSHTML JavaScript
q CSS HTMLq JavaScript HTML
CSS
”
HTML
”
Click t
o buy NOW!
PDFXCHANGE
www.docutrack.com Clic
k to buy N
OW!PDFXCHANGE
www.docutrack.com
B 21
q JavaScript CSS
JavaScript
B
HTMLCSS HTML <font>
CSS
CSS HTML JavaScriptJavaScript
CSS
JavaScript CSS CSSJavaScript
HTML
9 CSS CSS
9E CSS class Name
CSS
// objobj.className += ' errorMessage';// CSSinput.errorMessage { border: 1px solid #cc0000;}
CSS errorMessage
CSS
JavaScript Web HTML
<tr>
Click t
o buy NOW!
PDFXCHANGE
www.docutrack.com Clic
k to buy N
OW!PDFXCHANGE
www.docutrack.com
22 2
“XMLHTTP CSS width
HTML CSSCSS
display: none
CSS
/CSS
HTML <form>
C
JavaScript HTML
q JavaScript .js
HTMLq HTML .js
JavaScript .js HTML
Click t
o buy NOW!
PDFXCHANGE
www.docutrack.com Clic
k to buy N
OW!PDFXCHANGE
www.docutrack.com
C 23
<script type="text/javascript"> function doAllKindsOfNiftyThings() { // JavaScript } </script> </head> <body> <h1>My HTML page</h1> [etc.]
<script type="text/javascript" src="nifty.js"></script></head><body><h1>My HTML page</h1>[etc.]// nifty.jsfunction doAllKindsOfNiftyThings(){ // JavaScript}
4D <script>
HTML
HTML JavaScript .js
HTML JavaScript 99%
HTML — —
<a href="home.html" onMouseOver="mOv('home')" onMouseOut="mOut('home')">Home</a>
.js
<a href="home.html">Home</a>
// .jsvar nav = document.getElementById('navigation');var navLinks = nav.getElementsByTagName('a');for (var i=0;i<navLinks.length;i++){ navLinks[i].onmouseover = [code]; navLinks[i].onmouseout = [code];}
Click t
o buy NOW!
PDFXCHANGE
www.docutrack.com Clic
k to buy N
OW!PDFXCHANGE
www.docutrack.com
24 2
id navigation <ul>
onmouseover onmouseout
JavaScript hookID 4B 7C
JavaScript
javascript
<a href="javascript:doAllKindsOfNiftyThings()">Do Nifty!</a>
onclick
doAllKindsOfNiftyThings() javascript:
.js onclick
<a href="somepage.html" id="nifty">Do Nifty!</a>
// .jsdocument.getElementById('nifty').onclick =doAllKindsOfNiftyThings;
href URLJavaScript 2F
JavaScript JavaScriptJavaScript Netscape 4
D
JavaScript
http ftp
——
Click t
o buy NOW!
PDFXCHANGE
www.docutrack.com Clic
k to buy N
OW!PDFXCHANGE
www.docutrack.com
D 25
CSS JavaScriptCSS JavaScript CSS JavaScript
hover mouseover/mouseout
1997 JavaScriptJavaScript 23
23 “NewsJavaScript CSS
CSS JavaScript
<li><a href="#">News</a> <ul> <li><a href="#">Press Releases</a></li> <li><a href="#">News Articles</a></li> <li><a href="#">Photo Gallery</a></li> <li><a href="#">Official Blog</a></li> </ul></li>
// .cssli ul {display: none;}li:hover ul {display: block}
<li> <ul> display: none
<li> li: hover display: block
JavaScript CSS Explorer 6li hover
:hover CSS JavaScript
Click t
o buy NOW!
PDFXCHANGE
www.docutrack.com Clic
k to buy N
OW!PDFXCHANGE
www.docutrack.com
26 2
CSS JavaScript 7H JavaScriptmouseout CSS:hover
:hover
CSS :hover JavaScript mouseover mouseout
mouseenter mouseleave Explorer 7B
JavaScript CSS CSSJavaScript
Tab HTMLCSS
li:hover
<li>
JavaScript 7G JavaScript CSSJavaScript
CSS JavaScript
CSS :hover JavaScript mouseover/mouseoutCSS JavaScript
<li> <li>
<ul> <ul>
CSS
li ul {display: none}li:hover ul {display: block}
CSS <li>
Click t
o buy NOW!
PDFXCHANGE
www.docutrack.com Clic
k to buy N
OW!PDFXCHANGE
www.docutrack.com
D 27
——mouseover
mouseover JavaScript1996 JavaScript mouseover
CSS
CSS mouseover
<a href="somewhere.html" id="somewhere">Somewhere</a><a href="somewhere_else.html" id="somewhere_else">Somewhere else</a>a#somewhere { backgroundimage: url(pix/somewhere.gif);}a#somewhere_else { backgroundimage: url(pix/somewhere_else.gif);}a:hover#somewhere,a:focus#somewhere,a:active#somewhere { backgroundimage: url(pix/somewhere_hover.gif);}a:hover#somewhere_else,a:focus#somewhere_else,a:active#somewhere_else { backgroundimage: url(pix/somewhere_else_hover.gif);}
mouseover CSSmouseover mouseover
CSS
CSSCSS mouseover
CSSCSS mouseover
JavaScript mouseover
<a href="somewhere.html"
Dreamweaver Rollover Image ——
Click t
o buy NOW!
PDFXCHANGE
www.docutrack.com Clic
k to buy N
OW!PDFXCHANGE
www.docutrack.com
28 2
id="somewhere"><img src="pix/somewhere.gif" /></a><a href="somewhere_else.html"id="somewhere_else"><img src="pix/somewhere_else.gif" /></a>
function initMouseOvers() { var links = document.getElementsByTagName('img'); for (var i=0;i<links.length;i++) { var moSrc = links[i].src.substring(0, links[i].src.lastIndexOf('.')); moSrc += '_hover.gif'; links[i].moSrc = moSrc; links[i].origSrc = links[i].src; links[i].onmouseover = function () { this.src = this.moSrc; } links[i].onmouseout = function () { this.src = this.origSrc; } }}
CSSmouseover
mouseover JavaScriptCSS JavaScript
E
JavaScript
JavaScript
JavaScript
Click t
o buy NOW!
PDFXCHANGE
www.docutrack.com Clic
k to buy N
OW!PDFXCHANGE
www.docutrack.com
E 29
JavaScript
JavaScript
JavaScript
mouseover focus onmouseover
7B JavaScript
JavaScriptJavaScript
JavaScript alt
Click t
o buy NOW!
PDFXCHANGE
www.docutrack.com Clic
k to buy N
OW!PDFXCHANGE
www.docutrack.com
30 2
Explorer MozillaJavaScript
JavaScript http://www.accessmatters.com/ Bob Easton Mike Stenhouse James Edwards Derek Featherstone
JavaScript
JavaScript
JavaScriptJavaScript
JavaScriptJavaScript
Errors have been found
[ 100 103 ]
<form id="startOfForm">if (!validForm) { alert("Errors have been found"); location.hash = '#startOfForm';}
Click t
o buy NOW!
PDFXCHANGE
www.docutrack.com Clic
k to buy N
OW!PDFXCHANGE
www.docutrack.com
E 31
focus blur mouseover
mouseout
James Edwardshttp://www.accessmatters.com/resultsforjavascriptpart2
navigatingforms/
chaotic
Web
Derek Featherstone JavaScript
JavaScript
JavaScript
http://www.boxofchocolates.ca/archives/2005/06/12/javascriptandaccessibility DerekFeatherstone
Click t
o buy NOW!
PDFXCHANGE
www.docutrack.com Clic
k to buy N
OW!PDFXCHANGE
www.docutrack.com
32 2
JavaScript
JavaScript 1 JavaScriptJavaScript
Web
JavaScript
JavaScript JavaScript
JavaScript
F
Click t
o buy NOW!
PDFXCHANGE
www.docutrack.com Clic
k to buy N
OW!PDFXCHANGE
www.docutrack.com
F 33
JavaScript
HTML
HTML
hardcode HTML
JavaScriptHTML
href
HTML href
<a href="#" onclick="showPopup('niceimage.jpg')">Nice image!</a>
noscript user2C
JavaScript
<a href="niceimage.jpg" id="nice">Nice image!</a>document.getElementById('nice').onclick = function () { showPopup(this.href);}
href script userpopup
JavaScript
AjaxHTML
Click t
o buy NOW!
PDFXCHANGE
www.docutrack.com Clic
k to buy N
OW!PDFXCHANGE
www.docutrack.com
34 2
<a href="#" onclick="startUpAjaxStuff()">Commence coolness!</a>
Ajaxhref
href JavaScript
var link = document.createElement('a');link.href = '#';link.onclick = startUpAjaxStuff;var linkText = document.createTextNode('Commence coolness!');link.appendChild(linkText);document.body.appendChild(link);
link.href # # href
href a
HTMLJavaScript JavaScriptonclick href="#"
JavaScript
JavaScriptJavaScript
CSS
rel <tr> CSS
tr[rel] { display: none; }
<tr>
Click t
o buy NOW!
PDFXCHANGE
www.docutrack.com Clic
k to buy N
OW!PDFXCHANGE
www.docutrack.com
F 35
JavaScript <tr>
JavaScript
HTML
replace()
<head><title>Noscript page</title><script type="text/javascript">var isSupported = [check JavaScript support];if (isSupported)
location.replace('scriptpage.html');</script></head>
location.href location.href
6C
24
24 location.href
location.href
Click t
o buy NOW!
PDFXCHANGE
www.docutrack.com Clic
k to buy N
OW!PDFXCHANGE
www.docutrack.com
36 2
location.replace()
25
25 location.replace()
mouseover focus
draganddrop
7B
keyboardaccessible
mouseover
focus focus
keyboardfriendly HTML
focus
<noscript>
Web JavaScript<noscript>
location.replace()
Click t
o buy NOW!
PDFXCHANGE
www.docutrack.com Clic
k to buy N
OW!PDFXCHANGE
www.docutrack.com
G 37
q JavaScript HTML
q JavaScript JavaScript<noscript>
<noscript>
JavaScript W3C DOM XMLHttpRequest<noscript>
JavaScript
<noscript>
G
8 62
8 7
1 25026
26
Click t
o buy NOW!
PDFXCHANGE
www.docutrack.com Clic
k to buy N
OW!PDFXCHANGE
www.docutrack.com
38 2
1 250
JavaScript 27
27
28
28
class accessibility
——
Click t
o buy NOW!
PDFXCHANGE
www.docutrack.com Clic
k to buy N
OW!PDFXCHANGE
www.docutrack.com
G 39
29.accessibility {display: none}
29
JavaScript1A
210
Click t
o buy NOW!
PDFXCHANGE
www.docutrack.com Clic
k to buy N
OW!PDFXCHANGE
www.docutrack.com
40 2
210
JavaScriptCSS JavaScript
211
211
JavaScriptExplorer Mozilla
CSS
1/3
Click t
o buy NOW!
PDFXCHANGE
www.docutrack.com Clic
k to buy N
OW!PDFXCHANGE
www.docutrack.com
G 41
EmailHTML JavaScript
JavaScript
<label>
<tr> HTML
<tr> <td class="number"><input /></td> <td class="description">English sandwich</td> <td class="extra">bacon, cheese, lettuce, tomato</td> <td class="empty">freshly fried</td></tr>
<input>
HTML<tr> <input> name JavaScript
<input> <form>
<tr> <form><form method=post action="/cgibin/formmail/formmail.pl"><table class="search"> <tbody id="ordered"> <tr> <td colspan="3"><h3>Your order<h3></td> <td class="extra" rowspan="200"> <div id="orderForm"> //
name ——
Click t
o buy NOW!
PDFXCHANGE
www.docutrack.com Clic
k to buy N
OW!PDFXCHANGE
www.docutrack.com
42 2
</div> </td> </tr>
// <tr> </tbody></table></form>
name
q name <form>
name
q JavaScript <input />
<input />
XMLHTTP
XMLHTTP
PHPXML HTML 212
212 “XMLHTTP ”
Click t
o buy NOW!
PDFXCHANGE
www.docutrack.com Clic
k to buy N
OW!PDFXCHANGE
www.docutrack.com
G 43
q HTML <input type="image">
HTML PHPq JavaScript input action
XML PHP
Web
q
q
JavaScript
Click t
o buy NOW!
PDFXCHANGE
www.docutrack.com Clic
k to buy N
OW!PDFXCHANGE
www.docutrack.com