Java Script

JavaScript
DOM
(DOM)
1. built in object
2.
3. DOM
DOM
Netscape DOM
Document
(Document object)
1.
2.HTMLBody
document.
document.()
bgColor
alinkColor
linkColor
vlinkColor
fgColor
title
lastModified
URL
-> HTML BGCOLOR

-> HTML ALINK
-> HTML LINK
-> HTML VLINK
-> HTML TEXT
-> HTML <title>
->
-> URL

Document
Anchor
Applet
Area
Image
Form
Link

<Script>
document.write(" ")
document.write(document.lastModified)
</Script>
Image
(Image object)
1.
2.HTMLIMG

<Script>
//
img1 = new Image();
img1.src = "/image1.gif";
img2 = new Image();
img2.src = "/image2.GIF";
</Script>
Form
(Form object)
1.
2.
3.HTML

Form
Button
Checkbox
FileUpload
Hidden
Password
Radio
Reset
Select
Submit
Text
Textarea
.
.()
forms[].
forms[].()
action
elements
encoding
length
method
target
->ACTION
->
->POST
->
-> (POST/GET)
->
eval()
reset()
submit()
toString()
valueOf()
->
-> reset
-> submit
->
->
(Text object)

onBlur, onChange, onFocus

onKeyDown, onKeyUp
onMouseDown, onMouseUp

type = text
//
name = tel
//
value = 03-4257387
//
size = 20
//
title =
//
AccessKey = L
//
maxlength = 10
//
readonly
//
- text(1)
<form>
<input type=text name=name
onBlur="alert(this.value+'! ')"><BR>
<input type=text name=stdId
onKeyDown="alert(':'+this.value)"><BR>
<input type=text name=classId
onFocus="this.value='JC201'"><BR>
</form>
this
defaultValue
type
name
value
->
->
->
->
- text(2)
<form name=form1>
onBlur="alert(''+this.type)"><BR>
<input type=text name=stdId
onChange="alert(''+this.name)"><BR>
<input type=text name=classId value=JC201
onChange="alert(''+this.defaultValue+'
'+this.value)"><BR>
</form>
- text(3)
<form name=form1>
<input name=id_no
onkeypress="if((event.keyCode < 48)||(event.keyCode > 57))
return false;">
</form>
0 9
4-1

text
4-2
1. outlook express
2.
3.
4. Access Key


<BODY>
<FORM NAME=form1>
<INPUT TYPE=text NAME=sub>

<A HREF='#' onClick=javascript:open('query.htm','','width=100')>
</A>
</FORM>
</BODY>
<body>


<Script>
function choice(sub){
opener.document.form1.sub.value = sub
self.close()
}
</Script>
<LI><A HREF=javascript:choice("Internet")>Internet</A>
<LI><A HREF=javascript:choice("JavaScript")>JavaScript</A>
(Radio object)
1. ()
2. ON OFF
onBlur, onClick, onFocus

onKeyDown, onKeyUp

type = radio
name = gender
value = boy
checked
//
//gender
//boy
//
Input type=radio name=sex value=boy checked
- radio (1)
<form name=form1>
<input type=radio name=gender

onBlur="this.form.result.value=''">
onClick="this.form.result.value=''">
onFocus="this.form.result.value=''">
<BR><input type=text name=result>
</form>
this.form
document.form1
4-3
text
checked
defaultChecked
type
name
value
->
->
->
->
->
- radio (2)
<form name=form1>
<input type=radio name=gender><BR>

<input type=radio name=gender checked><BR>
<input type=button value="" onclick=SEX()>
</form>
<script>
function SEX(){
if (document.form1.elements[0].checked)
gender=""
else
gender=""
alert(''+gender)
}
</script>
4-4
(Checkbox object)
1. ()
2. ON OFF

onKeyDown, onKeyUp

type = checkbox
name = hobby
value = music
checked
//
//
//
//
Input type=checked name=hobby value=music
- checkbox
<form>
<input type=checkbox name=fishing

