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

JavaScript

Window

Image
Style

2 /107
2

Web-, ,
, ,
:

1.
(xhtml).
2.
(css).
3. ,

(JavaScript).
4


JavaScript- .
JavaScript.
,
,
.

JavaScript .
5


<body>...</body>
<body>

<script >

</script>

</body>
6


<head>...</head>
<head>

<script
type=text/javascript>

</script>

</head>

,

,

- .


<head>

<script type=text/javascript src=my.js >


</script>

</head>
,
link,
script, .css, .js.
8


<input type="button" value=""
onClick="alert('H ')">

- , <script > </script>.

,
onClick (
)
.

(1)

(3)

(2)
(4)



.
10

,
, .

. .

11


JavaScript . JavaScript
Javascript - !!
.
++.
,
,
(Enter).
:
// ,
/*
..
*/
12


.
var, ,
.
c :
var s = 1203 //
var d = 3.14 //
var str1 =
var p = true //

.

,
.
13

105

x=100+5
str2=
str1=str2+

= 100-5

95

= 2*3

= 12/2

= 16%3

++

= 2; ++;

--

= 2; ;

1
14

x = 1000

1000

+=

+=100

1100

x = x+100

-=

-= 12

988

x = x-12

*=

*= 2

2000

x = x*2

/=

/= 2

500

x = x/2

%=

%= 480

40

x = %5
15

==

x == 10

!=

x != 5

>

x>0

<

x<4

>=

x >= y

<=

x <= 5

16

&&

(and)

x>=2 && y>=2

||

(or)

x>0 || y>0

(not)

!(1 < x && x < 10)

17


if (a == 2) z = 2; else z = 3
if (x >= 2 && x <= 6)
{y = 0; z = 1}
else
{y = 1; z = 0}

++.
1. Then .
2. else , else
.
18

for
<script>
var i;
var k=0;
var sum = 0;
for (i=0; i<=2; i=i+0.5)
{
sum=sum+ i;
k=k+0.2;
}
alert(sum); alert(k)
</script>

!?

19

/

JavaScript 3
(),
:
1. alert
2. confirm
3. prompt
20

alert()
alert
,
"Ok".

. ,
.

+.

\n

21

alert
1

22

onfirm()
confirm ,
.
confirm
, "O"
"".
confirm
:
"O" true,
"" - false.
,
, ,
.
23

confirm

!?

24

prompt(1, 2)
prompt ,
.
1,
2.

.

,
.
:
- parseInt("") - ;
- parseFloat("") -
.
25

1 prompt

26

2 prompt

,
.
str
,
prompt
.

parseInt str,
x .
s ,
x y .
s alert
, .
27

1 2
,
.

28

2 2
.
. x, y s
.
, NaN
(Not a Number).

29

JavaScript

JavaScript - .
-
, ()
().
,
,
.
JavaScript , .
: ,
, ,
.
DOM (Document Object Model) .

30

document
document.write
document HTML-.
document.write( html-) -
.
document.writeln ( html-) -
, "".

()
.

( ).
.
31

1
( )
,
.

32

33

<html>
<head>
<title>
</title>
<script type="text/javascript">
function change()
{
var ul = document.getElementsByTagName('ul')[0]
var awlo = ul.removeChild(ul.firstChild)
var soap = ul.removeChild(ul.firstChild)
ul.appendChild(awlo)
ul.appendChild(soap)
}
</script>
</head>
<body> :
<ul>
<li> (Awl)</li>
<li> (Soap)</li>
</ul>
<input type="button" value=" !?"
onClick=change();>
</body>
</html>

!?

34

JavaScript
JavaScript-
,
.

- ,
- .

36


1. , .
2. , .
3. , .
.
"on+ ",
: onLoad.

37

onClick
Click,
alert().

!?

38

onLoad
Load
. , ,
alert().

39

!?


.

.
, click
input, onclick:
<input type="button" value=" " onclick="alert('!');"/>

40



- .

.
,
<head>.

41


function _ ( )
{
...

...
return ;
}

return, ,
, .

.
-
.
42


_ ( )


, , , ,
.
,
.

43

!?

,
, .
44


JavaScript
,

().
,
JavaScript, .
:

;
.
46

Math
JavaScript
Math,
.

,
.

.

47

Math

abs()

( ) .

sqrt()

pow(, )

random()

.
, Math.pow(5, 3) 53=125.
0 1.

ceil()

,
, .

floor()

,
, .

round()

cos()

sin()

exp()

e ( )
.

log()

.
48


<script>
d1=45.9;
d2=Math.floor(d1);
alert(d2);
</script>

