JavaScript На Примерах. 2 Издание

-
-
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 JavaScript. . , .
.
, .
.
:
<script type = "text/javascript" language = "JavaScript">
,
:
<script>
...
</script>
, JavaScript, . , .
, . :
<head> </head>;
<body>;
.
JavaScript ;
. JavaScript
js. .
.
, . ?
. .
HTML1 (
<head> </head>). ,
( <body> </body>). . ,
onClick .
. :
//
alert(", !");
</script>
alert, .
. <body>
:
document.write(", !");
</script>
document.write .
", !" "
1
HTML (HyperText Markup Language) .
JavaScript
!" , ,
onClick. , .
alert.
1.4.
, Web-,
. <script>
HTML . JavaScript . ,
.
,
, .
.
HTML :
<!-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>
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>
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>
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-
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.
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.
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.
var msg=" ";
if (screen.width == 640 || screen.height == 480){

location=("640x480.htm");}
else if (screen.width == 800 || screen.height == 600){
20
else if(screen.width == 1152 || screen.height == 864){

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.
var W; //
var H; //
function checkSize()
{
if(document.all)
{
W = document.body.clientWidth;
H = document.body.clientHeight;
}
21
else
{
W = innerWidth;
H = innerHeight;
}
}
</script>
//
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
MSIE 5.01
MSIE 5.
0 Internet Explorer 5
MSIE 5.0b1
Internet Explorer 5 (pre-release)
MSIE 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).

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
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
// 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
}
else
</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
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>
// , 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>
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>
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>
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;
}
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.
//
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>
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>
// ,
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.
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>
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>
</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>





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[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)">
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>
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>
/*
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=". ">. </option>
58
3
<option value=". --">. --</option>
<option value=". ">
. </option>
</select>
:
<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>
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>
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).
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).

<!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(), .
.
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>
A.noLink
{
color: black; text-decoration: none
}
</style>
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>
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>
//
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)"
(h1, p, td)
.
. , </p>
onmouseout="setDefaultColor(this)"> p ().
,
<p> </p></p>
</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></tr>
<tr>
onmouseout="setDefaultColor(this)"
width="50%"> </td>
</td></tr>
</table>
<ul>
<li onmouseover="setRandomColor(this)"
</li>
<li> </li>
</ul>
</body>
</html>
, , Chap03\changecolor.htm.
3.16.
Internet Explorer .
, , Web-.
( 3.29).
3.29.
<html>
<head>
73
<title> </title>
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).
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).

document.onkeyup = checkKeysFF;
function checkKeysFF(e)
{
var KeyID = e.keyCode;
switch(KeyID)
{
case 16:
break;
case 17:
break;
case 18:
break;
case 37:
break;
case 38:
break;
case 39:
break;
78
3
case 40:
break;
}
}
</script>
,
( 3.35).
3.35.
document.onkeyup = checkKeys;
// IE FF
function checkKeys(e)
{
var KeyID = (window.event) ? event.keyCode : e.keyCode;
switch(KeyID)
{
case 16:
break;
case 17:
break;
case 18:
break;
case 37:
break;
case 38:
break;
79
case 39:
break;
case 40:
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.
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>
// ,
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]">
curImage msg.
.
showImage. , . ,
curImage . ,
.
,
:
Web- ( Image, , JavaScript), .

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

.
, -, Chap04\
slideshow.htm.
89
, . , ( 4.6).
4.6. -
<html>
<head>
<title>- 2</title>
// ,
msg = new Array(" ",
" ",
" ",
" ");
//
curImage = -1;
aLength = msg.length;
// - (5 )
var delay = 5000;
// setTimeout
var curTimeout;
function showImage(direction)
{
{
curImage = curImage + direction;
if (curImage < 0)
{
curImage = aLength - 1;
}
90
4
{
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>
<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>

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>
//
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>
</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.
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>
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.

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.

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.
<!-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>
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>

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
, :
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>
//
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>
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>
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>
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>
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>
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>
// <![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
//
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

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>
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

****************************/
var rainbow, raintxt, raincnt = 0;
window.onload = function()
{
{
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.
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>

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.
:
img
{
filter: blendTrans(duration=3.0);
}
</style>
, <img>
blendTrans duration,
, . .
JavaScript.
aImages, . ,
-. new Image,
Image :
aImages[0] = new Image();
aImages[0].src = "cat0.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>
img
{
filter: blendTrans(duration=3.0);
}
</style>
var aImages = new Array(2);
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>
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>
.texttail
{
color:#00ff00;
position:absolute;
visibility:visible;
top:-50px;
font-size:large;
font-family: monospace, san-serif;
font-weight:bold;
}
</style>
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);
}

