Ppk on javascript_chapter_2

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

http://www.webstandards.org

http://www.docu-track.com/index.php?page=38


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


k to buy N

OW!PDFXCHANGE

www.docutrack.com

http://www.kryogenix.org/code/browser/aqlists/



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


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


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


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


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


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


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


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


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


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


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


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



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


k to buy N

OW!PDFXCHANGE

www.docutrack.com

http://www.access-matters.



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


k to buy N

OW!PDFXCHANGE

www.docutrack.com

http://www.access-matters.com/results-for-javascript-part-2-

http://www.boxofchocolates.ca/archives/2005/06/12/javascript-and-accessibility



32 2

JavaScript

JavaScript 1 JavaScriptJavaScript

Web

JavaScript

JavaScript JavaScript

JavaScript

F

Click t

o buy NOW!

PDFXCHANGE


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


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


CSS

rel <tr> CSS

tr[rel] { display: none; }

<tr>

Click t

o buy NOW!

PDFXCHANGE


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


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


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


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


k to buy N

OW!PDFXCHANGE

www.docutrack.com



G 39

29.accessibility {display: none}

29

JavaScript1A

210

Click t

o buy NOW!

PDFXCHANGE


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


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


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


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


k to buy N

OW!PDFXCHANGE

www.docutrack.com



Ppk on javascript_chapter_2

Technology

Transcript of Ppk on javascript_chapter_2