03 Javascript II

Statement : (loop)
()

for
while
do .. while
Statement : for
for loop

for ( = ; ; )
{
;
}
for (var i=0;i<9;i++) {

document.write(i+"<br>");
}
Statement : for
->
for.html
for1.html
for (var i=0;i<=9;i++) {

}
for (var i=9;i>=0;i--) {
}
Statement : while
while ->

loop while
while (condition) { ; }
while.html
i=0;
while (i<9) {
i++;
}
Statement : while ***
test4-4.html 0 0 loop
i=prompt(Enter any number (0=exit)",0);

while (i!=0)
{
document.write(i);
document.write("<BR>");
i=prompt(Enter any number (0=exit)",0);
}
Statement : do .. while
do while loop while
do { ; } while (condition);
do.html
i=0;
do{
i++;
} while (i<9);
Statement :
if...else, switch
(loop)
for, while, do .. while
5. (Function)

function
5. (Function) :
.
function () {
;
}
function sawasdee() {
document.write("<br>");
document.write(written by sawasdee fn.");
}
5. : Function
(parameter) comma
function (p1,p2,p3,,pn) {
;
}

function-add.html
function add(a,b,c) {
document.write(a+"+"+b+"+"+c+"=" );
document.write(a+b+c);
}
5. : Function
return ;
code5-3.html
function power2(n){
return n*n;
}
5. :
Function
Function
Function
7. (Event)
Events Object
Mouse
Web Page loaded
Submit Button
Event Handle function
- onMouseOver.html
<a href="" onMouseOver="alert('Mouse Over Me!!!')"> OnMouseOver </a>
7. Event : event
onAbort
onBlur
onChange
onClick
onError
onFocus
onLoad
onMouseOver
onMouseOut
onSelect
OnSubmit
OnUnload
--
--
-- text field
--
-- document
--
-- document
--
--
-- textarea
-- submit
-- document document
- code7-1.html Onload OnUnload

- events.html event
7. Event : onBlur
object form
<HTML><HEAD><TITLE>TEST</TITLE></HEAD>
<BODY>
<FORM name="form1">
<INPUT TYPE="text" NAME="test" onblur="alert('test onBlur1')">
<INPUT TYPE="text" NAME="test1" onblur="alert('test onBlur2')">
</FORM>
</BODY>
</HTML>
7. Event : onChange
object form
<BODY>
<FORM name="form1">
<INPUT TYPE="text" NAME="test" value="100"
onChange="alert('Value change to '+this.value)">
</FORM>
</BODY>
</HTML>
7. Event : onClick
mouse object form
<HTML><HEAD>
<TITLE>TEST</TITLE>
<script>
function sum(){
s1 = (document.form1.test.value*1) + (document.form1.test1.value*1) ;
alert("Sum = "+s1);
}
</script> </HEAD> <BODY>
<FORM name="form1">
a = <INPUT TYPE="text" NAME="test" value="100">
<br>
b = <INPUT TYPE="text" NAME="test1" value="100">
<INPUT TYPE="button" value="calc" onClick="sum();">
</FORM> </BODY> </HTML>
7. Event : onError
load
<HTML><HEAD>
<TITLE> New Document </TITLE>
</HEAD>
<BODY>
<INPUT TYPE="image" SRC="testOnAbort1.jpg" width="80%"
width="80%" onerror="alert('Can not find image')">
</BODY>
</HTML>
7. Event : onLoad , OnUnload
load page
<BODY>
<HTML>
<HEAD>
<TITLE>Onload OnUnload</TITLE>
</HEAD>
<BODY onload="alert('Hello')" onunload="alert('Bye Bye!')">
Handling load Event
</BODY>
</HTML>
code7-1.html
7. Event : onMouseOut , OnMouseOver
mouse / object
<HTML><HEAD><TITLE> New Document </TITLE>

</HEAD>
<BODY>
<a href="" onMouseOver="alert('Mouse Over Me!!!')"
onMouseOut="alert('Mouse Out!!!')"> OnMouseOver , OnMouseOut</a>
</BODY>
</HTML>
7. Event : onReset
tag <form>
<HTML><HEAD><TITLE>TEST</TITLE>
</HEAD>
<BODY>
<FORM name="form1" onreset="alert('reset data');">
a = <INPUT TYPE="text" NAME="test">
<br> b = <INPUT TYPE="text" NAME="test1" >
<br><INPUT TYPE="reset" value="reset all" >
</FORM>
</BODY></HTML>
7. Event : onSelect
<BODY>
<FORM name="form1">
<INPUT TYPE="text" NAME="test" onselect="alert('you select data')">
</FORM>
</BODY></HTML>
7. Event : onSubmit
<FORM>
<BODY>
<FORM name="form1" onSubmit="alert('submit this page')">
a = <INPUT TYPE="text" NAME="test" value="100">
<br> b = <INPUT TYPE="text" NAME="test1" value="100">
<INPUT TYPE="submit" value="submit">
</FORM></BODY></HTML>
address bar
7. Event (JavaScript1.2) : onDblClick
Double Click Mouse
<BODY>
<FORM name="form1">
<INPUT TYPE="button" value="Button"
onDblClick="alert('Double Click')">
</FORM></BODY></HTML>
7. Event (JavaScript1.2) : onKeyPress
<BODY>
<FORM name="form1">
<INPUT TYPE="text" NAME="test" onKeyPress="alert('you type
charactor onKeyPress')">
</FORM>
</BODY></HTML>
7. Event (JavaScript1.2) : onKeyDown
<BODY>
<FORM name="form1">
<INPUT TYPE="text" NAME="test" onKeyDown="alert('you
type charactor onKeyDown')">
</FORM>
</BODY></HTML>
7. Event (JavaScript1.2) : onKeyUp
<BODY>
<FORM name="form1">
<INPUT TYPE="text" NAME="test"
onKeyUp="alert('you type charactor onKeyUp')">
</FORM>
</BODY></HTML>
7. Event (JavaScript1.2)
onMouseDown
onMouseMove
object
onMouseUp
object
object
mouse
onMouse.html
7. Event (JavaScript1.2) : onResize
window
<BODY onresize="alert('window resize')">
onresize
</BODY></HTML>
7. Event : event
1. HTML Tag
<INPUT TYPE="BUTTON" NAME="clickMe" VALUE="Click Me!"
onclick="alert('Mouse Click Me!!!')" >
event onClick (test7-1.html)
2. property Object
document.form1.clickMe.onclick =click1;
event onclick (test7-2.html)
code7-2.html
7. Event : Event
Radio Button
<FORM>
<p>HTML ?
<p> 1: <INPUT TYPE="radio" NAME="radio" value=""
onClick="alert(value)>HyperText Markup Language <br>
2: <INPUT TYPE="radio" NAME="radio" value=" "
onClick="alert(value)>HyperText Making Language <br>
3: <INPUT TYPE="radio" NAME="radio" value=" "
onClick="alert(value)>HyperText Marking Learning
</FORM>
test7-3.html
7. Event : Event
Button
<form>
<p>HTML ?
<p>1: <input type="button" name="button" value= " HyperText Markup
Language " onClick="alert(''); return true">
<p>2: <input type="button" name="button" value= " HyperText Marking
Language " onClick="alert(''); return true">
<p>3: <input type="button" name="button" value= " !! "
onClick="alert(' !!'); return true">
</form>
test7-4.html
7. Event :
Event
Even
8. Window
Object window -> web page
Object
object property object window
Object document
window.document.write->document.write ( window )
8. object window :
window

variable = open(url,name,[option])
variable = object window

url =
name = window HTML target= tag
<a></a>
option ( )
option open
option
toolbar
yes/no (1/0)
toolbar
location
yes/no
location
directories
yes/no
directory button
status
yes/no
statusbar
menubar
yes/no
menubar
scrollbar
yes/no
scrollbar
resizeable
yes/no
, window
width
Integer
window
height
Integer
window
outerwidth
Integer
outer width window
outerheight
Integer
Outer height window
left
Integer
Top
Integer
8. object window :
: window
win2=window.open("code8-2.html","smwin");
win2=window.open("code8-2.html","smwin",
"height=100,width=200,status=0,menubar=1,scrollbar=0");
: window
win2.close();
code8-1.html , code8-2.html
8. object window :
code8-2.html
code8-1.html
open
win2
window.opener
window
window
code8-2 object window -> window
code8-1 object window code8-2 -> win2
8. object window : method User
window method -> alert , confirm , prompt
alert() dialog box

alert("alert message");
confirm() ok, cancel
return logical [True,False]
result = confirm("confirm message");
8. object window : method
prompt()
return string
result = prompt("message", " ");
code8-3.html , code8-4.html

1. method confirm()
method alert() ->test8-1.html

2. method prompt()
method alert() ->test8-2.html
8. object window :

method User

03 Javascript II

Uploaded by

Document Information

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

03 Javascript II

Uploaded by

Copyright:

Available Formats

Statement : (loop)

for (var i=0;i<9;i++) {

for (var i=0;i<=9;i++) {

Statement : while ***

i=prompt(Enter any number (0=exit)",0);

do while loop while

Event Handle function

<a href="" onMouseOver="alert('Mouse Over Me!!!')"> OnMouseOver </a>

- code7-1.html Onload OnUnload

mouse object form

7. Event : onLoad , OnUnload

7. Event : onMouseOut , OnMouseOver

<HTML><HEAD><TITLE> New Document </TITLE>

7. Event (JavaScript1.2) : onDblClick

Double Click Mouse

7. Event (JavaScript1.2) : onKeyPress

7. Event (JavaScript1.2) : onKeyDown

7. Event (JavaScript1.2) : onKeyUp

7. Event (JavaScript1.2) : onResize

event onClick (test7-1.html)

event onclick (test7-2.html)

Object window -> web page

variable = object window

outer width window

Outer height window

code8-2 object window -> window

code8-1 object window code8-2 -> win2

8. object window : method User

window method -> alert , confirm , prompt

alert() dialog box

confirm() ok, cancel

return logical [True,False]

result = confirm("confirm message");

8. object window : method

result = prompt("message", " ");

method alert() ->test8-1.html

You might also like