Вы находитесь на странице: 1из 332

-

-
2009

681.3.06
32.973.26-018.2
49
49

. .

JavaScript . 2- ., . . .: -,
2009. 336 .: .
ISBN 978-5-9775-0361-7

JavaScript.
,
,
. . Web-, ,
. JavaScript. : Internet Explorer Mozilla Firefox. ""
.
-

681.3.06
32.973.26-018.2

:

.
.

02429 24.07.00. 30.09.08.


70 1001/16. . . . . 27,09.
2500 .
"-", 194354, -, . , 5.

" ""
199034, -, 9 , 12

ISBN 978-5-9775-0361-7

. ., 2008
, "-", 2008

.......................................................................................................................1
..............................................................................................1
.....................................................................................................1
.................................................................................................................1
....................................................................................2
............................................................................................................2
1. JAVASCRIPT ........................................................3
1.1. .......................................................................................3
1.2. ................................................................................................4
1.3. ....................................................................................................5
1.4. ...............................................................................................7
1.5. JavaScript ..................................................................................7
1.6. ............................................................................................................8
1.7. ........................................................................................10
2. .......................................................................11
2.1. ................................................................................................11
2.2. ..................................................................11
2.3. ......................................................................................15
2.4. ................................................................................................18
2.5. ...........................................................................................20
2.6. .........................................................21
2.7. userAgent ...........................................................................................22
2.7.1. Mozilla Firefox ........................................................26
2.7.2. Opera........................................................................27
2.7.3. .........................................................................28
2.8. JScript .............................................................................29
2.9. ..................................................................30
2.10. ....................................................................................31

IV

2.11. ...........32
2.12. Web- ............................................................33
3. ...........................35
3.1. .................................................................................................35
3.2.
Web- ..........................................................................................................36
3.3. .....................................................37
3.4. .........................................................................38
3.5. ..............................................................................................40
3.5.1. ...............................................................................41
3.5.2. .............................................................................41
3.5.3. ......................................................................................43
3.6. ...........................................................................................................44
3.7. ..................................................................................................45
3.8. ..................................................................................................47
3.8.1. .............................................47
3.8.2. ............................................47
3.8.3. .......................................................................................48
3.8.4. ..............................48
3.8.5. .................................................................49
3.9. ........................................................................................51
3.9.1. Web- ...........................................................................51
3.9.2. ..........................................................................52
3.9.3. .....................................................53
3.9.4.
.........................................................................................................56
3.10. ...........................................................................................................58
3.11. ..........................................................................................61
3.12. .............................................................................................................62
3.12.1. Web-..............................................................62
3.12.2. ..................................................63
3.13. .....................................65
3.14. .....................................................................65
3.15. Web- ....................................................................69
3.15.1. ....................................................70
3.16. ...............................................................................72
3.17. ...........................................................................75

4. ....................................................................81
4.1. .........................................81
4.2. ........................................................................................82
4.3. .....................................................................84
4.4. - .........................................................................................85
4.5. - .........................................................................................................91
4.6.
..........................................................................................................94
4.7. ........................................................................................95
5. ................................................................99
5.1. ........................................................................99
5.2. Date .......................................................................................................99
5.3. 2000 ..........................................................................101
5.4. ................................................................................101
5.5. ........................................................103
5.6. .....................................................................................................104
5.7. ?..........................................................105
6. ............................................................................109
6.1. ............................................................................109
6.2. ................................................................................................112
6.3. .................................................................................................115
6.4. ..................................................................................117
6.5. ...........................................................................................119
6.6. ..............................................................................................120
6.7. .............................................................................................121
6.8. ...............................................................................................123
7. ..................................................................127
7.1. .......................................................127
7.1.1. .......................................................127
7.1.2. .....................................................................................128
7.2. - .......................................................................................................130
7.3. Web- ....................................................................133
7.4. , ......................................................135
7.5. ............................................................................................140
7.6. ......................................................................................143

VI

7.7. .....................................................................................146
7.7.1. ...............................................................................146
7.7.2. ........................................................................149
7.7.3. ..............................................................................152
7.7.4. ..........................................................................153
7.7.5. ............................................................................155
7.8. ..................................................................................156
7.9. ......................................................................159
7.10. ..........................................................................................161
7.11. .............................................................................................166
8. ...........................................................................171
8.1. ....................................................................................................171
8.2. ......................................................................................173
8.3. - .............................................................................177
8.4. ..............................................................................................180
9. WEB- ......................................183
9.1. ...........................................................................183
9.2. .....................................................186
9.3. ...........................................................190
10. JAVASCRIPT ...........................................................................195
10.1. ...........................................................................................195
10.2. -...........................................................................................198
10.3. .......................................................................................................209
10.4. .....................................................................................215
10.5. .....................................................................................................219
10.5.1. ..........................................................................................219
10.5.2. ........................................................................................220
10.5.3. ........................................................................220
10.5.4. .......................................................................................221
10.5.5. .................................................................................222
10.5.6. ............................................................................................226
11. ...................................................233
11.1. .......................................................233
11.2. ...........................................................................................235

VII

11.3. ..................................................................................236
11.4. bookmarklets - .....................................................238
11.4.1. ? ...........................................................................238
11.4.2. ? .........................................................239
11.4.3. ? ..............................................................................239
11.4.4. ? ...........................................................240
11.4.5. , void? ..................................................................241
11.4.6. : ........................................................241
11.4.7. .....................................................................................243
11.4.8. ? , ..........................................244
11.5. ....................................................................................245
11.5.1. ........................................................................................245
11.5.2. ................................................................245
11.5.3. Web- ..........................................246
11.5.4. ...........................................................................246
11.6. - ....................................................................................246
11.6.1. Whats .............................................................247
11.6.2. ............................................................................................247
11.6.3. ...................................................................................................247
11.7. Internet Explorer ................................................................248
11.7.1. .......................252
11.8. Mozilla Firefox...................................................................259
11.9. .............................................................................261
11.9.1. WordPress ...........................................................................265
11.9.2. ...................................................................................................265
11.10. .............................................................................265
11.11. 80 ..........................................................................266
12. JAVASCRIPT ...................................271
12.1. HTML Applications ..........................................271
12.2. Shell ...................................................................................................273
12.3. ...............................................................................277
12.4. ......................................278
12.4.1. ......................................................................278
12.5. Window Script Host........................................................................................280
12.5.1. .................................................................281
12.5.2. ...................................................................................282
12.5.3. ....................................................................................285
12.5.4. ....................................................287

VIII

12.5.5. ..............................................................289
12.5.6. ..................................................................................292
12.5.7. ...................................................................................292
12.6. WMI ................................................................................................................302
12.6.1. .....................................................................................................302
12.6.2. ................................................303
12.6.3. ........................................................304
12.7. Silverlight........................................................................................................306
12.8. Windows Vista .............................................310
13. ...........................................................................311
13.1. ..........................................................311
13.1.1. .......................................................................311
13.2. Gmail mailto .............................................................312
13.3. ...........................................................................313
13.4. ....................................................................................313
13.5. JavaScript Mozilla Firefox ...........................................................313
13.6. parseInt ...........................................................................................314
13.7. ...............................................314
13.8. ..........................................................................315
13.9. .................................................................315
13.10. .......................................................................316
.............................................................................................................317
........................................................................................319



,
. IT-. .
.
,
JavaScript. ( ) , , Web- , .


,
JavaScript. , ,
.


, Internet Explorer, , ,
Internet Explorer 7.0, Windows Vista, Windows Update Windows XP Service Pack 2. Mozilla Firefox.
, , ,
, . Mozilla Firefox 3.0.x.
Opera.
. , .

, Opera
, .


; , (www.bhv.ru)
. .
, - , , . , .

,
. ,
.
, . , ,
(Richard Womersley), llizard aka ejm, .

,
""
, .

, 2008

JavaScript
1.1.
.
. ,
"" . .
.
, . JavaScript . , , .
, Windows.
, . ,
, ,
.
Web-,
Web- . .
JavaScript . , ,

| . .txt.
Web- htm html,
,
, , 1.htm. Windows , . -

.
.
( ). .
, . , .

1.2.
, ", !" ( "Hello, world!").
.
( 1.1).
1.1.
<html>
<head>
<title> </title>
<script type="text/javascript">
alert(", !");
</script>
</head>
<body>
<h1> </h1>
<p> !</p>
<script language = "JavaScript">
<!-document.write(", !");
// -->
</script>
<p>
<input type="button" value=""
onClick="alert(' ')"></p>
</body>
</html>

JavaScript

helloworld.htm.
, .

1.3.
JavaScript Web-,
<script> </script>. . , script .
.
<script type = "text/javascript">


<script language = "JavaScript">

, script JavaScript. . , .
.
, .
.
:
<script type = "text/javascript" language = "JavaScript">

,
:
<script>
...
</script>

, JavaScript, . , .

, . :
 <head> </head>;
 <body>;
 .

JavaScript ;
 . JavaScript

js. .
.
, . ?
. .
HTML1 (
<head> </head>). ,
( <body> </body>). . ,
onClick .
. :
<script type = "text/javascript">
//
alert(", !");
</script>

alert, .
. <body>
:
<script type = "text/javascript">
document.write(", !");
</script>

document.write .
", !" "
1

HTML (HyperText Markup Language) .

JavaScript

!" , ,
onClick. , .
alert.

1.4.
, Web-,
. <script>
HTML . JavaScript . ,
.
,
, .
.
HTML <!-- -->:
<script type="text/javascript">
<!-document.write(" JavaScript");
// -->
</ script >

, JavaScript , .
.

1.5. JavaScript
, JavaScript. ,
.
,
, . , -

( ).
JavaScript,
():
//

:
= + 1; //

,
. ,
/* */, . :
/*
,
*/

, ,
. , JavaScript
<script>. HTML.

1.6.
, , .
.
helloworld.htm .
Internet Explorer. Windows Vista/XP Service Pack 2,
. Microsoft
. JavaScript,
,
.
Web-
.
(. 1.1).

JavaScript

OK ( , , ).
. ( !). ,
....
,
.
, , , . , 13,
, , . Mozilla Firefox,
.

. 1.1.

10

1.7.
-
.
", !" OK . , . ,
. JavaScript .
.

- Chap01\helloworld.htm.


2.1.
, . Netscape Navigator Internet Explorer.
Opera.
Mozilla Firefox.
, .

Web-. ,

Web-. Web- - .
Web-, Web, : " Internet Explorer". ,
Microsoft.
,
, , .

2.2.
navigator.
, ,

12

. : Internet Explorer, Mozilla Firefox Opera.


navigator:
 appCodeName . Mozilla;
 appName (Internet Explorer, Netscape, Opera);
 appVersion ;
 platform , ( Win32);
1

 cookieEnabled cookie ;
 javaEnabled JavaScript;
 userAgent .

, . ( 2.1).
2.1.
<h1> </h1>
<script type = "text/javascript">
var code = navigator.appCodeName;
var name = navigator.appName;
var vers = navigator.appVersion;
var platform = navigator.platform;
var cook = navigator.cookieEnabled;
var je = navigator.javaEnabled();
var ua = navigator.userAgent;
document.write(' : ' + name +
'<br /> : ' + vers +
'<br /> : ' + code +
'<br />: ' + platform +
'<br /> cookie: ' + cook +
'<br /> JavaScript: ' + je +
'<br />userAgent: ' + ua);
</script>
1

Web-, .

13

Web-
(. 2.1 2.2).

. 2.1. Internet Explorer

, Internet Explorer :
 appMinorVersion;
 online;
 systemLanguage.

14

, .
, Internet Explorer ( 2.2).

. 2.2. Mozilla Firefox

2.2. , Internet Explorer


<h2> Internet Explorer</h2>
<script type = "text/javascript">
document.write(navigator.appMinorVersion +

15

'<br />' + navigator.onLine +


'<br />' + navigator.systemLanguage);
</script>

, Mozilla Firefox:
 language;
 oscpu;
 product;
 productSub;
 vendor;
 vendorSub.

, Mozilla Firefox ( 2.3).


2.3. , Mozilla Firefox
<h2> Firefox</h2>
<script type = "text/javascript">
document.write(navigator.language +
'<br />' + navigator.oscpu +
'<br />' + navigator.product +
'<br />' + navigator.productSub +
'<br />' + navigator.vendor +
'<br />' + navigator.vendorSub);
</script>

, . navigator.
.

2.3.
, , .
? . Web- , -

16

,
. . . , , Web-.
( 2.4).
2.4. Web-
<script type = "text/javascript">
var ver = navigator.appVersion;
if (ver.indexOf("MSIE") != -1)
{
alert (" Internet Explorer");
// window.location.href="ie.htm";
}
else
alert (" Firefox");
// window.location.href="firefox.htm";
</script>

Chap02\version.htm.

, ,
. , , ;
,
Web- . if. , appName. Internet Explorer
Microsoft Internet Explorer, Mozilla Firefox Netscape ( 2.5).
2.5.
<script type = "text/javascript">
var errorText = ' ';

17

if (navigator.appName.indexOf('Netscape') != -1)
if (navigator.appVersion.substr(0, 1) > 3)
document.write(' : ' + window.screen.pixelDepth)
else
document.write(errorText);

if (navigator.appName.indexOf('Microsoft') != -1)
if (navigator.appVersion.substr(0, 1) > 3)
document.write(' : ' + window.screen.colorDepth)
else
document.write(errorText);
</script>

<NOSCRIPT>
, ,
.
</NOSCRIPT>

, ,
, , .
, Netscape Navigator 4.0 pixelDepth, Internet Explorer colorDepth.

. Mozilla Firefox
.

, . indexOf
. , . , Mozilla Firefox Netscape. , , Netscape Navigator.

Chap02\version2.htm.

18

,
Internet Explorer 7.0 Mozilla Firefox 3.0.x, - . . , ,
, . ,
.
.
, Internet Explorer
document.all, Netscape Navigator document.layers.
, Web. Opera document.all.item.

document.getElementById (Mozilla Firefox
).
( 2.6).
2.6.
var bNN4 = document.layers;
var bIE4 = document.all && document.all.item;
// document.all.item Opera
var bW3CDOM = document.getElementById;
var bDOMBrowser = bNN4 || bIE4 || bW3CDOM;

.
.

2.4.
, .
 availHeight, availWidth

,
, , MS Office ICQ.
 height, width .

19

, .
, ( 2.7).
2.7.
<script type = "text/javascript">
function fullWindow()
{
window.moveTo(0, 0);
window.resizeTo(screen.availWidth, screen.availHeight);
}
</script>

</head>
<body onload="fullWindow()">

Chap02\fullscreen.htm.

, Web- . , ( 2.8).
2.8.
<script type = "text/javascript">
var msg=" ";

if (screen.width == 640 || screen.height == 480){


location=("640x480.htm");}
else if (screen.width == 800 || screen.height == 600){
location=("800x600.htm");}
else if (screen.width == 1024 || screen.height == 768){
location=("1024x768.htm");}

20

else if(screen.width == 1152 || screen.height == 864){


location=("1152x864.htm");}
else if (screen.width == 1280 || screen.height == 720){
location=("1280x720.htm");}
else if (screen.width > 1280 || screen.height > 720){
alert(msg);
}
</script>

Web-
: 640x480.htm, 800x600.htm, 1024x768.htm,
1152x864.htm 1280x720.htm.

, ,
Chap02\screen.htm.

2.5.
,
. , . . ( 2.9).
2.9.
<script type = "text/javascript">
var W; //
var H; //

function checkSize()
{
if(document.all)
{
W = document.body.clientWidth;
H = document.body.clientHeight;
}

21

else
{
W = innerWidth;
H = innerHeight;
}
}
</script>
//
<script type = "text/javascript">
checkSize();
alert(": " + H);
alert(": " + W);
</script>

, , Chap02\browsersize.htm.

2.6.


Web-, appVersion
navigator ( 2.10).
2.10.
function getOS()
{
if (navigator.appVersion.indexOf('Windows')>=0) return 'Windows';

if (navigator.appVersion.indexOf('Linux')>=0)

return 'Linux';

if (navigator.appVersion.indexOf('Sun')==0)

return 'SunOS';

22

. .

2.7. userAgent
userAgent navigator, . Web-, userAgent ,
,
. . , userAgent,
. , Internet Explorer 7.0, Windows Vista,
Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 6.0; MRA 5.0 (build 02094);
SLCC1; .NET CLR 2.0.50727; .NET CLR 3.0.04506; .NET CLR 3.5.21022;
InfoPath.2)

userAgent , ( ):
javascript:alert(navigator.userAgent).

. 2.3. userAgent

23

userAgent (. 2.3).
 Mozilla/4.0 Mo-

zilla 4.0 ( Internet Explorer


).
 compatible , , -

.
 MSIE 7.0 , .

Internet Explorer 7.0


 Windows NT 6.0 ,

. Windows Vista.
, . .
. 2.1 2.2
2.1. Internet Explorer

MSIE 8.0

Internet 8.0

MSIE 7.0

Internet 7.0

MSIE 7.0b

Internet Explorer 7 (Beta 1)

MSIE 6.0

Microsoft Internet Explorer 6

MSIE 6.0b

Internet Explorer 6 (pre-release)

MSIE 5.5

Internet Explorer 5.5

MSIE 5.01

Internet Explorer 5.01

MSIE 5.

0 Internet Explorer 5

MSIE 5.0b1

Internet Explorer 5 (pre-release)

MSIE 4.01

Internet Explorer 4.01

24

2.2.

Windows NT 6.0

Windows Vista

Windows NT 5.2

Windows Server 2003; Windows XP x64


Edition

Windows NT 5.1

Windows XP

Windows NT 5.01

Windows 2000, Service Pack 1 (SP1)

Windows NT 5.0

Windows 2000

Windows NT 4.0

Microsoft Windows NT 4.0

Windows 98; Win 9x 4.90

Windows Millennium (Windows ME)

Windows 98

Windows 98

Windows 95

Windows 95

Windows CE

Windows CE


Internet Explorer 8. , Internet Explorer 8 Beta 1
userAgent
Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.0)

, MSIE 7.0 MSIE 8.0. , Internet Explorer. ( 2.11).


2.11. Internet Explorer
<script type = "text/javascript">
function getIEVersion()
// Internet Explorer 1,
//
{
var retval = -1;

// ( -1,
// . . )

25

if (navigator.appName == 'Microsoft Internet Explorer')


{
var ua = navigator.userAgent;
var re

= new RegExp("MSIE ([0-9]{1,}[\.0-9]{0,})");

if (re.exec(ua) != null)
retval = parseFloat( RegExp.$1 );
}
return retval;
}

function checkVersion()
{
var msg = " Internet Explorer";
var ver = getIEVersion();
if (ver > -1)
{
if (ver >= 7.0)
msg = " Internet Explorer 7 Internet Explorer 8."
else

msg = " Internet Explorer.";

}
alert( msg );
}
</script>

<p>
<input type="button" value=" IE"
onClick="alert(getIEVersion())">
</p>

Internet Explorer , , 7 , . ver >= 7.


,
ver == 4.
, Internet Explorer -

26

. . ,
.
Microsoft Internet Explorer 8.0 CSS 2.1. , , checkVersion() if (ver >= 8.0), .

2.7.1.
Mozilla Firefox
Mozilla Firefox 3.0 ( ) userAgent :
UserAgent: Mozilla/5.0 (Windows; U; Windows NT 5.1; ru; rv:1.9)
Gecko/2008052906 Firefox/3.0

,
Firefox/3.0.
(3.0), .
( 2.12).
2.12. Mozilla Firefox
<script type="text/javascript">
function getFFVersion()
{
if (/Firefox[\/\s](\d+\.\d+)/.test(navigator.userAgent))
{
// Firefox/x.x Firefox x.x
// ( )
var ffversion=new Number(RegExp.$1) // x.x
if (ffversion>=3)
document.write(" Firefox 3.x ");
else if (ffversion>=2)
document.write(" Firefox 2.x");
else if (ffversion>=1)
document.write(" Firefox FF 1.x");
}

27

else
document.write(" ");
}
</script>

2.7.2. Opera
Opera , . . . , . Opera 9, ,
- . navigator.userAgent Opera 8.5:
 IE6: Mozilla/4.0 (compatible; MSIE 6.0; Windows XP) Opera 8.5
[en];

 Mozilla 5: Mozilla/5.0 (Windows XP; U) Opera 8.5 [en];


 Opera: Opera/8.5 (Windows XP; U) [en].

Opera (
, ).
Opera ( 2.13).
2.13. Opera
<script type="text/javascript">
// userAgent Opera 9.24 Windows XP :
//

Opera/9.24 (Windows NT 5.1; U; en)

// userAgent Opera 8.5 ( IE) :


//

Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1) Opera 8.50 [en]

// userAgent Opera 8.5 ( Opera) :


//

Opera/8.50 (Windows NT 5.1; U) [en]

if (/Opera[\/\s](\d+\.\d+)/.test(navigator.userAgent))
{ // Opera/x.x Opera x.x ( );
var oprversion=new Number(RegExp.$1);

28

2
// x.x
if (oprversion>=10)
document.write(" Opera 10.x ");
else if (oprversion>=9)
document.write(" Opera 9.x");
else if (oprversion>=8)
document.write(" Opera 8.x");
else if (oprversion>=7)
document.write(" Opera 7.x");
else
document.write(" ");

}
else
document.write(" ");
</script>>

2.7.3.
, userAgent , . , .
 .NET CLR -

.NET Framework, , , .NET


CLR 2.0.50727.
 SV1 , Windows XP

Service Pack 2.
, Service Pack 2
Windows XP, ( 2.14).
2.14. Service Pack 2 Windows XP
<script type = "text/javascript">
var SP2= false;
SP2 = (window.navigator.userAgent.indexOf("SV1") != -1);
if(SP2)
{

29

document.write(" SP2");
}
else
{
document.write(" SP2");
}
</script>

, Mozilla Firefox, . . userAgent Service Pack 2!


 Win64; IA64 64- Intel.
 Win64; x64 64- AMD.
 WOW64 32- Internet Explorer 64- -

, userAgent, Chap02\useragent.htm.

2.8. JScript
JScript , Web-
http://htmlcoder.visions.ru/JavaScript/?12 ( 2.15).
2.15. JScript
function getJSVersion()
{
if (navigator.appName.substring(0,2) != "Mi")
alert(" .");
@cc_on;

//

alert(@_jscript_version); // JScript
}
<a href="javascript:getJSVersion()"> JScript?</a>

30

, Internet Explorer 4.0 .


Internet Explorer 7.0 5.7, ?

, JScript,
Chap02\jsversion.htm.

2.9.
Mozilla Firefox navigator.plugins
navigator.mimeTypes
. ,
MPEG- Flash- ( 2.16).
2.16.
<html>
<head>
<title>Flash</title>
</head>
<body>
<h1> </h1>
<script type="text/javascript">
// , MPEG-
var show_movie = (navigator.mimeTypes["video/mpeg"] != null);
// , Flash
var flash =
(navigator.mimeTypes["application/x-shockwave-flash"] != null);

// , Flash
var shocked = (navigator.plugins["Shockwave Flash"] != null);

document.write(" MPEG: " + show_movie);


document.write("<br> Flash: " + flash);
document.write("<br> Flash: " + shocked);

31

</script>
</body>
</html>

, Macromedia Flash, Web-


http://developer.mozilla.org/en/docs/Scripting_Plugins:_Macromedia_Flash,
, , .

, ,
Chap02\mimetype.htm.

2.10.
, Web- ,

. ,
Internet Explorer 4.0 ( 2.17).
2.17. Web- ( Internet Explorer)
<p><a href="#" onClick="window.external.addFavorite('http://winchanger.whatis.ru/', '
');"> </a></p>

Mozilla Firefox
Web- , . , Web- ( 2.18).
2.18. Web- ( Firefox)
<h2> ( Firefox)</h2>

<p><a href="#" onClick="window.sidebar.addPanel('


-', 'http://www.bhv.ru', '')"> </a></p>

32

,
Web- , . , system.htm.

. , . .
, , , 2.19.
2.19. Web-
( Internet Explorer)
//
function addToFavorites()
{
if ((navigator.appVersion.indexOf("MSIE") > 0) &&
(parseInt(navigator.appVersion) >= 4))
{
window.external.AddFavorite(location.href, document.title);
}
}
<h2> </h2>
<p><a href="javascript:addToFavorites()"> </a></p>

, , Internet Explorer
4.0 , href title.
, Web-. Mozilla Firefox.

2.11.


, ShowBrowserUI ( Internet Explorer) ( 2.20).

33

2.20.
<button onclick="window.external.ShowBrowserUI('LanguageDialog',
null)"> </button>
<button onclick="window.external.ShowBrowserUI('OrganizeFavorites',
null)"> </button>

2.12.
Web-

Web- .
Internet Explorer Web-.
, Web-
. ( 2.21).
2.21. Web-
<p><a href="#"
onClick="this.style.behavior='url(#default#homepage)';
this.setHomePage('http://www.bhv.ru/');
return false;"
> </a></p>

. 2.4.

34


(. 2.4).
Internet Explorer,
. , Internet Explorer 7.0
.

, ,
Chap02\system.htm.



3.1.
, . , Web-,
. . , window.
, . window HTML-,
document. document , ,
, , .
, document. Web images[0], images[1] . . , document.images[i]. . ,
, forms.element:
txt = document.forms[0].elements[0].value;

Web- , :
<form name="myForm">
<input type="text" name="mytext" valule="">

:
txt = document.myForm.mytext.value;

36

3.2.