onBlur="this.form.result.value+=','">
<input type=checkbox name=movie
onClick="this.form.result.value+=','">
<input type=checkbox name=music
onFocus="this.form.result.value+=','">
<BR><input type=text name=result size=30>
</form>
(1)
<form>
<input type=text name=name maxlength=8 size=8><BR>
<input type=radio name=sex value=boy checked>
<input type=radio name=sex value=girl><BR>
<input type=checkbox name=fishing>
<input type=checkbox name=tv checked>
<input type=checkbox name=music><BR>
<input type=submit value=>
<input type=reset value=>
</form>
(2)
<form>
<input type=button value=(1)
onclick = this.form.elements[0].value="">
<input type=button value=(2)
onclick = this.form.elements[3].checked="true">
</form>
(3)
<body onLoad=document.forms[0].elements[0].focus()>
<form>
<input type=button value=
onclick=alert(this.form.elements.length)>
</form>
</body>
(4)
<body onLoad=document.forms[0].elements[0].focus()>
<form>
onBlur="alert(this.value+'! !')"><BR>
</form>
</body>
(password object)
1.
2. *

onKeyDown, onKeyUp

type = password
name = password
value = 1234
size = 20
maxlength = 10
//
//
//
//
//
Input type=password name=pw
- password(1)
<form name=form1>
<input type=password name=pw1><BR>
<input type=password name=pw2><BR>
<input type=button value= onClick=checkPw()>
</form>
<Script>
function checkPw(){
if (document.form1.pw1.value != document.form1.pw2.value)
alert ("")
else alert ("OK!")
}
</Script>
4-5
1. ''
2. ''
3.
4. ''
defaultValue
type
name
value
->
->
->
->
- password(2)
<Script>
function checkPwLgh(index,str){
if (str.length != 9){
alert(''+str.length+'\n9')
document.form1.elements[index].value = ''
document.form1.elements[index].focus()
}}
function checkRetype(){
if (document.form1.pw.value !=
document.form1.retypePw.value){
alert ("")
document.form1.retypePw.value = ''
document.form1.retypePw.focus()
}
else alert ("!")}
</Script> <>
- password(2)
<>
<form name=form1>
<input type=password name=pw size=9 maxlength=9

onChange=checkPwLgh(0,this.value)><BR>
<input type=password name=retypePw size=9 maxlength=9

onChange=checkPwLgh(1,this.value)><BR>
<input type=button value= onClick=checkRetype()>
</form>
(hidden object)

type = hidden
name = dummy
value = 1234
//
//
//
Input type=hidden name=dummy value=1234
(select object)


onClick, onDblClick

name = week
size = 3
multiple
option
selected
value
//
//
//
//
//
//
- select(1)
<form>
<select size=2>
<option value=0>Sunday
<option value=1>Monday
<option value=2>Tuesday
<option value=3>Wednesday
<option value=4>Thursday
<option value=5>Friday
<option value=6 Selected>Saturday
</select>
</form>
type
name
value
selectedIndex
length
options
->
->
->
->
->
->
- select(2)
<Script>
url = new Array(2)
url[0] = "http://www.seed.net.tw"
url[1] = "http://www.hinet.net"
function jumpPage(form) {
i = form.menu.selectedIndex;
if (i>0) window.location.href = url[i-1]
}
</Script>
<Form><Select name=menu onChange="jumpPage(this.form)">
<option>--ISP--<option>Seednet<option>Hinet
</Select></Form>
4-6

1.
2. Lay out


<BODY>
<FORM NAME=form1>
<INPUT TYPE=text NAME=sub>

<A HREF='#' onClick=javascript:open('query.htm','','width=100')>
</A>
</FORM>
</BODY>


<Script>
function choice(){
var my = document.form1.select1
opener.document.form1.sub.value = my.value
self.close()
}
</Script>
<Form name=form1>
<Select name=select1 onChange=choice()>
<option>-<option value=Internet>Internet
<option value=JavaScript>Javascript</Select>
</Form>

<Html><Script>
function createOptions(){
var option = new Option(document.form1.select1.value)
document.form1.select2.options[2] = option
}
</script>
<form name=form1>
<select name=select1 size=10>
<option>
<option>--------------<option value=>
<option value=>
<option value=>
<option value=>
</select>

<input type=button value="-->" onClick=createOptions()>

<select name=select2 size=10>
<option>
<option>--------------</select></form>
</Body>
</Html>
4-7

1.
()
2.
3.
4. Lay out
4-8
1.
2.
4-9
1.
2.
(button object)

