Javascript

. .
scanned & converted to PDF

by BoJloc

2000

. .
JavaScript
.. -,

__
. ,
Web-
. ,
. , Web-,
HTML HTML-. , , .
12 .
HTML
JavaScript .
,
,
.
,
JavaScript .
, , JavaScript. JavaScript.

, JavaScript.
, .
JavaScript .
, ,
JavaScript .
(812) 567-70-25,
(044) 559-27-40
9 7 9 5 7 9 3 101263
ISBN 5-7931-0126-8
WWW.NIT.ALFACOM.NET
: ..
: ..
: ..
..
(-), 2000
(), 2000
, 065007 18 1997 .
198005, -, ., 29
11.08.2000. 70x100
. . 8 . .
5 000 . 1046.
-
, .
198005, -, ., 29.

1.
JavaScript?
JavaScript , Java!
, JavaScript?
JavaScript HTML-
, JavaScript

2.
HTML
JavaScript
location-object
3.
4.
5.
7.
28

,
VRML-
6.
18

JavaScript

, JavaScript
13
JavaScript
Date
Array
JavaScript 1.0
Math
38
45
53
4
8.
62
9.

JavaScript

71
10.
81
11. JavaScript 1.2

Event ()

96
12.
?
Mouse JavaScript 1.2
MouseDown, MouseMove MouseUp
107
, , JavaScript

Applet
Array
document
Form
Frame
window
Layer
118
128
JavaScript?
JavaScript , Java!
, JavaScript?
JavaScript HTML-
, JavaScript
JavaScript?
JavaScript ,
Netscape. JavaScript
web- .
, , , .
JavaSript . ,
, JavaScript, , , , .
JavaScript , Java!
, JavaScript ,
Java, . .
, ,
JavaScript Java ,
.
, JavaScript?
, -, JavaScript? , JavaScript.
, , Netscape Navigator 2.0
Microsoft Internet Explorer 3.0 . ,
, JavaScript
web-. ,
HTML , web-.
Java Script
JavaScript HTML-
JavaScript
HTML-. , ,
HTML-.
<html>
<body>
<br>
HTML
<br>
< s c r i p t language="JavaScript">
document.write(" J a v a S c r i p t ! " )
</script>
<br>
HTML.
</body>
</html>
HTML-. , :
d o c u m e n t . w r i t e ( " J a v a S c r i p t ! " )
</script>
,
JavaScript. , ,
HTML-, . ,
HTML-
JavaScript.
, :
HTML-.
JavaScript!
HTML.
, - , HTML .
, JavaScript HTML-
<script> </script>.
, , JavaScript. document.write()
JavaScript. document.write() , - , , HTML. , JavaScript
JavaScript!
HTML-.
JavaScript
,
JavaScript? ,
JavaScript, <script>. , , .
,
JavaScript, HTML-.
, .
JavaScript ,
. .
:
<html>
<body>
<br>
HTML-.
<br>
<script language="JavaScript">
<!
document.write(" JavaScript")
// ->
</script>
<br>
HTML.
</body>
</html>
JavaScript, :
HTML-.
HTML.
JavaScript
, , JavaScript,
:
HTML-.
document.write(" JavaScript!")
HTML.
, JavaScript
, .
-
HTML-.
-, HTML-,
"".
, JavaScript.
Java Script
JavaScript
. , .
, , Click.
HTML-, MouseOver.
. ,
JavaScript .
event-handlers. , , . Click.
Event-handler, , ,
lick. , . , ,
lick.
<form>
<input type="button"
</form>
value="
" onClick="alert('-')">
. , .
, .
HTML, .
onClick="alert('-')" ,
<input>.
, ,
. Click, lert('-').
. JavaScript. , <script>.
alert() .
, '-'.
.
'-', .
, , , . document.write()
", , alert(), ' ? , , .