!?

Math
floor.
d1.
Math.floor(d1).
. d2
alert(d2).
49

Date
Date
.

,
,
1 1970 .
86 400 000 .

50


- . -
.
,
,
.

.
, ,

.
51


new.
Math ,
.
Math .
Date
,
,
.
52


Date

var a = new Date();



.

53

Date
,
new Date(, , [, [, [, [,]]]]
, ;
, (0 = , 1 =
, , 11 = );
, 1 31;
, 0
23;
,
0 59;
,
0 59;
,
0 999.

var c = new Date(1958, 4, 21, 10, 15);


54

Date

. ,
.
.

getTime()

getYear()

getMonth()

getDate()

getDay()

getHours()

getMinutes()

getSeconds()

.
55


<body>
<script>
var dr=new Date(1958,4,21)
dn=dr.getDay()
alert(dn)
</script>
</body>
!?

Date.
dr 21 1958 . getDay()
dr dr.getDay().
. dn
alert(dn).
56

Array
Array
.
- .

().
JavaScript
.

57


<script>
var dr = new Date(1958, 4, 21);
dn = dr.getDay()
var dayn=new Array('','',
'','','','',
'')
alert(dayn[dn])
</script>
!?

dayn
Array.

dn.
http://www.hunlock.com/blogs/mastering_javascript_arrays#concat

58


Web .
. .
,
.
() .
id ( name).
:
<p id=first>
<img id=logo1 name=logo1 src=1.gif>
id
name.

59


, ,
JavaScript :
document.getElementById(_)

,
first,
:
document.getElementById(first)
60


,
. , :
<input type=text id=entry name=entry value=Name?>


, .
, value ,
entry :
document.getElementById(entry).value

ob
value .
var ob=document.getElementById(entry)
ob.value= ;
61

Window
window

.
window
.

63

Window

open

close

alert, prompt,
confirm

setInterval

setTimeout

clearInterval

setInterval.

clearTimeout

setTimeout.
64


var = open();
var = open();

- .
- , ,
.
, .

,
document.write.
65


var = open(, _);
var = open(, _, _);
.close();

_- , ( "id" window).
_ - , ( "id"
).
_ :

"1=1,2=2,...,N=N"

.
66

width

.
- 100.

height

.
- 100.

left

top


.
67


c ,
,
html- (flowers.html),
, .
flowers.html

68


<head>
<script>
function opw()
{win=window.open("flower.html","www","width=300,height=300");}
</script>
</head>
<body>
<form>
<input type=button value=" " OnClick="opw()">
<input type=button value=" " OnClick="win.close()">
</form>
</body>
id=www
300 300
flower.html
win window
69

input

<input>, :

type="checkbox"
type="radio"
.

.

.
71

checked input
input.
input checked.
true,
( ), false - .
, checked input
,
input. ,
, ,
.

72


.
.
, ,
.

73


<body>
<p> : </p>
<form>
<input type="checkbox" id="c1" name="c1"> 2*2=4 <br/>
<input type="checkbox" id="c2" name="c2"> 2*5=30<br/>
<input type="checkbox" id="c3" name="c3"> 6*8=48<br/>
<input type="button" value="
onClick="checkAll();">
<input type="text id="result" name="result" value="">
</form>
</body>

c1
c2
c3
result
74

!?


<head>
<script>
function checkAll()
{
var ans=' ';
var p1=document.getElementById('c1');
var p2=document.getElementById('c2');
var p3=document.getElementById('c3');
var p4=document.getElementById('result');
// 1 , 2 3

if (p1.checked && !p2.checked && p3.checked)


ans ='';
else ans = ';

!?

//

p4.value=ans;

}
</script>
</head>

p1 c1
2 c2
3 c3
4 result

75


, ,
. alert.

!?

76


<body>
<h2> prompt window? </h2>
<form>
<h3>
<input type='radio' id='k1' name='v'/>&nbsp
<br />
<input type='radio' id='k2' name='v'/>&nbsp
<br />
<input type='radio' id='k3' name='v'/>&nbsp

<br />
</h3>
<input type="button" value=""
onClick="validate()" />
</form>
</body>
77


<head>
<script type="text/JavaScript">
//
function validate()
{
// 1 id k2
var p1=document.getElementById('k2');
//
if (p1.checked) alert("");
else alert("");
}
</script>
</head>

!?

78

option

<select>,
<option>,
.
option
:
text
.
selected true, ,
false .
79


,

.

80


<body>
<form>
<h3> </h3>
<select>
<option id='k1'></option>
<option id='k2'></option>
<option id='k3'></option>
</select>
<input type="button" value=""
onclick="GO()">
</form>
</body>

!?

81


<head>
<script type="text/JavaScript">
function GO()
{
var p1=document.getElementById('k1');
var p2=document.getElementById('k2');
var p3=document.getElementById('k3');
//
st1="<body><h2>"
st3="</h2><img src="
st5=" /></body>"
//
if (p1.selected)
{ st2=p1.text ; st4="BIRD.GIF'" }
if (p2.selected)
{ st2=p2.text; st4="FISH.PNG'"}
if (p3.selected)
{ st2=p3.text; st4="'ALLIGATO.GIF'"}
//
var win=window.open("","","width=100,height=200");
win.document.open();
//
str=st1+st2+st3+st4+st5
//
win.document.write(str);
win.document.close();
}
</script>
82

Image
( img)
Image.

Image src,
.
, web
.

84


MouseOver MouseOut
MouseOver MouseOut ,

.
onMouseOver onMouseOut
.
src
, MouseOver
MouseOut.
85



, .


doEvent .
86


<head>
<script>
function doEvent(type)
{
var cv=document.getElementById('pic');
if(type) cv.src="flower.jpg";
else cv.src="bigdaisy.jpg";
}
</script>
</head>
<body>
<h1>onMouseOver onMouseOut</H1>
<p> !</p>
<img name ="pic" id="pic" src="bigdaisy.jpg"
onMouseOver="doEvent(true);"
onMouseOut="doEvent(false);">
</body>

!?

87

slideShow()
,
, .

,
slide src
.
88/107
88


<head>
<style> img{width:200;height:200} </style>
<script>
i=0; //
function slideShow()
{
ris = new Array(12.png', '8.png', '9.png', '6.png')
if (i >= 4)
i = 0
r=document.getElementById('slide')
r.src=ris[i]
i++
// 1500
setTimeout("slideShow()",1500)
}
</script>
<body>
<h1> - </h1>
<img id='slide' src=9.png" />
<form>
<input type="button" value=" onClick="slideShow();">
</form>
</body>

89

Style
style
Web,
.

CSS
style JavaScript.
91


css Javascript
style JavaScript
CSS , "-"
, ,
, , .

CSS

JavaScript

background-attachment

backgroundAttachment

font-family

fontFamily

z-index

zIndex
92

93

<body>
<h1 id='e1'> Z </h1>
<form>
<input type="button" id='e2'
value=" "
onClick="f();">
</form>
</body>

f(),
color value .
94


<head>
<style> h1 {color:red; font-size:36pt;} </style>
</head>
<script>
i=0;
function f()
{
r1=document.getElementById('e1') // Z
r2=document.getElementById('e2') //

// r2 value ()
if (i==0)
{
i=1;
r1.style.color='green';
r2.value=' ';
}
else
{
i=0;
r1.style.color='red';
r2.value=' ';
}
} //
</script>
</head>
95

display

display
.
:
inline
block
none ""
. ,
,

96


.
display style.

97


<body>
<img src="bird2.gif"
id='st'/>
<br/>
<input type="button"
value=" "
onclick="displ();">
</body>

98


<head>
<script>
function displ()
{
//

p = document.getElementById('st')
// style. .
// style display

if (p.style.display == 'none')
{p.style.display = 'block'}
else {p.style.display = 'none'}
}
</script>
</head>
99


Web-
, . CSS
left top.
left ,
(position:absolute)
.
top ,

.

top left, .

100


setTimeout (expression, msec)
setTimeout

:

expression ,
,
msec .
101


, vallay.jpg 100%
. bird.png,
.
, .

102


<html>
<head> <style> #im2 {position:absolute;left:0;top:100} </style>
</head>
<body>
<img src="vallay.jpg" id="im1" width="100%" />
<img src="bird.png" id="im2" />
<script type="text/JavaScript">
function f()
{
x = x + 1
// 1
r2.style.left = x
// left 2-
// 1000
if (x < x1 - x2) setTimeout("f()",10)
}
x = 0
r1 = document.getElementById('im1')
r2 = document.getElementById('im2')
x1 = r1.width //
x2 = r2.width //
f();
</script>
</body>

</html>
103

P.S.

http://www.modernizr.com

JavaScript
http://citforum.ru/internet/javascript/jsmethod.shtml

, :

http://caniuse.com
: http://smarly.net/
http://smarly.net/html5-putting-html5-in-context
http://smarly.net/html5-getting-started-with-javascript

104104

P.P.S.

105

P.3.S.

!?

106

107

Оценить