Java Script

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 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 />
<br />
<br />
</h3>
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>
</select>
onclick="GO()">
</form>
</body>
!?
81

<head>
function GO()
{
//
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" />
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

Java Script

Загружено:

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

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

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

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

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

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

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

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

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

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

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

Java Script

Загружено:

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

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

JavaScript

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

x>=2 && y>=2

!(1 < x && x < 10)

var a = new Date();

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

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

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