Web-
.
Web- . ( 3.1).
3.1.
<html>
<head>
<title> </title>
<script type = "text/javascript">
function openWindow()
{
myWindow = open("test.htm");
}
</script>
</head>
<body>
<form>
<input type="button" value =" "
onClick="openWindow()">
</form>
</body>
</html>

, , Chap03\openwindow.htm.

37

3.3.

, open .
, : , , , .
( 3.2).
3.2.
myWindow = open("test.htm", "newWindow",
"width=300,height=500, status=no, toolbar=no, menubar=no");

. 3.1.

38

300500 ,
(. 3.1).
open.
.
, : , , .

newWindow,
. myWindow, , .

JavaScript,
onClick ( 3.3).
3.3.
<p><a href="test.htm" onclick="window.open('test.htm',null,'status=yes,location=yes,menubar=no');
return false"> </a>

, open window,
window.open(). window
. .

, , Chap03\
openwindow2.htm.

3.4.
. .
( 3.4).

39

3.4.
<html>
<head>
<title> </title>
<script type = "text/javascript">
function openNewWin()
{
myWin=open("", "newWindow","width=300, height=300,menubar=no");
//
myWin.document.open();
//
myWin.document.write("<html><head><title> JavaScript</title>");
myWin.document.write("</head><body>");
myWin.document.write(" ");
myWin.document.write("</body></html>");
//
myWin.document.close();
}
</script>
</head>
<body>
<form>
<input type="button" value =" "
onClick="openNewWin()">
</form>
</body>
</html>

. ""
. myWin . , myWin.document.open().

40

open document window.open. ,


.

, . ( !):
myWind.document.close();

, ,
Chap03\opennewwindow.htm.

3.5.

status window. ,
window.status . , ,
. , ( 3.5).
3.5.
function setStatusBarText(txt)
{
window.status = txt;
}
<input type="button" value =" "
onClick="setStatusBarText(' !')">

, onClick .
.

41

3.5.1.
, ,
. Web . ( 3.6).
3.6.
<p><a href="test.htm"
onMouseOver="window.status=', !'; return true;"
onMouseOut="window.status=', ';">
!</a></p>

return true ,
.
,
.
return true, , . .
.

Mozilla Firefox ,
. , | | .
JavaScript.
. Internet Explorer 7.0
( | | |
).

3.5.2.
, Web. ,

42

- -
,
. ,
-.
, - .
. - , ,
,
. , ,
, .
- . . , ,
, . . - ,
.
, JavaScript. , <a
href="http://www.ozon.ru/?context=detail&id=2636937&partner=visual">
</a>.

,
. JavaScript ( 3.7).
3.7.

<p> ( )<br />


<a href=http://www.ozon.ru/?context=detail&id=2636937&partner=visual
onmouseover="window.status='http://www.ozon.ru/?
context=detail&id=2636937';return true;"
onmouseout="window.status=' ';return true;"> </a></p>

, . , ,

, , ?

43

3.5.3.
.
. :
1. , .
2. , .
3.

. , .
4. .

JavaScript ( 3.8).
3.8.
<script type="text/javascript">
//
var messages = new Array(6);
messages[0] = "";
messages[1] = "";
messages[2] = "";
messages[3] = "";
messages[4] = "";
messages[5] = " ";

// ,
var curMessage = 0;

//
function changeMessages()
{
window.status = messages[curMessage];
mysample.innerText = messages[curMessage];
curMessage++;

44

3
if (curMessage == 6) curMessage = 0;

}
</script>

<p><input type="button" value =" "


onClick="TimerID=setInterval('changeMessages()',2000)"></p>

, , . ,
.

, ,
Chap03\statusbar.htm.

3.6.
title.
, .
( 3.9).
3.9.
<title>JavaScript </title>
<script type="text/javascript">
var msg = document.title;
var c = 0;

function animateTitle()
{
document.title = msg.substring(0,c);
if (c == msg.length)
{
c = 0;

45

setTimeout("animateTitle()", 2000)
}
else
{
c++;
setTimeout("animateTitle()", 200)
}
}
animateTitle();
</script>

, , Chap03\title.htm.

3.7.
, HTML-. .
. .
, . Internet Explorer
Windows.
( 3.10).
3.10.
<html>
<head>
<title> </title>
<script type = "text/javascript">
// ,
var current = 0;

46

3
//
var speed = 100;
//
function createRadioButtons(num)
{
//
document.write("<form name='animation'>");
//
for (var i = 0; i < num; i++)
{
document.write("<input type='radio' name='lamps'>");
}
//
document.write("</form>")
}
//
function makeFX()
{
//
document.animation.lamps[current].click();
//
//
current =
(current == document.animation.lamps.length - 1) ? 0 : ++current;
//
timerID = setTimeout("makeFX()", speed);
}
// 150
createRadioButtons(150);

47

</script>
</head>
<body onLoad="makeFX()">
<h2> </h2>
</body>
</html>

, ,
Chap03\radiobutton.htm.

3.8.
: TEXTAREA INPUT
TYPE=TEXT. . , , ,
.

3.8.1.
Web-, .
,
. , , . ( 3.11).
3.11.
<body onload="document.getElementById('firstText').focus()">
<input type="text" id="firstText" value="">

3.8.2.

. , -

48

Web- .
-
, .
( 3.12).
3.12.
<input type="text" id="field"
onfocus="this.style.border='2px solid #000'"
onblur="this.style.border='1px solid #ccc'">

3.8.3.
,
focus, select ( 3.12).
3.13.
<form>
<textarea name="mytext" rows=3 cols=40>
,
</textarea>
<input type=button value=" "
onClick="javascript:this.form.mytext.focus();this.form.mytext.select();">
</form>

, , , Chap03\selectall.htm.

3.8.4.

, Windows . -

49

. ,
, . ( 3.14).
3.14.
<script type = "text/javascript">
function countChar(counter)
{
if (document.frm.txt1.value.length == counter)
document.frm.txt2.focus();
}
</script>

<input type="text" value="" name="txt1" maxlength="5" size="5"


onkeyup="countChar(5)">
<input type="text" value="" name="txt2" maxlength="5" size="5">

countChar(counter) counter
.

, ,
Chap03\textbox.htm.

3.8.5.
, , , , , SMS (Short Message Service, ). , Web- SMS-
Web-.
( 3.15).

50

3.15.
<html>
<head>
<title> </title>
<script type="text/javascript">
var count=100;
function init()
{
document.frm.txt1.value=count;
document.frm.txt2.value=count;
}

function textChange()
{
//
smslen = document.frm.smstext.value.length;
if (smslen > count)
{
document.frm.smstext.value =
docment.frm.smstext.value.substring(0, count);
}
smslen = document.frm.smstext.value.length;
document.frm.txt2.value = count - a;
}
</script>
</head>
<body onload="init()">
<h2> </h2>
<form name="frm">
<textarea name="smstext" rows=5 cols=30
onkeyup="textChange()"></textarea><br />
:
<input type="text" name="txt1"
disabled="false"><br />

size="4" maxlength="4"

51

:
<input type="text" name="txt2"

size="4" maxlength="4"

disabled="false">
</form>
</body>
</html>

, , Chap03\limit.htm.

3.9.
<select> <option>.

3.9.1. Web-

Web- ( 3.16).
3.16. ,
<html>
<head>
<title> </title>
</head>
<body>
<h2> </h2>
<h3> </h3>
<p>

<br />
<select name="navigation"
onChange="top.location.href =
this.options[this.selectedIndex].value">

52

3
<option value="select.htm"> </option>
<option value="test.htm"> </option>
<option value="2.htm">2 </option>
<option value="3.htm">3 </option>
<option value="4.htm">4 </option>
<option value="5.htm">5 </option>
</select>
</p>

, ,
. onChange. top.location.href
, . select options, . , navigation.option[1].value
"test.htm". selectedIndex select
. this
.

3.9.2.
. - .
, . .
, , ( 3.17).
3.17. ,
<h3> </h3>
<p> ,
</p>
<form>
<select name="navigation2">
<option> </option>

53

<option value ="test.htm"> </option>


<option value ="2.htm">2 </option>
<option value ="3.htm">3 </option>
</select>
<br />
<input type=button name="go" value ="!"
onClick="top.location.href =
this.form.navigation2.options[this.form.navigation2.selectedIndex].value"
>
</form >

, ,
Chap03\select.htm.
2.htm, 3.htm, 4.htm 5.htm
.

3.9.3.
. Web-,
( 3.18). Web- http://javascript.internet.com.
3.18.
<html>
<head>
<title> </title>
<script type = "text/javascript">
<!-- This script and many more are available free online at -->
<!-- The JavaScript Source!! http://javascript.internet.com -->
<!-- Original: pieterpareit@hotmail.com

-->

<!-- Web Site:http://www24.brinkster.com/scriptbreaker/home.htm -->


var Image_array = new Array();
//new Array("Image location",width,height,"discription image")

54

3
Image_array[0] = new Array("cat0.jpg",160,120," ");
Image_array[1] = new Array("cat1.jpg",160,120," ");
Image_array[2] = new Array("cat2.jpg",320,240," ");
Image_array[3] = new Array("cat4.jpg",240,320," ");
// ,
// Image_array[4]= ...

function setf(thisv)
{
img_changer.src = Image_array[thisv][0];
img_changer.style.width = Image_array[thisv][1];
img_changer.style.height = Image_array[thisv][2];
}
</script>
</head>
<body>
<h1> </h1>
<center>
<select onchange="setf(this.selectedIndex)">
<script type = "text/javascript">
for (i = 0; i < Image_array.length; i++)
{
document.write("<option>" + Image_array[i][3]);
}
</script>
</select>
<br /><br />
<img name=img_changer border=1>
</center>
<script type = "text/javascript">
setf(0);
</script>
</body>
</html>

55

.
. .

, (. 3.2).

. 3.2.

, ,
Chap03\imagelistbox.htm.

56

3.9.4.

. , , Web-
http://htmlcoder.visions.ru ( 3.19).
3.19.
<html>
<head>
<title>
</title>
<script type="text/javascript">
/*
written by alexander shurkayev <alshur@narod.ru> |
http://htmlcoder.visions.ru
*/
// , ,
//
var aHouseValues = new Array("12/15,18,123",
"2,4",
"2/8,10/12",
"3",
"2,4,12,5/6,8");

// ,
function getHouseValuesByStreet(index){
var sHouseValues = aHouseValues[index];
return sHouseValues.split(","); //
//
}

// ,
function MkHouseValues(index){

57

var aCurrHouseValues = getHouseValuesByStreet(index);


var nCurrHouseValuesCnt = aCurrHouseValues.length;
var oHouseList = document.forms["address"].elements["house"];
var oHouseListOptionsCnt = oHouseList.options.length;
oHouseList.length = 0; //
for (i = 0; i < nCurrHouseValuesCnt; i++){
//
if (document.createElement){
var newHouseListOption = document.createElement("OPTION");
newHouseListOption.text = aCurrHouseValues[i];
newHouseListOption.value = aCurrHouseValues[i];
// IE,
// DOM, ...
(oHouseList.options.add) ?
oHouseList.options.add(newHouseListOption) :
oHouseList.add(newHouseListOption, null);
}else{
// NN3.x-4.x
oHouseList.options[i] = new Option(aCurrHouseValues[i],
aCurrHouseValues[i], false, false);
}
}
}

//
//
MkHouseValues
(document.forms["address"].elements["house"].selectedIndex);
</script>
</head>
<body>
<form name="address" action="#">
:
<select name="street" onChange="MkHouseValues(this.selectedIndex)">
<option value=". ">.&nbsp;</option>

58

3
<option value=". ">.&nbsp;</option>
<option value=". ">.&nbsp;</option>
<option value=". --">.&nbsp;--</option>
<option value=". ">
.&nbsp;</option>
</select>
&nbsp;:
<select name="house">
<option value="N/A">N/A</option>
</select>
</form>

</body>
</html>

onChange .

, , Chap03\2select.htm.

3.10.
Web- , .
. ,
. Web- . ,
. , - . .
JavaScript. , .
( 3.20).


3.20.
<table id="clubs" border="1">
<tr><td></td></tr>
<tr><td></td></tr>
<tr><td></td></tr>
<tr><td></td></tr>
<tr><td></td></tr>
</table>

CSS1 JavaScript ( 3.21).


3.21.
<style type="text/css">>
.even {background-color: white;}
.odd

{background-color: silver;}

</style>

<script type="text/javascript">
function alternateColor(id)
{
if(document.getElementsByTagName)
{
var table = document.getElementById(id);
var rows = table.getElementsByTagName("tr");
for (i = 0; i < rows.length; i++)
{
// -
if (i % 2 == 0)
{
rows[i].className = "even";
}

, .

59

60

3
else
{
rows[i].className = "odd";
}
}
}

}
</script>
<body onload="alternateColor('clubs')">

(. 3.3).

. 3.3.

, ,
Chap03\table.htm.

61

3.11.
.

. , Web-
. :
<style type="text/css">
body
{
scrollbar-base-color: red
}

. , , . ( 3.22).
3.22.
<script type="text/avaScript">
function changeSBColor(color)
{
document.body.style.scrollbarBaseColor = color;
}
</script>

<p><a href="#" onMouseOver="changeSBColor('green')"></a><br />


<a href="#" onMouseOver="changeSBColor('yellow')"></a><br />
<a href="#" onMouseOver="changeSBColor('blue')"></a>
</p>

, ,
- .
: , , .
JavaScript. , Internet Explorer.

62

, ,
Chap03\scrollbar.htm.

3.12.
. .

3.12.1. Web-
, Web-,
( 3.23).
3.23. Web-
<html>
<head>
<title> </title>
</head>
<body>
<script type="text/javascript">
function getLinks()
{
var links = document.getElementsByTagName('a');
var s = '';
var total = 0;
for (var i = 0; i < links.length; i++)
{
if (links[i].href)
{ s += '<a href="'+links[i].href+'">'+
links[i].href+'</a> ('+links[i].innerHTML+') <br />';
total ++;
}
}

63

var w = window.open('', 'links', 'menubar, scrollbars');


w.document.open();
w.document.write(' : '+total+'<br />');
w.document.write(s);
w.document.close();
}
</script>
<button onClick="getLinks()"> </button>
<p>
<a href="http://www.bhv.ru/"> "-"</a></p>

<p>, Windows
<a href="http://winchanger.whatis.ru"> </a></p>
</body>
</html>

3.12.2.

<Shift>, .
( 3.24).
3.24. Internet Explorer
function cancelLink()
{
if (window.event.srcElement.tagName == "A" && window.event.shiftKey)
window.event.returnValue = false;
}

<p>, Windows
<a href="http://winchanger.whatis.ru" onlick="cancelLink()">
</a></p>

64

, Web Internet Explorer, Chap03\links.htm.

Internet Explorer. Mozilla Firefox ( 3.25).


3.25. Mozilla Firefox
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Disable shift+click</title>
<script type="application/x-javascript">
function cancelLinkFF(e)
{
if ((e.target.nodeName == "A") && (e.shiftKey))
{
e.preventBubble();
e.preventDefault();
return true;
}
}
window.addEventListener('click', cancelLinkFF, true);
</script>
</head>
<body>
<a href="http://www.bhv.ru">http://www.bhv.ru</a>
</body>
</html>

Mozilla Firefox Chap03\


shiftlink.htm.

65

3.13.

, - . , - . JavaScript. :
<a href="javascript:ShowAlert();"> </a>

, ,
ShowAlert(), .
.
<script type="text/javascript">
function ShowAlert()
{
alert(" !");
}
</script>
</head>
<body>
<a href="javascript:ShowAlert();">
"-"</a>

, .

Chap03\showalert.htm.

3.14.
Web-, . ,
. ,
Web- http://www.devx.com. ,
.

66

, , (radiobutton) (checkbox). - , Visual Basic,


Windows- Web-.
Visual
Basic (. 3.4). ,
, .

. 3.4. , Visual Basic 6.0

, ,
, .
, , . ,
HTML-. Web- :
<input type="checkbox" name="bad">

, ,
. ,
, . Windows . , , -,
.
JavaScript. . Web- <head> noLink:
<style type=text/css>
A.noLink

67

{
color: black; text-decoration: none
}
</style>

, . . ( 3.26).
3.26.
<html>
<head>
<title> </title>
<style type=text/css>
A.noLink
{
color: black; text-decoration: none
}
</style>
<script type = "text/javascript">
function toggleCheckBox(Field)
{
checkSet = eval("document.frm." + Field);
checkSet.checked = !(checkSet.checked);
}

function toggleRadioButton(Field, Value)


{
radioSet = eval("document.frm."+ Field);
for (i = 0; i < radioSet.length; i++)
{
if (radioSet[i].value == Value)
radioSet[i].checked = true
}
}
</script>

68

</head>
<body>
<h1> </h1>
<form name="frm">
<input type="checkbox" name="bad">
<h3> </h3>
<a class="noLink"
href="javascript:toggleCheckBox('sun')"><input type="checkbox"
name="sun"> </a>
<br />
<a class="noLink"
href="javascript:toggleCheckBox('air')"><input type="checkbox"
name="air"> </a>
<br />
<a class="noLink"
href="javascript:toggleCheckBox('water')"><input
type="checkbox" name="water"> </a>

<h3> </h3>
<a class="noLink"
href="javascript:toggleRadioButton('colorChoice','red')"><input
type="radio" value="red" name="colorChoice"> </a>
<br />
<a class="noLink"
href="javascript:toggleRadioButton('colorChoice','green')"><input
type="radio" value="green" name="colorChoice"> </a>
<br />
<a class="noLink"
href="javascript:toggleRadioButton('colorChoice','blue')"><input
type="radio" value="blue" name="colorChoice"> </a>
</form>
</body>
</html>

.
, ,
. <a>

69

, ,
. . toggleRadioButton : . ,
Web- .

, , Chap03\interface.htm.