{
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,
:
{
xpos[i] = -50;
ypos[i] = -50;
}
, :
{
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++)
{
}
updateText 30 :
setTimeout("updateText()",30)
:
{
document.write("<span id='span"+i+"' class='texttail'>");
document.write(msg[i]);
}
:
:
<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">




//
function checkBrowser()
{
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>
#fly
{
position: absolute;
top: 0; left: 0;
}
</style>
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>
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">');
}
</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>
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++)
{
}
//
}
// span0 span9
for (i=0;i< 9;i++)
{
document.write("<span id='span"+i+"' class='ballstyle'>");
document.write('<img src="ball.gif">');
}
</script>
</head>
<h3> . </h3>
</body>
</html>
Chap07\ball2.htm.
151
152
7.7.3.
.
( 7.10).
7.10.
<html>
<head>
<title> </title>
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;
// moveBall()
</script>
</head>
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>
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('ball2').style.top = y2;
document.getElementById('ball2').style.left = x2;
}
// moveBall()
</script>
</head>
<h1> </h1>
<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>
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('ball2').style.top = y2;
document.getElementById('ball2').style.left = x2;
}
// moveBall()
</script>
</head>
<h1> </h1>
<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>
157
158
7
{
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>
.matrix
{ width:11px; font:11pt Lucida Console, Courier, monospace;
162
7
text-align:center; padding:0px; background-color:#000
}
</style>
// <![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.. *
\***************************/
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()
{
{
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";
}
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;
}
}
// ]]>
</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>
// " " 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
{
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;
{
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>
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)
{
}
if (flag == 3)
{
}
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">
.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 >

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> </TD></TR></TBODY></TABLE>
</TD></TR>
<TR>
<TD id=sym vAlign=center align=middle
width="100%"></TD></TR></TBODY></TABLE>

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>
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>
<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>
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>
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>
<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>
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>
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>
<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>
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>
</tr>
<tr>
<td><img src="empty.gif" name="pole3" onClick="fillPlace(3)"
width=64 height=64></td>
</tr>
<tr>
</tr>
</table><br>
© cadaber, Jun 1999.
</body>
</html>
.
, , ,
. ,
onClick <td> :
200
10
. 10.1. -
onClick ,
.
fillPlace. ,
,
. drawCross drawZero ( 10.3).
10.3.
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;
}
function drawZero(value)
{
if (value == 0) document.pole0.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;
}
JavaScript
function startGame()
{
for (i=0; i<9; i++) cell[i] = 0;
document.pole0.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;
{
alert(" . .");
203
204
10
startGame();
}
}
}
, : checkVictory
startGame, fillPlace. .
checkVictory . - :
( ),
( )
( ).
.
startGame , .
.

. . -,
, -,
.
. .
. , .
, , ,
.
,
checkDraw, playComp fillPlace,
( 10.5).
10.5. -
<html>
<head>
JavaScript
<title>-</title>
H2,p {color:"#00ff00"; text-align:center}
</style>
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) {
}
function drawZero(value) {
205
206
10
}
function checkVictory()
{
}
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;
JavaScript
207
}
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;


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;
{
alert(" . .");
startGame();
}
else
{
checkDraw();
playComp();
checkDraw();
}
}
}
</script>
</head>
<body background="grid.gif">
<h2>-</h2>
<p>
<table border=0 cellspacing=0>
<tr>
JavaScript
209