type = button
name = button1
value =
title =
tabindex = 0
disabled
//
//
//
//
//
//
type
name
value
disabled
->
->
->
->
- button
<form name=form1>
<BR>
<input type=text
onChange="document.form1.button1.value=this.value">
<BR>
<input type=button name=button1 value='
'>
</form>
- button
<FORM onReset="this.button1.disabled=true">
<INPUT TYPE=text onClick="this.form.button1.disabled=false">
<INPUT TYPE=button name=button1 disabled value=" ">
<INPUT TYPE=reset value=" ">
</FORM>
4-10
1.
2.
(submit object)


Form
onSubmit

type = submit
name = submit1
value =
//
//
//
Input type=submit name=submit1 value=
type
name
value
->
->
->
- submit
<Script>
function isReady() {
if (document.form1.text1.value.length == 9)
return true
else
alert("9");return false
}
1.
</Script>
<Form name=form1 onSubmit="return isReady()"> 2.onSubmit = true
<input type=text name=text1>

<input type=submit>
</form>
- submit
<Script>
function isReady(form) {
if (form.text1.value.length == 9)
return true
else
alert("9")
form.text1.focus()
// text
return false
}
</Script>
<Form name=form1 onSubmit="return isReady(this)">
<input type=submit>
</form>
(reset object)


Form
onReset

type = reset
//
name = reset1
//
value = //
Input type=reset name=reset1 value=
type
name
value
->
->
->
- reset
<Form name=form1 onReset=alert("")>
<input type=reset>
</form>
(textarea object)


name = textarea1
rows = 8
cols = 30
readonly
//
//
//()
//
Input type=reset name=reset1 value=
type
name
value
defaultValue
->
->
->
->
- textarea
<form name=form1>
......<BR>
<textarea name=textarea1 rows=8 cols=30>
</textarea>
<input type=button value=
onClick=
alert('\n---------\n'+document.form1.textarea1.value)>
</form>
Audio
Netscape
NetScape plug-ins
-- Sound Player for Netscape Navigator
wav, au, midi, aiff

1.window.location
2.<embed>
Microsoft IE
Microsoft
1. Plug - ins
2. DirectShow ActiveX control
Media Player

1. <embed>
2. <OBJECT>
- Embed
<embed>
1. hidden player
2. autostartloop
play() stop()
LiveAudio
src
autostart
showcontrols
showdisplay
showstatusbar
loop
volume
width
height
align
hidden
->
->
->
->
->
->
->
->
->
->
->
URL
(pixel)
(pixel)
LiveAudio
play()
stop ()
pause ()
setvol ()
start_time ()
end_time ()
isReady ()
isPlaying ()
isPause ()
getVolume ()
->
->
->
->
->
->
->
->
->
->
(1) - location
<body onLoad=playSound()>
<script>
function playSound()
{
window.location = "hurt.mid"
}
</script>
</body>
(2) - embed
<body>
<form>
<input type=button value=STOP
onClick=document.embeds[0].stop() >
<input type=button value=PLAY
onClick=document.embeds[0].play() >
</form>
<embed src="hurt.mid" autostart=true hidden=true>
</body>
(3)
<embed src="start.wav" hidden autostart="false">
<a href="http://tw.yahoo.com"
onmouseover="document.embeds[0].play()">
YAHOO</a><br>
<a href="http://www.hubert.idv.tw"
onmouseover="document.embeds[0].play()">
</a>
(4) -
<script>
song = new Array(10)
song[0] ='everlong.mid
song[2] ='life.mid
song[4] ='fly.mid
song[6] ='short.mid
song[8] ='mable.mid
song[10] = 'govt.mid
song[1] ='niceshot.mid'
song[3] ='polly.mid'
song[5] ='damnit.mid'
song[7] ='anarchy.mid'
song[9] = 'sellout.mid'
index = Math.floor(Math.random() * 10)