3.15. Web-
Web- bgcolor document.
,
. RGB2 (, #008000), (, green).
. Web-
.
.
( 3.27).
3.27. Web-
<html>
<head>
<title> </title>
<script type="text/javascript">
function changeBG(color)
{
//
document.bgColor = color;
}

RGB ( . Red, Green, Blue , , ) , .

70

3
</script>

</head>
<body>
<h2> </h2>
<p>
<a href="#" onMouseOver="javascript:changeBG('green')">
</a>
<p>
<a href="javascript:changeBG('#FF8000')"> </a>
</body>
</html>

, Web-,
Chap03\bgcolor.htm.

3.15.1.

HTML- backgroundColor, . Web-. , , .
, . , ( 3.28).
3.28.
<html>
<head>
<title> </title>
<script type="text/javascript">
//
var ColorName =
new Array("red","green","yellow","black","brown","blue");


function setRandomColor(obj)
{
obj.style.backgroundColor =
ColorName[Math.round(Math.random() * 6)];
}
function setDefaultColor(obj)
{
obj.style.backgroundColor = "";
}
</script>
</head>
<body>
<h1 onmouseover="setRandomColor(this)"
onmouseout="setDefaultColor(this)">
</h1>
<p onmouseover="setRandomColor(this)"
onmouseout="setDefaultColor(this)">
(h1, p, td)
.
. , </p>
<p onmouseover="setRandomColor(this)"
onmouseout="setDefaultColor(this)"> p ().
,
&lt;p&gt; &lt;/p&gt;</p>
<p onmouseover="setRandomColor(this)"
onmouseout="setDefaultColor(this)">
</p>
<table border="1" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td onmouseover="setRandomColor(this)"
onmouseout="setDefaultColor(this)"

71

72

3
width="50%"> </td>
<td onmouseover="setRandomColor(this)"
onmouseout="setDefaultColor(this)">
</td></tr>
<tr>
<td onmouseover="setRandomColor(this)"
onmouseout="setDefaultColor(this)"
width="50%"> </td>
<td onmouseover="setRandomColor(this)"
onmouseout="setDefaultColor(this)">
</td></tr>
</table>
<ul>
<li onmouseover="setRandomColor(this)"
onmouseout="setDefaultColor(this)">
</li>
<li> </li>
</ul>

</body>
</html>

, , Chap03\changecolor.htm.

3.16.
Internet Explorer .
, , Web-.
( 3.29).
3.29.
<html>
<head>

73

<title> </title>
<script type="text/javascript">
function opyToClipboard()
{
CopiedTxt = document.selection.createRange();
CopiedTxt.execCommand("Copy");
}
</script>
</head>
<body>
<h1> </h1>
<p>
.
<b> </b>.

.
<br />
<form name="frm">
<textarea id="txt" cols="50" rows="5">
.
,
Ctrl+V.</textarea>
<br />
<input type="button" onClick="opyToClipboard()"
value=" ">
</form>
</body>
</html>

Web-
.
. ,
. , Web-.

74

.
, ( 3.30).
3.30.
function copyAllTextToClipboard()
{
document.frm.txt.focus();
document.frm.txt.select();
var CopiedAllTxt = document.selection.createRange();
CopiedAllTxt.execCommand("Copy");
}

<input type="button" onClick="copyAllTextToClipboard()"


value=" ">

,
execCommand("Paste") ( 3.31).
3.31.
function pasteFromClipboard()
{
document.frm.txt.focus();
var PastedText = document.frm.txt.createTextRange();
PastedText.execCommand("Paste");
}

, ,
! ,
PastedText:
var PastedText = document;

75

, ( 3.32).
3.32.
function cutToClipboard()
{
var CutTxt = document.selection.createRange();
CutTxt.execCommand("Cut");
}

.
, Mozilla Firefox .

, ,
Chap03\clipboard.htm.

3.17.
. ,
, . . .
Internet Explorer
event, onkeyup. ,
, <Shift>, <Alt>, <Ctrl>,
( 3.33).
3.33. Internet Explorer
<script type="text/javascript">
document.onkeyup = checkKeysIE;

function checkKeysIE()
{

76

3
var KeyID = event.keyCode;
switch(KeyID)
{
case 16:
// Shift
document.frm.KeyName.value = "Shift";
break;
case 17:
// Ctrl
document.frm.KeyName.value = "Ctrl";
break;
case 18:
// Alt
document.frm.KeyName.value = "Alt";
break;
case 37:
//
document.frm.KeyName.value = "Arrow Left";
break;
case 38:
//
document.frm.KeyName.value = "Arrow Up";
break;
case 39:
//
document.frm.KeyName.value = "Arrow Right";
break;
case 40:
//
document.frm.KeyName.value = "Arrow Down";
break;
}

}
</script>

77

<form name="frm">
<input type="text" name="KeyName" value="" />
</form>

Mozilla Firefox . ( 3.34).


3.34. Mozilla Firefox
<script type="text/javascript">
document.onkeyup = checkKeysFF;

function checkKeysFF(e)
{
var KeyID = e.keyCode;
switch(KeyID)
{
case 16:
document.frm.KeyName.value = "Shift";
break;
case 17:
document.frm.KeyName.value = "Ctrl";
break;
case 18:
document.frm.KeyName.value = "Alt";
break;
case 37:
document.frm.KeyName.value = "Arrow Left";
break;
case 38:
document.frm.KeyName.value = "Arrow Up";
break;
case 39:
document.frm.KeyName.value = "Arrow Right";
break;

78

3
case 40:
document.frm.KeyName.value = "Arrow Down";
break;
}

}
</script>

,
( 3.35).
3.35.
<script type="text/javascript">
document.onkeyup = checkKeys;

// IE FF
function checkKeys(e)
{
var KeyID = (window.event) ? event.keyCode : e.keyCode;
switch(KeyID)
{
case 16:
document.frm.KeyName.value = "Shift";
break;
case 17:
document.frm.KeyName.value = "Ctrl";
break;
case 18:
document.frm.KeyName.value = "Alt";
break;
case 37:
document.frm.KeyName.value = "Arrow Left";
break;
case 38:
document.frm.KeyName.value = "Arrow Up";
break;

79

case 39:
document.frm.KeyName.value = "Arrow Right";
break;
case 40:
document.frm.KeyName.value = "Arrow Down";
break;
}
}
</script>

, ,
Chap03\keys.htm.

80


. , . ,
, .

4.1.

, , ( 4.1).
4.1.
<script type="text/avaScript">
var flag = 0;

function changeFlag()
{
flag=1;
}

function checkGraphics()
{
if (flag==1)
{

82

4
alert(" ");
}
else
{
alert(" ");
}

}
</script>
<body onload="checkGraphics()">
<h1> </h1>
<h2> </h2>
<img src="cat0.jpg" width="320" height="240" onLoad="changeFlag()">

.
flag 0 ( ). changeFlag,
1. Web-
checkGraphics, flag .
Internet Explorer, ,
Mozilla Firefox,
.

4.2.
. images
document. 0, 1 . .
, :
document.images[0]

.
, , :
<img src="cat0.jpg" name="cat" width=320 height=240>

:
document.cat

83

:
document.images["cat"]

<img> src .
,
( 4.2).
4.2.
function changeImage()
{
document.cat.src="cat2.jpg";
}

<img src="cat0.jpg" name="cat" width=320 height=240><br />


<h2> </h2>
<p><input type="button"
value=" " onClick="changeImage()";>

,
. . ,
, .
,
( 4.3).
4.3. , ,
function changeImage2()
{
if (flag2) document.cat.src = "cat0.jpg";
else document.cat.src = "cat2.jpg";
flag2=!flag2; //
}

<input type="button" value=" "


onClick="changeImage2()";>

84

, ,
Chap04\images.htm.

4.3.
alpha Internet Explorer . , , :
<img src="cat0.jpg" style="filter:alpha(opacity=50)">

0 100. Mozilla Firefox


, , , -moz-opacity. ,
. , ( 4.4).
4.4.
<script type="text/javascript">
function makeTransparent(imgObject, level)
{
if (navigator.appName.indexOf("Netscape")!= -1)
imgObject.style.MozOpacity = level/100;
else if (navigator.appName.indexOf("Microsoft")!= -1)
imgObject.filters.alpha.opacity = level;
}
</script>

<p><img src="cat0.jpg" name="cat" width="320" height="240"


style="filter:alpha(opacity=100);-moz-opacity:1.0"
onMouseover = "makeTransparent(this, 50)"
onMouseout = "makeTransparent(this, 100)"></p>

makeTransparent : imgObject
, , level, -

85

0 100. ,
Mozilla Firefox 100, . . 0 1. , , , .
, , . .

, ,
Chap04\transparent.htm.

4.4. -
Web- . -
, . , .
- . .
. , " ".
: cat0.jpg, cat1.jpg, cat2.jpg, cat3.jpg
. . - ( 4.5).
4.5. -
<html>
<head>
<title>-</title>
<script type="text/javascript">
// ,
msg = new Array(" ",
" ",
" ",
" ")

86

4
//
curImage = 0;

aLength = msg.length;

function showImage(direction)
{
if (document.images)
{
curImage = curImage + direction;
if (curImage < 0)
{
curImage = aLength 1;
}
if (curImage == aLength)
{
curImage = 0;
}

document.slideshow.src = "cat" + curImage + ".jpg";


about.innerText = msg[curImage];
document.frm.description.value = msg[curImage];
}
}
</script>
</head>
<body onLoad="about.innerText =
msg[curImage];document.frm.description.value = msg[curImage]">
<h1>-</h1>
<img height="240" width="320" src="cat0.jpg"
alt=" " name="slideshow">
<br />
<p id="about" style="color:blue"></p>
<br />
<input type="button" value="" onClick="showImage(-1)">
<input type="button" value="" onClick="showImage(1)">

87

<form name="frm">
<textarea name="description" rows="3" cols="25"
readonly></textarea>
</form>
</body>
</html>

, Web- : <img>
slideshow , , <p>, . , Web
(. 4.1):
<body onLoad="about.innerText = msg[curImage]">
<img height="240" width="320" src="cat0.jpg"
alt=" " name="slideshow">

curImage msg.
.
showImage. , . ,
curImage . ,
.
,
:
if (document.images)

Web- ( Image, , JavaScript), .


, .
, ,
aLength, . :
if (curImage < 0)
{
curImage = aLength-1

88

}
if (curImage == aLength)
{
curImage = 0
}

. 4.1. -

, - . ,

.

, -, Chap04\
slideshow.htm.

89

, . , ( 4.6).
4.6. -
<html>
<head>
<title>- 2</title>
<script type="text/javascript">
// ,
msg = new Array(" ",
" ",
" ",
" ");

//
curImage = -1;

aLength = msg.length;

// - (5 )
var delay = 5000;

// setTimeout
var curTimeout;

function showImage(direction)
{
if (document.images)
{
curImage = curImage + direction;
if (curImage < 0)
{
curImage = aLength - 1;
}

90

4
if (curImage == aLength)
{
curImage = 0;
}
document.slideshow.src = "cat" + curImage + ".jpg";
about.innerText = msg[curImage];
document.frm.description.value = msg[curImage];
curTimeout = setTimeout("showImage(1)", delay)
}
}

function goForward()
{
clearTimeout(curTimeout);
showImage(1);
}

function goBack()
{
clearTimeout(curTimeout);
showImage(-1);
}
</script>
</head>
<body onLoad="showImage(1)">
<h1>-</h1>
<img height="240" width="320" src="cat0.jpg"
alt=" " name="slideshow">
<br />
<p id="about" style="color:blue"></p>
<br>
<input type="button" value="" onClick="goBack();">
<input type="button" value="" onClick="goForward();">
<form name="frm">
<textarea name="description" rows="3" cols="25" readonly>

91

</textarea>
</form>
</body>
</html>

, . -, ,
:
// - (5 )
var delay = 5000;

// setTimeout
var curTimeout;

-, showImage ,
:
curTimeout = setTimeout("showImage(1)", delay);

: goForward goBack.
, : . ,
, .
,
. , .

, -,
Chap04\slideshow2.htm.

4.5. -
flip-flop. , .
, .
, ,
. -

92

/ . , , http://javascript.internet.com
, ( 4.7).
4.7. /
<html>
<head>
<title>-</title>
<!-- This script and many more are available free online at -->
<!-- The JavaScript Source!! http://javascript.internet.com -->
<!-- Original:

Colin Patterson (colnrita@westnet.com.au ) -->

<script type="text/javascript">
var wdmax = 320; //
var hmax = 240;

//

var wdmin = 0;

//

var inc = 5;

//

var rate = 50;

//
// ( )

var pause = 1000; //


// / ( )
var ff = "flip";

// "flip"
// ( )

function flipflop()
{
if (ff == "flip")
{
var wd =
document.getElementById("pic").getAttribute("width");
wd = wd - inc;
document.getElementById("pic").setAttribute("width",wd);
if (wd == wdmin)
{ //

93

document.getElementById("pic").setAttribute("src","cat1.jpg");
inc = -inc;
}

if (wd == wdmax)
{
ff = "flop";
inc = -inc;
setTimeout("flipflop()",pause);
}
else
{
setTimeout("flipflop()",rate);
}
}
else
{
var ht =
document.getElementById("pic").getAttribute("height");
ht = ht - inc;
document.getElementById("pic").setAttribute("height",ht);
if (ht == wdmin)
{ //
document.getElementById("pic").setAttribute("src","cat0.jpg");
inc = -inc;
}
if (ht == hmax)
{
ff = "flip";
inc = -inc;
setTimeout("flipflop()",pause);
}
else
{
setTimeout("flipflop()",rate);

94

4
}
}
} //
</script>

</head>
<body onLoad="javascript:flipflop()">
<h1>-</h1>
<table border="1">
<th width="380" height="280">
<img src="cat0.jpg" width="320" height="240" ID="pic"></th>
</table>
</body>
</html>

, , , . ,
. , , .

, / , Chap04\flipflop.htm.

4.6.

,
( Internet Explorer) ( 4.8).
4.8.
function disableRightClick()
{
var tagname;

95

tagname=event.srcElement.tagName
// IMG
if (tagname == "IMG" && event.button == 2)
{
alert("!");
}
}
<img src="cat0.jpg" width=320 height=240
onmousedown="disableRightClick()">

, ,
. Mozilla Firefox ,
.

, , Chap04\norightbutton.htm.

4.7.
,
, .
Web-, Web- .

. , .
, Web- ( 4.9).
4.9.
<html>
<head>
<title> </title>
</head>

96

<body onLoad="init()">
<h2> </h2>
<div id="logo" style="position:absolute;"></div>
<script type="text/javascript">
//
var W = 160;

//

var H = 120;

//

var Logo = new Image(W,H); // Image

//
Logo.src = "cat3.jpg";

// , .
// 0
var interval = 7;

//
var leftOffset = 10;
var topOffset = 50;

var ie = navigator.userAgent.indexOf("Firefox") == -1; //


//
var el = document.getElementById("logo");

function setImage()
{
el.innerHTML='<img src="'+Logo.src+'" width="'+
W+'" height="'+H+'">';
}

function setPos()
{
var dsocleft = ie? document.body.scrollLeft : pageXOffset;
var dsoctop = ie? document.body.scrollTop : pageYOffset;
el.style.left = parseInt(dsocleft) + leftOffset + 5;

97

el.style.top = parseInt(dsoctop) + topOffset + 5;


}

function hideImage()
{
el.style.visibility = "hidden";
clearInterval(timerID);
}

function init()
{
timerID = setInterval("setPos()",50);
setImage();
if (interval != 0)
setTimeout("hideImage()",interval * 1000);
}
</script>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</body>
</html>

, HTML-
<br>. , , , , . .
, , . ,
, .

Chap04\upperleft.htm.

98


5.1.
. , -
. ,
, .
setTimeout. ,
- ( 5.1).
5.1.
function makePause()
{
setTimeout("alert(' ')", 3000);
}

setTimeout window, . .
. .

5.2. Date
.
. JavaScript

100

Date.
. Date:
var today = new Date();

Date
today. ,
. getHours,
setHours, getMinutes, getMonth.
Date .
, :
var myDay = new Date(2008,6,27,18,50,45);

Date, 18 50 45 27 2008 . , : ,
, , , .
, . . 0, 1 . . ,
, .
.
, , , .
. , ( 5.2).
5.2.
<script type = "text/javascript">
var now = new Date();
document.write(": " + now.getHours() + ":" +
now.getMinutes() + "<br />");
document.write(": " + now.getDate() + "." +
(now.getMonth()+1) + "." + now.getYear());
</script>

Internet Explorer,
Mozilla Firefox 2008 108!
2000 .
, Internet Explorer

101

, Mozilla Firefox
getYear . 2000
, 2000 , 1900 . , ,
1900:
1900 + now.getYear

// Firefox

,
. , . , .
.
100,
. , . 1950- , 50, , , .
2000 2050 . ,
, 2050 Mozilla Firefox ,
.

5.3. 2000
, !
. , , JavaScript, , . ,
, JavaScript. : getYear
getFullYear,
. , Internet Explorer
, getYear
.

5.4.
- .
10, 0

102

. , . ( 5.3).
5.3.
<h2> </h2>
<p id="clockk"> </p>
<script type = "text/javascript">
var curTime;

function showTime()
{
var now = new Date();
var hours = now.getHours();
var minutes = now.getMinutes();
var seconds = now.getSeconds();

curTime = "" + hours;


curTime += ((minutes < 10) ? ":0" : ":") + minutes;
curTime += ((seconds < 10) ? ":0" : ":") + seconds;

window.status = curTime;
clockk.innerHTML = curTime;
document.form1.clock_in_text.value = curTime;

timerID = setTimeout("showTime()",1000);
}
</script>

,
onLoad :
<body onLoad="showTime()">

setTimeout . .
Mozilla Firefox, .

103

.
,
innerHTML <p>.

5.5.
, Web- :
" - ". , -
Web-. ,
. , Web- Web- , , . JavaScript.

( 5.4).
5.4.

<script type = "text/javascript">


document.write (" : " +
document.lastModified);
</script>

, . -, . Web-
. -, -
. Internet Explorer Mozilla Firefox:
[Internet Explorer]
: 08/26/2008 18:58:19
[Firefox]
: Tuesday, August 26, 2008 18:58:19

, ,
. ,
( 5.5).

104

5.5.

<script type = "text/javascript">


myDate = new Date(document.lastModified);

myDay = myDate.getDate();

//

//

myMonth = myDate.getMonth(); //
myYear = myDate.getYear();

//

myYear = myYear % 100;


myYear = ((myYear < 50) ? (2000 + myYear) : (1900 + myYear));

document.write (" : ", myDay,


".", myMonth+1, ".", myYear);
</script>

, , . (, ), .
, 2000
(. ). . , , JavaScript.

5.6.
, . Web-
: " !", " !", " !" " !", . , ,
( 5.6). , .

105

5.6.
<script type = "text/javascript">
<!-date = new Date();
date = date.getHours();
if (date >= 0 && date < 6) {document.write(" ")}
else {if (date >= 6 && date < 12) {document.write(" ")}
else {if (date >= 12 && date < 18) {document.write(" ")}
else {document.write(" ")}
}
}
//-->
</script><noscript> </noscript>!

, , .
("") (" ", " "
" "), .
, " ".

Chap05\date.htm.

5.7. ?
, ,
, , , .
,

.
, , .
. .
"" ( "", ""). , ( 5.7).

106

5.7.
<html>
<head>
<title> ?</title>
<script type = "text/javascript">
var today = new Date();
var flag

= 0;

//
function getDays(date1, day2)
{
var result;
result = Math.ceil((date1 - day2) / (1000 * 60 * 60 * 24));

if (result > 0)
{
flag = 1;
}
return Math.abs(result);
}

function getLeftDaysString(sDate)
{
var sTime = sDate + " " + today.getHours() +
":" + today.getMinutes() + ":" +
today.getSeconds();
var myDate = new Date(sTime);
var nDaysLeft = getDays(myDate, today);

if (nDaysLeft)
{
var sDaysLeft = String(nDaysLeft);
var sDaysText = "";
var nDaysLeftLength = sDaysLeft.length;
if (sDaysLeft.charAt(nDaysLeftLength - 2) != "1")

107

{
if (sDaysLeft.charAt(nDaysLeftLength - 1) == "2" ||
sDaysLeft.charAt(nDaysLeftLength - 1) == "3" ||
sDaysLeft.charAt(nDaysLeftLength - 1) == "4")
sDaysText = "";
else if (sDaysLeft.charAt(nDaysLeftLength - 1) == "1")
sDaysText = "";
}

if (flag ==1)
var sLeftText = sDaysText == "" ? "" : "";
else
{
var sLeftText = sDaysText == "" ? "" : "";
}
return (sLeftText + " " + nDaysLeft + " " + sDaysText);
}
}
</script>
</head>
<body>
<h1> ?</h1>

<script type = "text/javascript">


document.write(" " +
getLeftDaysString("January, 1, 2009"));
</script>
</body>
</html>

getDays.
,
. , , , 24 , 60 ,

108

60 , , 1000 . ,
:
result = Math.ceil((date1 - day2) / (24 * 60 * 60 * 1000));

flag , .
, . ,
. getLeftDaysString(sDate) .
: " " "
" ( "" ""). getLeftDaysString
, , 2009
, :
<script type = "text/javascript">
document.write(" " +
getLeftDaysString("January, 1, 2009"));
</script>

Web- http://htmlcoder.visions.ru/ . .

Chap05\leftday.htm.



. , JavaScript, .
, . .

6.1.
.
,
. , -
. . , , "",
: " ".
JavaScript.
( 6.1).
6.1. ( 1)
<h1> </h1>
<textarea id = "typemachine" rows = 8 cols = 20></textarea>
<script type="text/javascript">
//
var msg = " ";

110

//
var astr = msg.split("");
var typestr = "";
var TypeFX = setInterval("typeText()", 100); //
//
var i = 0;
function typeText()
{
if (i < astr.length)
{
typestr += astr[i]; //
document.getElementById("typemachine").value = typestr; //
//
i++;
}
else
clearInterval(TypeFX); //
}
</script>

, ,
Chap06\typemachine.htm.

. ( 6.2).
6.2. ( 2)
<html>
<head>
<title> </title>
<script type="text/javascript">
var delay = 50;
var nextm = 0;
var pos = 0;

//

111

// , Web-
var msg = new Array('JavaScript', '', '',
'', '', '', '');

// ,
function printWords(text, dir)
{
var typingtext = text.substring(0, pos);
document.getElementById("type").innerHTML = typingtext;
pos += dir;

//

if (pos > text.length)


setTimeout('printWords("'+text+'",'+(-dir)+')', delay * 40);
else
{
if(pos < 0)
{
if (++nextm >= msg.length) nextm = 0;
text = msg[nextm];
dir = -dir;
}
setTimeout('printWords("'+text+'",'+dir+')', delay);
}
}
</script>
</head>
<body onLoad="printWords(msg[0], 1)">
<h1> </h1>
<div id="type"></div>
</body>
</html>

Chap06\type.htm.

112

6.2.
- .
. (, ). ,
, , . .
, ,
. ,
( 6.3). , JavaScript.
, . . .
6.3. ( 1)
<html>
<head>
<title> </title>
<script type = "text/javascript">
var msg = " ";
var strLength = msg.length;
var width = 130;
var pos = -width;

function scrollText()
{
pos++;
// ,
var scroller = "";
if (pos == strLength)
{
pos = -width;
}

if (pos

<

0)

{
for (var i = 1; i <= Math.abs(pos); i++)

113

{
scroller = scroller + " ";
}
scroller = scroller + msg.substring(0, width - i + 1);
}
else
{
scroller = scroller + msg.substring(pos, width + pos);
}
window.status = scroller;
setTimeout("scrollText()",100);
}
</script>
</head>
<body onLoad="scrollText()">
<h1> </h1>
</body>
</html>

scrollText ,
. Internet Explorer
Mozilla Firefox .

width, .

Chap06\runtext.htm.

.
( 6.4).
6.4. ( 2)
<html>
<head>
<title> </title>
<script type = "text/javascript">

114

6
function setMsg(msg, ctrlwidth)
{
msg = "

" + msg;

newmsg = msg;
while (newmsg.length < ctrlwidth)
{
newmsg += msg;
}
document.write('<form name="frm">');
document.write('<input type="text" name="runtext" value= "'+
newmsg+'"

size='+ctrlwidth+'>');

document.write ('</form>');
scrollMsg();
}
function scrollMsg()
{
CurMsg = document.frm.runtext.value;
CurMsg = CurMsg.substring(1, CurMsg.length) +
CurMsg.substring(0, 1);
document.frm.runtext.value = CurMsg;
timerID = setTimeout("scrollMsg()", 100)
}
</script>
</head>
<body>
<h1> </h1>
<script type = "text/javascript">
setMsg(", .", 70)
</script>
</body>
</html>

setMsg :
 msg ;
 ctrlwidth .

115

msg ,
. newmsg msg.
runtext ctrlwidth newmsg. scrollMsg, :
 CurMsg

 ;
 .

setTimeout scrollMsg
100 .

Chap06\runtext2.htm.

6.3.
, , , . . .
,
. , .
,
( 6.5).
6.5.
<html>
<head>
<title> </title>
<script type = "text/javascript">
var count = -1;
var counter;
var nchar;
var speed = 200;

//

116

6
var a = new Array();
a[1] = " ";

//
//

a[2] = " ";

//

len = a[1].length;

function waveText()
{
count++;
if (count == 0)
{
document.frm.txt.value = a[1];
}
if (count == 1)
{
document.frm.txt.value = a[2].substring(0, 1) +
a[1].substring(len, 1);
}
if (count > 1)
{
a[3] = a[1].substring(0, count - 1) +
a[2].substring(count - 1, count) +
a[1].substring(len, count);
document.frm.txt.value = a[3];
}
if(count == a[1].length)
{
count = -1;
}
counter = setTimeout("waveText()",speed);
}
</script>
</head>
<body onLoad="waveText()">
<h1> </h1>

117

<form name="frm">
<input type="text" name="txt" size="30">
</form>
</body>
</html>

Chap06\wavetext.htm.

6.4.
, .
( 6.6). Web- http://www.mf2fm.co.uk/rv
.
6.6.
<html>
<head>
<title> </title>
<script type="text/javascript">
// <![CDATA[
var speed = 100; // speed of wobbling, lower is faster
var height = 3;

// height of wobbling in pixels

var alink="http://www.mf2fm.co.uk/rv"; // page to link text to


// (set to ="" for no link)
/****************************
*

Wobbly Text Effect

*(c) 2003-5 mf2fm web-design*


* http://www.mf2fm.co.uk/rv *
* DON'T EDIT BELOW THIS BOX *
****************************/
var wobtxt, wobble, wobcnt = 0;
window.onload=function()

118

6
{
if (document.getElementById)
{
var i, wobli;
wobble=document.getElementById("wobble");
wobtxt = wobble.firstChild.nodeValue;
while (wobble.childNodes.length)
wobble.removeChild(wobble.childNodes[0]);
for (i = 0; i < wobtxt.length; i++)
{
wobli = document.createElement("span");
wobli.setAttribute("id", "wobb"+i);
wobli.style.position = "relative";
wobli.appendChild(document.createTextNode(wobtxt.charAt(i)));
if (alink)
{
wobli.style.cursor = "pointer";
wobli.onclick=function()
{
top.location.href=alink;
}
}
wobble.appendChild(wobli);
}
setInterval("wobbler()", speed);
}
}

function wobbler()
{
for (var i = 0; i < wobtxt.length; i++)
document.getElementById("wobb" + i).style.top =
Math.round(height * Math.sin(i + wobcnt)) + "px";
wobcnt++;
}

119

// ]]>
</script>
</head>
<body>
<div id="wobble"> </div>
</body>
</html>

, ,
Chap06\waves.htm.

6.5.

.
letterSpacing, .
. ,
, . ( 6.7).
6.7.

<DIV onmouseover="this.style.letterSpacing='1mm'"
onmouseout="this.style.letterSpacing=''">
,
.</DIV>

( 6.8).
6.8.
<html>
<head>
<title> </title>

120

6
<script type = "text/javascript">
//
var sizes = new Array("0px", "1px", "2px", "4px", "8px");
sizes.pos = 0;

function rubberWords()
{
var el = document.getElementById("elastic");
if (el.direct == null)
el.direct = 1;
else if ((sizes.pos > sizes.length -2) || (0 == sizes.pos))
el.direct *= -1;
el.style.letterSpacing = sizes[sizes.pos += el.direct];
}
</script>
</head>
<body onLoad="setInterval('rubberWords()', 100);">
<h1 ID="elastic" ALIGN="center"> </h1>
</body>
</html>

, ,
Chap06\elastic.htm.

6.6.
,
. , ( 6.9).
6.9.
<html>
<head>
<title> </title>

121

<script type = "text/javascript">


function rubberText(id, start, finish, step, speed)
{
if (start < finish)
{
var el = document.getElementById("expand");
el.style.letterSpacing = start + "px";
start = start + step;
setTimeout("rubberText('" + id + "'," + start + "," +
finish + "," + step + "," + speed + ")",speed);
}
}
</script>
</head>
<body onLoad="rubberText('expand',-10,10,1,30)">
<h1> </h1>
<b><span id="expand"
style="LETTER-SPACING: 9px"> </span></b>
<p>, ? <span
style="cursor: pointer; color: red"
onClick="rubberText('expand',-10,10,1,30);"></span>
, .
</body>
</html>

, ,
Chap06\rubber.htm.

6.7.
Mozilla Firefox <blink> </blink>. , , .
Internet Explorer JavaScript
( 6.10).

122

6.10.
<html>
<head>
<title> </title>
<script type = "text/javascript">
function blinkOn()
{
blinker.style.color = "black";
timerOne = setTimeout("blinkOff()", 1000);
}

function blinkOff()
{
blinker.style.color = "white";
timerTwo = setTimeout("blinkOn()", 1000);
}
</script>
</head>
<body onLoad="blinkOff()">
<h1> </h1>
<blink> blink</blink>
<br><br>
<p id=blinker style="color: black">
JavaScript</p>
</body>
</html>

Mozilla Firefox , Internet Explorer . ,


. , Web, .

, ,
Chap06\blinking.htm.

123

6.8.
, Web-
http://www.mf2fm.co.uk/rv ( 6.11).
, .
6.11.
<html>
<head>
<title> </title>
<script language="JavaScript" type="text/javascript">
// <![CDATA[
var speed = 100; // speed colours change, 1 second = 1000
var raincol

= new Array("#ff0000", "#ff9900", "#ffff00",


"#99ff00", "#00ff00", "#00ff99",
"#00ffff", "#0099ff", "#0000ff",
"#9900ff", "#ff00ff", "#ff0099");
//

var alink = "http://www.mf2fm.co.uk/rv";

//
//

// (set to ="" for no link)


/****************************
*

Rainbow Text Effect

*(c) 2003-5 mf2fm web-design*


* http://www.mf2fm.co.uk/rv *
* DON'T EDIT BELOW THIS BOX *
****************************/
var rainbow, raintxt, raincnt = 0;

window.onload = function()
{
if (document.getElementById)
{
var i, raini;
rainbow = document.getElementById("rainbow");

124

6
raintxt = rainbow.firstChild.nodeValue;
while (rainbow.childNodes.length)
rainbow.removeChild(rainbow.childNodes[0]);
for (i = 0; i < raintxt.length; i++)
{
raini = document.createElement("span");
raini.setAttribute("id", "rain"+i);
raini.appendChild(document.createTextNode
(raintxt.charAt(i)));
if (alink)
{
raini.style.cursor="pointer";
raini.onclick=function()
{ top.location.href = alink; }
}
rainbow.appendChild(raini);
}
rainbow = setInterval ("raining()", speed);
}
} //

function raining()
{
for (var i = 0; i < raintxt.length; i++)
document.getElementById("rain"+i).style.color =
raincol[(i + raincnt) % raincol.length];
raincnt++;
}
// ]]>
</script>
</head>
<body>
<span id="rainbow"> </span>
</body>
</html>

125

, , Chap06\rainbow.htm.

,
. .

126


7.1.
. ,
( ) , . .
, , Internet Explorer 4.0 .
, . , -
. , , Web-
.
. , , , , .
: apply, play stop.
.

7.1.1.
/
revealtrans. :
 duration ;
 transition ( 0 23); 23 -

0 22, .

128

, transitionReaveal
onClick ( 7.1).
7.1.
<script type="text/javascript">
var flag = true;
//
function transitionReveal()
{
img1.filters.revealTrans.Apply();
if (flag)
img1.src = "cat2.jpg";
else
img1.src = "cat1.jpg";
img1.filters.revealTrans.Play();
flag=!flag; //
}
</script>
<h2> </h2>
<img src="cat1.jpg" width="320" height="240" id="img1"
galleryimg = "no"
style="filter: revealTrans(duration=3,transition=23);"
onclick="transitionReveal();">

23 transition.
, Web- (
) , .

7.1.2.
. , .

. 7.1.

129

130

: wave flipv. , ( 7.2).


7.2.
<h2> </h2>

<img id="source" src="cat0.jpg" width=320 height=240><br>


<script type="text/javascript">
function waterFX()
{
setInterval("target.filters.wave.phase+=15",100);
}

document.write('<img id=target src="'+document.all.source.src+


'"style=
"filter:wave(strength=3,freq=3,phase=0,lightstrength=30)

flipv()"

width=320 height=240>');
window.onload = waterFX;
</script>

. 7.1 .
. .

, ,
Chap07\filters.htm.

7.2. -
.
-, HTML-
slide:
<img id="slide" src="cat0.jpg" width=320 height=240>

131

- blendTrans.
:
<style type="text/css">
img
{
filter: blendTrans(duration=3.0);
}
</style>

, <img>
blendTrans duration,
, . .
JavaScript.
aImages, . ,
-. new Image,
Image :
aImages[0] = new Image();
aImages[1] = new Image();
aImages[2] = new Image();
aImages[0].src = "cat0.jpg";
aImages[1].src = "cat1.jpg";
aImages[2].src = "cat2.jpg";

, . , , slideImage:
i = 1;
function slideImage()
{
slide.filters[0].Apply();
slide.src = aImages[i].src;
slide.filters[0].Play();
i = i + 1;
if (i == 4) i = 0;
}

132

i, ,
1. Apply, src ,
Play.
, .

setInterval. 7.3 .
7.3. -

<html>
<head>
<title> : -</title>
<style type="text/css">
img
{
filter: blendTrans(duration=3.0);
}
</style>

<script type="text/javascript">
var aImages = new Array(2);
aImages[0] = new Image();
aImages[1] = new Image();
aImages[2] = new Image();
aImages[3] = new Image();

aImages[0].src = "cat0.jpg";
aImages[1].src = "cat1.jpg";
aImages[2].src = "cat2.jpg";
aImages[3].src = "cat3.jpg";

i = 1;

function slideImage()
{

133

slide.filters[0].Apply();
slide.src = aImages[i].src;
slide.filters[0].Play();

i = i + 1;

if (i == 4) i = 0;
}

setInterval("slideImage()", 4000);
</script>
</head>
<body>
<h2>- </h2>
<img id="slide" src="cat0.jpg" width=320 height=240>
</body>
</html>

, - , Chap07\slide.htm.

7.3. Web-
, Web-
background <body>:
<body background="cat0.jpg">

Web-,
( 7.4).
7.4. Web-
<html>
<head>
<title> Web-</title>

134

</head>
<body background="cat0.jpg">
<h1> Web-</h1>
<script type="text/javascript">
var backgroundOffset = 0;
var obj = eval('document.body');

function scrollBackground(size, direction)


{
if (direction == 1)
{
backgroundOffset = ++ backgroundOffset;
if (backgroundOffset > size) backgroundOffset = 0;
obj.style.backgroundPosition = "0 " + backgroundOffset;
}
else
{
backgroundOffset = -- backgroundOffset;
if (backgroundOffset > size) backgroundOffset = 0;
obj.style.backgroundPosition = "0 " + backgroundOffset;
}
}
setInterval("scrollBackground(1536, -1)", 50);
</script>
</body>
</html>

, Web-,

scrollBackground.

, Web-,
Chap07\bgscroll.htm.

135

7.4. ,

, .
.

( 7.5). , .
7.5. ,
<html>
<head>
<title>, </title>
<style type="text/css">
.texttail
{
color:#00ff00;
position:absolute;
visibility:visible;
top:-50px;
font-size:large;
font-family: monospace, san-serif;
font-weight:bold;
}
</style>

<script type="text/javascript">
var x, y;
var space = 20;
var flag = 0;
var msg = "JavaScript ";
var xpos = new Array();
var ypos = new Array();

136

7
msg = msg.split("");

for (i = 0; i <= msg.length; i++)


{
xpos[i] = -50;
ypos[i] = -50;
}

function handlerMM(e)
{
x = (e)?e.pageX:document.body.scrollLeft + event.clientX;
y = (e)?e.pageY:document.body.scrollTop + event.clientY;
flag = 1;
}

function updateText()
{
if (flag == 1)
{
for (i = msg.length; i >= 1; i--)
{
xpos[i] = xpos[i - 1] + space;
ypos[i] = ypos[i - 1];
}

xpos[0] = x + space;
ypos[0] = y;

for (i = 0; i < msg.length; i++)


{
document.getElementById("span"+i).style.left = xpos[i];
document.getElementById("span"+i).style.top = ypos[i];
}
}

137

setTimeout("updateText()", 30);
}

for (i = 0; i <= msg.length; i++)


{
document.write("<span id='span"+i+"' class='texttail'>");
document.write(msg[i]);
document.write("</span>");
}

document.onmousemove = handlerMM;
</script>
</head>
<body onLoad="updateText()">
<h2>, </h2>
</body>
</html>

, . style texttail:
.texttail
{
color:#00ff00;
position:absolute;
visibility:visible;
top:-50px;
font-size:large;
font-family: monospace, san-serif;
font-weight:bold;
}

:
 color:#00ff00 ;
 position:absolute ;
 visibility:visible ;

138

 top:-50px ;
 font-size:large ;
 font-family: monospace, san-serif .

;
 font-weight:bold .


. .
, .
 x y .
 space .
 flag , .
 msg , .
 xpos ypos , x- y-

.

split:
message=message.split("")

x- y- 50,
:
for (i = 0; i <= msg.length; i++)
{
xpos[i] = -50;
ypos[i] = -50;
}

, :
function handlerMM(e)
{
x = (e)?e.pageX:document.body.scrollLeft + event.clientX;
y = (e)?e.pageY:document.body.scrollTop + event.clientY;
flag = 1;
}

139

updateText,
. ( ) x space, y :
for (i = msg.length; i >= 1; i--)
{
xpos[i] = xpos[i - 1] + space;
ypos[i] = ypos[i - 1];
}

x- x- space, y- y :
xpos[0] = x + space;
ypos[0] = y;

:
for (i = 0; i < msg.length; i++)
{
document.getElementById("span"+i).style.left = xpos[i];
document.getElementById("span"+i).style.top = ypos[i];
}

updateText 30 :
setTimeout("updateText()",30)

:
for (i = 0; i <= msg.length; i++)
{
document.write("<span id='span"+i+"' class='texttail'>");
document.write(msg[i]);
document.write("</span>");
}

:
document.onmousemove = handlerMM;

:
<body onLoad="updateText()">

140

Chap07\followtext.htm.

7.5.
, , , ,
, . .
Web- http://javascript.internet.com, JavaScript ( 7.6).
7.6.
<html>
<head>
<title> </title>

<script language="JavaScript">
<!-- Original:

Dragos Saracu (smardoi@yahoo.com) -->

<!-- Cross Browser by:Bob Simpson (webmaster@maryjanebrown.net) -->


<!-- Contributor URL:

http://www.maryjanebrown.net/webmaster

-->

<!-- This script and many more are available free online at -->
<!-- The JavaScript Source!! http://javascript.internet.com -->

//
function checkBrowser()
{
var name = navigator.appName;
if (name == "Netscape") this.name = "NS";
else if (name == "Microsoft Internet Explorer") this.name = "IE";
// Firefox,
this.NS = (this.name == "NS");
}

141

is = new checkBrowser();
</script>
</head>
<body>
<h1> </h1>
<center>
<p> Web-
<br>
<div id="staticBall" style="position:relative;visibility:visible">
<img src="cat3.jpg" height=30 width=30>
</div>
</center>
<div id="ball"
style="visibility:hidden; position:absolute; left:100; top:10;
height:34; width:34">
<img src="cat3.jpg" height=30 width=30>
</div>

<script language="Javascript">
iter = 0;
setId = 0;
down = true;
up = false;
bouncingBall = document.getElementById("ball").style;

stillBall = document.getElementById("staticBall").style;
winH = (is.NS) ? window.innerHeight - 55 :
document.body.offsetHeight - 55;
document.onmouseup = buttonUp;

function buttonUp(e)
{
if (((is.NS) ? e.which : event.button) != 1) return true;
if (setId != 0) clearInterval(setId);
bouncingBall.visibility="visible";

142

7
stillBall.visibility="hidden";
bouncingBall.left = (is.NS) ? e.pageX - 15 : event.offsetX - 15;
bouncingBall.top = (is.NS) ? e.pageY - 15 : event.offsetY - 15;
iter = 0;
setId = setInterval("generateGravity()", 20);
return true;
}

function generateGravity()
{
if ((parseInt(bouncingBall.top)+iter < winH) && down)
{
bouncingBall.top = parseInt(bouncingBall.top) + iter;
iter++;
return;
}
else
{
if ((parseInt(bouncingBall.top)< winH) && down)
{
bouncingBall.top = winH + 5;
return;
}
down = false;
up = true;
if (iter < 0 && parseInt(bouncingBall.top) > winH)
{
clearInterval(setId);
bouncingBall.visibility = "hidden";
stillBall.visibility="visible";
setId = 0;
}
if (parseInt(bouncingBall.top) > 0 && up && iter >= 0)
{
bouncingBall.top = parseInt(bouncingBall.top) - iter;

143

iter--;
if (iter%3 == 0) iter--;
return;
}
down = true;
up = false;
}
}
</script>
<p><center>
<font face="arial, helvetica" size="-2">
Free JavaScripts provided<br>
by <a href="http://javascriptsource.com">The JavaScript
Source</a></font>
</center><p>
</body>
</html>

Chap07\balldrop.htm.

7.6.
, .
-.
. .
.

( 7.7).
7.7.
<html>
<head>

144

7
<title></title>
<style type="text/css">
#fly
{
position: absolute;
top: 0; left: 0;
}
</style>

<script type="text/javascript">
var name = navigator.appName;

var f = d = false;
var intx = false;
var dx = dy = 5;
window.onload = function ()
{
f = document.getElementById('fly');
intx = setInterval('moveBall()', 50);
}

function moveBall()
{
// IE
if (name == "Microsoft Internet Explorer")
{
var x = f.offsetLeft + dx;
var y = f.offsetTop

+ dy;

if (x >= document.body.clientWidth - f.offsetWidth)


{
x

= document.body.clientWidth - f.offsetWidth;

dx = -dx;
}
if (y >= document.body.clientHeight - f.offsetHeight)

145

{
y

= document.body.clientHeight - f.offsetHeight;

dy = -dy;
}

if (x <= 0) { x = 0; dx = -dx; }
if (y <= 0) { y = 0; dy = -dy; }
f.style.left = x + 'px';
f.style.top

= y + 'px';

}
else
{
// FF
var x = f.offsetLeft + dx;
var y = f.offsetTop

+ dy;

if (x >= window.innerWidth - f.offsetWidth)


{
x

= window.innerWidth - f.offsetWidth;

dx = -dx;
}
if (y >= window.innerHeight - f.offsetHeight)
{
y

= window.innerHeight - f.offsetHeight;

dy = -dy;
}
if (x <= 0) { x = 0; dx = -dx; }
if (y <= 0) { y = 0; dy = -dy; }
f.style.left = x + 'px';
f.style.top
}
}

= y + 'px';

// end else
// end function

function stopMoving()
{
if (intx)

146

7
{
clearInterval(intx);
intx = false;
}
else
{
intx = setInterval('moveBall()', 50);
}
}
</script>

</head>
<body>
<div id="fly">
<img src="ball.gif" onclick="stopMoving()" width=40 height=40>
</div>
</body>
</html>

Chap07\bounce.htm.

7.7.
, .
.

7.7.1.
( 7.8).
7.8.
<html>
<head>

147

<style>
.ballstyle
{
position:absolute;
visibility:visible;
}
</style>

<script type="text/javascript">
var xpos = new Array(); // x-
var ypos = new Array(); // y-
var rx = 250;

// x-

var ry = 250;

// y-

var r = 0;

//

var flag = true; //

//
for (i=0; i < 8; i++)
{
xpos[i] = rx;
ypos[i] = ry;
}

//
function moveBall()
{
if (flag) r++

// , ,

else r--

//

//
if (r > 150) flag = false;
if (r < 0) flag = true;

//
xpos[0] = rx - r - 45;

148

7
ypos[0] = ry;
xpos[1] = rx - r - 45;
ypos[1] = ry - r - 45;
xpos[2] = rx;
ypos[2] = ry - r - 45;
xpos[3] = rx + r+ 45;
ypos[3] = ry - r - 45;
xpos[4] = rx + r + 45;
ypos[4] = ry;
xpos[5] = rx + r + 45;
ypos[5] = ry + r + 45;
xpos[6] = rx;
ypos[6] = ry + r + 45;
xpos[7] = rx - r - 45;
ypos[7] = ry + r + 45;

// span
for (i = 0; i < 8; i++)
{
document.getElementById("span" + i).style.left = xpos[i];
document.getElementById("span" + i).style.top = ypos[i];
}

//
setTimeout("moveBall()", 10);
}

// span0 span7
for (i=0; i < 8; i++)
{
document.write("<span id='span"+i+"' class='ballstyle'>");
document.write('<img src="ball.gif">');
document.write("</span>");
}
</script>

149

</head>
<body onLoad="moveBall()">
<h3> . </h3>
</body>
</html>

Chap07\ball1.htm.

7.7.2.
.
. ,
: , . . , , ( 7.9).
7.9.
<html>
<head>
<style>
.ballstyle
{
position:absolute;
visibility:visible;
}
</style>

<script type="text/javascript">
var xpos = new Array();

// x-

var ypos = new Array();

// y-

var f = 0;

//

var rx = 250;

// x-

var ry = 250;

// y-

150

7
var r = 0;

//

var flag = true; //


//
for (i

=0; i < 9; i++)

{
xpos[i] = rx;
ypos[i] = ry;
}
//
function moveBall()
{
if (flag) r++

// , 1,

else r--

// 1

//
if (r > 35) flag = false;
if (r < 0) flag = true;
var c = 1.35;
//
//
f++;
var f1 = Math.cos(f);
var f2 = Math.sin(f);
xpos[0]=(rx-r)*f1-ry*f2-rx*f1+ry*f2+rx;
ypos[0]=(rx-r)*f2+ry*f1-rx*f2-ry*f1+ry;
xpos[1]=(rx-r/c)*f1-(ry-r/c)*f2-rx*f1+ry*f2+rx;
ypos[1]=(rx-r/c)*f2+(ry-r/c)*f1-rx*f2-ry*f1+ry;
xpos[2]=rx*f1-(ry-r)*f2-rx*f1+ry*f2+rx;
ypos[2]=rx*f2+(ry-r)*f1-rx*f2-ry*f1+ry;
xpos[3]=(rx+r/c)*f1-(ry-r/c)*f2-rx*f1+ry*f2+rx;
ypos[3]=(rx+r/c)*f2+(ry-r/c)*f1-rx*f2-ry*f1+ry;
xpos[4]=(rx+r)*f1-ry*f2-rx*f1+ry*f2+rx;


ypos[4]=(rx+r)*f2+ry*f1-rx*f2-ry*f1+ry;
xpos[5]=(rx+r/c)*f1-(ry+r/c)*f2-rx*f1+ry*f2+rx;
ypos[5]=(rx+r/c)*f2+(ry+r/c)*f1-rx*f2-ry*f1+ry;
xpos[6]=rx*f1-(ry+r)*f2-rx*f1+ry*f2+rx;
ypos[6]=rx*f2+(ry+r)*f1-rx*f2-ry*f1+ry;
xpos[7]=(rx-r/c)*f1-(ry+r/c)*f2-rx*f1+ry*f2+rx;
ypos[7]=(rx-r/c)*f2+(ry+r/c)*f1-rx*f2-ry*f1+ry;

//
for (i=0; i< 9; i++)
{
document.getElementById("span"+i).style.left = xpos[i];
document.getElementById("span"+i).style.top = ypos[i];
}

//
setTimeout("moveBall()", 100);
}

// span0 span9
for (i=0;i< 9;i++)
{
document.write("<span id='span"+i+"' class='ballstyle'>");
document.write('<img src="ball.gif">');
document.write("</span>");
}
</script>
</head>
<body onLoad="moveBall()">
<h3> . </h3>
</body>
</html>

Chap07\ball2.htm.

151

152

7.7.3.
.
( 7.10).
7.10.
<html>
<head>
<title> </title>
<script type = "text/javascript">
r0 = 20;
a0 = 0;

function moveBall()
{
a0 = a0 + 3;
g = (a0 * Math.PI) / 180;

x = 370 + r0 * (Math.cos(g) + g * Math.sin(g));


y = 350 + r0 * (Math.sin(g) + g * Math.cos(g));

if (x > 740)
{
a0 = 0
};

document.getElementById('ball').style.top = y;
document.getElementById('ball').style.left = x;

setTimeout("moveBall()", 20);

// moveBall()

</script>
</head>
<body onLoad="moveBall()">

153

<h1> </h1>
<div id="ball" style="position: absolute"><img src="ball.gif"></div>
</body>
</html>

, ,
Chap07\spiral.htm.

7.7.4.
, . - , .
( 7.11).
,
.
7.11.
<html>
<head>
<title> </title>
<script type = "text/javascript">
var r0 = 50;
var a0 = 0;
var a2 = 0;

function moveBall()
{
a0 = a0 + 8;
a2 = a2 + 8;

g = (a0 * Math.PI) / 180;


g2 = (a2 * Math.PI) / 180;

154

7
x = g * 50;
y = 250 + r0 * (Math.sin(g));
x2 = g2 * 50;
y2 = 250 + r0 * (- Math.sin(g2));

if (x > screen.Width - 90)


{
a0 = 0;
}

if (x2 > screen.Width - 90)


{
a2 = 0;
}

document.getElementById('ball').style.top = y;
document.getElementById('ball').style.left = x;
document.getElementById('ball2').style.top = y2;
document.getElementById('ball2').style.left = x2;

setTimeout("moveBall()", 20);
}

// moveBall()

</script>
</head>
<body onLoad="moveBall()">
<h1> </h1>
<div id="ball" style="position: absolute"><img src="ball.gif"></div>
<div id="ball2" style="position: absolute"><img src="ball.gif"></div>
</body>
</html>

, ,
Chap07\sinusoida.htm.

155

7.7.5.
, . ,
( 7.12).
7.12.
<html>
<head>
<title> </title>
<script type = "text/javascript">
var r0 = 30;
var a0 = 0;
var a2 = 0;

function moveBall()
{
a0 = a0 + 8;
a2 = a2 + 8;

g = (a0 * Math.PI) / 180;


g2 = (a2 * Math.PI) / 180;

= r0 * (g - Math.sin(g));

= 150 + r0 * (Math.cos(g) - 1);

x2 = r0 * (g2 - Math.sin(g2));
y2 = 150 + r0 * (1 - Math.cos(g2));

if (x > 850)
{
a0 = 0;
}

if (x2 > 850)


{

156

7
a2 = 0;
}

document.getElementById('ball').style.top = y;
document.getElementById('ball').style.left = x;
document.getElementById('ball2').style.top = y2;
document.getElementById('ball2').style.left = x2;

setTimeout("moveBall()", 20);
}

// moveBall()

</script>
</head>
<body onLoad="moveBall()">
<h1> </h1>
<div id="ball" style="position: absolute"><img src="ball.gif"></div>
<div id="ball2" style="position: absolute"><img src="ball.gif"></div>
</body>
</html>

, , Chap07\cycloida.htm.

7.8.
.
: , , ( 7.2).
.
, ( 7.13).

. 7.2.

7.13.
<html>
<head>
<title> </title>
<script type="text/javascript">
document.onmousemove = handlerMM;

157

158

7
function handlerMM(e)
{
var dx = 0;
var dy = 0;
var fact

= 2;

var opp = 70;


var x = (e)?e.pageX:event.x;
var y = (e)?e.pageY:event.y;
dx = (e)?0:window.document.body.scrollLeft;
dy = (e)?0:window.document.body.scrollTop;
var x1 = (x + dx) * fact;

//

var y1 = (y + dy) * fact;

//

var x2 = 2 * opp + (x + dx) * fact;

//

var y2 = 2 * opp + (y + dy) * fact;

//

document.getElementById("glass").style.left =
(x + dx) * (1 - fact);
document.getElementById("glass").style.top =
(y + dy) * (1 - fact);
document.getElementById("glass").style.clip =
"rect(" +y1 +"px," +x2 +"px," +y2 +"px,"+x1 +"px)";
}
</script>
</head>
<body>
<h5> </h5>
<!-- - -->
<img id="pic" src="cat0.jpg" galleryimg = "no"
width=320
style="position: absolute; top:40px; left:10px; border-style: none">
<!-- -->
<img id="glass" src="cat0.jpg" width=640

159

style="position: absolute; top:40px; left:10px;


clip: rect(10px, 100px, 100px, 10px); border-style: none;">

<!-- -->
<img src="cat0.jpg" width="320" height="240"
style="position: absolute; top: 330px; left:10px;
border-style: none;">

</body>
</html>

, , Chap07\glass.htm.

7.9.
, , , , . ,
? . , . , , . ,
, , , . ,
. ,
-----.
,
. , . ASCII-Art.
.
Web- http://llizard.etherwork.net/ascii-art/animation/
animations.htm ,
llizard aka ejm ( 7.14). Web-
, Web- .

160

7.14.
<html>
<head>
<title>Mr. Asciihead adds the obligatory Jump to the
Macarena (Javascript ASCII animation)</title>
<script type="text/javascript"><!-var agt=navigator.userAgent.toLowerCase();
if (agt.indexOf("mac") != -1) { var a=""+a; } else { var a="\n"; }
var max=0;
function tlist()
{ max=tlist.arguments.length;
for(i=0;i<max;i++) this[i]=tlist.arguments[i];
}
tl = new tlist(" " + a + "

o" + a + "

.|." + a + "

/\\" + a,

" " + a + "

o" + a + "

\\|." + a + "

\>\\"+a,

" " + a + "

o " + a + "

\\|/" + a + "

/\<" + a,

" " + a + "

o " + a + "

//" + a + "

\>\\" + a,

" " + a + "

o" + a + "

" " + a + "

\<o" + a + "

" " + a + "

\<o\> " + a + "

" " + a + "

o\>" + a + "

"

o" + a + "

" " + a + "

X" + a + "

\\" + a + "
|" + a + "

\<|" + a + "

.|." + a + "

o" + a + "

\>\\" + a,
/\<" + a,
\>\\"+a,

\>\>" + a + " " + a,

\<|\>" + a + "

var x=0;
function tick() {
document.f.t.value=tl[x];
x++; if(x==max) x=0;
//if(confirm('continue?'))
setTimeout("tick()",200);
}
//--></script>
</head>
<body bgcolor="#00ccff" text="#660066" onload="tick()">
<center>

/\<" + a,

/\<" + a);

161

<h2> </h2>
<form name="f">
<textarea name="t" rows="6" cols="9">
</textarea>
</form>
<a href="http://llizard.crosswinds.net/" target="_top">
ASCII-art created by llizard aka ejm</a>
</center>
</body>
</html>

. , . , , ,
: ,
, . !

, ,
Chap07\artanimation.htm.

7.10.
""
. , , . . ,
Richard Womersley ( 7.15).
7.15.
<html>
<head>
<title></title>
<style type="text/css">
.matrix
{ width:11px; font:11pt Lucida Console, Courier, monospace;

162

7
text-align:center; padding:0px; background-color:#000
}
</style>

<script type="text/javascript">
// <![CDATA[
var height = 11; // height of the effect in rows - must be
// an odd number
var speed = 66;

// lower is faster

var reveal = 33; // between 0 and 100


// the higher, the faster the word is 'decoded'
var repeat = 0;

// if '0' the script does not repeat

// if set to a number this is the delay until the script repeats


var alink = "http://www.mf2fm.co.uk/rv"; // place to link to
// set to alink="" if not needed
/***************************\
* The Matrix JavaScripted.. *
*(c) 2003-5 mf2fm web-design*
* http://www.mf2fm.co.uk/rv *
* DON'T EDIT BELOW THIS BOX *
\***************************/
var timer, table, x, y, columns, ma_txt, ma_cho;
reveal /= 100;
var m_coch = new Array();
var m_copo = new Array();

window.onload = function()
{
if (document.getElementById)
{
var matrix, tbody, tr, td;
matrix = document.getElementById("matrix");
ma_txt = matrix.firstChild.nodeValue;
ma_txt = " "+ma_txt+" ";
columns=ma_txt.length;

163

while (matrix.childNodes.length)
matrix.removeChild(matrix.childNodes[0]);
table = document.createElement("table");
table.cellSpacing = 0;
table.style.margin = "auto";
table.style.width = "auto";
tbody = document.createElement("tbody");
for (x = 0; x < height; x++)
{
tr = document.createElement("tr");
for (y = 0; y < columns; y++)
{
td = document.createElement("td");
td.className = "matrix";
td.appendChild(document.createTextNode
(String.fromCharCode(160)));
tr.appendChild(td);
}
tbody.appendChild(tr);
}
table.appendChild(tbody);
matrix.appendChild(table);
ma_cho = ma_txt;
for (x = 0; x < columns; x++)
{
m_copo[x]=0;
ma_cho+=String.fromCharCode(32+Math.floor(Math.random()*94));
}
x = 0;
timer = setInterval("mytricks()", speed);
}
}

function mytricks()
{

164

7
var mtmp, mrow;
var z = x;
x = 0;
for (y = 0; y < columns; y++)
{
x = x + (m_copo[y] == 100);
mrow = m_copo[y]%100;
if (mrow && m_copo[y]<100)
{
if (mrow < height+1)
{
mtmp=table.rows[mrow-1].cells[y];
mtmp.firstChild.nodeValue = m_coch[y];
mtmp.style.color = "#33ff66";
mtmp.style.fontWeight = "bold";
}
if (mrow > 1 && mrow < height + 2)
{
mtmp = table.rows[mrow - 2].cells[y];
mtmp.style.fontWeight="normal";
mtmp.style.color="#00ff00";
}
if (mrow > 2)
table.rows[mrow - 3].cells[y].style.color = "#009900";
if (mrow < Math.floor(height / 2) + 1) m_copo[y]++;
else if (mrow == Math.floor(height / 2) + 1 &&
m_coch[y] == ma_txt.charAt(y)) zoomer(y);
else if (mrow < height + 2) m_copo[y]++;
else if (m_copo[y] < 100) m_copo[y] = 0;
}
else if (Math.random()>0.9 && m_copo[y]<100) {
if (reveal>Math.random() && (z+1)/columns>Math.random())
m_coch[y]=ma_cho.charAt(y);
else m_coch[y]=ma_cho.charAt(Math.floor
(Math.random()*ma_cho.length));

165

m_copo[y]++;
}
}
if (x==columns) {
if (repeat) {
ma_cho=ma_txt;
for (x=0; x<columns; x++) {
m_copo[x]=0;
ma_cho+=String.fromCharCode(32+Math.floor
(Math.random()*94));
}
}
else clearInterval(timer);
}
}

function zoomer(ycol) {
var mtmp, mtem, ytmp;
if (m_copo[ycol]==Math.floor(height/2)+1) {
for (ytmp=0; ytmp<height; ytmp++) {
mtmp=table.rows[ytmp].cells[ycol];
mtmp.firstChild.nodeValue=m_coch[ycol];
mtmp.style.color="#33ff66";
mtmp.style.fontWeight="bold";
if (alink) {
mtmp.style.cursor="pointer";
mtmp.onclick=function() {window.location.href=alink};
}
}
mtmp=ma_cho.indexOf(ma_txt.charAt(ycol));
m_copo[ycol]+=199;
setTimeout("zoomer("+ycol+")", speed);
}
else if (m_copo[ycol]>200) {
mtmp=table.rows[m_copo[ycol]-201].cells[ycol];

166

7
mtem=table.rows[200+height-m_copo[ycol]].cells[ycol];
m_copo[ycol]-=1;
mtmp.style.fontWeight="normal";
mtem.style.fontWeight="normal";
setTimeout("zoomer("+ycol+")", speed);
}
else if (m_copo[ycol]==200)
m_copo[ycol]=100+Math.floor(height/2);
if (m_copo[ycol]>100 && m_copo[ycol]<200) {
mtmp=table.rows[m_copo[ycol]-101].cells[ycol];
mtmp.firstChild.nodeValue=String.fromCharCode(160);
mtem=table.rows[100+height-m_copo[ycol]].cells[ycol];
mtem.firstChild.nodeValue=String.fromCharCode(160);
m_copo[ycol]-=1;
setTimeout("zoomer("+ycol+")", speed);
}
}
// ]]>
</script>

</head>
<body bgcolor="black">
<div id="matrix">JavaScript </div>
</body>
</html>

, ,
Chap07\matrix.htm.

7.11.
.
Web-, .
. ,

167

, . ,
,

. ( 7.16).
7.16.
<html>
<head>
<title> </title>
<script type="text/javascript">
// " " IE

var counter = 5; //

Ypos = new Array();


Xpos = new Array();
Speed = new Array();
Step = new Array();
Cstep = new Array();

document.write('<div
style="position:absolute;top:0px;left:0px"><div
style="position:relative">');

for (i = 0; i < counter; i++)


{
snowImage = "snowflake.gif";
document.write('<img id="si" src="' + snowImage +
'"style="position:absolute;top:0px;left:0px">');
document.write('</div></div>');
}

//
WinHeight = window.document.body.clientHeight;
WinWidth = window.document.body.clientWidth;

168

7
for (i = 0; i < counter; i++)
{
Ypos[i] = Math.round(Math.random() * WinHeight);
Xpos[i] = Math.round(Math.random() * WinWidth);
Speed[i] = Math.random() * 3 + 2;
Cstep[i] = 0;
Step[i] = Math.random() * 0.1 + 0.05;
}

function FallSnow()
{
var hscrll = document.body.scrollTop;
for (i = 0; i < counter; i++)
{
sy = Speed[i] * Math.sin(90 * Math.PI/180);
sx = Speed[i] * Math.cos(Cstep[i]);
Ypos[i] += sy;
Xpos[i] += sx;

if (Ypos[i] > WinHeight)


{
Ypos[i] = -60;
Xpos[i] = Math.round(Math.random() * WinWidth);
Speed[i] = Math.random() * 5 + 2;
}
si[i].style.pixelLeft = Xpos[i];
si[i].style.pixelTop = Ypos[i] + hscrll;

Cstep[i] += Step[i];
}

setTimeout('FallSnow()',20);
}
</script>
</head>

169

<body onload=FallSnow()>
<h3> </h3>
<p>: . <br />
: . </p>
<pre>
,
.
, .
, , ,
,
,
, .
</pre>
</body>
</html>

, ,
Chap07\snowflakes.htm.

170


8.1.
- ,
.
.
,
. onMouseover.
. . Web- , . onMouseover.
( 8.1).
8.1.
<html>
<head>
<title> </title>
<script type="text/javascript">
var flag = 1;
function clickMe()
{
if(flag == 1)
{
document.getElementById("but").style.top = "90px";

172

8
document.getElementById("but").style.left = "300px";
}

if (flag == 2)
{
document.getElementById("but").style.top = "120px";
document.getElementById("but").style.left = "100px";
}

if (flag == 3)
{
document.getElementById("but").style.top = "30px";
document.getElementById("but").style.left = "100px";
}

flag = flag + 1;
if (flag == 4)
{
flag = 1;
}
}
</script>
</head>
<body>
<h2> </h2>
<p> ?</p>
<button style="position:absolute; left:100px; top:120px; width:50px;
height:50px;" onClick="alert(' !')"></button>

<button id="but" style="position:absolute; left:200px; top:120px;


width:50px; height:50px;" onMouseover="clickMe()"></button>
</body>
</html>

. , ,
, .

173

Chap08\catchme.htm.

8.2.
,
. Web-
http://www.arbuz.uz, . , Web-.
,
.
. ,
. . :
(, 54).
(54 5 4 = 45).
, . , ( 8.2).
, .
8.2.
<html>
<head>
<title> </title>
<META http-equiv=Content-Type
content="text/html; charset=windows-1251">
<style type=text/css>
.symtd
{
FONT-SIZE: 17px; COLOR: #000000; FONT-FAMILY: wingdings;
BACKGROUND-COLOR: #cccccc
}

174

8
.symtd1
{
FONT-SIZE: 35px; COLOR: #000000; FONT-FAMILY: wingdings;
BACKGROUND-COLOR: #cccccc; align: center
}

.numtd
{
FONT-SIZE: 17px; FONT-FAMILY: verdana; BACKGROUND-COLOR: #aaaaaa
}
</ style >

<script type = "text/javascript">


ax=0;

function writeTable()
{
ax = Math.round(Math.random() * 26);
alphaArray = new Array("a", "n", "b", "d", "f", "h", "{", "i",
"l", "v", "x", "z", "I", "J", "M", "N",
"o", "O", "R", "S", "T", "U", "m", "6",
"^", "u", "_", "[", "]");

table = "<table border=0 cellspacing=1 cellpadding=1


width='100%'><tr>";

j = 1;
for (i = 99; i >= 0; i--)
{
a = Math.round(Math.random()*26);
if (i%9 == 0 &&

i < 89)

a = ax;
table += "<td class='numtd'>" + i +
"</td><td class='symtd'>" + alphaArray[a] + "</td>";

175

if (j%10 == 0)
table += "</tr><tr>";
j++;
}

table += "</table>";
sym.innerHTML = table;
sh.innerHTML = "";
}

function showAnswer()
{
sh.innerHTML=alphaArray[ax];
sym.innerHTML="<h1><a
href='javascript:writeTable()'>!</a></h1>";
}
</script>
</head >
<body style="MARGIN: 10px; TEXT-ALIGN: center">
<h2> </h2>
<p> , !</p>
<TABLE cellSpacing=1 cellPadding=1 width=770 border=0>
<TBODY>
<TR>
<TD vAlign=top width="100%">
<OL>
<LI> (, 54).
<LI>
(, 54 - 5 - 4 = 45).
<LI> ,
.
<LI><B>
.
</B> .</LI>
</OL>

176

8
<P>
<TABLE style="CURSOR: hand"
onclick=showAnswer() borderColor=#336699
height=80 cellSpacing=1 cellPadding=1
width=80 align=center bgColor=#333399 border=4>
<TBODY>
<TR>
<TD class=symtd1
id=sh align=middle>&nbsp;</TD></TR></TBODY></TABLE>
</TD></TR>
<TR>
<TD id=sym vAlign=center align=middle
width="100%"></TD></TR></TBODY></TABLE>

<script type = "text/javascript">


writeTable()
</script>
</body>
</html>

. , , . .
Wingdings,
Windows.
, .
alphaArray , . . ,
(. 8.1). ,
Mozilla Firefox ,
- , , . - . , ,
.

177

. 8.1.

Chap08\mindreader.htm.

8.3. -
, ( 8.3). , . ,
, . : .

178

8.3. -
<html>
<head>
<title>-</title>
<script type="text/javascript">
function init()
{
rightEye = document.getElementById("rEye");
leftEye = document.getElementById("lEye");
rightEyeball = document.getElementById("rPupil");
leftEyeball = document.getElementById("lPupil");

rightEye.style.top = "100px";
rightEye.style.left = "150px";
leftEye.style.top = "100px";
leftEye.style.left = "100px";

document.onmousemove = moveHandler;
animateEyes(138,113);
}

function moveHandler(e)
{
var x = (e) ? animateEyes(e.pageX,e.pageY) :
animateEyes(window.event.clientX,window.event.clientY);
}

function animateEyes(xPos,yPos)
{
leftEyeball.style.left =
newEyeballPos(xPos,parseInt(leftEye.style.left));
leftEyeball.style.top =
newEyeballPos(yPos,parseInt(leftEye.style.top));
rightEyeball.style.left =
newEyeballPos(xPos,parseInt(rightEye.style.left));

179

rightEyeball.style.top =
newEyeballPos(yPos,parseInt(rightEye.style.top));
}

function newEyeballPos(currPos,eyePos)
{
newPos = Math.min(Math.max(currPos,eyePos+3),eyePos+17);
return newPos;
}
</script>
</head>
<body onLoad="init()">
<div id="lEye" style="left: 100px; position: absolute; top: 100px">
<img src="eye.gif" height=25 width=24></div>

<div id="rEye" style="left: 150px; position: absolute; top: 100px">


<img src="eye.gif" height=25 width=24></div>

<div id="lPupil" style="left: 118px; position: absolute; top: 113px">


<img src="pupil.gif" height=4 width=4></div>

<div id="rPupil" style="left: 153px; position: absolute; top: 113px">


<img src="pupil.gif" height=4 width=4></div>

<h1>-</h1>
</body>
</html>

. Web ,
. init, , .
moveHandler animateEyes,
. moveHandler ,
animateEyes. , ,
, x y .

180

Internet Explorer animateEyes


window.event.clientX window.event.clientY. Mozilla Firefox e.pageX e.pageY. animateEyes x y . newEyeballPos,
animateEyes
. newEyeballPos (x y, )
, .
,
1515 .

. 8.2. -

Chap08\spyeeys.htm.

8.4.
history
Web-.

181

, , , :
<a href="javascript:history.back();"> </a>

,
Web-. , ,
, " !", Web-, , :
<body onLoad="javascript:history.back();">

, Web-,
! !

182


Web-
9.1.
MS Agent 2.0 Web. MS Agent Microsoft,
Internet Explorer 4.0 . , MS Agent ActiveX,
Mozilla Firefox.

, Internet Explorer, , ,
.
. , MS Agent
Netscape Navigator.

MS Agent,
( 9.1).
9.1. MS Agent 2.0
<html>
<head>
<title>MSAgent JavaScript</title>
<script type = "text/javascript">
var SuperAgent;

184

9
function welcomeAgent()
{
Agent.Characters.Load ("MyAgent");
SuperAgent = Agent.Characters.Character("MyAgent");
SuperAgent.Show();
SuperAgent.MoveTo(50, 50);
SuperAgent.Play("Greet");
SuperAgent.Speak("! MS Agent");
}
</script>

</head>
<body onLoad="welcomeAgent()">
<h1> Microsoft Agent 2.0</h1>

<Object ID="Agent" Width=0 Height=0


ClassID="CLSID:D45FD31B-5C6E-11D1-9EC1-00C04FD7081F"
CodeBase="#VERSION=2,0,0,0">
</Object>
</body>
</html>

,
,
(. 9.1). .

. -, , -
( ). , ,
, . , , , ! , ,
, .
MS Agent Web- <OBJECT> HEAD BODY:
<OBJECT
classid="clsid: D45FD31B-5C6E-11D1-9EC1-00C04FD7081F"

Web-

185

CODEBASE = "#VERSION=2,0,0,0"
id=Agent>
</OBJECT>

. 9.1. MS Agent 2.0

MS Agent , Web- Microsoft. ActiveX. ,


, . acf. ACF
. ,
, "",
- . -
.

-
Web- Microsoft, <OBJECT>. , MS Agent.

186

. MS Agent
.
. . Load .
, MS Agent , . , .

, MS Agent, Chap09\
msagent.htm.

9.2.

Merlin. . , : .
,
,
(Hide).
, .
( 9.2).
9.2.
<html>
<head>
<title>MSAgent JavaScript</title>
<script type = "text/javascript">
var SuperAgent;
function welcomeAgent()
{
Agent.Characters.Load ("MyAgent");

Web-

187

SuperAgent = Agent.Characters.Character("MyAgent");
SuperAgent.Show();
SuperAgent.MoveTo(50, 50);
SuperAgent.Play("Greet");
SuperAgent.Speak("! MS Agent");
//

SuperAgent.Commands.Add("ToWrite", "", "");


SuperAgent.Commands.Add("ToSearch", "", "");
SuperAgent.Commands.Add("ToSpeak", " ", "");
SuperAgent.Commands.Add("Alert", "", "");
}
function doSpeak()
{
SuperAgent.Speak(document.SAMPLE.SpeechText.value);
}
</script>
</head>
<body onload="welcomeAgent()">
<h1> Microsoft Agent 2.0</h1>
<Object ID="Agent" Width=0 Height=0
ClassID="CLSID:D45FD31B-5C6E-11D1-9EC1-00C04FD7081F"
CodeBase="#VERSION=2,0,0,0">
</Object>
<script language="JavaScript" For="Agent" Event="Command(UserInput)">
switch(UserInput.Name)
{
case "ToWrite" : SuperAgent.Play("Write");
SuperAgent.Play("WriteReturn");
break;
case "ToSearch": SuperAgent.Play("Search");
break;

188

case "ToSpeak" : SuperAgent.Speak(document.SAMPLE.SpeechText.value);


break;
case "Alert"

: SuperAgent.Speak("! !");
break;

}
</script>

<form name="SAMPLE">
: <input type="text"
name="SpeechText" size=90
value=" , !">
</form>

<hr>

<button onClick='doSpeak()'> </button>


</body>
</html>

, Add():
//

SuperAgent.Commands.Add("ToWrite", "", "");


SuperAgent.Commands.Add("ToSearch", "", "");
SuperAgent.Commands.Add("ToSpeak", " ", "");
SuperAgent.Commands.Add("Alert", "", "");


, (. 9.2).
,
. , :
<script language="JavaScript" For="Agent" Event="Command(UserInput)">

switch(UserInput.Name)
{

Web-
case "ToWrite"

189

: SuperAgent.Play("Write");
SuperAgent.Play("WriteReturn");
break;

case "ToSearch" : SuperAgent.Play("Search");


break;
case "ToSpeak"

: SuperAgent.Speak(document.SAMPLE.SpeechText.value);
break;

case "Alert"

: SuperAgent.Speak("! !");
break;

}
</script>

. 9.2.

. , ,
.
. SpeechText.
, ,
value:
<form name="SAMPLE">
: <input type="text"

190

name="SpeechText" size=90 value=" , !">


</form>

, ,
.

, ,
Chap09\agent-context.htm.

9.3.
. HTML-
.
,
. ( 9.3).
9.3. Web-
<html>
<head>
<title>Microsoft Agent: </title>
<META http-equiv=Content-Type
content="text/html; charset=windows-1251">
<Object ID="Agent" Width=0 Height=0
ClassID="CLSID:D45FD31B-5C6E-11D1-9EC1-00C04FD7081F"
CodeBase="#VERSION=2,0,0,0">
</Object>
<script type="text/javascript">
var Char;

//

var X, Y;

//

function loadAgent()
{

Web-
Agent.Characters.Load("Default");
Char = Agent.Characters.Character("Default");
Char.Show();
Char.Play("Greet");
Char.Play("RestPose");
Char.Speak("! ?");
Char.MoveTo(300, 300);
Char.Speak(" ");
}

function unloadAgent()
{
Agent.Characters.Unload("Char");
}

function sayAboutLink(msg)
{
X = window.event.screenX;
Y = window.event.screenY;
Char.MoveTo(X + 50, Y - 60);
Char.GestureAt(X, Y);
Char.Speak(msg);
}

function stopAnimation()
{
Char.StopAll();
}

function clickObj()
{
Char.Speak(" - ? !");
}
</script>
</head>

191

192

<body onLoad="loadAgent()" onUnload="unloadAgent()">


<a onMouseover="sayAboutLink('
1993 ')"
onMouseout="stopAnimation()"
href="http://www.bhv.ru/"> ""</a>
<p>
<img src="cat0.jpg" width="320"
onMouseover=
"sayAboutLink(' ')"
onMouseout="stopAnimation()" onClick="clickObj()">
<p>
<a onMouseover="sayAboutLink(' ')"
onMouseout="stopAnimation()"
href="mailto:klimoff@csfan.ru">. </a>
</body>
</html>

.
, , . , .
,
.
:
function sayAboutLink(msg)
{
X = window.event.screenX;
Y = window.event.screenY;
Char.MoveTo(X + 50, Y - 60);
Char.GestureAt(X, Y);
Char.Speak(msg);
}

, . event.screenX event.screenY
.

Web-

193

msg ,
. clickObj :
function clickObj()
{
Char.Speak(" - ? !");
}

, . ,
! :
onMouseover onMouseout;
onClick. . ,
, . .


agent_links.htm.

Web-

Chap09\

MS Agent 2.0
"MS Agent. ".

194

10

JavaScript
JavaScript, . ,
-
: C++, Delphi, C# Visual Basic.

10.1.
,
. ,
, , Quake, Half-life Doom.
Web-, ,
-. Web-
, , ,
.
Web-, . , . ,
. <head>. :
1. , .
2. , x -

.
3. , .
4. .
5. ( ).
6. Web-.

196

10

, ( 10.1).
10.1.
<html>
<head>
<title> </title>

<style type ="text/css">


.ballstyle
{
position:relative;
cursor:crosshair
}

a
{
cursor:crosshair
}
</style>

<script type="text/javascript">
var w = window.screen.width;
var x = -80;

//

//

var bDirection = false;

//

function init()
{
window.setInterval("movePicture()", 50);
}

function movePicture()
{
if (bDirection == false)
{

JavaScript

197

x = x + 7;
if (x >= w)
{
bDirection = true;
}
}
else
{
x = x - 7;
if (x <= -80)
{
bDirection = false;
}
}

document.getElementById("ball").style.left= x + "px";
}
</script>
</head>
<body onLoad="init()">
<h1> </h1>
<span id="ball" class="ballstyle">
<a href="test.htm">
<img src="ball.gif" width="40" border="0">
</a>
</span>
</body>
</html>

. <a> <span> cursor:crosshair. , , , .


.

. , ,

198

10

. .
!

Chap10\firstgame.htm.

10.2. -
, , cadaber. (. 10.1).
, .
, . ,
,
. Cadaber ( )
.
, Web- ( 10.2).
, .
: , .
: (empty.gif), (o.gif) (x.gif). Xara3D.
10.2.
<html>
<head>
<title>-</title>
<style type="text/css">
H2,p {color:"#00ff00"; text-align:center}
</style>
</head>
<body background="grid.gif">
<h2>-</h2>
<p>
<table border=0 cellspacing=0>

JavaScript

199

<tr>
<td><img src="empty.gif" name="pole0"
onClick="fillPlace(0)" width=64 height=64></td>
<td><img src="empty.gif" name="pole1"
onClick="fillPlace(1)" width=64 height=64></td>
<td><img src="empty.gif" name="pole2"
onClick="fillPlace(2)" width=64 height=64></td>
</tr>
<tr>
<td><img src="empty.gif" name="pole3" onClick="fillPlace(3)"
width=64 height=64></td>
<td><img src="empty.gif" name="pole4" onClick="fillPlace(4)"
width=64 height=64></td>
<td><img src="empty.gif" name="pole5" onClick="fillPlace(5)"
width=64 height=64></td>
</tr>
<tr>
<td><img src="empty.gif" name="pole6" onClick="fillPlace(6)"
width=64 height=64></td>
<td><img src="empty.gif" name="pole7" onClick="fillPlace(7)"
width=64 height=64></td>
<td><img src="empty.gif" name="pole8" onClick="fillPlace(8)"
width=64 height=64></td>
</tr>
</table><br>
&copy; cadaber, Jun 1999.
</body>
</html>

.
, , ,
. ,
onClick <td> :
<td><img src="empty.gif" name="pole0" onClick="fillPlace(0)"
width=64 height=64></td>

200

10

. 10.1. -

onClick ,
.
fillPlace. ,
,
. drawCross drawZero ( 10.3).
10.3.
<script type="text/javascript">
var cell = new Array(9);
for (i=0; i<9; i++) cell[i] = 0;

JavaScript
var x = new Image(64,64);
x.src = "x.gif";
o = new Image(64,64);
o.src = "o.gif";
e = new Image(64,64);
e.src = "empty.gif";

function drawCross(value)
{
if (value == 0) document.pole0.src = x.src;
if (value == 1) document.pole1.src = x.src;
if (value == 2) document.pole2.src = x.src;
if (value == 3) document.pole3.src = x.src;
if (value == 4) document.pole4.src = x.src;
if (value == 5) document.pole5.src = x.src;
if (value == 6) document.pole6.src = x.src;
if (value == 7) document.pole7.src = x.src;
if (value == 8) document.pole8.src = x.src;
}

function drawZero(value)
{
if (value == 0) document.pole0.src = o.src;
if (value == 1) document.pole1.src = o.src;
if (value == 2) document.pole2.src = o.src;
if (value == 3) document.pole3.src = o.src;
if (value == 4) document.pole4.src = o.src;
if (value == 5) document.pole5.src = o.src;
if (value == 6) document.pole6.src = o.src;
if (value == 7) document.pole7.src = o.src;
if (value == 8) document.pole8.src = o.src;
}

//
var bTurn = 0 //

201

202

10

function fillPlace(value)
{
if (bTurn == 0)
{
drawCross(value);
bTurn = 1;
}
else
{
drawZero(value);
bTurn = 0;
}
}
</script>

Web- . , .
, . , .
( 10.4).
10.4.
function checkVictory()
{
if (cell[0] == cell[1] && cell[1] == cell[2] && cell[2] > 0) return true;
if (cell[3] == cell[4] && cell[4] == cell[5] && cell[5] > 0) return true;
if (cell[6] == cell[7] && cell[7] == cell[8] && cell[8] > 0) return true;
if (cell[6] == cell[3] && cell[3] == cell[0] && cell[0] > 0) return true;
if (cell[7] == cell[4] && cell[4] == cell[1] && cell[1] > 0) return true;
if (cell[8] == cell[5] && cell[5] == cell[2] && cell[2] > 0) return true;
if (cell[6] == cell[4] && cell[4] == cell[2] && cell[2] > 0) return true;
if (cell[0] == cell[4] && cell[4] == cell[8] && cell[8] > 0) return true;
}

JavaScript
function startGame()
{
for (i=0; i<9; i++) cell[i] = 0;
document.pole0.src = e.src;
document.pole1.src = e.src;
document.pole2.src = e.src;
document.pole3.src = e.src;
document.pole4.src = e.src;
document.pole5.src = e.src;
document.pole6.src = e.src;
document.pole7.src = e.src;
document.pole8.src = e.src;
}

function fillPlace(value)
{
if (bTurn == 0)
{
drawCross(value);
bTurn = 1;
cell[value] = 1;
if (checkVictory() == true)
{
alert(" . .");
startGame();
}
}
else
{
drawZero(value);
bTurn = 0;
cell[value] = 2;
if (checkVictory() == true)
{
alert(" . .");

203

204

10
startGame();
}

}
}

, : checkVictory
startGame, fillPlace. .
checkVictory . - :
( ),
( )
( ).
.
startGame , .
.

. . -,
, -,
.
. .
. , .
, , ,
.
,
checkDraw, playComp fillPlace,
( 10.5).
10.5. -
<html>
<head>

JavaScript
<title>-</title>
<style type="text/css">
H2,p {color:"#00ff00"; text-align:center}
</style>
<script type="text/javascript">
var cell = new Array(9);
for (i=0; i<9; i++) cell[i] = 0;
var x = new Image(64,64);
x.src = "x.gif";
o = new Image(64,64);
o.src = "o.gif";
e = new Image(64,64);
e.src = "empty.gif";
function drawCross(value) {
if (value == 0) document.pole0.src = x.src;
if (value == 1) document.pole1.src = x.src;
if (value == 2) document.pole2.src = x.src;
if (value == 3) document.pole3.src = x.src;
if (value == 4) document.pole4.src = x.src;
if (value == 5) document.pole5.src = x.src;
if (value == 6) document.pole6.src = x.src;
if (value == 7) document.pole7.src = x.src;
if (value == 8) document.pole8.src = x.src;
}
function drawZero(value) {
if (value == 0) document.pole0.src = o.src;
if (value == 1) document.pole1.src = o.src;
if (value == 2) document.pole2.src = o.src;
if (value == 3) document.pole3.src = o.src;
if (value == 4) document.pole4.src = o.src;
if (value == 5) document.pole5.src = o.src;
if (value == 6) document.pole6.src = o.src;

205

206

10
if (value == 7) document.pole7.src = o.src;
if (value == 8) document.pole8.src = o.src;
}
function checkVictory()
{

if (cell[0] == cell[1] && cell[1] == cell[2] && cell[2] > 0) return true;
if (cell[3] == cell[4] && cell[4] == cell[5] && cell[5] > 0) return true;
if (cell[6] == cell[7] && cell[7] == cell[8] && cell[8] > 0) return true;
if (cell[6] == cell[3] && cell[3] == cell[0] && cell[0] > 0) return true;
if (cell[7] == cell[4] && cell[4] == cell[1] && cell[1] > 0) return true;
if (cell[8] == cell[5] && cell[5] == cell[2] && cell[2] > 0) return true;
if (cell[6] == cell[4] && cell[4] == cell[2] && cell[2] > 0) return true;
if (cell[0] == cell[4] && cell[4] == cell[8] && cell[8] > 0) return true;
}
function checkDraw()
{
state = false;
for (i=0; i<9; i++) if (cell[i] == 0) state = true;
if (state == false)
{
alert(".");
startGame();
}
}
function startGame()
{
for (i=0; i<9; i++) cell[i] = 0;
document.pole0.src = e.src;
document.pole1.src = e.src;
document.pole2.src = e.src;
document.pole3.src = e.src;
document.pole4.src = e.src;
document.pole5.src = e.src;

JavaScript

207

document.pole6.src = e.src;
document.pole7.src = e.src;
document.pole8.src = e.src;
}

function playComp()
{
for (i=0; i<9; i++) if (cell[i] == 0) putHere = i;
for (i=0; i<3; i++) {
if (cell[0] == cell[1] && cell[2] == 0 && cell[0] == i) putHere = 2;
if (cell[0] == cell[2] && cell[1] == 0 && cell[0] == i) putHere = 1;
if (cell[1] == cell[2] && cell[0] == 0 && cell[2] == i) putHere = 0;
if (cell[3] == cell[4] && cell[5] == 0 && cell[3] == i) putHere = 5;
if (cell[3] == cell[5] && cell[4] == 0 && cell[3] == i) putHere = 4;
if (cell[4] == cell[5] && cell[3] == 0 && cell[5] == i) putHere = 3;
if (cell[6] == cell[7] && cell[8] == 0 && cell[6] == i) putHere = 8;
if (cell[6] == cell[8] && cell[7] == 0 && cell[6] == i) putHere = 7;
if (cell[7] == cell[8] && cell[6] == 0 && cell[8] == i) putHere = 6;

if (cell[6] == cell[3] && cell[0] == 0 && cell[6] == i) putHere = 0;


if (cell[6] == cell[0] && cell[3] == 0 && cell[6] == i) putHere = 3;
if (cell[3] == cell[0] && cell[6] == 0 && cell[3] == i) putHere = 6;
if (cell[7] == cell[4] && cell[1] == 0 && cell[7] == i) putHere = 1;
if (cell[7] == cell[1] && cell[4] == 0 && cell[7] == i) putHere = 4;
if (cell[4] == cell[1] && cell[7] == 0 && cell[4] == i) putHere = 7;
if (cell[8] == cell[5] && cell[2] == 0 && cell[8] == i) putHere = 2;
if (cell[8] == cell[2] && cell[5] == 0 && cell[8] == i) putHere = 5;
if (cell[5] == cell[2] && cell[8] == 0 && cell[5] == i) putHere = 8;

if (cell[6] == cell[4] && cell[2] == 0 && cell[6] == i) putHere = 2;


if (cell[6] == cell[2] && cell[4] == 0 && cell[6] == i) putHere = 4;
if (cell[4] == cell[2] && cell[6] == 0 && cell[4] == i) putHere = 6;
if (cell[0] == cell[4] && cell[8] == 0 && cell[0] == i) putHere = 8;
if (cell[0] == cell[8] && cell[4] == 0 && cell[0] == i) putHere = 4;
if (cell[4] == cell[8] && cell[0] == 0 && cell[4] == i) putHere = 0;

208

10
}
drawZero(putHere);
cell[putHere] = 2;
if (checkVictory() == true) {
alert(" JavaScript =).");
startGame();
}
}
function fillPlace(value) {
if (cell[value] == 0)
{
drawCross(value);
cell[value] = 1;
if (checkVictory() == true)
{
alert(" . .");
startGame();
}
else
{
checkDraw();
playComp();
checkDraw();
}
}
}
</script>

</head>
<body background="grid.gif">
<h2>-</h2>
<p>
<table border=0 cellspacing=0>
<tr>
<td><img src="empty.gif" name="pole0" onClick="fillPlace(0)"
width=64 height=64></td>

JavaScript

209

<td><img src="empty.gif" name="pole1" onClick="fillPlace(1)"


width=64 height=64></td>
<td><img src="empty.gif" name="pole2" onClick="fillPlace(2)"
width=64 height=64></td>
</tr>
<tr>
<td><img src="empty.gif" name="pole3" onClick="fillPlace(3)"
width=64 height=64></td>
<td><img src="empty.gif" name="pole4" onClick="fillPlace(4)"
width=64 height=64></td>
<td><img src="empty.gif" name="pole5" onClick="fillPlace(5)"
width=64 height=64></td>
</tr>
<tr>
<td><img src="empty.gif" name="pole6" onClick="fillPlace(6)"
width=64 height=64></td>
<td><img src="empty.gif" name="pole7" onClick="fillPlace(7)"
width=64 height=64></td>
<td><img src="empty.gif" name="pole8" onClick="fillPlace(8)"
width=64 height=64></td>
</tr>
</table><br>
&copy; cadaber, Jun 1999.
</body>
</html>

, -,
Chap10\Games\Xo\xo.htm.

10.3.
- , . ,

210

10

,
, . , ( 10.6).
10.6.
<html>
<head>
<title></title>

<style type="text/css">
#copyright
{
color: #00ff00;
text-align:center;
}
</style>

<script type="text/javascript">
//
var cellImage = new Array(16);
var cell = new Array(16);

//
for (i=0; i<16; i++)
{
cellImage[i] = new Image(81,81);
cellImage[i].src = "s"+i+".jpg";
cell[i] = 1;
}

cell[15] = 0;

//
Var TempImage = new Image(81,81);

JavaScript
//
function swapImage(num1,num2)
{
TempImage.src = cellImage[num2].src;
cellImage[num2].src = cellImage[num1].src;
cellImage[num1].src = TempImage.src;

Release(num1);
Release(num2);
}

function Release(who)
{
if (who == 0) document.img0.src = cellImage[0].src;
if (who == 1) document.img1.src = cellImage[1].src;
if (who == 2) document.img2.src = cellImage[2].src;
if (who == 3) document.img3.src = cellImage[3].src;
if (who == 4) document.img4.src = cellImage[4].src;
if (who == 5) document.img5.src = cellImage[5].src;
if (who == 6) document.img6.src = cellImage[6].src;
if (who == 7) document.img7.src = cellImage[7].src;
if (who == 8) document.img8.src = cellImage[8].src;
if (who == 9) document.img9.src = cellImage[9].src;
if (who == 10) document.img10.src = cellImage[10].src;
if (who == 11) document.img11.src = cellImage[11].src;
if (who == 12) document.img12.src = cellImage[12].src;
if (who == 13) document.img13.src = cellImage[13].src;
if (who == 14) document.img14.src = cellImage[14].src;
if (who == 15) document.img15.src = cellImage[15].src;
}

function Move(value)
{
if (cell[value] > 0)

211

212

10
{
if (value!=3 && value!=7 && value!=11 && value!=15 &&
cell[value+1]==0)
{
cell[value] = 0;
cell[value+1] = 1;
swapImage(value,value+1);
}
if (value!=12 && value!=13 && value!=14 && value!=15 &&
cell[value+4]==0)
{
cell[value] = 0;
cell[value+4] = 1;
swapImage(value,value+4);
}
if (value!=0 && value!=4 && value!=8 && value!=12 &&
cell[value-1]==0)
{
cell[value] = 0;
cell[value-1] = 1;
swapImage(value,value-1);
}
if (value!=0 && value!=1 && value!=2 && value!=3 &&
cell[value-4]==0)
{
cell[value] = 0;
cell[value-4] = 1;
swapImage(value,value-4);
}
}
} //

function mixPictures()
{

JavaScript

213

for (i=0; i<1000; i++) {


k = Math.random()*16;
Move(Math.round(k));
}
}
</script>
</head>
<body background ="grid.gif">
<h2 id="copyright"></h2>
<table border=0 cellspacing=0 cellpadding=0 align="center">
<tr>
<td><img src="s0.jpg" name="img0" onClick="Move(0)"
width=81 height=81></TD>
<td><img src="s1.jpg" name="img1" onClick="Move(1)"
width=81 height=81></TD>
<td><img src="s2.jpg" name="img2" onClick="Move(2)"
width=81 height=81></TD>
<td><img src="s3.jpg" name="img3" onClick="Move(3)"
width=81 height=81></TD>
</tr>
<tr>
<td><img src="s4.jpg" name="img4" onClick="Move(4)"
width=81 height=81></TD>
<td><img src="s5.jpg" name="img5" onClick="Move(5)"
width=81 height=81></TD>
<td><img src="s6.jpg" name="img6" onClick="Move(6)"
width=81 height=81></TD>
<td><img src="s7.jpg" name="img7" onClick="Move(7)"
width=81 height=81></TD>
</tr>
<tr>
<td><img src="s8.jpg" name="img8" onClick="Move(8)"
width=81 height=81></td>

214

10
<td><img src="s9.jpg" name="img9" onClick="Move(9)"
width=81 height=81></td>
<td><img src="s10.jpg" NAME="img10" onClick="Move(10)"
width=81 height=81></td>
<td><img src="s11.jpg" name="img11" onClick="Move(11)"
width=81 height=81></td>
</tr>
<tr>
<td><img src="s12.jpg" name="img12" onClick="Move(12)"
width=81 height=81></td>
<td><img src="s13.jpg" name="img13" onClick="Move(13)"
width=81 height=81></td>
<td><img src="s14.jpg" name="img14" onClick="Move(14)"
width=81 height=81></td>
<td><img src="s15.jpg" name="img15" onClick="Move(15)"
width=81 height=81></td>
</tr>
</table>
<center>
<br>
<input type="button" value=" "
onClick="mixPictures()">
<hr>
<p id="copyright">&copy; cadaber, Jul 1999.</p>
</center >

</body>
</html>

, ,
Chap10\Games\Puzzle15\15.htm.

. 10.2.

JavaScript

215

. 10.2.

10.4.
. , " ".
JavaScript ( 10.7).
7 ,
. . -

216

10

.
, .
(.10.3).

. 10.3.

10.7.
<html>
<head>
<title> </title>
</head>
<body>
<h1> " "</h1>
<p id="info"> : </p>
<div id="pole"></div>
<h2> :</h2>
<ul>
<li> .</li>
<li>
, .</li>
<li> , .</li>
<li> : -
, - .</li>
</ul>
<script type="text/javascript">
var Board;

//

JavaScript

217

var color;

// ,

var steps = 0;

//

var cell = new Array(); //


//
cell[1]=1;

//

cell[2]=1;

//

cell[3]=1;

//

cell[4]=0;

//

cell[5]=2;

//

cell[6]=2;

//

cell[7]=2;

//

//
function play()
{
//
Board = "<table bgcolor=aqua border=2><tr>";
for (x = 1; x < 8; x++)
{
if (cell[x] == 0)
{
Board += "<td width=42>";

//

}
else
{
Board += "<td width=42><image src=" + cell[x] +
".gif onclick=moveBall("+x+")>";
}
}
Board += "</table>";
pole.innerHTML=Board;

//

info.innerHTML=" : " + steps;

//
//

218

10
//
function moveBall(number)
{
if (cell[number - 1] == 0 && cell[number] == 2)
{
cell[number - 1] = cell[number];
cell[number] = 0;
steps++;
}

if (cell[number +1 ] == 0 && cell[number] == 1)


{
cell[number + 1] = cell[number];
cell[number] = 0;
steps++;
}

if (cell[number - 2] == 0 && cell[number]==2)


{
cell[number - 2] = cell[number];
cell[number] = 0;
steps++;
}

if (cell[number + 2] == 0 && cell[number]==1)


{
cell[number + 2] = cell[number];
cell[number] = 0;
steps++;
}

if (cell[1] == 2 && cell[2] == 2 && cell[3] == 2 &&


cell[5] == 1 && cell[6] == 1 && cell[7] == 1)
{
play();

JavaScript

219

info.innerHTML="! "+steps+" !";


}
else
{
play();
}
}

play(); //
</script>
</body>
</html>

, , ,
.

, ,
Chap10\Games\JumpBalls\jumpballs.htm.

10.5.
, : Visual Basic
6.0, Visual Basic .NET, C#.
"" . JavaScript ,
Microsoft.com, HTA- (
HTA-, ) VBScript.
JavaScript ,
. .

10.5.1.
, . , .

220

10

44 ( 16 ).
. , . - .
.
, .
. ,
( , ).
, . , .

10.5.2.
, ,
onClick NewGame. ( 10.8).
10.8.
<input id=startbutton class="button" type="button"
value=" " name="start_button" onClick="newGame()">

10.5.3.
.
( 10.9).
10.9.
<table frame='border' id='Table1'>
<tr height=59>
<td width=59>
<input id=1 class="button" type="button" name="B1"
style="height:55px; width=55px" onClick="Reveal">
</td>
<td width=59>
<input id=2 class="button" type="button" name="B2"

JavaScript

221

style="height:55px; width=55px" onClick="Reveal">


</td>
<td width=59>
<input id=3 class="button" type="button" name="B3"
style="height:55px; width=55px" onClick="Reveal">
</td>
<td width=59>
<input id=4 class="button" type="button" name="B4"
style="height:55px; width=55px" onClick="Reveal">
</td>
</tr>

... .

4- . .
:
 , -

;
 , ;
 , -

.
. , . , ,
.
. , . . onClick. ,
Reveal .

<p> : <span id="TotalClicks"></p>

10.5.4.
. , (-

222

10

10.10). , ,
NewGame.
, . , , Window_onLoad. window_onload
newGame.
10.10.
<script type = "text/javascript">
var intClicks;
var strSaved;
var arrImages;
var objSaved;
var objButton;
var intPairClicks;

function window_onload()
{
newGame();
}

</script>

10.5.5.
, newGame ( 10.11)
. , . intClicks . ( .) intPairClicks
. , , . ,
. , .
44 . -

JavaScript

223

Math.random.
for, 16 , .
Math.random .
1 16.
. :
strTemp = arrImages[i];

:
arrImages[i] = arrImages[intRnd-1];

, 0? ,
0 15, 1 16. 1 .
, :
arrImages[intRnd-1] = strTemp;

, , 16 .
: backgroundImage
display. backgroundImage "none",
, display "inline", (
).
, , .
innerHTML span:
TotalClicks.innerHTML = "<b>" + intPairClicks + "</b>";
10.11. newGame
function newGame()
{
intClicks = 0;
intPairClicks = 0;

224

10

arrImages =

new Array("Scripto_1.gif", "Scripto_2.gif",


"Scripto_3.gif", "Scripto_4.gif",
"Scripto_5.gif", "Scripto_6.gif",
"Scripto_7.gif", "Scripto_8.gif",
"Scripto_1.gif", "Scripto_2.gif",
"Scripto_3.gif", "Scripto_4.gif",
"Scripto_5.gif", "Scripto_6.gif",
"Scripto_7.gif", "Scripto_8.gif");

for (i = 1; i < 15; i++)


{
intRnd = Math.floor((16 * Math.random()) + 1);
strTemp = arrImages[i];
arrImages[i] = arrImages[intRnd-1];
arrImages[intRnd-1] = strTemp;
}
B1.style.backgroundImage = "none";
B2.style.backgroundImage = "none";
B3.style.backgroundImage = "none";
B4.style.backgroundImage = "none";
B5.style.backgroundImage = "none";
B6.style.backgroundImage = "none";
B7.style.backgroundImage = "none";
B8.style.backgroundImage = "none";
B9.style.backgroundImage = "none";
B10.style.backgroundImage = "none";
B11.style.backgroundImage = "none";
B12.style.backgroundImage = "none";
B13.style.backgroundImage = "none";
B14.style.backgroundImage = "none";
B15.style.backgroundImage = "none";
B16.style.backgroundImage = "none";
B1.style.backgroundColor = "white";
B2.style.backgroundColor = "white";

JavaScript
B3.style.backgroundColor = "white";
B4.style.backgroundColor = "white";
B5.style.backgroundColor = "white";
B6.style.backgroundColor = "white";
B7.style.backgroundColor = "white";
B8.style.backgroundColor = "white";
B9.style.backgroundColor = "white";
B10.style.backgroundColor = "white";
B11.style.backgroundColor = "white";
B12.style.backgroundColor = "white";
B13.style.backgroundColor = "white";
B14.style.backgroundColor = "white";
B15.style.backgroundColor = "white";
B16.style.backgroundColor = "white";

B1.style.display = "inline";
B2.style.display = "inline";
B3.style.display = "inline";
B4.style.display = "inline";
B5.style.display = "inline";
B6.style.display = "inline";
B7.style.display = "inline";
B8.style.display = "inline";
B9.style.display = "inline";
B10.style.display = "inline";
B11.style.display = "inline";
B12.style.display = "inline";
B13.style.display = "inline";
B14.style.display = "inline";
B15.style.display = "inline";
B16.style.display = "inline";

TotalClicks.innerHTML = "<b>" + intPairClicks + "</b>";


}

225

226

10

10.5.6.
. , onClick
Reveal ( 10.12). , ,
,
.
intClicks = intClicks + 1;

, ,
.
, ,
.
, :
if (intClicks <= 2)

, intClicks , 2.
, ? , , , .
, , ,
Reveal .
event srcElement, , . ,
, onClick:
objButton = window.event.srcElement;

, "",
. , . ,
, . , , .
, .
, , :
if(objButton.style.backgroundImage != "none")
{
intClicks = intClicks - 1;
}

,
backgroundImage -. , backgroundImage -

JavaScript

227

"none". backgroundImage "none", , , . , . (intClicks). ,


Reveal, 1 intClicks. ,
, . . , , , .
, ,
, .
backgroundImage :
objButton.style.backgroundImage = 'url('+arrImages[objButton.id-1] + ')';

, backgroundImage ,
URL. 'url' .
, .
, ?
arrImages ,
. , , ID . 1 16 . ,
, ID
( , 0 15):
arrImages[objButton.id - 1]

, , , . ID, 2. , ,
(position 1). ,
"Scripto_7.gif".
"Scripto_7.gif" backgroundImage . .
, , ,
, . ?
, .
intClicks 1 ( ), -

228

10

, . intClicks 2, ,
. :
intPairClicks = intPairClicks + 1;
strSaved = objButton.style.backgroundImage;
objSaved = objButton;

intPairClicks 1;
. , .
. button.
,
, .
, 1.
, . , . ,
( ). ,
, ,
.
, .
10.12. Reveal
function Reveal()
{
intClicks = intClicks + 1;

if (intClicks <= 2)
{
objButton = window.event.srcElement;

if(objButton.style.backgroundImage != "none")
{
intClicks = intClicks - 1;
}

objButton.style.backgroundImage='url('+arrImages[objButton.id-1]+')';

JavaScript

229

if (intClicks > 1)
{
if (objButton.style.backgroundImage == strSaved)
{
window.setTimeout("RemoveButtons()", 800);
}
else
{
window.setTimeout("HideButtons()", 800);
}
}
else
{
intPairClicks = intPairClicks + 1;
strSaved = objButton.style.backgroundImage;
objSaved = objButton;
}
status = objButton.style.backgroundImage;
}
}

RemoveButtons ( 10.13).
10.13. RemoveButton
function RemoveButtons()
{
// ,
//
//objButton.style.display = "none";
//objSaved.style.display = "none";
objSaved = null;
intClicks = 0;
//
TotalClicks.innerHTML = "<b>" + intPairClicks + "</b>";
}

230

10

,
display "none". RemoveButtons
objButton objSaved. objSaved null, . 0.
, .
:
TotalClicks.innerHTML = "<b>" + intPairClicks + "</b>";

, HideButtons ( 10.14).
10.14. HideButtons
function HideButtons()
{
objButton.style.backgroundImage = "none";
objSaved.style.backgroundImage = "none";
objSaved = null;
intClicks = 0;
TotalClicks.innerHTML = "<b>" + intPairClicks + "</b>"
}

display "none",
backgroundImage, "none".
- , .
,
.
. , , , RemoveButtons
HideButtons, setTimeout:
window.setTimeout("RemoveButtons()", 800);

,
.
, . setTimeout . , ,
setTimeout.
800 , .

JavaScript

231

.
Reveal (
?):
if (intClicks <= 2)

, RemoveButtons HideButtons, , .
(.10.4). !

. 10.4.

, ,
Chap10\Games\FindPairs\findpairs.htm.

232

10

11


11.1.
Web, .
, ,
.
Web- (, ) ,
.
JavaScript ( 11.1).
11.1.
<html>
<head>
<title> </title>
<script type="text/javascript">
function createMail(prefix, domain, suffix, name)
{
if (name == null)
{
name = "e-mail";
}

document.write('<a href="mailto:' +
prefix + '%40' + domain + '.' + suffix +
'">' + name + '</a>');

234

11
}
</script>

</head>
<body>
<h1> </h1>
<p> <script type="text/javascript">
createMail("billgates","microsoft","com");</script>
!</p>

<p> - <script
type="text/javascript">createMail("billgates","microsoft","com","
, Microsoft");</script></p>
</body>
</html>

,
Web- , . ,
(. 11.1). , .

. 11.1. ,

235

, ,
Chap11\spam.htm.

11.2.
CSS,
. Internet Explorer . ,
:
 style="cursor: default;" ;
 style="cursor: pointer;" -

;
 style="cursor: crosshair;" ;
 style="cursor: text;" ,

;
 style="cursor: wait;" ;
 style="cursor: help;"

;
 style="cursor: move;" ;
 style="cursor: e-resize;", style="cursor: w-resize;" -

;
 style="cursor:
style="cursor:

ne-resize;",
style="cursor:
nw-resize;",
se-resize;", style="cursor: sw-resize;"

;
 style="cursor: n-resize;", style="cursor: s-resize;" -

.
, , Internet Explorer 6.0 :
 style="cursor: progress;" ;
 style="cursor: all-scroll;" ;
 style="cursor: col-resize;" ;

236

11

 style="cursor: no-drop;" ;
 style="cursor: not-allowed;" ;
 style="cursor: row-resize;"

;
 style="cursor: url(mycursor.cur);" (-

CUR ANI);
 style="cursor: vertical-text;" .

cursor, :
<style type="text/css">
body
{
cursor: crosshair;
}
</style>


. ,
. , , not-allowed, ( onSelectStart) ( 11.2).
11.2. ( Internet Explorer)
<div onSelectStart="this.style.cursor='not-allowed'; return false;"
onMouseup="this.style.cursor='default'"> .
</div>

11.3.
: . ,
resize. , nw-resize (, -).

237

,
( 11.3).
11.3.
<html>
<head>
<script type="text/javascript">
// Internet Explorer 6
// Firefox 1.5
var cursors = new Array("e-resize", "ne-resize", "n-resize",
"se-resize");
var index = 0;
var speed = 75 ;

//

function rotateCursor()
{
document.body.style.cursor = cursors[index];
index++;
if (index == cursors.length) index = 0
{
setTimeout("rotateCursor()", speed);
}
}
</script>
</head>
<body style="height:100%;" onload="rotateCursor()">
<h1> ( IE)</h1>
<div id="noselect"
onSelectStart="this.style.cursor='not-allowed'; return false;"
onMouseup="this.style.cursor='default'">
. </div>
<h1> </h1>
<p> IE 6.0 Firefox 1.5
</body>
</html>

238

11

Chap11\rotatingcursor.htm.

11.4.
bookmarklets -
, ,
, ,
http://www.large.ru/bookmarklets.
,
:
 Web- - ;
 , - ,

, ;
 , ;
 , ;
 Web- , , (-

, www.large.ru/bookmarklets) . .
, , , Web- , ( , ), Web-, ,
, , ,
. .
,
!

11.4.1. ?
(), , JavaScript. , ,
Web-.

239

,
JavaScript,
. ,
Word Excel, . , , (Steve Kangas), , , ,

Netscape Navigator!
""
bookmarklet,
bookmark () applet ( ,
). - , , Web- .Ru
"".

11.4.2. ?
Internet Explorer 4.0 Mozilla Firefox 1.0 . , -
. ,
, . . .

11.4.3. ?
Web-, ,
-, ( ),
-,
, . . , , , .
Web-, , : " ".
, , , JavaScript ,
.
, -

240

11

. :
,
.
( , )
"", . - . , , (
).

11.4.4. ?
Netscape Navigator
Internet Explorer, : http:, ftp:, mailto:
: javascript:< >
. :
javascript:alert(', !')

. , , , - , , ,
. JavaScript
? . . :
javascript:alert(document.lastModified)

Web.
, . Web, , , ,
, ,
? Web- :
javascript:void(document.bgColor='white')

, ,
, .

241

, . -
? , ? ?
. Mozilla Firefox Internet Explorer,
, .
(
JavaScript)
. ? ,
bookmarklets.htm, JavaScript, ,
, , :
<A HREF="javascript:void(document.bgColor='white')"> </A>
<A HREF="javascript:void(document.bgColor='black')"> </A>


, ,
. ,
Web-
. , , .
: ,
, .

11.4.5. , void?
, JavaScript-, -
, ,
Web-. , , , JavaScript
void,
. , , .

11.4.6. :
,
, Web-, , , -

242

11

. , , , , , , , ,
. , JavaScript ,
.
, " ", ,
, ( 11.4).
11.4.
javascript:function $(w){
void(w.document.bgColor='white');
var i=w.length;
while (i--)
$(w[i]);
}
$(this)

: JavaScript , Web, , Web-, Web- (,


). , ,
, , . . ""
. "" Web-
( , ),
JavaScript . , Web-
. Internet Explorer
. ,
( IFRAME), HTML-,
"" . Web, , Internet Explorer
FRAME

243

IFRAME.

Netscape Navigator ( 11.5).


11.5. ( IE)
javascript:function $(w){
void(w.document.bgColor='white');
var i=w.document.all.tags('frame').length;
while (i--)
$(w[i]);
}
$(this)

11.4.7.
, Internet Explorer Netscape
Navigator IFRAME.
, JavaScript, , , , ,
-
.
Web-, ,
, , , .
, ,
, , :

, ?
, .
, Web- ,
, , ( 11.6 11.7).
Internet Explorer Netscape Navigator .

244

11

11.6. ( Netscape Navigator)


javascript:function $(w){
var i=w.length,
s=w.document.getSelection();
while (i--)
s+=$(w[i]);
return s;
}
alert($(this));

11.7. ( Internet Explorer)


javascript:function $(w){
with (w.document){
var i=all.tags('frame').length,s='';
if (i)
while (i--)
s+=$(w[i]);
else s=selection.createRange().text;
}
return s;
}
alert($(this));

.
,

, : , . .

11.4.8. ? ,
. :

245

256 4000 .
, , , -, 700800 Internet Explorer,
Netscape Navigator Windows, -,
.

11.5.
, , ,
. , .

11.5.1.
, ,
( 11.8). , , .
11.8.
<a href="javascript:eval('function
sbclock(){now=newDate();minutes=now.getMinutes();seconds=now.getSeconds()
;self.status=(now.getHours()+((minutes<10)?\':0\':\':\')+minutes+((second
s<10)?\':0\':\':\')+seconds);setTimeout(\'sbclock()\',200)}');sbclock();"
>-</A>

11.5.2.
, Web- - , . ( 11.9).
11.9.
<a href="javascript:void(document.body.background='')"> </a>

246

11

11.5.3. Web-
Web- ,
. . ,
Web- ( 11.10).
11.10.
<a
href="javascript:if(frames.length<1){void(document.fgColor=prompt('
%20%20%20%20',''))}else{alert(' .
')}"> -
Web-</a>

11.5.4.
Web- ,
!
( 11.11).
11.11.
<a href="javascript:for(l=0;l<document.images.length;l++)
{void(document.images[l].style.visibility='hidden')}"> </a>


bookmarklets.htm.

Chap11\

11.6. -
, . . .
, . .

247

11.6.1. Whats
,
? Whats ( 11.12).
11.12. Whats
javascript:void(open('http://www.netcraft.com/cgibin/Survey/whats?host='+location.hostname))

- Web-
Whats. ,
: IIS, Apache, FreeBSD . .

11.6.2.
. ( 11.13) ( ).
11.13. .
javascript:function%20$(w){with(w.document){var%20i=all.tags('frame').
length,s='';if(i)while(i--)s+=$(w[i]);else%20s=selection.createRange().
text}return%20s}$s=$(this);if(!$s)void($s=prompt('%20','
'));if($s)void(open('http://www.'+($s>'zzz'?'sokr.ru/?where=abbr&exac
t=on&text=':'acronymfinder.com/afquery.asp?String=exact&Find=Find&Acronym=')+$s))

11.6.3.
( ). ,
. ( 11.14).

248

11

11.14.
javascript:function%20$(w){with(w.document){var%20i=all.tags('frame').length,
s='';if(i)while(i-)s+=$(w[i]);else%20s=selection.createRange().text}return%20s}$s=$(this);i
f(!$s)void($s=prompt('%20?','At%20large'));if($s)void(open('http://'+($s.replace(/\s+$/g,'').ind
exOf('%20')<0?'lingvo.yandex.ru/en?text=':'www.translate.ru/text.asp?lang
=ru&status=translate&template=General&direction='+($s>'zzz'?'re':'er')+'&
source=')+$s+'#result'))

. ,
.

internet-bookmarklets.htm, .

11.7. Internet Explorer


Internet Explorer ,
. , .
( | | regedit.exe) HKEY_CURRENT_USER\Software\Microsoft\Internet Explorer\MenuExt.
, .
. ,
.

"C:\Windows\web\zoomin.htm" "C:\Windows\web\zoomout.htm" . ,
Flags DWORD 0x000002 ( ). HTML- ( 11.15 11.16).


11.15.
<html>
<head>
<title> </title>
<script>
var win = external.menuArguments;
var evt = external.menuArguments.event;
var doc = win.document;
var img = evt.srcElement;

img.width *= 1.5;
img.height *= 1.5;
</script>
</head>
<body>
</body>
</html>

11.16.
<html>
<head>
<title> </title>
<script>
var win = external.menuArguments;
var evt = external.menuArguments.event;
var doc = win.document;
var img = evt.srcElement;

img.width /= 1.5;
img.height /= 1.5;
</script>
</head>
<body>

249

250

11

</body>
</html>

zoomin.htm
zoomout.htm Windows\Web. Internet Explorer
Web-, , , test.htm,
.
, (. 11.2).

. 11.2. Internet Explorer

251

.
, REG zoom.reg, . .
. ,
. : Windows\Web C:\, zoomin.htm
zoomout.htm .

, Internet Explorer.
. http://www.irondust.com/qpedia/
QPedia. Internet Explorer
Wikipedia. .
, Web Wikipedia,
. , JavaScript ,
. ,
, search.html, C:\Program
Files\QPedia. ,
. ,
. , . . , .
. http://winchanger.whatis.ru/progs.shtml
Internet Explorer:
. VBScript. , ,
JavaScript. !

252

11

11.7.1.

Web- .
, . , .
Web- ! , ( 11.17).
11.17.
<html>
<head>
<title> </title>
<style type="text/css">
div#roundcorners{ margin: 0 10%;background: #9BD1FA}
p{padding-bottom:1em}
b.rtop, b.rbottom{display:block;background: #FFF}
b.rtop b, b.rbottom b{display:block;height: 1px;
overflow: hidden; background: #9BD1FA}
b.r1{margin: 0 5px}
b.r2{margin: 0 3px}
b.r3{margin: 0 2px}
b.rtop b.r4, b.rbottom b.r4{margin: 0 1px;height: 2px}
</style>
</head>
<body>
<div id="roundcorners">
<b class="rtop">
<b class="r1"></b> <b class="r2"></b> <b class="r3"></b>
<b class="r4"></b>
</b>
<p> .
,
</p>

253

<b class="rbottom">
<b class="r4"></b> <b class="r3"></b> <b class="r2"></b>
<b class="r1"></b>
</b>
</div>
</body>
</html>

. 11.3 , .
.

. 11.3.

Chap11\roundcorners.htm.

JavaScript . , ,

254

11

.
Web- http://www.html.it/articoli/niftycube/index.html, , (Alessandro Fulciniti), . , ,
. , .
Nifty Corners Cube.
,
JavaScript ( 11.18).
. 11.4.
11.18. JavaScript
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title> </title>
<style type="text/css">
body{padding: 30px 0 0;background:#FFF;
font: 16px "Trebuchet MS", Verdana, Arial, sans-serif;
text-align:center}
div#box
{
width: 400px;padding: 20px;margin:0 auto;
background:#E6E6E6;color:#000
}

h1{font: lighter 200% "Trebuchet MS", Arial sans-serif;


color: #208BE1}
h1,p{margin:0;padding:10px 20px}
div#gradientbox
{
width: 550px;padding: 30px
text-align: left;

0;margin:0 auto;

255

background: #9CC0FF url(gradient.png) repeat-x 0 -5px


}

ul#about,ul#about li{list-style-type:none;margin:0;padding:0}
ul#about{width: 474px;margin:10px auto 0;text-align:left}
ul#about li{float:left;width: 120px; height:100px;
padding: 30px 10px 20px 20px;margin:8px 8px 0 0}
li#ab1{background: #FC0}
li#ab2{background: #9F3}
li#ab3{background: #F60}
li#ab4{background: #39F}
li#ab5{background: #F36}
li#ab6{background: #FFF;color: #000}

ul#split,ul#split li{margin:0;padding:0;list-style:none}
ul#split li{float:left;width:150px;margin:0 10px 10px 0}
ul#split h3{font: normal 120%/1.3 Verdana,sans-serif;
text-transform:uppercase;margin:0px;padding: 5px 0 0;
text-align:center;color: #000}
ul#split p{margin:0;padding:5px 8px 15px}
li#one h3{background: #C8C866}
ul#split div{background: #FFC}
li#one div{border:2px solid #C8C866}
li#two h3{background: #FFBD00}
li#two div{border:2px solid #FFBD00}
li#three h3{background: #E3A1C4}
li#three div{border:2px solid #E3A1C4}
</style>

<link rel="stylesheet" type="text/css" href="niftyCorners.css">


<script type="text/javascript" src="niftycube.js"></script>

<script type="text/javascript">
window.onload=function()
{

256

11
Nifty("div#box","big");
Nifty("div#gradientbox", "transparent");
Nifty("div#about li","tl bottom big fixed-height");
Nifty("ul#split h3","top");
Nifty("ul#split div","none same-height");
}
</script>

</head>
<body>
<div id="box">
<h1> </h1>
<p> ,
.</p>
</div>
<br />
<div id="gradientbox">
<h1>Nifty Corners Cube&trade;</h1>
<p> :</p>
<ol>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
</ol>
</div>
<p> .
, . .</p>
<ul id="about">
<li id="ab1"> </li>
<li id="ab2"> </li>
<li id="ab3"> CSS</li>
</ul>
<p> .</p>
<ul id="split">

257

<li id="one"><h3> 1</h3>


<div>
<p> .</p>
</div>
</li>
<li id="two"><h3> 2</h3>
<div>
<p> .</p>
</div>
</li>
<li id="three"><h3> 3</h3>
<div>
<p> .</p>
</div>
</li>
</ul>
</body>
</html>

. HTML-
:
<link rel="stylesheet" type="text/css" href="niftyCorners.css">
<script type="text/javascript" src="niftycube.js"></script>

, -
, .
JavaScript, , Nifty. :
 CSS-, , ,

;
 -

.
13
. .

258

11

. 11.4. Web-

259

, Web- JavaScript, Chap11\


Round\roundcorners2.htm.

11.8. Mozilla Firefox


,
Internet Explorer, Mozilla Firefox.
.
, , .
Mozilla Firefox JavaScript.
. , ,
, XUL (XML
User-interface Language). XUL XML-,
. JavaScript CSS . , ", !",
( 11.19).
11.19. XUL
<?xml version="1.0" encoding="windows-1251"?>
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
<window
title=""
id="HelloWin"
xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<script src="xul.js" type="application/x-javascript"/>
<label value=" "/>
<box align="center">
<button label="" onclick='sayHello(", !");'/>
<button label="" default="true" onclick='sayBye();'/>

260

11

</box>
</window>

hello.xul. , xul.js.
( 11.20).
11.20.
function sayHello(text)
{
alert(text);
}

function sayBye()
{
alert(' , !');
close();
}

hello.xul Web-. , ( 11.21).


11.21.
<html>
<head>
<title> XUL</title>
</head>
<body>
<h1> XUL</h1>
<p><a href="hello.xul"
onclick="window.open('hello.xul','hello','chrome,resizeable'); return
false;"> </a>
</body>
</html>

261

HTML- xul.htm . .
.
(. 11.5). . .
, ,
. Mozilla Firefox.
.

Mozilla Firefox
Chap11\xul.htm.

. 11.5. Mozilla Firefox

11.9.
JavaScript, .

262

11

. Web. .
. ,
. highlight.js, ,
http://softwaremaniacs.org/soft/highlight/. Highlight.js
, Web-. , : , ,
. :
 Python;
 Ruby;
 Perl;
 PHP;
 XML;
 HTML;
 CSS;
 Django;
 JavaScript;
 VBScript;
 Delphi;
 Java;
 C++;
 Lisp;
 RenderMan (RSL RIB);
 Maya Embedded Language;
 SQL;
 SmallTalk;
 Axapta;
 1;

263

 ini-;
 Diff;
 DOS- bat;
 bash.

. highlight.js
. , ,
( 11.22).
11.22. highlight.js
<link rel="stylesheet" title="Default"
href="highlight/styles/default.css">
<script type="text/javascript" src="highlight/highlight.js"></script>
<script type="text/javascript">
initHighlightingOnLoad();
</script>

default.css highlight.js. ,
, .
,
, . JavaScript, CSS HTML, :
<script type="text/javascript">
initHighlightingOnLoad('html','css', 'javascript');
</script>

highlight.js , , "" ,
, .
readme.rus.txt,
hightlight.js.

, ( 11.23).
<pre><code>...</code></pre>,

264

11

11.23.
<pre><code>
&lt;head>
&lt;title> JavaScript&lt;/title>

&lt;style>
body
{
width: 500px;
}

&lt;/style>
&lt;body>

&lt;script type="text/javascript">
//
alert(", !");

function someFunction()
{
return true;
}

&lt;/script>

&lt;p class="something">- &lt;/p>


&lt;p>Something&lt;/p>
&lt;!-- comment -->
&lt;p> &lt;/p>
&lt;p> &lt;/p>
&lt;/body>
</code></pre>

, (<)
&lt;.

265

11.9.1. WordPress
highlight.js ,
WordPress . WordPress ,
,
.
highlight.js
WordPress. . Options
highlight.js, CSS-.

11.9.2.
export.html ,
HTML- . , , , highlight.js.
. ,
.


Chap11\Highlight\highlightdemo.htm.

11.10.
JavaScript
. ,
-
. , -. ,
. . CodeProject
http://www.codeproject.com/KB/scripting/jvk.aspx.

266

11

.
( ),
.

11.11. 80
,
Google. C Google Map
.
,
, , . Google
API (Application Programming Interface,
),
Web-. , Web-
, .
http://maps.google.com.
. , . , ,
Web-. Web- ( 11.24).
, , Web-
http://winchanger.whatis.ru/googlemap.htm.
11.24. Google Map
<!DOCTYPE html "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title> Google Map</title>

267

<script src="http://maps.google.com/maps?
file=api&amp;v=2&amp;key=ABQIAAAAETsL6XtuzKfCKbuORwcr2RQa_bGzbHjP9x6wL35n
TSX2kPnpuBQeooyCYzT2Z-xZVuq6Yoz3h5zKkw" type="text/javascript"></script>
<script type="text/javascript">
function initialize()
{
if (GBrowserIsCompatible())
{
var map = new GMap2(document.getElementById("map_canvas"));
map.setCenter(new GLatLng(55.716475, 37.553329), 15);
map.setMapType(G_SATELLITE_MAP);
map.addControl(new GLargeMapControl());
map.openInfoWindow(map.getCenter(),
document.createTextNode(" "));
}
}
</script>
</head>
<body onload="initialize()" onunload="GUnload()">
<div id="map_canvas" style="width: 600px; height: 500px"></div>
<h3> </h3>
<p> .
.
(. ) .</p>
<p>
. ,
.
.</p>
<p> ,
( ).</p>
<p> - ,
.</p>
<p> !</p>
</body>
</html>

,
(. 11.6) .

268

11

. 11.6.

Web-. JavaScript, :
<script src="http://maps.google.com/maps?
file=api&amp;v=2&amp;key=ABQIAAAAETsL6XtuzKfCKbuORwcr2RQa_bGzbHjP9x6wL35n
TSX2kPnpuBQeooyCYzT2ZxZVuq6Yoz3h5zKkw" type="text/javascript"></script>

!
Web-,
Web-!

JavaScript, .
Google. . , :
<div id="map_canvas" style="width: 600px; height: 500px"></div>

269

Web- (
600 , 500 ).
:
var map = new GMap2(document.getElementById("map_canvas"));

:
map.addControl(new GLargeMapControl());

. 11.7.

GLargeMapControl , .

270

11

:
map.setCenter(new GLatLng(55.716475, 37.553329), 15);

.
. "+", . . 11.7
.
, :
map.openInfoWindow(map.getCenter(),
document.createTextNode(" "));

Google Map. ,
, .

12


JavaScript
12.1.
HTML Applications
JavaScript HTML
Applications (HTA), Microsoft.
Internet Explorer 5.0.
. TXT : ", !"
txt hta. , ,
exe-! , .
, .
C++ Visual Basic.
. . -, HTA HTML-,
. , <head>
<HTA:APPLICATION>, .
( 12.1).
12.1. HTA-
<<html>
<head>
<title> JavaScript HTA</title>

272

12
<HTA:APPLICATION ID="MyApp"
APPLICATIONNAME="test"
BORDER="dialog"
CAPTION="yes"
ICON="update.ico"
SHOWINTASKBAR="yes"
SINGLEINSTANCE="yes"
SYSMENU="yes"
WINDOWSTATE="normal">

</head>

<body>

, !

<script type="text/javascript">
alert(" HTA");
</script>

</body>
</html>

, (ICON)
(SINGLEINSTANCE).
<HTA:APPLICATION> Web- http://msdn.microsoft.com.
HTA- HTML-,
:
<script type="text/javascript">
alert(" HTA");
</script>

Chap12\hello.hta.

JavaScript

273

12.2. Shell
. , JavaScript. Internet Explorer 7.0 Windows Vista
, ,
Windows Shell, Web. HTA. . , Windows
Shell. , Shell,
:
var oShell = new ActiveXObject("Shell.Application");

Shell :
 ;
 , , ;
 ;
 .

, ,
( 12.2).
12.2. Shell
<html>
<head>
<title> Shell HTA</title>
<HTA:APPLICATION ID="MyApp"
APPLICATIONNAME="test"
BORDER="dialog"
CAPTION="yes"
ICON="update.ico"
SHOWINTASKBAR="yes"
SINGLEINSTANCE="yes"
SYSMENU="yes"

274

12
WINDOWSTATE="normal">

</head>

<body>
<h2> Shell</h2>
<script type="text/javascript">
// Shell
var oShell = new ActiveXObject("Shell.Application");

function minimizeAll()
{
//
oShell.MinimizeAll();
}

function showRun()
{
//
oShell.FileRun();
}

function showShutdownDialog()
{
//
oShell.ShutdownWindows();
}

function showFindDialog()
{
//
oShell.FindFiles();
}

function showTimeDialog()
{

JavaScript
//
oShell.SetTime();
}

function runApplet()
{
//
oShell.ControlPanelItem ("INETCPL.cpl");
}

function exploreFolder()
{
// Windows
oShell.Explore ("C:\\Windows");
}

function selectFolder()
{
//
oShell.BrowseForFolder (0, " ", 0, "C:\\Windows");
}

function openFolder()
{
//
oShell.Open ("C:\\Program Files");
}

function showTrayPropertiesDialog()
{
//
oShell.TrayProperties();
}
</script>

275

276

12

<button style=height:50;width=250;
onClick="minimizeAll();"> </button>
<br />
<button style=height:50;width=250;
onClick="showRun();"> </button>
<br />
<button style=height:50;width=250;
onClick="showShutdownDialog();"> </button>
<br />
<button style=height:50;width=250;
onClick="showFindDialog();"> </button>
<br />
<button style=height:50;width=250;
onClick="showTimeDialog();"> </button>
<br />
<button style=height:50;width=250;
onClick="runApplet();"> </button>
<br />
<button style=height:50;width=250;
onClick="exploreFolder();"> </button>
<br />
<button style=height:50;width=250;
onClick="selectFolder();"> </button>
<br />
<button style=height:50;width=250;
onClick="openFolder();"> </button>
<br />
<button style=height:50;width=250;
onClick="showTrayPropertiesDialog();">
</button>

</body>
</html>

.
. showTrayPropertiesDialog

JavaScript

277

,
. ,
.

showRun

, Shell,
Chap12\shell.hta.

12.3.
, HTA,
kbTrainer. , .
http://code.google.com/p/kbtrainer/.

. ,
. . 12.1.

. 12.1. kbTrainer

278

12

, HTA-
, .
, .

Chap12\
kbTrainer_1.22.zip.

12.4.

Windows
chm.
HTML Help Workshop Microsoft . Web-
HTML-, ,
.
, Web-.
,
.

12.4.1.
.
, ,
.
.
. ,
, , . , ,
, . JavaScript ( 12.3).

JavaScript

279

12.3.
<script Language="JScript">
function parser(fn)
{
var X, Y, sl, a, ra, link;
ra = /:/;
a = location.href.search(ra);
if (a == 2)
X = 14;
else
X = 7;
sl = "\\";
Y = location.href.lastIndexOf(sl) + 1;
link = 'file:///' + location.href.substring(X, Y) + fn;
location.href = link;
}
</script>

<a onclick="parser('test.htm')" style="text-decoration: underline;


color: blue; cursor: pointer"> </a>

, chm-, .
. search
, . if , . a 2, mk:@MSITStore:
X 14. ,
ms-its: X 7. X
.
lastIndexOf
location.href, Y
( , ). sl
, :
sl = "\\";

280

12

X Y, substring ,
location.href
. , location.href
ms-its:C:\tutorial\javascript.chm::/test.htm. X 7,
7 . Y 19,
.
C:\tutorial\ test.chm. file:///
, ,
. :
 , , -

;
 HREF <A>;
 <A> ,

;
 HTML- Help

Viewer. , . , AVI- . ( ,
,
.)

12.5. Window Script Host


Windows Script Host
(WSH) Windows. , Windows Script
Host? WSH , ,
, . . WSH- , , , ,
. WSH
Windows, Windows 98.
Microsoft.
WSH- js, vbs, wsf, wsh. , ,

JavaScript

281

JScript, JavaScript. WSH


"" . , - reg-, . WSH-
. ,
- . , .
, .
, Windows, .
Windows.

12.5.1.
WSH, . (notepad.exe).
:
WScript.Echo(", !");

js. hello.js. .
", !" , ! WSH . , .
, WScript ( 12.4).
12.4. WScript
// WScript
WScript.Echo(WScript.FullName);
WScript.Echo(WScript.Name);
WScript.Echo(WScript.Path);
WScript.Echo(WScript.ScriptFullName);
WScript.Echo(WScript.ScriptName);
WScript.Echo(WScript.Version);

282

12

Chap12\wsh.js.

12.5.2.
WSH ,
. . ,
, , win.ini (log-).
File System Object
(FSO), .


, - .
CopyFile.
, CopyFolder ( 12.5).
12.5.
//
var FSO = WScript.CreateObject("Scripting.FileSystemObject");
FSO.CopyFile("c:\\boot.ini","c:\\Windows\\");

// X Y
FSO.CopyFolder("c:\\x", "c:\\y");

CopyFile :
, ,
. , CopyFolder , ,
, .

Chap12\copyfile.js.

JavaScript

283


CreateFolder
CreateTextFile ( 12.6).
12.6.
// . JScript
var fso = new ActiveXObject("Scripting.FileSystemObject");
//,
if (fso.FolderExists("C:\\TEST"))
WScript.Echo(" ");
else

// ,

var Folder = fso.CreateFolder("C:\\TEST");


// ,
if (fso.FileExists("C:\\TEST\\test.txt"))
WScript.Echo(" ");
else

// ,

var File = fso.CreateTextFile("C:\\TEST\\test.txt", true);

. ,
(Folder File ). /, GetFile GetFolder:
var File1 = fso.GetFile("C:\\autoexec.bat");

, ,
, , , . ,
Copy, Move Delete. Copy Move , / ,
Delete . , autoexec.bat
autoexec.tmp, :
File1.Copy("C:\\autoexec.tmp");


, . , , -

284

12

. WSH
. . Folders,
SubFolders Folder. Folders Count
Item Add. JScript, ,
Folders ( 12.7).
12.7. C:\
//
var fso, f, fc, fc1, s;
fso = new ActiveXObject("Scripting.FileSystemObject");
f = fso.GetFolder("C:");
fc = new Enumerator(f.SubFolders);
fc1 = f.SubFolders;
s = "";
for (; !fc.atEnd(); fc.moveNext())
{
s += fc.item();
s += "\n";
}
s = s + " : " + fc1.Count;
WScript.Echo(s);

Add ( 12.8).
12.8.
var fso, f, fc;
fso = WScript.CreateObject("Scripting.FileSystemObject");
f = fso.GetFolder("C:");
fc = f.SubFolders;
fc.Add("NewFolder");

JavaScript

285

,
, .
. - Files. , ,
( 12.9).
12.9. C:\
var fso, f, f1, fc, s;

fso = new ActiveXObject("Scripting.FileSystemObject");


f = fso.GetFolder("C:");
fc = new Enumerator(f.files);
s = "";
for (; !fc.atEnd(); fc.moveNext())
{
s += fc.item();
s += "\n";
}

WScript.Echo(s);

12.5.3.
WSH . ( 12.10).
12.10. WSH
//
var WSHShell = WScript.CreateObject("WScript.Shell");
var buttonOKCancel = 1;
var iconInformation = 64;
var selectCancel = 2;
var message = " ?";
var title = " ";

286

12

showQuestion();
WSHShell.Run("notepad",5);

//
function showQuestion()
{
var result;

result =

WSHShell.Popup(message,
0,
title,
buttonOKCancel + iconInformation );

// ,
if (result == selectCancel)
{
WScript.Quit();
}
}

,
showQuestion.
OK . ,
, ,
. Run:
WSHShell.Run("notepad",5);

notepad.exe Windows,
. . 5 , .

, , Chap12\
notepad.js.

JavaScript

287

12.5.4.
,
. , . ,
FSO, . , OpenTextFile , , . , , .
.
. , , :
 1 ;
 2 . , -

, ;
 8 . , , -

.
.
true false. , , . true, . , .
:
 2 ;
 1 Unicode;
 0 ASCII.

:
 Write , ;
 WriteLine ;
 WriteBlankLines (

, ).
, ( 12.11).

288

12

:
 Read -

;
 ReadLine ;
 ReadAll ;
 Skip ;
 SkipLine .
12.11.
// JScript
var fso = new ActiveXObject("Scripting.FileSystemObject");
var file = fso.OpenTextFile("C:\\test.txt", 2, true);
file.Write(" !");
file.WriteBlankLines(2);
file.WriteLine("! !!!");


win.ini ( 12.12).
12.12.
// JScript
fso = new ActiveXObject("Scripting.FileSystemObject");
// .
//
file = fso.OpenTextFile("c:\\windows\\win.ini", 1, false);
// , run 2- ,
// ,
file.SkipLine();
// .
// ,
if (file.ReadLine()!="run=") {
WScript.Echo(" run !!!");
}

JavaScript

289

// .
else {
WScript.Echo("OK!");
}

Windows
win.ini run. , -
, - , . . , , run, , .
: ,
.

12.5.5.
, . ,
. - WSH WshNetwork, , ,
. ,
,
( 12.13).
12.13.
// WshNetwork JScript.
// WshNetwork
var WshNetwork = new ActiveXObject("WScript.Network");
// info
info = " : " + WshNetwork.UserName;
//
info = info + "\n";
//
info = info + " : " + WshNetwork.ComputerName;
info = info + "\n";

290

12

// ,
info = info + ": " + WshNetwork.UserDomain;
//
WScript.Echo (info);

Chap12\netinfo.js.

UserName, ComputerName
UserDomain WshNetwork
. ? ,
, , . , .
, ( 12.14).
12.14.
//
var buttonOKOnly = 0;
var iconInformation = 64;
var WSHShell = WScript.CreateObject("WScript.Shell");
var WSHNetwork = WScript.CreateObject("WScript.Network")
var colDrives = WSHNetwork.EnumNetworkDrives();

if (colDrives.length == 0)
{
WSHShell.Popup(" ",
0,
" WSHNetwork",
iconInformation + buttonOKOnly);
}
else
{

JavaScript
strMsg = " :

291
\n";

for (i = 0; i < colDrives.length; i += 2)


{
strMsg = strMsg + "\n" + colDrives(i) + "\t" + colDrives(i + 1);
}

WSHShell.Popup(strMsg,
0,
" WSHNetwork",
buttonInformation + iconOKOnly );
}

Chap12\netdrive.js.

, ,
, , . MapNetworkDrive RemoveNetworkDrive . :
WshNetwork.MapNetworkDrive("X:", "\\\\S2\\Vol1", "true", "User1", "123");

: , , , , .
(true false) ,
. ,
. ,
. . .
WshNetwork.RemoveNetworkDrive("X:", "true", "true");

.
true, ,
. .

292

12

12.5.6.
.
, , .
 EnumPrinterCollections

( ).
 AddPrinterConnection -

.
MapNetworkDrive, ,
(LPT1, ).
 RemovePrinterConnection (

).
 SetDefaultPrinter -

.
, (SetDefaultPrinter("\\\\Comp1\\HP1100");).
 AddWindowsPrinterConnections Windows

.

.

12.5.7.
WSH .
Wscript.Shell RegRead, RegWrite,
RegDelete. . , - , ,
. js (, registry.js)
( 12.15).
12.15.
// JScript
var WSHShell = WScript.CreateObject("WScript.Shell");
WSHShell.Popup(" ");

JavaScript

293

WSHShell.RegWrite("HKCU\\MyRegKey\\", "Primer");
WSHShell.Popup(" ");
WSHShell.RegWrite("HKCU\\MyRegKey\\String", 1);
WSHShell.Popup(" DWORD");
WSHShell.RegWrite("HKCU\\MyRegKey\\DWORD", 2, "REG_DWORD");
WSHShell.Popup(" ");
WSHShell.RegWrite("HKCU\\MyRegKey\\Binary", 3, "REG_BINARY");
WSHShell.Popup(" ");
WSHShell.RegDelete("HKCU\\MyRegKey\\String");
WSHShell.RegDelete("HKCU\\MyRegKey\\DWORD");
WSHShell.RegDelete("HKCU\\MyRegKey\\Binary");
WSHShell.Popup(" ");
WSHShell.RegDelete("HKCU\\MyRegKey\\");

Chap12\registry.js.

WSHShell .
, .
OK .
,
. , ,
. , ( <F5> ). , .
, HKEY_CURRENT_USER HKCU. . HKEY_LOCAL_MACHINE HKLM,
HKEY_CLASSES_ROOT HKCR. .

Internet Explorer
.
, , ,
.

294

12

. , ,
Internet Explorer ( 12.16).
12.16. Internet Explorer WSH
// Internet Explorer
var WshShell = WScript.CreateObject("WScript.Shell");

WshShell.RegWrite ("HKCU\\Software\\Microsoft\\Internet Explorer\\Main\\Window Title", " ", "REG_SZ")

WScript.Echo (" !")

// ,
//
// WshShell.RegDelete ("HKCU\\Software\\Microsoft\\Internet Explorer\\Main\\Window Title")

, Internet Explorer, Chap12\ie_title.js.


.
( 12.17).
12.17.
// ,
//
var WSHShell = WScript.CreateObject("WScript.Shell");
var msg

= " ?";

var titletext = " ";


var MyShortcut;
var MyDesktop;
var StartupPath;

JavaScript

295

var buttonOKCancel = 1;
var iconInformation = 64;
var selectCancel = 2;
showQuestion();
//
StartupPath = WSHShell.SpecialFolders("Startup");
//
MyShortcut =
WSHShell.CreateShortcut(StartupPath + "\\ .lnk");
//
MyShortcut.TargetPath =
WSHShell.ExpandEnvironmentStrings("%windir%\\system32\\calc.exe");
MyShortcut.WorkingDirectory =
WSHShell.ExpandEnvironmentStrings("%windir%\\system32");
MyShortcut.WindowStyle = 4;
MyShortcut.IconLocation =
WSHShell.ExpandEnvironmentStrings("%windir%\\system32\\calc.exe, 0");
MyShortcut.Save();
WScript.Echo(" ");
//
function showQuestion()
{
var result = WSHShell.Popup(msg, 7, titletext,
buttonOKCancel + iconInformation);
// ,
if (result == selectCancel)
{
WScript.Quit();
}
}

296

12

, , Chap12\
shortcut.js.


. .
, Windows
Startup, C:\Windows\ \\,
Windows. , Microsoft . - ,
SpecialFolders WshShell ( 12.18).
12.18. Windows
// Windows.
//
var WshShell = WScript.CreateObject("WScript.Shell");
strDesktop = WshShell.SpecialFolders("Desktop");
WScript.Echo(strDesktop);
//
strDesktop = WshShell.SpecialFolders("AllUsersDesktop");
WScript.Echo(strDesktop);
//
strDesktop = WshShell.SpecialFolders("Startup");
WScript.Echo(strDesktop);
//
strDesktop = WshShell.SpecialFolders("StartMenu");
WScript.Echo(strDesktop);

Chap12\specialfolder.js.

JavaScript

297

Windows
. , . ,
.
var WshShell = WScript.CreateObject("WScript.Shell");
WshShell.AppActivate("");

WshShell.AppActivate.
- . , .
, , , , . ,
. ., , Microsoft Word . , , ,
. , ,
, "".
SendKeys . ,
, ( 12.19).
12.19.
var WshShell = WScript.CreateObject("WScript.Shell");
KL = true;

while (KL)
{
if (WshShell.AppActivate(""))
{
WriteWord();
KL = false;
}
if (WshShell.AppActivate("Microsoft Word"))
{

298

12
WriteWord();
KL = false;

}
WScript.Sleep(10000);
}

function WriteWord()
{
WshShell.SendKeys("THE ");
WScript.Sleep(300);
WshShell.SendKeys("MATRIX ");
WScript.Sleep(300);
WshShell.SendKeys("HAS ");
WScript.Sleep(300);
WshShell.SendKeys("YOU...");
WScript.Sleep(300);
}

Chap12\sendkeys.js.


Microsoft Word , .
, , <Enter>, <Tab>, <F1>...<F12>, <Alt>, <Shift>, <Ctrl>
. . . 12.1
12.1.

<Backspace>

{BACKSPACE},
{BS} {BKSP}

<Break>

{BREAK}

<Caps Lock>

{CAPSLOCK}

<F1>...<F12>

{F1}...{F12}

<Delete>

{DELETE}
{DEL}

<End>

{END}

JavaScript

299

12.1 ()

<Enter>

{ENTER} ~

<Esc>

{ESC}

<Help>

{HELP}

<Home>

{HOME}

<Insert>

{INSERT}
{INS}

<Num Lock>

{NUMLOCK}

<Page Down>

{PGDN}

<Page Up>

{PGUP}

<Print Screen>

{PRTSC}

<Scroll Lock>

{SCROLLLOCK}

<Tab>

{TAB}

<>

{UP}

<>

{LEFT}

<>

{DOWN}

<>

{RIGHT}

<Alt>, <Shift>, <Ctrl>


(. 12.2).
12.2. <Alt>, <Shift>, <Ctrl>

<Shift>

<Ctrl>

<Alt>

<Shift>,
:
WshShell.SendKeys("+(ABC)");

:
WshShell.SendKeys("+ABC");.

, +, ^, % , . :
{+}, {%} . . ,
: +, ^, %, ~, (, ), {, }, [, ].

300

12

,
, . , :
WshShell.SendKeys("{A 100}");

<>. ,
. ,
Microsoft Word ( 12.20).
12.20. Microsoft Word

var WshShell = WScript.CreateObject("WScript.Shell");
KL = true;
while (KL) {
if (WshShell.AppActivate("Microsoft Word")) {
WriteWord();
KL = false;
}
WScript.Sleep(3000);
}
function WriteWord() {
WshShell.SendKeys("%{F4}");
WScript.Sleep(300);
WshShell.SendKeys("{TAB}");
WScript.Sleep(300);
WshShell.SendKeys("{ENTER}");
}

, ,
- ( 12.21).
12.21. Word
var WshShell = WScript.CreateObject("WScript.Shell");
KL = true;

JavaScript

301

while (KL)
{
if (WshShell.AppActivate("Microsoft Word"))
{
WriteWord();
KL = false;
}
WScript.Sleep(3000);
}

function WriteWord()
{
WshShell.SendKeys("%");
WScript.Sleep(300);
WshShell.SendKeys("{ENTER}");
WScript.Sleep(300);
WshShell.SendKeys("{DOWN}");
WScript.Sleep(300);
WshShell.SendKeys("{DOWN}");
WScript.Sleep(300);
WshShell.SendKeys("{DOWN}");
WScript.Sleep(300);
WshShell.SendKeys("{DOWN}");
WScript.Sleep(300);
WshShell.SendKeys("{ENTER}");
WScript.Sleep(300);
WshShell.SendKeys("test");
WScript.Sleep(300);
WshShell.SendKeys("{ENTER}");
}

, ,
, . ,
Spedia.net ,
, .
,

302

12

( , , , . .). Spedia , , .
,
, ,
.
, , . , , .

12.6. WMI
Windows Script Host
WMI, . WMI (Windows
Management Instrumentation)
Microsoft Windows,
. WMI ,
C#, Visual Basic . WMI
Windows, . , WMI
, .
, WMI,
(managed object). ( , , )
( , ). , WMI.
.

12.6.1.
-
,
.
, Win32_CodecFile. 12.22
.

JavaScript

303

12.22.
var wbemFlagReturnImmediately = 0x10;
var wbemFlagForwardOnly = 0x20;

var objWMIService = GetObject("winmgmts:\\\\.\\root\\CIMV2");


var colItems =
objWMIService.ExecQuery("SELECT * FROM Win32_CodecFile", "WQL",
wbemFlagReturnImmediately |
wbemFlagForwardOnly);

var enumItems = new Enumerator(colItems);


var infoList;

for (; !enumItems.atEnd(); enumItems.moveNext())


{
var objItem = enumItems.item();

infoList = ": " + objItem.Caption + "\r\n";


infoList = infoList + ": " + objItem.Extension + "\r\n";
infoList = infoList + " : " + objItem.Group + "\r\n";
infoList = infoList + ": " + objItem.Manufacturer +
"\r\n";
infoList = infoList + ": " + objItem.Version + "\r\n";
WScript.Echo(infoList);
}

Chap12\codecs.js.

12.6.2.
Windows Win32_QuickFixEngineering. 12.23 -

304

12

.
12.23.
// (Hot Fixes)
var wbemFlagReturnImmediately = 0x10;
var wbemFlagForwardOnly = 0x20;

var objWMIService = GetObject("winmgmts:\\\\.\\root\\CIMV2");


var colItems =
objWMIService.ExecQuery("SELECT * FROM Win32_QuickFixEngineering",
"WQL", wbemFlagReturnImmediately |
wbemFlagForwardOnly);

var enumItems = new Enumerator(colItems);


var infoList;

for (; !enumItems.atEnd(); enumItems.moveNext())


{
var objItem = enumItems.item();

infoList = ": " + objItem.Caption + "\r\n";


infoList = infoList + ": " + objItem.Description + "\r\n";
infoList = infoList + ": " + objItem.HotFixID + "\r\n";
WScript.Echo(infoList);
}

Chap12\hotfix.js.

12.6.3.
, , Windows Installer.

JavaScript

305

Win32_Product ( 12.24).
12.24.
// Windows Installer

var wbemFlagReturnImmediately = 0x10;


var wbemFlagForwardOnly = 0x20;

var objWMIService = GetObject("winmgmts:\\\\.\\root\\CIMV2");


var colItems =
objWMIService.ExecQuery("SELECT * FROM Win32_Product", "WQL",
wbemFlagReturnImmediately | wbemFlagForwardOnly);

var enumItems = new Enumerator(colItems);


for (; !enumItems.atEnd(); enumItems.moveNext())
{
var objItem = enumItems.item();

WScript.Echo("Caption: " + objItem.Caption);


WScript.Echo("Description: " + objItem.Description);
WScript.Echo("Identifying Number: " + objItem.IdentifyingNumber);
WScript.Echo("Install Location: " + objItem.InstallLocation);
WScript.Echo("Install State: " + objItem.InstallState);
WScript.Echo("Name: " + objItem.Name);
WScript.Echo("Package Cache: " + objItem.PackageCache);
WScript.Echo("SKU Number: " + objItem.SKUNumber);
WScript.Echo("Vendor: " + objItem.Vendor);
WScript.Echo("Version: " + objItem.Version);
WScript.Echo();
}

Chap12\installapp.js.

306

12

12.7. Silverlight
Microsoft Silverlight,
" Flash". . ,
.
Silverlight 1.0 2.0. 1.0,
JavaScript ( 2.0 .NET
Framework). Microsoft Silverlight
Web- , Windows Presentation Foundation (WPF) . "WPF/E". , Microsoft
, . Silverlight
Firefox Safari Mac OS X, Firefox
Internet Explorer Windows.
.

JavaScript. , Silverlight .
: Play, Stop, Pause.
Silverlight
XAML-, DOM .
Silverlight XAML JavaScript .
Silverlight,
.
, .
Silverlight ? Silverlight
: HTML-,
Silverlight, silverlight.js, XAML- JavaScript,
HTML-. Silverlight-,
. -,
Silverlight Silverlight 1.0 SDK. -

JavaScript

307

Adobe Flash. -,
HTML-.
. ( 12.25).
12.25. Silverlight-
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title> Silverlight</title>
<script type="text/javascript" src="Silverlight.js"></script>
<script type="text/javascript" src="createSilverlight.js"></script>
<script type="text/javascript" src="eventhandlers.js"></script>
</head>
<body>
<h2> Silverlight</h2>
<div id="mySilverlightPluginHost">
</div>
<script type="text/javascript">
var parentElement =
document.getElementById("mySilverlightPluginHost");
// Silverlight
createMySilverlightPlugin();
</script>
</body>
</html>

.
Silverlight.js, createSilverlight.js eventhandlers.js. silverlight.js JavaScript, Silverlight, Silverlight
. Silverlight.js -

308

12

Tools, Silverlight 1.0 SDK.


, HTML- silverlightdemo.htm. createSilverlight.js .
<body> , :
<div id="mySilverlightPluginHost">
</div>

id.
createSilverlight.js. ( 12.26).
12.26.
function createMySilverlightPlugin()
{
Silverlight.createObject(
"myxaml.xaml",

// Source property value.

parentElement,

// DOM reference to hosting DIV tag.

"mySilverlightPlugin",

// Unique plug-in ID value.

// Per-instance properties.
width:'640',

// Width of rectangular region of


// plug-in area in pixels.

height:'480',

// Height of rectangular region of


// plug-in area in pixels.

inplaceInstallPrompt:false, // Determines whether to display


// in-place install prompt if
// invalid version detected.
background:'red',

// Background color of plug-in.

isWindowless:'false',

// Determines whether to display plug-in


// in Windowless mode.

framerate:'24',

// MaxFrameRate property value.

version:'1.0'

// Silverlight version to use.

},
{
onError:null,

// OnError property value -// event handler function name.

JavaScript
onLoad:null

309

// OnLoad property value -// event handler function name.

},
null);

// Context value -- event handler function name.

} // End createMySilverlightPlugin

, . , , . .
, ,
eventhandlers.js ( head).
<script type="text/javascript" src="eventhandlers.js"></script>

, ,
myxaml.xaml , HTML-.

,
,
MouseLeftButtonDown="PauseVideo". eventhandlers.js
JavaScript-:
function PlayVideo(sender,args)
{
var mPlayer = sender.findName("mPlayer");
mPlayer.Play();
}
function PauseVideo(sender,args)
{
var mPlayer = sender.findName("mPlayer");
mPlayer.Pause();
}
function StopVideo(sender,args)
{
var mPlayer = sender.findName("mPlayer");
mPlayer.Stop();
}

, silverlightdemo.htm, ,

310

12

. , Silverlight
.
.

Chap12\SilverlightProject.
silverlightdemo.htm

12.8.
Windows Vista
Microsoft. Windows Vista
Windows. Windows Vista , ,
.
Windows Vista. , , , JavaScript. HTML CSS.
, , HTML-,
XML, , (JavaScript
VBScript) . gadget, ZIP-. ,
gadget- zip. , . JavaScript
Windows Vista.
,
.
" -
Windows Vista" "MSDN Magazine" 2007 ,
http://msdn.microsoft.com/ruru/magazine/cc163370.aspx. , , Windows Vista.
, Google , Windows Vista, Windows XP. JavaScript. .

13


, .

13.1.

, JavaScript: . , .
:
javascript:alert(document.lastModified)

<Enter> ,
Web-.
Mozilla Firefox. (. 11), , (bookmarklets).

13.1.1.
JavaScript ,
.
.
, , , Yandex.ru Sports.ru.

312

13


javascript:R=0; x1=.1; y1=.05; x2=.25; y2=.24; x3=1.6; y3=.24;
x4=300;y4=200; x5=300; y5=200;
DI=document.getElementsByTagName("img");DIL=DI.length; function
A(){for(i=0; i-DIL; i++){DIS=DI[ i ].style;DIS.position='absolute';
DIS.left=(Math.sin(R*x1+i*x2+x3)*x4+x5)+"px";DIS.top=(Math.cos(R*y1+i*y2+
y3)*y4+y5)+"px"}R++}setInterval('A()',50);void(0);

<Enter>, ,
.
, Chap13\chaos.txt.

13.2. Gmail mailto


mailto Firefox 3, , Windows (Windows Mail).
Firefox 3 , Gmail, . .
1. Gmail Firefox.
2. :
javascript:window.navigator.registerProtocolHandler("mailto","https://
mail.google.com/mail/?extsrc=mailto&url=%s","GMail")

Google Apps, (
example.com ):
javascript:window.navigator.registerProtocolHandler("mailto","https://
mail.google.com/a/example.com/mail/?extsrc=mailto&url=%s","GMail")

3. Firefox Gmail

mailto. Add Application.


4. , , Firefox 3 , -

. Gmail
Remember my choice for mailto links.
Gmail , Tools Options. Applications Search mailto. Applications Details. Gmail
Remove.

313

13.3.
, ( Internet Explorer):
<html>
<body>
<script language = "JavaScript">
<!-document.oncontextmenu = function(){return false;};
//-->
</script>
</body>
</html>

13.4.
, , :
<script language = "JavaScript">
function checkNumber(number1, number2)
// number1 -
// number2 -
{
if (number1 % number2) alert ('H ')
else alert ('');
}
checkNumber(102,3);

13.5. JavaScript Mozilla Firefox


Mozilla Firefox JavaScript.
, |
JavaScript. . -

314

13

. , . , :
1 + 1

.
.
, .

13.6. parseInt
parseInt :
var myvar = parseInt("09");
alert (myvar);

. , JavaScript , 0, .

:
var myvar = parseInt("09",10);
alert (myvar); //

13.7.

JavaScript toString(),
, :
var Age = 20;
var sAge = Age.toSring();
alert (Age + Age);
alert (sAge + sAge);

40,
(20 + 20). 2020,
. .

315

13.8.
prototype String, Date, Array . ,
String , (
<em> <strong>). ( 13.1).
13.1.
function Emphatic(bStrong)
{
var sEmTag = "em";
var sStrongTag = "strong";
var txt = this.toString();
var sTag = (bStrong) ? sStrongTag : sEmTag;
return "<" + sTag + ">" + txt + "</" + sTag + ">";
}
// String
String.prototype.em = Emphatic;

, Web-
, :
document.write(" !".em(false));
document.write(" !".em(true));

,
. , String fixed, bold, italics , . .
prototype ,
HTML- ( Web-
http://htmlcoder.visions.ru/JavaScript/?3).

13.9.
,
Web- http://htmlcoder.visions.ru. -

316

13

, ,
, ( 13.2).
13.2.
function showProperties(obj, objName)
{
var result = "";
for (var i in obj) //
result += objName + "." + i + " = " + obj[i] + "<br />\n";
document.write(result);
}

:
<input type="button" value=" navigator"
onClick="showProperties(window.navigator, 'navigator')">

13.10.
Internet Explorer 6.0 Windows XP
Service Pack 2, , , . , Microsoft Web. HTML- :
<!-- saved from url=(0014)about:internet -->

Web-
.


.
JavaScript, .
JavaScript ,
. .
!

318


A
API 266
ASCII-Art 159

I
Internet Explorer, 293

J
JavaScript, 29

Bookmarklets 238

K
kbTrainer, 277

Cookie 12
CSS 59, 235

M
F, G
Flip-flop 91
Google Map 266

H
HTA 271
271
HTML 6
271
HTML Help Workshop 278

MS Agent 183

R
RGB 69

S
Silverlight 306

320

W
Web-:
3
33

159

66
69, 70, 133
Windows Script Host (WSH) 280
280
WScript 281

99
103
, 20

44, 112
:
44
11, 15
36
38
72

11
51

310
-, 177

238
Whats 247
246
247
246
. 247
245
245
288
236
285
233

195
242
53, 82

:
149
146
153
152
155
:
128
143
95
127
81
84
156

277
, 75
302
:
alert 6
document.write 6
:
HTML 7
JavaScript 7
JavaScript 313
94
313
282
-, 198, 204

53, 82
121

, 219

321

35
Date 100
document 35, 69, 82
event 75, 226
navigator 11
select 52
Shell 273
status 40
title 44
window 35, 38, 99
21
143

140
166
:
283, 284
296
45
, 184
95
, 171
61
, 292
2000 100
313
:
285
304
- 171
315
, 215
, 209

123
30

322

:
Internet Explorer 248
Mozilla Firefox 259
292

289
- 85, 88, 130, 132
:
onChange 52
onClick 7, 40, 128
onMouseover 171
278
62
40
:
311
7

, 58
293
:
112
115
135
121
117
109
123
120
119
161
47
48
49
47

249
156
, 173
235
236
249
99

, 283

127
blendTrans 131
flipv 130
revealtrans 127
wave 130
:
checkVersion 26
getDays 107
getFullYear 101
getYear 101
indexOf 17
setMsg 114
setTimeout 115
split 138

288

, 18
35

:
115
:
149
146
153
152
155
252
161
121
117
:
128
143

323

140
166
109, 297
123
127
120
156
119

294

Оценить