</tr>
<tr>
</tr>
<tr>
</tr>
</table><br>
© cadaber, Jun 1999.
</body>
</html>
, -,
Chap10\Games\Xo\xo.htm.
10.3.
- , . ,
210
10
,
, . , ( 10.6).
10.6.
<html>
<head>
<title></title>
#copyright
{
color: #00ff00;
text-align:center;
}
</style>
//
var cellImage = 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;
}
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);
}
cell[value+4]==0)
{
cell[value] = 0;
cell[value+4] = 1;
swapImage(value,value+4);
}
cell[value-1]==0)
{
cell[value] = 0;
cell[value-1] = 1;
swapImage(value,value-1);
}
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>
</tr>
<tr>
</tr>
<tr>
214
10
<td><img src="s10.jpg" NAME="img10" onClick="Move(10)"
</tr>
<tr>
</tr>
</table>
<center>
<br>
<input type="button" value=" "
onClick="mixPictures()">
<hr>
<p id="copyright">© 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>
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>
JavaScript
221

</td>
<td width=59>
</td>
<td width=59>
</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.
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_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";
B1.style.backgroundColor = "white";
JavaScript
B1.style.display = "inline";

}
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;
//
}
230
10
,
display "none". RemoveButtons
objButton objSaved. objSaved null, . 0.
, .
:
, 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>
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, :
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>
// 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)
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)

var i=w.length,
s=w.document.getSelection();
while (i--)
s+=$(w[i]);
return s;
}
alert($(this));
11.7. ( Internet Explorer)

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, .

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>
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>
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>
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™</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.

,
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>
initHighlightingOnLoad();
</script>
default.css highlight.js. ,
, .
,
, . JavaScript, CSS HTML, :
initHighlightingOnLoad('html','css', 'javascript');
</script>
highlight.js , , "" ,
, .
readme.rus.txt,
hightlight.js.
, ( 11.23).
<pre><code>...</code></pre>,
264
11
11.23.
<pre><code>
<head>
<title> JavaScript</title>
<style>
body
{
width: 500px;
}
</style>
<body>
//
alert(", !");
function someFunction()
{
return true;
}
</script>
<p class="something">- </p>

<p>Something</p>

<p> </p>
<p> </p>
</body>
</code></pre>
, (<)
<.
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&v=2&key=ABQIAAAAETsL6XtuzKfCKbuORwcr2RQa_bGzbHjP9x6wL35n
TSX2kPnpuBQeooyCYzT2Z-xZVuq6Yoz3h5zKkw" type="text/javascript"></script>
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&v=2&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>
, !
alert(" HTA");
</script>
</body>
</html>
, (ICON)
(SINGLEINSTANCE).
<HTA:APPLICATION> Web- http://msdn.microsoft.com.
HTA- HTML-,
:
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>
// 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 />
onClick="showRun();"> </button>
<br />
onClick="showShutdownDialog();"> </button>
<br />
onClick="showFindDialog();"> </button>
<br />
onClick="showTimeDialog();"> </button>
<br />
onClick="runApplet();"> </button>
<br />
onClick="exploreFolder();"> </button>
<br />
onClick="selectFolder();"> </button>
<br />
onClick="openFolder();"> </button>
<br />
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");
fc = f.SubFolders;
fc.Add("NewFolder");
JavaScript
285
,
, .
. - Files. , ,
( 12.9).
12.9. C:\
var fso, f, f1, fc, s;

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
// .
//
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 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
WSHShell.Popup(" ");
JavaScript
293
WSHShell.RegWrite("HKCU\\MyRegKey\\", "Primer");
WSHShell.RegWrite("HKCU\\MyRegKey\\String", 1);
WSHShell.Popup(" DWORD");
WSHShell.RegWrite("HKCU\\MyRegKey\\DWORD", 2, "REG_DWORD");
WSHShell.RegWrite("HKCU\\MyRegKey\\Binary", 3, "REG_BINARY");
WSHShell.RegDelete("HKCU\\MyRegKey\\String");
WSHShell.RegDelete("HKCU\\MyRegKey\\DWORD");
WSHShell.RegDelete("HKCU\\MyRegKey\\Binary");
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 msg
= " ?";
var titletext = " ";