document.write("<EMBED SRC="+song[index]+" autostart=true
hidden=true loop=infinite>")
</script>
Video on Demand
<Script>
var videoName = new Array()
videoName[1] = "carson.mpg";
videoName[3] = "fanta.mpg";
videoName[5] = "Japp1.mpg";
videoName[7] = "PS2.mpeg";
videoName[9] = "sonyV8.mpeg
videoName[2] = "door.mpe";
videoName[4] = "fotoprix.mpg";
videoName[6] = "Japp2.mpg";
videoName[8] = "schiesser.mpg";
;videoName[10] = "webalia.mpeg";
function show() {
fm = document.form1
i = fm.menu.selectedIndex;
newWin = open('','','width=450, height=350, resizable=1')
newWin.document.write("<center><embed src=" +
videoName[i] + " controls='CONSOLE'></center>")
newWin.document.title = "ON AIR"
}
Video on Demand (con.)

</Script>
<Form name="form1">
<Select name=menu onChange="show()">
<option>
<option>Carson
<option>
<option>Fanta
<option>fotoprix
<option>Japp(1) <option>Japp(2)
<option>PS2
<option>Schiesser
<option>SONY V8
<option>Webalia.com
</Select>
- Object
Microsoft <OBJECT> ActiveX
HTML
ps1. IE
ps2. PARAM
DirectShow (1)
FileName
AutoStart
PlayCount
ClickToPlay
CurrentState
->
->
->
->
->
CurrentPosition
DisplayBackColor
DisplayForeColor
Volume
->
->
->
->
URL
0,1
2
DirectShow (2)
ShowCaptioning
ShowControls
ShowDisplay
ShowGotoBar
ShowStatusBar
ShowTracker
->
->
->
->
->
->
DirectShow
pause()
run ()
stop ()
->
->
->
(5) - DirectShow
<object
classid="clsid:22d6f312-b0f6-11d0-94ab-0080c74c7e95">
<param name="filename" value=".mid">
<param name="autostart" value="true">
<param name="showcontrols" value="0">
<param name="clicktoplay" value="1">
</object>

<object id="radio" style="display:none"
classid="clsid:05589fa1-c356-11ce-bf01-00aa0055595a">
<param name="filename"
value="mms://live.sys.hinet.net/asiafm">
<param name=autoStart value="1">
</object>
(6)
<SCRIPT>
function playIt() {
var sel = document.form1.sel
var songName = sel.options[sel.selectedIndex].text
if (confirm("...." + songName)) {
audio.FileName = "mid\\" + songName + ".mid"
audio.AutoStart = true
}
}
</SCRIPT>
(6)
<OBJECT ID="audio"
CLASSID="CLSID:05589FA1-C356-11CE-BF01-00AA0055595A">
<PARAM NAME="FileName" VALUE="">
</OBJECT>
<FORM NAME=form1>
?
<SELECT NAME=sel onChange="playIt()">
<OPTION>..
<OPTION>
<OPTION>
<OPTION>
<OPTION>
</SELECT>
</FORM>

Q. .
A. Style Sheet display
ex. STYLE="display:none"
(7)
<SCRIPT>
function playIt() {
var sel = document.form1.sel
var songName = sel.options[sel.selectedIndex].text
audio.FileName = "mp3\\" + songName + ".mp3"
audio.AutoStart = true
}
</SCRIPT>
(7)
<OBJECT ID="audio" STYLE="display:none"

CLASSID="CLSID:05589FA1-C356-11CE-BF01-00AA0055595A">
<PARAM NAME="FileName" VALUE="">
</OBJECT>
<FORM NAME=form1>
<SELECT NAME="sel" onChange="playIt()">

<OPTION>..
<OPTION>But I Do Love You
<OPTION>You Are
<OPTION>Together Forever Always
</SELECT>
<FONT onClick="javascript:audio.stop()" STYLE="cursor:'hand'">
STOP</FONT>
</FORM>

Java Script

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Java Script

Uploaded by

Copyright:

Available Formats

JavaScript

-> HTML BGCOLOR

onBlur, onChange, onFocus

<INPUT TYPE=text NAME=sub>

onBlur, onClick, onFocus

Input type=radio name=sex value=boy checked

<input type=radio name=gender

<input type=radio name=gender><BR>

onBlur, onClick, onFocus

Input type=checked name=hobby value=music

<input type=checkbox name=fishing

onBlur, onChange, onFocus

Input type=password name=pw

<input type=password name=pw size=9 maxlength=9

<input type=password name=retypePw size=9 maxlength=9

Input type=hidden name=dummy value=1234

onBlur, onChange, onFocus

<INPUT TYPE=text NAME=sub>

<input type=button value="-->" onClick=createOptions()>

onBlur, onClick, onFocus

onBlur, onClick, onFocus

Input type=submit name=submit1 value=

<input type=text name=text1>

onBlur, onClick, onFocus

Input type=reset name=reset1 value=

onBlur, onChange, onFocus

Input type=reset name=reset1 value=

index = Math.floor(Math.random() * 10)

Video on Demand (con.)

<OBJECT ID="audio" STYLE="display:none"

<SELECT NAME="sel" onChange="playIt()">

You might also like