onClick="alert('-')". onClick="alert('-')",
, onClick, .
, ,
, ,
.
, : onClick='alert('-')'.
. , .
, .
Netscape Navigator,
JavaScript alert,
JavaScript. .
prompt().
, ,
.
,
, .
, , .
.
JavaScript . ,
, .
:
<html>
<!- hide
document.write("
!<br>");
document.write("
JavaScript!<br>");
document.write("
!<br>");
document.write("
JavaScript!<br>");
document.write("
!<br>");
document.write("
JavaScript!<br>");
// ->
</script>
</html>
:
!
JavaScript!
. ?
.
.
Java Script
10
<html>
<!- hide
function myFunction() {
document.write("
!<br>");
document.write(" JavaScript!<br>") ;
}
myFunction();
myFunction() ;
myFunction() ;
// ->
</script>
</html>
,

. :
function myFunction() {
document.write(" !<br>") ;
document.write(" JavaScript!<br>");
}
, {}, , myFunction(). ,
document.write() ,
11
.
,
myFunction() , .
, .. .
.
, .

. :
<html>
<head>
<!- hide
function calculation() {
var x= 12;
var y= 5;
var r e s u l t - x + y;
a l e r t (result) ;
}
/ / ->
</script>
</head>
<body>
<form>
<input type="button" value-'' "
onClick="calculation()">
</form>
</body>
</html>
, ,
, " "
12
Java Script
calculation().
x,
result.
var. ,
, ..
var r e s u l t = x + ; ,
result
, + ( . . 5 + 12).
result
17. alert (result)
alert{17). , 17.
JavaScript
location-object
JavaScript
, Web-,
JavaScript , .
. . ,
, HTML-. , , ,
. HTML-:
<html>
<head>
<title>My homepage</title>
</head>
<body
bgcolor=#ffffff>
<center>
<img src="home.gif" name="pic1" width=200 height=100>
</center>
<p>
<form name="myForm">
Name :
<input type="text" name="name" value=""><br>
e-Mail:
<input type="text" name="email" value=""><br><br>
<input type="button" value="Push me" name="myButton"
onClick="alert('Yo' ) ">
</form>
<p>
<center>
<img src="ruler.gif" name="pic4" width=300 height=15>
<P>
<a href="http://www.chat.ru/~llmm"> </>
</center>
</body>
</html>
14
Java Script
:
, , .
JavaScript , window.
, ,
. window HTML-
( , HTML-).
HTML- document.
document HTML-,
. JavaScript,
. , ,
document .
, , HTML, document. ,
HTML-, , , , document. , HTML-.
HTML-
name=
15

. ,
. . , , HTML, , .
, .
, , , , document.
images[0]. ,
JavaScript,
document.images[0]. , , ,
, ,
, .
,
.
, ,
document.forms[0].element[0]. , ,
? , ,
, JavaScript.
,
, value, .. . , value,
, .
, :
document.forms[0].elements[0].value;
, , name. . , , :
alert(", " + name).
'', ' , '.
16
Java Script
, ,
. ,
, document.forms[3].elements[17] document.forms[2].elements[18].
, , .
. ,
JavaScript,
.
Name:
<input type="text" name="name" value=""><br>
name=
name=
forms[0]
Form. elements[0] you ,
,

<input>, .

document.forms[0].elements[0].value;
:
document.myForm.name.value;
, ,
. , , myForm , myform.
JavaScript
, , .
. , . , :
<input t y p e = " t e x t " name="input" v a l u e = " * * ** **">
<input type="button" value="Write"
onClick="docurnent .myForm. i n p u t . value= ' ' ; ">
onClick
<input>.
HTML-
17
location-object
-, JavaScript -.
, , , . .
HTML-, . . HTML-.
, http://www.somehost.ru/page.html,
location.href ,
. , location.href
. , ,
, .
<form>
<input type=button value="Yahoo"
onClick="location.href='http://www.yahoo.com'; ">
</form>

JavaScript

, .
HTML-, , , , .
, , .
, -
, . , "" frames.

, ,
, ,
JavaScript. He , ,
.
,
JavaScript.
.
,
. , ,
HTML-. ,
Netscape,
Microsoft.
,
HTML, . , , ,
<frameset> <frame>. ,
19
, HTML :
<html>
<frameset
rows="50%,50%">
<frame s r c = " p a g e 1 . h t m " name="frame1">
< frame s r c = " p a g e 2 . h t m " name="frame2">
</frameset>
</html>
. <frameset> rows, a rows . ,
, .
page1.htm, page2.htm.

HTML-
, rows <frameset> ls.

"50%,50%" .
,
, 100%,
, % .
,
name <frame>.
. JavaScript.
Java Script
20
<frameset>,
. :
<frameset cols="50%,50%">
<frameset rows="50%,50%">
<frame src="cell.htm">
</frameset>
<frameset rows="33%,33%,33%">
</frameset>
</frameset>
, :

border .<frameset>. border = 0,
, , .
21
JavaScript
, JavaScript
, .
, , .
, web-
. .
:
.
. ,
.
frame1 frame2. ,
.
.
, ,
, , . , . ,
, , .
:
;
;
.
( ) frame1 and frame2. ,
() .
, , ( ), .. ,
, -
22
Java Script
, ,
. , :
f r a m e 2 . d o c u m e n t . w r i t e (" . " ) ;

. , ,
, .
, ,
, .
, .

parent () . ,
, URL, location.href. , ,
.

, .
, :
parent.location.href= " h t t p : / / . . . " ;
23
,
. - ,
? , page1.htm, ,
.

. ,
frame1 ,
frame2 page1.htm,
" " .
frame2,

parent. , , , , :
p a r e n t . f r a m e 2 . d o c u m e n t . w r i t e ( " f r a m e 1 . " ) ;
Java Script
24

, .
,
. -
, ,
. :
Navigationbar
, . , .
frames3.htm:
<html>
<frameset rows="80%, 20%">

<frame src="start.htm" name="main">
<frame src="menu.htm" name="menu">
</frameset>
</html>
start.htm ,
, MAIN.
.
, MENU, menu.htm.
25
menu.htm:
<html>
<head>
<!- hide
function load(url)
{
parent.main.location.href= u r l ;
}
/ / ->
</script>
</head>
<body>
<a
href="javascript:load('first.htm')">first</a>
<a href="second.htm" target="main">second</a>
<a href="third.htm" target="_top">third</a>
</body>
</html>
,
MAIN. load(). , ?
<
href="javascript:load('first.htm')">first</a>
-, JavaScript, ,
. 'first.htm' . load(). load() :
function l o a d ( u r l ) {
parent.main.location.href= url;
}
" "
Java Script
26
url, ,
"first1.htm" url. load()
.
target. ,
JavaScript,
HTML. . ,
parent .
,
JavaScript, HTML.
, , target. load(),
parent.location.href= url .
" "
. ,
. target
. ,
. JavaScript ,
, , .

. ,
target, JavaScript " ".
, ,
frame1, frame2 u frame3. ,
frame1.
27
frame2 frame.
JavaScript:
function loadtwo () {
parent.framel.location.href=
"first.htm";
parent.frame2.location.href= "second.htm";
}
" ".
,
, . url1 url2.
function loadtwo(urll, url2) {
parent.framel.location.href= u r l 1 ;
parent.frame2.location.href= url2;
}
,
: loadtwo("first.htm", "second.htm")
Ioadtwo{"third.htm", "forth.htm"). , ,
.
4
,
JavaScript

,
VRML-

JavaScript .
JavaScript .
HTML-,
, ,
. ,
.

HTML-.
<html>
<head>
< ! - hide
function openWin()
{
myWin= open("page.htm");
}
/ / ->
</script>
</head>
<body>
<form>
<input type="button" value=" "
onClick="openWin()">
</form>
</body>
</html>
page.htm n().
29
, " "
. , ,
,
.
.
, 400x300.
, .
<html>
<head>
<script
language="JavaScript">
<! hide
function openWin2()
{
myWin= open("page.htm",
"newWindow",
"width=400,height=300,status=no,toolbar=no,menubar=no");
}
/ / ->
</script>
</head>
<body>
<form>
<input type="button" value=" 400x300"
onClick="openWin2() ">
</form>
</body>
</html>
Java Script
30
, " 400x300"
window,
"width=400,height=300,status=no,toolbar=no, menubar=no".
, .
window ( )
, ( ).
directories
yes\no
height

location
yes\no
menubar
yes\no
resizable
yes\no
scrollbars
yes\no
status
yes\no
toolbar
yes\no
31
window JavaScript 1.2 .

alwaysLowered
alwaysRaised
dependent
hotkeys
innerWidth
innerHeight
outer Width
outerHeight
screenX
screenY
titlebar
z-lock
yes\no
yes\no
yes\no
yes\no

yes\no
yes\no
.
JavaScript.
.

open :
myWin= o p e n ( " p a g e . h t m " , "newWindow",
"width400,height=300,status=no, toolbar=no,menubar=no");
<
: "
?" open .
, target. , target. .
h r e f = " p a g e . h t m l " target="newWindow">
. , ..
, Win . myWin .

JavaScript, .. JavaScript,
. ( newWindow)

.
32
Java Script

JavaScript . close(). , ,
:
<html>
<!- hide
function closeIt() {
close ();
}
// ->
</script>
<center>
<form>
<input type=button value="3 " onClick="closeIt()">
</form>
</center>
</html>
, .
, " "
open() close() ,
window. , ,
window.open() window.close(), open() close().
window ,
window (..
window)
window. ( window).
33
,
JavaScript
, .
on-the-fly .
, JavaScript
HTML-.
, ,
, VRML- . ,
.
HTML-
. , .
<html>
<head>
<!- hide
function openWin3() {
myWin= open("", "newWindow",
"width=500,height=400,status=yes,toolbar=yes,menubar=yes");
//
myWin.document.open() ;
//
myWin.document.write("<html><head><title>On-the-fly");
myWin.document.write ("</title></headxbody>") ;
myWin.document.write("<center><font size=+3>");
myWin.document.write(" HTML- ") ;
myWin.document.write(" JavaScript!");
myWin.document.write ("</font></center>") ;
myWin.document.write("</body></html>");
// ( !)
myWin.document.close() ;
34
Java Script
"On-the-fly"
winOpen3().
. "" . ,
URL. , JavaScript .
myWin.
.
{newWindow). , ,
myWin.document.open ( ) ;
n(), document.
, n() window!
,
. document.open() myWin
, .
.
//
myWin . document.write ("<html><head><title>On-the-f ly" ) ;
myWin.document.write ("</title></head><body>" ) ;
myWin.document.write ("<center><font size=+3>") ;
myWin.document.write(" HTML- ") ;
myWin.document.write(" J a v a S c r i p t ! " ) ;
myWin.document. write ("</font></center>") ;
myWin.document.write("</body></html>");
35
, ,
HTML-. HTML-.
, HTML. .
.
// ( !)
myWin.document.close() ;
, . , ,
frame 1 frame2, ,
frame2, frame1
.
parent.frame2.document.open() ;
p a r e n t . f r a m e 2 . d o c u m e n t . w r i t e ( " HTML ") ;
parent.frame2.document.close() ;
Java Script
36
VRML-
JavaScript
VRML, .
VRML (Virtual Reality Modelling Language).
.
VRML plug-in. , -.
.
<html>
<head>
< ! - hide
f u n c t i o n vrmlScene()
{
vrml= o p e n ( " " , "newWindow",
"width=500,height=400,status=yes,toolbar=yes,menubar=yes");
//
vrml.document.open{"x-world/x-vrml");
vr= v r m l . d o c u m e n t ;
// VRML-
vr.writeln("#VRML V1.0 a s c i i " ) ;
/ /
vr. write("Separator { DirectionalLight { " ) ;
v r . w r i t e ( " d i r e c t i o n 3 -1 -2.5 } " ) ;
/ /
v r . w r i t e ( " P e r s p e c t i v e C a m e r a { p o s i t i o n - 8 . 6 2 . 1 5.6 ") ;
v r . w r i t e ( " o r i e n t a t i o n -0.1352 - 0 . 9 8 3 1 - 0 . 1 2 3 3 1.1417 ") ;
v r . w r i t e ( " f o c a l D i s t a n c e 10.84 } ") ;
/ /
v r . w r i t e ( " S e p a r a t o r { M a t e r i a l { d i f f u s e C o l o r 0 0 1 } ") ;
vr.write ("Transform { translation -2.4 .2 1 rotation 0 0.5 1 .9 } ") ;
v r . w r i t e ( " C u b e { } } }") ;
// ( !)
vrml.document.close ();
}
/ / ->
</script>
</head>
<body>
<form>
< i n p u t t y p e = b u t t o n value="VRML
onClick="vrmlScene ()">
</form>
</body>
</html>
on-the-fly"
37
.
. ,
. :
//
vrml.document.open("x-world/x-vrml");
.
"x-world/x-vrml" ? MIME- .
,
. ,
"text/html", MIME-
HTML-.
3D vrml.document.write(). , vr= vrml.document.
vr.write() vrml.document.write().
VRML-:
#VRML V1.0 a s c i i
Separator {
D i r e c t i o n a l L i g h t { d i r e c t i o n 3 -1 - 2 . 5 }
PerspectiveCamera {
p o s i t i o n - 8 . 6 2 . 1 5.6
o r i e n t a t i o n - 0 . 1 3 5 2 - 0 . 9 8 3 1 - 0 . 1 2 3 3 1.1417
focalDistance
10.84
}
Separator {
Material
{
diffuseColor 0 0 1
}
Transform {
translation - 2 . 4 . 2 1
r o t a t i o n 0 0.5 1 .9
}
Cube { }
}
}
document.write().
, VRML-
. ,
, .

JavaScript , ( " " " " ,
).
.
, window.status , .
.
:
<html>
<head>
<script
< ! - hide
function s t a t b a r ( t x t )
{
window.status = t x t ;
}
/ / ->
</script>
</head>
<body>
<form>
<input type="button" name="look" value=
!"
o n C l i c k = " s t a t b a r ( ' , !');">
<input type="button" name="erase" value=
!"
onCiick="statbar (' ' ) ; ">
</form>
</body>
</html>
39
" " , , : " ,

!"
.
statbar(). " !"
:
s t a t b a r (' , ! ' ) ;
' '.
.
statbar() :
function s t a t b a r ( t x t ) {
window.status = t x t ;
}
txt, .
, ,
, txt.
.
,
.
txt, .. ,
,
window.status = txt.
window.status .

. URL-
, .
Java Script
40
,
.
, .
.
< href="dontclck.htm"
onMouseOver="window.status='He !'; return t r u e ; "
onMouseOut="window.status=";"></>
" !"
, , ,
onMouseOver onMouseOut. " !"
, , .
, ,
onMouse, return true. ,
.
, ,
, URL.
return true, ,
, ..
" !", URL .
"", .
return true.
onMouseOut JavaScript 1.0. Netscape Navigator 2.x , ,
. ,
Unix, ,
41
, , onMouseOut.
Windows
. ,
Netscape Navigator 2.x Windows.
, , ,

.

. .
.
,
. . "
", 4 .
" "
: " ! !"
Java Script
42
:
< ! - hide
function timer() {
s e t T i m e o u t ( " a l e r t ( ' ! !')",
}
//
4 000);
->
</script>
<form>
<input type="button"
onClick="timer ()">
</form>
value="
"
setTimeout() , window.
,
. , , JavaScript,
.
"alert(' ! !'). , JavaScript .
, . (4000 = 4 ).

,
.
. .
, .
, . . , . .
, ,
, .
, ,
. , , .
, , ,
, , .
43
.
, .
" "
"
JavaScript!"
:
<html>
<head>
< ! - hide
//
var s c r t x t = " J a v a S c r i p t ! "
+
" JavaScript! " +
" J a v a S c r i p t ! " ;
var length = s c r t x t . l e n g t h ;
var width = 100;
var pos = -(width + 2);
function s c r o l l ( ) {
//
//
pos++;
// ,
var scroller = "";
if (pos == length) {
pos = - (width + 2 ) ;
}
Java Script
44
// ,
//
//
if (pos < 0) {
for (var i = 1; i <= Math.abs(pos); i++) {
scroller = scroller + " ";}
scroller = scroller + scrtxt.substring(0, width - i + 1) ;
}
else {
scroller = scroller + scrtxt.substring (pos, width + pos) ;
}
//
window.status = s c r o l l e r ;
// 100
setTimeout ( " s c r o l l ( ) " ,
100);
}
//
->
</script>
</head>
<body onLoad="scroll() ">
HTML-.
</body>
</html>
scroll() ,
.
, . , , onLoad, <body>. , scroll() .
scroll () on Load.

. scroll() .
scroll() (100
). ,
. .

. .
. ,
, .
, , ,
, .

HTML-.
JavaScript
Date
Array
JavaScript 1.0
Math
Date
today=
, JavaScript. , ( ,
JavaScript) predefined, .. ,
.
,
JavaScript, .
Data Data-odject.
, , Array-object, Math-object.
.
,
o JavaScript.
Date.
( Data ),
. , , , .
HTML- .
, ,
.
Date. new. :
new D a t e ( )
46
Java Script
Date,
today.
, . ..
today= new Date() Date
today , , .
Date
. ( ,
Date)
today : getHours(), setHours(), getMinutes(), setMinutes(),
getMonth(), setMonth(). , , , .
, Date, . Date ,
,
, . Date

.
,
( Date() new):
today= new Date(2000, 3, 17, 15, 35, 23)
Date, 15 35 23 17 2000 .
:
Date(, , , , , ).
, , .
0, 1 ..
,
. :
< ! - hide
now= new D a t e ( ) ;
document.write("Time : " + now.getHours() + " : " +
now.getMinutes() + " < b r > " ) ;
d o c u m e n t . w r i t e ( " D a t e : " + (now.getMonth() + 1) + " / " +
now.getDate() + " / " +
(1900 + n o w . g e t Y e a r ( ) ) ) ;
// ->
</script>
47
, .
, .
( )
getHours(), getHours() Date new.
, 1900 , getYear(). getYear(), ,
1900. 1997 , getYear() 97,
2005 getYear() 105.
, ,
, , , ,
, , ..
: 14:3,
14:03. ,
.
,
.
:
<html>
<head>
<script Language="JavaScript">
<!- hide
var timeStr, dateStr;
function clock() {
now= new Date() ;
//
hours= now.getHours() ;
minutes= now.getMinutes() ;
seconds= now.getSeconds() ;
timeStr= "" + hours;
timeStr+= ((minutes < 10) ? " : 0" : ":") + minutes;
timeStr+= ( (seconds < 10) ? " : 0 " : ":") + seconds;
document.clock.time.value = timeStr;
Java Script
48
//
date= now.getDate() ;
month= now. getMonth 0 + 1 ;
year= 1900 + now.getYear();
dateStr= "" + month;
dateStr+= ((date < 10) ? "/0" : "/") + date;
dateStr+= "/" + year;
document.clock.date.value = dateStr;
Timer= setTimeout ("clock () ", 1000);
}
// ->
</script>
</head>
<body onLoad="clock()">
<form name="clock">
:
<input type="text" name="time" size="8" value=""><br>
:
<input type="text" name="date" size="8" value="">
</form>
</body>
</html>
49
,
, setTimeout(). ,
Data,
.
, clock()
onLoad,
<body>. HTML-
. clock()
,
, .
timeStr dateStr,

. :
timeStr+= ( (minutes < 10) ? ": 0" : " : " ) + m i n u t e s ;

timeStr. 10, 0.
() :
if (minutes < 10) timeStr+= " : 0 " + minutes
e l s e timeStr+= " : " + m i n u t e s ;
Array
. ,
, 300 . JavaScript? , , 100
.
?..
,
. ( ).
names. , ,
names[0].

names[1] .. Array ,
JavaScript 1.1 (Netscape Navigator 3.0).
myArray= new Array().
:
m y A r r a y [ 0 ] = 17;
myArray[1]= "Dima";
myArray[2]= " P e t y a " ;
50
Java Script
JavaScript .
, . myArray[99]= "xyz",
100 . JavaScript ,
.
, :
. , , , .
.
, , :
f i r s t element
second element
t h i r d element
:
<!- hide
myArray= new Array() ;
myArray[0]= "first element";
myArray[1]= "second element";
myArray[2]= "third element";
for (var i= 0; i< 3; i+.+ ) {
document.write(myArray[i] + "<br>");
}
// ->
</script>
51
myArray.
. . : document. write(myArray[i] + "<br>");
. i
0 2.
myArray[i]. 0 2,
document.write():
document.write(myArray[0]
document.write{myArray[1 ]
document.write(myArray[2]
+ "<br>");
+ "<br>");
+ "<br>");
JavaScript 1.0
JavaScript 1.0 (Netscape Navigator 2.x
Microsoft Internet Explorer 3.x),
.
Netscape , :
function initArray() {
t h i s . l e n g t h = initArray.arguments.length
for (var i = 0; i < t h i s . l e n g t h ; i++)
t h i s [ i + 1 ] = initArray.arguments [i]
}
:
myArray= new i n i t A r r a y (17, 3, 5) ;
.
JavaScript 1.1.
JavaScript 1.0 ,
JavaScript 1.1 . , , sort(),
.
52
Java Script
Math
, Math , .
Math .
, Math sin(),
. , random().
Math.random(),
0 1.
document.write(Math.random()).
, .
HTML- ,

,

,

,
, ,
, -, . .
, , ,
.
, , , .
,
? JavaScript ,
.
JavaScript.
HTML- . ,
,
e-mail .
.
. , .
54
Java Script

,
" " .
, ,
, . , ,
,
.
, .
, , "777",
", 777!".
.
55

. - , ,
, @.
.
@. - @,
.
, , :
<html>
<head>
<!- Hide
function t e s t 1 (form) {
if (form.text1.value == "")
alert(" !")
else {
alert(", "+form.textl.value+"! Form input ok!");
}
}
function test2(form) {
if (form.text2.value == "" ||
form.text2.value.index0f('@' , 0) == -1)
alert(" e-mail !");
else alert("OK!") ;
}
// ->
</script>
</head>
56
Java Script
<body>
<form name="first">
:<br>
<input type="text" name="textl">
<input type="button" name="button1" value=" "
onClick="testl(this.form) ">
<P>
e-mail :<br>
<input type="text" name="text2">
<input type="button" name="button2" value=" "
onClick="test2(this.form)">
</body>
</html>
,
HTML- HTML-. . testl(...) test2(...).
test1(form) , . if
(form.text1value = = "")... 'form' ( testl(form))
this.form. ()
'value' form.text1.
, ,
"". "",
. . ( ),
.
.
. , , ,
. ,
, .
test2(form). ,
, , - , "".
if. ||
OR. ( ).
if , (
, |) .
, if
(true), . ,
, ,
@. if
@ .
57

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

, , ,
, : 012-345-6789, (012)345-6789, 012/345-67-89,
012 3456789 ( ).

, ,

. ,
, :
<html>
<head>
<script
< ! - hide
function check(input) {
var ok = t r u e ;
for (var i = 0; i < i n p u t . l e n g t h ; i++)
var chr = input. charAt (i) ;
var found = false;
for (var j = 1; j < check.length; j + + )
if (chr == check[j ]) found = t r u e ;
}
if (!found) ok = false;
}
return ok;
)
function test (input) {
if (!check(input, "1", "2", "3", "4",
"5", "6", "1", "8", "9", "0", "/", "-", " ")) {
alert(" ");
}
else {
alert(" .");
}
}
// ->
</script>
</head>
Java Script
58
<body>
<form>
:
<input type="text" name="" value="">
<input type="button" value="Check"
onClick="test{this.form.telephone.value)">
</form>
</body>
</html>
test() ,
( ..
).
,
?
(e-mail).
.
,
,
CGI (common Gateway Interface).
,
.
, , ,
,
59
. ,
{ , Yahoo).
,
.
,
. .
, JavaScript.
,
JavaScript, JavaScript
, .
CGI.
, , , ,
, e-mail .
, ,
- .
e-mail
-, HTML. JavaScript. , JavaScript
, ,
. , mailto . Microsoft Internet Explorer 3.0
.
<form method=post action="mailto:your.address@runs.here"

enctype="text/plain">
?
<input name="choice" type="radio" value="1"> .<br>
<input name="choice" type="radio" value="2" CHECKED>
.<br>
<input name="choice" type="radio" value="3">
.<br>
<input name="submit" type="submit" value="Send">
</form>
enctype "text/plain " ,

"" , .. , (, ).
.
, ,
, ,
onSubmit. (
<form> , -
Java Script
60
, Submit). :
function validate()
// check if input
// . . .
{
ok
if (inputOK) return
else return false;
true
<form
...
onSubmit="return validate()">
,
,
.
focus()
. ,
.
, .
,
, , focus(). focus()
,
.
JavaScript:
function
setfocus() {
document.first.textl.focus() ;
}

JavaScript.
,
first, textl.
61
,
, onLoad
<body>. :
<body onLoad="setfocus()">
, setfocus() :
function setfocus() {
document.first.textl.focus();
document.first.textl.select();
}
.
,
.
-

,

<img
Image, .
, Netscape Navigator 3.0 Microsoft
Internet Explorer 3.0. ,
, . Image, JavaScript 1.1,
, , .
, Image JavaScript. , JavaScript,
.
images. images
document. -
. 0,
, . ,
document.images[0].
(), HTML-, Image. Image
, JavaScript. , , width height.
document.images[0].width
, documet.images[0].height
.
.
, .
,
. , , :
s r c = " i m g . g i f " name="ImageName"width=100 height=100>

document.myName document.images["ImageName"]. ImageName
.
63

, ,
Image.
, Image. ,

src.
<img> src (URL) ,
. JavaScript 1.1 src .

, . :
<img src="imgl.gif' name="ImageName" width=100 height=100>
img1.gif ,
ImageName. img1.gif
image2.gif.
document.ImageName.src= "img2.src";
,
, , .
, , ,

src image.
" "
Java Script
64
, ,
,
. ,
, src.
.

, . ?
!
, .
Image. , :
ImgNew= new Image() ;
ImgNew.src= "img3.gif" ;
Image
ImgNew. .
, src
, .
img2.gif.
ImgNew HTML-
, ImgNew ,
- ,
.
65
, ,
:
document.myImage.src= h i d d e n I m g . s r c ;

.
, .
, , ,
, ,
.
.
, ,
,
. .
,
.
,
, .
,

. .
, , . "
?"- .
,
56 , .
Java Script
66

. ,
,
.
,
, .. ,
.
(JavaScript 1.0),
. , , , .
:
< href="#"
onMouseOver="document.myImage2.src='img2.gif'"
onMouseOut="document.myImage2.src=' i m g 1 . g i f ">
<img src="img1.gif" name="myImage2" width=160 height=50
border=0></a>
:
,
;
;

;
,
- ,
.
67

,
.
.
, , , .
,
.

, , 20
, .

, .
, :
( ),

,
( )
68
Java Script
:
<html>
<head>
<!- hide
// /
JavaScript
var browserOK" = false;
var pics;
// ->
</script>
<script language="JavaScript1.1">
<!- hide
// ,
// JavaScript 1.1
browserOK = true;
pics = new Array() ;
// ->
</script>
<!- hide
var objCount = 0; //
function preload(name, first, second) {
// ,
,
if (browserOK) {
pics[objCount] = new Array(3);
pics[objCount][0]= new Image ();
pics[objCount][0].src = first;
pics[objCount][1]= new Image ();
pics[objCount][1].src = second;
pics[objCount][2] = name;
objCount++;
}
}
function on(name){
if (browserOK) {
for (i = 0 ; i < objCount; i++) {
if (document.images[pics[i] [2] ] != null)
if (name != pics[i][2]) {
//
document.images[pics[i][2]].src = pics[i][0].src;
} else {
// ,
document.images [pics[i][2]].src = pics[i][1].src;

}
}
}
69
}
function off () {
if
(browserOK)
{
for (i = 0; i < objCount; i++) {
//
if
(document.images[pics[i][2]]
!= n u l l )
document.images[pics[i] [ 2 ] ] . s r c = p i c s [ i ] [ 0 ] . s r c ;
}
}
}
// , ,
,
// Image
// ( ).
p r e l o a d ( " l i n k 1 " , "img1f.gif", " i m g 1 t . g i f " ) ;
p r e l o a d ( " l i n k 2 " , "img2f.gif",
"img2t.gif") ;
p r e l o a d ( " l i n k 3 " , "img3f.gif",
"img3t.gif");
/ / ->
</script>
<head>
<body>
<a h r e f = " l i n k 1 . h t m " onMouseOver="on ( ' l i n k 1 ' ) "
onMouseOut="off ()">
<img name="link1" s r c = " l i n k 1 f . g i f "
width="140" height="50" border="0"></a>
<a h r e f = " l i n k 2 . h t m " onMouseOver " o n ( ' l i n k 2 ' ) "
onMouseOut="off() ">
<img name="link2"
src="link2f.gif"
width="140" height="50" border="0"></a>
<a h r e f = " l i n k 3 . h t m " onMouseOver="on('link3' ) "
onMouseOut="off() ">
<img name="link3" s r c = " l i n k 3 f . g i f "
width=" 140" height="50" border="0"></a>
</body>
</html>
pics.
preload() (.
). , preload()
:
p r e l o a d ( " l i n k 1 " , "img1f.gif", " i m g 1 t . g i f " ) ;
,
img1f.gif img1t.gif. ,
70
Java Script
. ,
.
"img1" preload()
Image ,
. , <body> img1. ,
. ,

.
on() off()
onMouseOver onMouseOut. MouseOver MouseOut,
, .
, on() ""
, . ,
, (
) ,
MouseOut .
, ,
.
. Image .
,
JavaScript .
,
, .
,
. ,
,
. -,
, .

JavaScript

layers.
4.0 Netscape Navigator.
-
, .
, , HTML-. , JavaScript .
, , .
.
, ,
- , .
.
. ,
, , , . .
.
, .
-. , , , , ,
HTML-
.
. ,
. ,
. .
, , ,
.
. ,
.
Java Script
72

, , <lr>
<ilayer>. :
name="layerName"
left=xPosition
()

top=yPosition
()

z-index=layerIndex
, " "
width=layerWidth
clip="x1, y1, 2, 2"
above="layerName"
below="layerName"
Visibility=show|hide|inherit
bgcolor="rgbColor"
, , rgb
background=imageURL"
<lr> ,
left top.
,
.
<ilayer> , HTML-
.
.
, , .
.
73
:
<html>
<layer name=pic z-index=0 left=200 top=100>
<img src="img.gif" width=160 height=l20>
</layer>
<layer name=txt z-index=l left=200 top=100>
<font size=+4> <i> </i> </font>
</layer>
</html>
<layer> .
200/100 (
).
left top. ,
<lr> </lr> ( <ilayer> </ilayer>), .
z-index. . z-index'a
. z-index'a .
, ,
, zindex, "" . , ,
<lr> z-index=30,
, .. ,
, , zindex'a.
Java Script
74
JavaScript
,
JavaScript. ,
. , JavaScript , .
.
name,
<lr> :
<lr
. . . name=myLayer>
</layer>,
document.layers["Layer"] document.myLayer. -

,
document.layers[0]. He
z-index' .
, .
, , , , , layer1
lr2, layer1 z-index, 11, lr2 z-index,
20.
document.layers[0]
document.layers[1],
document.layers[11] document.layers[20].
layer ,
JavaScript.
, ,

.
HTML- " "
"/ " .

75
Java Script
76
:
<html>
<head>
<! hide
function showHide() {
if (document.layers["myLayer"].visibility == "show")
document.layers["myLayer"].visibility="hide"
else document.layers["myLayer"].visibility= "show";
}
// ->
</script>
</head>
<body>
<ilayer name=myLayer visibility=show>
<font size=+l color="#0000ff"><i>
co</i></font>
</ilayer>
<form>
<input type="button" value="/ "
onClick="showHide() ">
</form>
</body>
</html>
showHide().
visibility layer
myLayer. "show"or "hide" document.layers["myLayer"].visibility
.
"show" "hide" , JavaScript , ,
document.layers["myLayer"].visibility= show.
, <ilayer>
<1>, , .
77

, left top
. , . , 200 :
document.layers
["myLayer2"].left=
200;
, , .
"
" . ,
,

Java Script
78
:
<html>
<head>
<!- hide
function move () {
if {pos < 0) direction=true;
if (pos > 200) direction= false;
if (direction) pos++
else pos;
document.layers["myLayer2"].left= pos;
}
//
->
</script>
</head>
<body onLoad="setInterval('move() ' , 20)">
<ilayer name=myLayer2 left=0>
<font size=+l color="#0000ff"><i>
</i></font>
</ilayer>
</body>
</html>
myLayer2. <body>
onLoad, ,
.
onLoad
setInterval().
. JavaScript
1.2.
setTimeout().
setInterval() ,
. setInterval()
move() 20 .
move() .
.
move()
document.layers["myLayer2"].left=pos.
, "" JavaScript 1.2, ,
,
79
. . <script>
, .. :
<script
language="JavaScript1.2">
< ! - hide
. . . ( J a v a S c r i p t 1.2)
// ->
</script>
, .
80
Java Script
, ,

<html>
<head>
<!- hide
function move2() {
if (pos2 < 0) direction= true;
if (pos2 > 200) direction= false;
if (direction) pos2++
else pos2;
document.layers["myLayer3"].left= pos2;
}
/ / ->
</script>
</head>
<body onLoad="setInterval('move2() ' , 20)">
<ilayer name="myLayer3" left=0 z-index=21>
<font size=+l color="#0000ff"><1>
</i></font>
</ilayer>
<ilayer name="myLayer4" z-index="l9">
<img src="img.gif" width="160" height="120">
</ilayer>
</body>
</html>

.
:
;
;
.

, .
. , HTML, clip. :
< i l a y e r left=0 top=0 clip="20,50,110,120">
<img s r c = " d a v i n c i . j p g " width=209 height=264>
</ilayer>
(
)
.
, 209x264
, .
82
Java Script
90x70 . clip <ilayer>

,
.
.

JavaScript.
JavaScript
layer, clip.left, clip.top, clip.right clip.bottom.
,
.
, ,
.
83
Java Script
84
:
<html>
<head>
<!- hide
var middleX, middleY, pos;
function start () {
//
var widthdocument.layers["imgLayer"].document.davinci.width;
var height=
document.layers["imgLayer"].document.davinci.height;
//
middleX= Math.round(width/2);
middleY= Math.round(height/2) ;
//
pos= 0;
//
show();
}
function show() {
//
pos+= 2; //
document.layers["imgLayer"].clip.left= middleX- pos;
document.layers["imgLayer"].clip.top= middleY- pos;
document.layers["imgLayer"].clip.right= middleX+ pos;
document.layers["imgLayer"].clip.bottom= middleY+ pos;
// ,
if ( ! ( (pos > middleX) && (pos > middleY)))
setTimeout("show()", 20);
}
// ->
</script>
</head>
<body>
<ilayer name="imgLayer" clip="0,0,0,0">
<img name=davinci src="davinci.jpg" width=209 height=264>
</ilayer>
<form>
<input type=button value="" onClick="start () ">
</form>
</body>
</html>
85
, <body>, start(). ,
, .
middleX middleY. show().
, middleX, middleY pos.
pos , show().
.
show() setTimeout().
, ..
show(), ,
. .
,
:
var width=
document.layers["imgLayer"].document.davinci.width;
var h e i g h t =
document.layers["imgLayer"].document.davinci.height;
document.layers["imgLayer"] imgLayer.
document
document.layers["imgLayer"]?
,
HTML-, ,
document. , ,
, , , document .
davinci, document
davinci , .
Java Script
86

,
. .
, ? , . ,
HTML-.
()
parentLayer. , layer1 layer2.
87
HTML- ,
. ,
parentLayer layer1 layer2.
layer1 ( layer2) , .
, :
<html>
<head>
<!- hide
//
var pos0= 0;
var pos1= -10;
var pos2= -10;
// |
var move0= true;
var move1= false;
var move2= false;
//
var dir0= false;
var dir1= false;
var dir2= true;
function startStop(which) {
if (which == 0) moveO= !moveO;
if (which == 1) move1= !move1;
if (which == 2) move2=!move2;
}
function move()
if (moved)
{
88
Java Script
// parentLayer
if (dir0) pos0else pos0++;
if (pos0 < -100) dir0= false;
if (pos0 > 100) dir0= true;
document.layers["parentLayer"].left= 100 + pos0;
}
if (move1) {
// layer1
if (dir1) pos1
else pos1++;
if (pos1 > 20) dir1= true;
document.layers["parentLayer"].layers["layer1"].top= 10 +
pos1;
}
if (move2) {
// 1r2
if (dir2) pos2else pos2++;
if {pos2 > 20) dir2= true;
pos2;
}
}
// ->
</script>
</head>
<body onLoad="setInterval('move() ' , 20)">
<ilayer name=parentLayer left=100 top=0>
<layer name=layer1 z-index=l0 left=0 top=-10>
layer1
</layer>
<layer name=layer2 z-index=20 left=200 top=-10>
lr2
</layer>
<br><br>

</ilayer>
<form>
<input type="button" value="/
" onClick="startStop(0);">
<input type="button" value="/ layer1"
onClick="startStop (1) ;">
<input type="button" value="/ lr2"
onClick="startStop (2);">
</form>
</body>
</html>
89
,
. .
JavaScript?
move():
document.layers["parentLayer"].left= 100 + pos0;
document.layers["parentLayer"] .layers["layer1"] .top= 10 +
pos1 ;
pos2;

document.layers["layer1"] document.layers["layer2"].
, layer1 lr2
parentLayer,
parentLayer.
.
,
HTML-.

, ,
.
, .
90
""

Java Script
91
:
<html>
<head>
<!- hide
var pos= 0; //
var direction= false;
function moveNclip() {
if (pos<-180) direction= true;
if (pos>40) direction= false;
if (direction) pos+= 2
else pos-= 2;
document.layers["clippingLayer"].layers["imgLayer"].top= 100
+ pos;
}
// ->
</script>
</head>
<body onLoad="setInterval('moveNclip() ' , 20);">
<ilayer name="clippingLayer" z-index=0 clip="20,100,200,160"
top=0 left=0>
<ilayer name="imgLayer" top=0 left=0>
<img name=davinci src="davinci.jpg" width=209 height=2 64>
</ilayer>
</ilayer>
</body>
</html>
,
:
document.layers["clippingLayer"].layers["imgLayer"].top= 100 + pos;
, ,
.
92
Java Script

( )
.
. , ,
.
, )
"" .
93
Java Script
94
. , ,
. :
, ,
, ,
.
, .
:
<html>
<head>
<!- hide
var pos= 0; //
var myTimer= null;
function move() {
pos+= 3; //
document.layers["clippingLayer"].layers["imgLayer1"].top=
264 + pos;
document.layers["clippingLayer"].layers["imgLayer2"].top=
- pos;
if {pos< 264) myTimer= setTimeout('move()', 10)
else myTimer= null;
}
function start() {
if (myTimer== null) {
pos= 0;
move ();
}
}
// ->
</script>
</head>
<body onLoad="move() ">
<form>
<input type=button value="Start" onClick="start();">
</form>
264
95
<ilayer name="clippingLayer" z-index=0 clip="209,264" top=0 left=0>

<layer name="imgLayer1" top=-264 left=0>
<img name=davinci1 src="davincil.gif" width=209 height=264>
</layer>
<layer name="imgLayer2" top=264 left=l>
<img name=davinci2 src="davinci2.gif" width=209 height=264>
</layer>
</ilayer>
</body>
</html>
- , .
,
HTML-,

.
, , JavaScript. , ,
HTML-.
JavaScript 1.2

Event ()

, JavaScript 1.2
,
. , ,
JavaScript 1.2.
Abort
Blur
Click
Change
DblClick
DragDrop
Error
Focus
KeyDown
KeyPress
KeyUp
Load
Mouse Down
Mouse Move
MouseOut
MouseOver
Mouse Up
Move
Reset
Resize
Select
Submit
Unload

. Resize.
, . ,
:
<html>
<head>
window.onresize= message;
function message() {
alert(" !");
</script>
</head>
<body>
.
</body>
</html>
JavaScript 1.2
JavaScript

97
Java Script
98

window.onresize= message;
, Resize. onResize.
message() .
,
JavaScript 1.2.
.
, , , :
<input type="button" name="myButton" onClick="alert('Click
event occurred!')">
</form>
:
<input type="button" name="myButton">
</form>
< s c r i p t language="JavaScript>
document.myForm.myButton.onclick= message;
function messaged {
a l e r t ( ' C l i c k event occurred!');
}
</script>
, ,
. , ,
, .
, . , , window,
, , . .
. ,
window.onResize, , ..
window.onresize. , message
, .. window.onresize=message().
( ),
messgae() ,
, ,
.
JavaScript 1.2
99
Event ()
JavaScript 3.2 , Event.
Event , . , , ,
, .
( )
:
<lr>
< href="#" onClick="alert('x:' + event. + ' : ' +
event.) ; return false;">
<img src="davinci.jpg" width=209 height=264 border=0></a>
</layer>
onClick,
<>, JavaScript.
, event
event.x event. (
) , . Event , .
(
<1>),
, ,
.
Java Script
100
,
. return false
,
, .
Event (
):
data
URL , , DragDrop ()
layerX
.
Resize
layerY
.
Resize
modifiers
, : ALT_MASK, CONTROL_MASK,
META_MASK, SHIFT_MASK
pageX
pageY
screenX
screenY
target
, ,
type
which
ASCII
layerX
layerY
JavaScript 1.2
101

.
, , , Click,
, onClick.
, ,
"" , .
, , .
<html>
<head>
window.captureEvents(Event.CLICK) ; \
window.onclick= handle;
function handle(e) {
alert(" window Click!");
return true; // , ..

}
</script>
</head>
<body>
< href="test.htm"> </>
</body>
</html>
Click
Java Script
102
( ) ,
, " window Click. "" "". ,
, . <>,
:
window.captureEvents(Event.CLICK);
Click
window. window " "
Click, window.
, Event.CLICK, CLICK
. , "|". :
window.captureEvents(Event.CLICK | Event.MOVE);
return true; handle(),
, onClick. ,
handle().
JavaScript 1.2
103
return true return false, ,

Click, .
onClick
<>, ,
. , window
,
(link)
handle() :
a l e r t ("The window object
window.routeEvent(e);
return true;
}
captured
this
event!");
,
. Event,
handle(e).
- .
handleEvent(). :
<html>
window.captureEvents(Event.CLICK);
window.onclick= handle;
document.links[1].handleEvent(e) ;
}
</script>
<a
<a
href="test.htm">
href="test.htm"
</><br>
onClick="alert(' !');">
</>
</html>
104
Java Script
. ,
Click ( ),

Click
JavaScript 1.2
105
JavaScript
Click ,
, !
,
, .
( ) .
-
.
Java Script
106
,
.
<html>
window.captureEvents(Event.KEYPRESS);
window.onkeypress= pressed;
function pressed(e) {
alert (" , ASCII: " + .which);
}
</script>
</html>
-, " , ASCII : ...",
ASCII .
12
?

?
drag & drop.
,
,
() ,
. JavaScript ,
, .
Windows MacOS
- . ,
. , , -, .. ,
, .
. ,
, .
, HTML
HTML-, .
108
Java Script
109
JavaScript , ..
, .
Image , , dragging,
. ,
, .
, .
, ?
,
, .
.
.
. , . .

, ? , ,
, MouseDown,
MouseMove MouseUp. -
,
, ( ) .
. Event,
.
, . , , , button.
, window
{ ).
, window
. ,
Click.
, , , ..
,
Java Script
110
,

:
<html>
<!window.captureEvents(Event.CLICK) ;
window.onclick= displayCoords;
function dispiayCoords(e) {
alert("x: " + e.pageX + " y: " + e.pageY);
}
// ->
</script>
- .
</html>
, window,
Click. captureEvent().
window.onclick= d i s p l a y C o o r d s ;
, Click.
, Click
displayCoords(). -
111
displayCoords,
, , .
display Coords() :
function displayCoords(e) {
a l e r t ("x: " + .pageX + " : " + .pageY);
}
, . Event,
.
pageX pageY,
. .

, , .
, MouseMove.

.
112
Java Script
:
<html>
<!window.captureEvents(Event.MOUSEMOVE);
window.onmousemove= displayCoords;
function displayCoords(e) {
status= "x: " + e.pageX + " : " + e.pageY;
}
/ / ->
</script>
.
</html>
Event MOUSEMOVE,
MOUSEMOVE .
: window.onmousemove displayCoords.
. ,
. :
113
:
<html>
<!window.captureEvents(Event.MOUSEDOWN | Event.MOUSEUP);
window.onmousedown= s t a r t D r a g ;
window.onmouseup= endDrag;
window.onmousemove= moveIt;
function startDrag(e) {
window.captureEvents(Event.MOUSEMOVE);
}
function moveIt(e) {
//
s t a t u s = "x: " + e.pageX + " y:
" + e.pageY;
function endDrag(e) (
window.releaseEvents(Event.MOUSEMOVE);
}
/ / ->
</script>
.
.
</html>
, ,
window . MouseDown MouseUp:
window.captureEvents(Event.MOUSEDOWN | Event.MOUSEUP);
| ,
"",
.
:
MouseMove. ,
:
Event.MOUSEMOVE,
window. ,
moveIt , , MouseMove window. He ,
JavaScript
114
startDrag(),
, MouseDown:
function startDrag(e)
{
window.captureEvents(Event.MOUSEMOVE) ;
}
, window
MouseMove , . ,
window MouseMove ,
. endDrag(), releaseEvents():
function endDrag(e) {
}
moveIt()
.

.
, .

, .
, ,
,
. :
<html>
<head>
<!var dragObj = new A r r a y ( ) ;
var dx, dy;
function s t a r t D r a g ( e ) {
currentObj= whichObj ( e ) ;
window.captureEvents(Event.MOUSEMOVE) ;
}
function moveIt(e) {
if (currentObj != null) {
d r a g O b j [ c u r r e n t O b j ] . l e f t = e.pageX - dx;
dragObj[currentObj].top= e.pageY - dy;
}
115
function endDrag(e) {
currentObj= null;
}
function init() {
dragObj[0]= document.layers["layer0"] ;
dragObj [1] = document.layers["layerl"] ;
dragObj[2]= document.layers["layer2"];
}
function whichObj (e) {
// , ""
var hit= null;
for (var i= 0; i < dragObj.length; i++) {
if ((dragObj[i].left < e.pageX) &&
(dragObj[i].left + dragObj[i].clip.width > e.pageX) &&
(dragObj[i] .top < e.pageY) &&
(dragObj [i] . top + dragObj [i] .clip.height >
e.pageY)) {
hit= i;
dx= e.pageX- dragObj[i].left;
dy= e.pageY- dragObj[i].top;
break;
}
}
return hit;
// ->
</script>
</head>
<body onLoad="init() ">
<layer name="layer0" left=100 top=200 clip="100,100"
bgcolor="#0000ff">
<font size=+1>Object 0</font>
</layer>
bgcolor="#00ff00">
<font size=+l>Object 1</font>
</layer>
bgcolor="#ff0000">
<font size=+l>Object 2</font>
</layer>
</body>
</html>
Java
116
Script
,
<body>. , ,
init(),
onLoad, <body>:
function i n i t ( ) {
}
dragObj ,
. , dragObj.
.
,
:
startDrag() :
whichObj(e);
whichObj() ,
, .. , .
. ,
null.
currentObj.
whichObj() left,
top, width height .
, .
currentObj=

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

117
. ,
, .. .
, ?
MouseUp. endDrag(). , ,
, ( ),
, , , ,
, , . ,
, .
, .
, . ,
, startDrop().
, ,
. ,
<img>. ,
.
, ,
JAVASCRIPT

Applet
Array
document
Form
Frame
window
Layer

<>
String.anchor. theString.anchor(nameAttribute). :
theString

nameAttribute
<> HTML. ,
.
Anchor Link. Anchor Link.
name
text
,
,

watch unwatch.
, ,
119
Applet
Java- -.
<APPLET>. - ,
document.applets. .
Array
:
new Array(arrayLength)
new Array(eletnent0, element1, ..., elementN)
arrayLength.. .
length. , , ,
.
elementN
. , , ,
.
constructor ... ,
length

prototype

concat
join
pop
push
reverse
shift
slice
splice
sort
toSource

, , ,

/

,
Java Script
120
toString
unshift
,
,
,

valueOf
document

,
HTML. <body>.
HTML- document.
window object, document. document
<body>
.

onClick
onDblClick
onKeyDown
onKeyPress
onKeyUp
onMouseDown
onMouseUp
<body>,
window.
window.location.
, ..
:
document.close();
document.open();
document.write();
alinkColor
anchors
applets
bgColor
classes
cookie
domain
, ALINK
,
,
, BGCOLOR
Style,
HTML
cookie
,
, ,
embeds
fgColor
formName
forms
height
ids
images
lastModified...
layers
linkColor
links
plugins
referrer
tags
title
URL
vlinkColor
width
121

, fgColor

,

Style
,
,
,
,
,
,
, URL
Style
, TITLE
, URL
, VLINK

captureEvents
close

contextual

getSelection ... ,
handleEvent ...
open
write writeln
releaseEvents.
routeEvent

write
HTML ,

writeln
HTML ,
Java Script
122
Form

, ,
, .
.
<FORM>.
FORM.

onReset
onSubmit
.
,
NAME,
Form.elements. ,
checkbox, radio, text.
action
elements
encoding
length
method
name
target
ACTION

ENCTYPE

METHOD
NAME
TARGET
handleEvent ...
reset
reset
submit

, ,
123
Frame
,
URL. <frame>, , <frameset>.
. URL, URL
, (
).
JavaScript ,
window. window.
window
window .
top-level document.location history.
<body> <frameset>, ( ) window.
<frame> window. window
, window.open.

onBlur
onDragDrop
onError
on Focus
onLoad
onMove
onResize
onUnload
JavaScript window .
parent top ,
. top
() , a parent
.
defaultStatus status ,
. , ,
.
close .
, onBlur
onFocus, ( ), , html.
Java Script
124
self window . , close

window, self.
closed
crypto
,
,
defaultStatus.. , ,
document

frames

history

innerHeight....
innerWidth

length

location
URL
locationbar

menubar

name
, ,

opener
,
open
outerHeight ...
outerWidth

pageXOffset...
pageYOffset...
parent
,
<frameset>
personalbar ....
screenX

screenY

scrollbars

self
window
status

statusbar

toolbar

top

window

, ,
alert
125
,
atob
, base-64
back
history
blur

btoa
base-64
captureEvents
clearInterval .. , setInterval
clearTimeout.. ,
setTimeout
close

confirm
,
, Cancel
crypto.random..
find
focus

forward
, URL
history
home
URL,
moveBy

moveTo

open

print

prompt
,
resizeBy

resizeTo

scroll

scrollBy

scrollTo
,

setHotKeys ....
setInterval
( , )

setResizable

setTimeout
( , )
stop

Java Script
126
Layer
, HTML-,
.
HTML <layer> / <ilayer>
.
Layer. document.layers. .

onMouseOver
onMouseOut
onLoad
onFocus
onBlur
above
Layer, ,
background .... ,
bgColor

below
Layer, , null,

clip.bottom

clip.height

clip.left

clip.right

clip.top

clip.width

document
,
left

name
, ID <layer>
pageX

pageY

parentLayer ... , , ,

siblingAbove ..., , null,
siblingBeIow... , , null,
, ,
src
top
visibility
window
zIndex
127
, URL ,

window frame,
, ,
layer.left
layer.top
,
captureEvents
handleEvent ...
load

moveAbove

moveBelow

moveBy
moveTo

moveToAbsolute ( )
releaseEvents .

resizeBy
, P

resizeTo
,

routeEvent

Java Script
128
JavaScript, ,
.
, , .
JavaScript, .

,
, ,
. JavaScript. ,
"" 2000 .
,
,
JavaScript : http://developer.netscape.com/library/
documentation/.
scanned & converted to PDF

by BoJloc

Javascript

Загружено:

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

Оригинальное название

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

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

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

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

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

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

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

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

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

Javascript

Загружено:

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

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

. .

scanned & converted to PDF

11. JavaScript 1.2

Mouse JavaScript 1.2

MouseDown, MouseMove MouseUp

, rows <frameset> ls.

<frameset rows="80%, 20%">

window JavaScript 1.2 .

" " , , : " ,

<form method=post action="mailto:your.address@runs.here"

enctype "text/plain " ,

document.images [pics[i][2]].src = pics[i][1].src;

clip="x1, y1, 2, 2"

HTML- " "

90x70 . clip <ilayer>

<ilayer name="clippingLayer" z-index=0 clip="209,264" top=0 left=0>

return true return false, ,

Mouse JavaScript 1.2

MouseDown, MouseMove MouseUp

Anchor Link. Anchor Link.

self window . , close

scanned & converted to PDF

Вам также может понравиться