var MyShortcut;
var MyDesktop;
var StartupPath;
JavaScript
295
var buttonOKCancel = 1;
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.
//
strDesktop = WshShell.SpecialFolders("Desktop");
WScript.Echo(strDesktop);
//
strDesktop = WshShell.SpecialFolders("AllUsersDesktop");
//
strDesktop = WshShell.SpecialFolders("Startup");
//
strDesktop = WshShell.SpecialFolders("StartMenu");
Chap12\specialfolder.js.
JavaScript
297
Windows
. , . ,
.
WshShell.AppActivate("");
WshShell.AppActivate.
- . , .
, , , , . ,
. ., , Microsoft Word . , , ,
. , ,
, "".
SendKeys . ,
, ( 12.19).
12.19.
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

KL = true;
while (KL) {
if (WshShell.AppActivate("Microsoft Word")) {
WriteWord();
KL = false;
}
}
function WriteWord() {
WshShell.SendKeys("%{F4}");
WScript.Sleep(300);
WshShell.SendKeys("{TAB}");
WScript.Sleep(300);
WshShell.SendKeys("{ENTER}");
}
, ,
- ( 12.21).
12.21. Word
KL = true;
JavaScript
301
while (KL)
{
if (WshShell.AppActivate("Microsoft Word"))
{
WriteWord();
KL = false;
}
}
function WriteWord()
{
WshShell.SendKeys("%");
WScript.Sleep(300);
WScript.Sleep(300);
WshShell.SendKeys("{DOWN}");
WScript.Sleep(300);
WScript.Sleep(300);
WScript.Sleep(300);
WScript.Sleep(300);
WScript.Sleep(300);
WshShell.SendKeys("test");
WScript.Sleep(300);
}
, ,
, . ,
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 colItems =
objWMIService.ExecQuery("SELECT * FROM Win32_QuickFixEngineering",
"WQL", wbemFlagReturnImmediately |
wbemFlagForwardOnly);

var infoList;

{
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 colItems =
objWMIService.ExecQuery("SELECT * FROM Win32_Product", "WQL",
wbemFlagReturnImmediately | wbemFlagForwardOnly);

{
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>
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)
{
mPlayer.Pause();
}
function StopVideo(sender,args)
{
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>
<!-document.oncontextmenu = function(){return false;};
//-->
</script>
</body>
</html>
13.4.
, , :
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- :

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

JavaScript На Примерах. 2 Издание

Загружено:

Сведения о документе

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

JavaScript На Примерах. 2 Издание

Загружено:

Авторское право:

Доступные форматы

-

02429 24.07.00. 30.09.08.

HTML (HyperText Markup Language) .

. : Internet Explorer, Mozilla Firefox Opera.

. 2.1. Internet Explorer

. 2.2. Mozilla Firefox

2.2. , Internet Explorer

'<br />' + navigator.onLine +

, Mozilla Firefox ( 2.3).

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

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

zilla 4.0 ( Internet Explorer

Internet Explorer 7.0

Internet Explorer 7 (Beta 1)

Microsoft Internet Explorer 6

Internet Explorer 6 (pre-release)

Internet Explorer 5.5

Internet Explorer 5.01

Internet Explorer 5 (pre-release)

Internet Explorer 4.01

Windows Server 2003; Windows XP x64

Windows 2000, Service Pack 1 (SP1)

Microsoft Windows NT 4.0

Windows 98; Win 9x 4.90

Windows Millennium (Windows ME)

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

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

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

msg = " Internet Explorer.";

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

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

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]

.NET Framework, , , .NET

, Mozilla Firefox, . . userAgent Service Pack 2!

, Internet Explorer 4.0 .

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

, Macromedia Flash, Web-

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

open document window.open. ,

<p> ( )<br />

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

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

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

var aCurrHouseValues = getHouseValuesByStreet(index);

CSS1 JavaScript ( 3.21).

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

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

, Web Internet Explorer, Chap03\links.htm.

Internet Explorer. Mozilla Firefox ( 3.25).

Mozilla Firefox Chap03\

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

. 3.4. , Visual Basic 6.0

function toggleRadioButton(Field, Value)

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

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

Mozilla Firefox . ( 3.34).

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

<input type="button" value=" "

0 100. Mozilla Firefox

(c) 2003-5 mf2fm web-design

(c) 2003-5 mf2fm web-design