Professional Documents
Culture Documents
Ebook Lập trình web bằng javascript PDF
Ebook Lập trình web bằng javascript PDF
Ebook Lập trình web bằng javascript PDF
JAVASCRIPT
Bi 1: TNG QUAN V JAVASCRIPT.
1. c tnh ca ngn ng Javascript:
avascript l mt ngn ng thng dch (interpreter), chng trnh ngun ca n c nhng (embedded)
hoc tch hp (integated) vo tp tin HTML chun. Khi file c load trong Browser (c support cho
JavaScript), Browser s thng dch cc Script v thc hin cc cng vic xc nh. Chng trnh ngun
JavaScript c thng dch trong trang HTML sau khi ton b trang c load nhng trc khi trang c
hin th. Javascript l mt ngn ng c c tnh:
.
n gin.
.
ng (Dynamic).
.
Hng i tng (Object Oriented).
2. Ngn ng JavaScript:
Mt trong nhng c tnh quan trng ca ngn ng JavaScript l kh nng to v s dng cc i tng
(Object). Cc Object ny cho php ngi lp trnh s dng pht trin ng dng. Trong JavaScript ,cc
Object c nhn theo 2 kha cnh:
.a. Cc Object tn ti.
.b. Cc Object do ngi lp trnh xy dng.
Trong cc Object tn ti c chia thnh 2 kiu:
.a. Cc Object ca JavaScript (JavaScript Built-in Object).
.b. Cc i tng c cung cp bi mi trng Netscape.
Airplane.seating
b. Thm cc phng php cho i tng:( Method to Object)
Sau khi c cc thng tin v airplane ta tip tc xy dng phng php s dng thng tin
ny.V d bn mun in ra m t ca airplane hoc tnh ton khong cch ti a ca cuc hnh
trnh vi nhin liu c:
Airplane.description()
Airplane.distance()
c. To mt instance ca i tng:
Trc khi thao tc vi mt i tng ca JavaScript ta phi to mt instance cho i tng .
<!-document.writeln("It work<BR>");
-->
</SCRIPT>
</BODY>
</HTML>
Bi 2: S DNG JAVASCRIPT
1. C php c bn ca lnh :
JavaScript xy dng cc hm,cc pht biu,cc ton t v cc biu thc trn cng mt dng v
kt thc bng ;
V d: document.writeln("It work<BR>");
2. Cc khi lnh:
Nhiu dng lnh c th c lin kt vi nhau v c bao bi { } V d:
{
document.writeln("Does It work");
document.writeln("It work!");
}
V d 2:
<HTML>
<HEAD>
<TITLE>Example 2.4 </TITLE>
</HEAD>
<BODY>
<SCRIPT LANGUAGE="Javascript">
<!- -
document.write('<IMG
SRC="welcome.gif">');
document.write("<BR><H1>WELCOME TO
NETSCAPE 2.1</H1>");
- ->
</SCRIPT>
</BODY>
</HTML>
1.
2.
<HTML>
<HEAD>
<TITLE>Outputting Text</TITLE>
</HEAD>
<BODY>
<PRE>
<SCRIPT LANGUAGE="Javascript">
<!- document.writeln("One,");
document.writeln("Two,");
document.write("Three");
document.write("...");
- ->
</SCRIPT>
</PRE>
</BODY>
</HTML>
\n : New line \t : Tab \r : carriage return \f : form feed \b: backspace V d: document.writeln("It work!\n");
V d 2:
<HTML>
<HEAD>
<TITLE>Listing 2.6</TITLE>
</HEAD>
<BODY>
<SCRIPT LANGUAGE="Javascript">
<!- document.write('<IMG
SRC="welcome.gif">');
document.write('<IMG
SRC="welcome.gif">');
document.write("<H1>Greeting ," +
prompt("enter your name:","name") + "
Welcome to netscape navigator 2.01
</H1>");
- ->
</SCRIPT>
</BODY>
</HTML>
d. D liu kiu null:
Tr v gi tr rng.
e. D liu kiu vn bn (ging nh kiu chui)
V du 2: to li mt gi tr mi cho bin
<HTML>
<HEAD>
<TITLE>Example 3.2</TITLE>
<SCRIPT LANGUAGE="Javascript">
var name=prompt("enter your
name:","name");
alert ("greeting " + name + " , ");
name=prompt("enter your friend's
name:","friend's name");
</SCRIPT>
<BODY>
<SCRIPT LANGUAGE="Javascript">
<!-document.write('<IMG
SRC="Welcome.gif">');
document.write("<H1>Greeting ," +
name + " Welcome to netscape
navigator 2.01 </H1>");
-->
</SCRIPT>
</BODY>
</HTML>
</HEAD>
<BODY>
<SCRIPT LANGUAGE="Javascript">
<!-document.write('<IMG
SRC="Welcome.gif">');
document.write("<H1>Greeting ," +
name + " Welcome to netscape
navigator 2.01 </H1>");
-->
</SCRIPT>
</BODY>
</HTML>
x=10,y=5 x+=y => x=15 -= Tr bn tri cho bn phi ,gn kt qu li cho bn tri
x-=y => x=5
*= Nhn bn tri cho bn phi,gn kt qu cho bn tri x*=y => x=50 /= Chia
bn tri cho phi ,gn kt qu li cho bn tri x/=y => x=2 %= Chia bn tri cho
bn phi v ly s d gn li cho bn tri
x%=y => x=0
* Cc ton t khc:
V d:
x+=15+3
y=++x; (=> y=6 v x tng ln 6)
=> x=18
z=x++; (=> z=6 v sau x gn cho z)
8+5
sau x tng 1 => x=7
32.5 * 72.3
Do ta c kt qu cui cng l:
12 % 5
x=7;y=6;z=6;
Du ++ v du - - v du V d: x=5;
V d:
x=-x => x=-5
x=5;
Php ton Logic
&& : v
||: hoc
! not
V d:
x=5 ,y=2 ,c=3
(x>y) && (x>c)
false && anything is always false
(x>y) || (c<x) => true
!x
Ton t so snh trong JavaScript:
== 1==1 => true != 3<1 =>false > 5 >=4 =>true < the != he => true >= 4==4 =>true <= V d:
Ton t iu kin: C php:
(iu kin ) ? gi tr 1 : gi tr 2 Nu iu kin ng th tr v gi tr 1 Nu iu kin sai
th tr v gi tr 2 V d: (day=Saturday) ? Weekend : Not Saturday
Ton t chui:
Welcome to + Netscape Navigator
V d:
Var welcome=Welcome to
Welcome += Netscape Navigator
welcome= Welcome to Netsacpe Navigator
V d : S dng ton t iu kin kim tra ng vo
<HTML>
<HEAD>
<TITLE>Example 3.3</TITLE>
<SCRIPT LANGUAGE="Javascript">
var question="What is 10+10 ?";
var answer=20;
var correct='<IMG
SRC="correct.gif">';
var incorrect='<IMG
SRC="incorect.gif">';
var response=prompt(question,"0");
<BODY>
<SCRIPT LANGUAGE="Javascript">
<!-document.write(output);
-->
</SCRIPT>
</BODY>
</HTML>
10
correct:incorrect ;
</SCRIPT>
</HEAD>
<BODY>
<SCRIPT LANGUAGE="Javascript">
<!-document.write(output);
-->
</SCRIPT>
</BODY>
</HTML>
BI 3: HM V I TNG
Trong k thut lp trnh cc lp trnh vin thng s dng hm thc hin mt on chng trnh th hin
cho mt module no thc hin mt cng vic no .
Trong Javascript c cc hm c xy dng sn gip bn thc hin mt chc nng no v d nh hm
alert(), document.write(), parseInt() v bn cng c th nh ngha ra cc hm khc ca mnh thc hin mt
cng vic no ca bn, nh ngha hm bn theo c php sau:
function function_name(parameters, arguments)
{
command block
}
Truyn tham s:
function printName(name) {
document.write(<HR>Your Name is <B><I>);
document.write(name);
document.write(</B></I><HR>);
}
V d:
Gi hm printName()vi lnh sau printName(Bob);
Khi hm printName()c thi hnh gi tr ca name l "Bob" nu gi hm
printName()vi i s l mt bin
= Mr. + name;
Phm vi ca bin:
Bin ton cc (Global variable) Bin cc b (Local
variable)
Tr v cc gi tr:
11
V d:
Dng return tr v gi tr ca bin cube.
function cube(number) {
var cube = number * number * number;
return cube;
}
V d:
<HTML>
<HEAD>
<TITLE>Example 4.1</TITLE>
<SCRIPT LANGUAGE=JavaScript>
<!-- HIDE FROM OTHER BROWSERS
//DEFINE FUNCTION testQuestion()
function testQuestion(question) {
//DEFINE LOCAL VARIABLES FOR THE
FUNCTION
var answer=eval(question);
var output=What is + question +
?;
var correct=<IMG
SRC=correct.gif>;
var incorrect=<IMG
SRC=incorrect.gif>;
//ASK THE QUESTION
var response=prompt(output,0");
Hm gi li hm:
V d:
<HTML>
<HEAD>
<TITLE>Example 4.2</TITLE>
<SCRIPT LANGUAGE=JavaScript>
<!-- HIDE FROM OTHER BROWSERS
//DEFINE FUNCTION testQuestion()
function testQuestion(question) {
//DEFINE LOCAL VARIABLES FOR THE
FUNCTION
var answer=eval(question);
var output=What is + question +
?;
var correct=<IMG
SRC=correct.gif>;
var incorrect=<IMG
SRC=incorrect.gif>;
//ASK THE QUESTION
var response=prompt(output,0");
V d 2:
<HTML>
<HEAD>
<TITLE>Example 4.2</TITLE>
<SCRIPT LANGUAGE=JavaScript>
12
?;
var correct=<IMG
SRC=correct.gif>;
var incorrect=<IMG
SRC=incorrect.gif>;
//ASK THE QUESTION
var response=prompt(output,0");
//CHECK THE RESULT
if (chances > 1) {
return (response == answer) ? correct
: testQuestion(question,chances-1);
} else {
return (response == answer) ? correct
: incorrect;
}
}
// STOP HIDING FROM OTHER BROWSERS ->
</SCRIPT>
</HEAD>
<BODY>
<SCRIPT LANGUAGE=JavaScript>
<!-- HIDE FROM OTHER BROWSERS
//ASK QUESTION AND OUTPUT RESULTS
var result=testQuestion(10 + 10,3);
document.write(result);
//STOP HIDING FROM OTHER BROWSERS -->
</SCRIPT>
</BODY>
</HTML>
student1.name
student1.age
student1.grade
13
V d to i tng student2
student2 = new student(Jane,9,82);
V du:
<HTML>
<HEAD>
<TITLE>Example 4.3</TITLE>
<SCRIPT LANGUAGE=JavaScript>
<!-- HIDE FROM OTHER BROWSERS
//DEFINE METHOD
function displayInfo() {
document.write(<H1>Employee Profile:
+ this.name + </H1><HR><PRE>);
document.writeln(Employee Number:
+ this.number);
14
document.writeln(Social Security
Number: + this.socsec);
document.writeln(Annual Salary: +
this.salary);
document.write(</PRE>);
}
//DEFINE OBJECT
function employee() {
this.name=prompt(Enter Employees
Name,Name);
this.number=prompt(Enter Employee
Number for + this.name,000-000");
this.socsec=prompt(Enter Social
Security Number for +
this.name,000-00-0000");
this.salary=prompt(Enter Annual
Salary for + this.name,$00,000");
this.displayInfo=displayInfo;
15
}
newEmployee=new employee();
// STOP HIDING FROM OTHER BROWSERS ->
</SCRIPT>
</HEAD>
<BODY>
<SCRIPT LANGUAGE=JavaScript>
<!-- HIDE FROM OTHER BROWSERS
newEmployee.displayInfo();
// STOP HIDING FROM OTHER BROWSERS ->
</SCRIPT>
</BODY>
</HTML>
Vi du:
<script LANGUAGE="JavaScript">
<!-- Begin
var day="";
var month="";
var ampm="";
var ampmhour="";
var myweekday="";
var year="";
mydate = new Date();
myday = mydate.getDay();
mymonth = mydate.getMonth();
myweekday= mydate.getDate();
weekday= myweekday;
myyear= mydate.getYear();
year = myyear;
day = " Th t, ";
else if(myday == 4)
day = " Th n m, ";
else if(myday == 5)
day = " Th s u , ";
else if(myday == 6)
day = " Th b y , ";
if(mymonth == 0) {
month = "th ng m t ";}
else if(mymonth ==1)
month = "th ng hai ";
else if(mymonth ==2)
month = "th ng ba ";
else if(mymonth ==3)
month = "th ng t ";
else if(mymonth ==4)
month = "th ng n m, ";
myhours = mydate.getHours();
ampmhour = (myhours > 12) ? myhours 12 : myhours;
ampm = (myhours >= 12) ? 'Bu i Chi u '
: ' Bu i S ng ';
mytime = mydate.getMinutes();
myminutes = ((mytime < 10) ? ':0' :
':') + mytime;
if(myday == 0)
day = " Ch Nh t , ";
else if(myday == 1)
day = " Th hai, ";
else if(myday == 2)
day = " Th ba, ";
else if(myday == 3)
else if(mymonth ==5)
month = "th ng s u ";
else if(mymonth ==6)
month = "th ng b y ";
else if(mymonth ==7)
month = "th ng t m ";
else if(mymonth ==8)
month = "th ng chn ";
else if(mymonth ==9)
month = "th ng m i ";
else if(mymonth ==10)
month = "th ng m i m t ";
else if(mymonth ==11)
month = "th ng m i hai ";
// End -->
</script>
16
<body>
<script>
document.write("<b><font color=#0000ff face='VNI-Times,helvetica,arial'>" + ampmhour + "" +
myminutes + ampm) document.write(" -" + day + " ng y " + myweekday +" "); document.write( month +
" , n m " + year + "</font>");
</script>
</body>
M t
Xy ra khi im tp trungca ng vo c di chuyn ra
khi mt thnh phn ca Form (Khi user click ra ngoi mt
trng)
click
Khi user Click vo 1 link hoc thnh phn ca Form.
change
Xy ra khi gi tr ca Form Field b thay i bi user.
focus
Xy ra khi ng vo tp trung vo thnh phn ca Form
load
Xy ra khi mt trang c Load vo trong b duyt.
Xy ra khi User di chuyn mouse qua mt Hyperlink.
mouseover
select
Xy ra khi User chn 1 trng ca thnh phn Form.
submit
Xy ra khi User xc nhn nhp xong d liu.
unload
Xy ra khi User ri khi trang Web.
qun l cc s kin trong javascript ta dng cc b qun l s kin. C php ca
mt b qun l s kin:
<HTML_TAG OTHER_ATTRIBUTES eventHandler=JavaScript Program>
V d:
<INPUT TYPE=text onChange=checkField(this)>
V d:
<INPUT TYPE=text onChange=
if (parseInt(this.value) <= 5) {
17
onLoad, onUnload
onLoad, onUnload
onSubmit
Vi du:
<HTML>
<HEAD>
<TITLE>Example 5.1</TITLE>
<SCRIPT LANGUAGE=JavaScript>
<!-- HIDE FROM OTHER BROWSERS
var name = ;
// STOP HIDING FROM OTHER BROWSERS -->
18
</SCRIPT>
</HEAD>
<BODY onLoad=
name = prompt(Enter Your Name:,Name);
alert(Greetings + name + , welcome to my page!);
onUnload= alert(Goodbye + name + , sorry to see you go!);>
<IMG SRC=title.gif>
</BODY>
</HTML>
Vi du
<HTML>
<HEAD>
<TITLE>Example 5.1</TITLE>
<SCRIPT LANGUAGE=JavaScript>
<!-- HIDE FROM OTHER BROWSERS
// DEFINE GLOBAL VARIABLE
var name = ;
function hello() {
name = prompt(Enter Your Name:,Name);
alert(Greetings + name + , welcome to my page!);
}
function goodbye() {
alert(Goodbye + name + , sorry to see you go!);
}
// STOP HIDING FROM OTHER BROWSERS -->
</SCRIPT>
</HEAD>
<BODY onLoad=hello(); onUnload=goodbye();>
<IMG SRC=title.gif>
</BODY>
</HTML>
Cc s kin v Form
Cac s kin c s dng truy xut Form nh:
OnClick, onSubmit, onFocus, onBlur, v onChange.
V d:
<INPUT TYPE=text NAME=test VALUE=test
onBlur=alert(Thank You!);
onChange=check(this);>
Khi gi tr thay i function check() s c gi. Ta dng t kha this chuyn i tng ca
trng hin hnh n hm check()
Bn cng c th da vo cc phng php v cc thuc tnh ca i tng bng pht biu sau:
this.methodName() & this.propertyName.
V d:
<HTML>
<HEAD>
<TITLE>Example 5.3</TITLE>
<SCRIPT LANGUAGE=JavaScript>
<!-- HIDE FROM OTHER BROWSERS
function calculate(form) {
form.results.value =
eval(form.entry.value);
}
function getExpression(form) {
expression,);
calculate(form);
}
//STOP HIDING FROM OTHER BROWSERS -->
</SCRIPT>
</HEAD>
<BODY>
<FORM METHOD=POST>
Enter a JavaScript mathematical
expression:
<INPUT TYPE=text NAME=entry
19
form.entry.blur();
form.entry.value = prompt(Please
enter a JavaScript mathematical
VALUE=
onFocus=getExpression(this.form);>
<BR>
</FORM>
</BODY>
</HTML>
{
document.write(i + " " + prompt('Enter food number ' + i, 'food' ) +
'<BR>');
}
20
- ->
</SCRIPT>
</BODY>
</HTML>
2 . Vng lp while :
C php:
While ( iu kin)
{
lnh JavaScript ;
}
V d: var num=1; while(num<=10)
{
document.writeln(num); num++;
}
V d:
var answer= ;
var correc=100;
var question= what is 10*10 ? ;
while(answer!=correct)
{
answer=prompt(question,0);
}
3. To mng vi vng lp for:
function createArray(num)
{
this.length=num;
for ( var j=0 ; j<num; j++)
this[j]=0;
}
Hm s to mt mng c gi tr index bt u l 0 v gn tt c cc gi tr ca mng v 0 .
s dng i tng mng ta c th lm nh sau:
newArray= new createArray(4)
S to ra mt mng gm 4 thnh phn newArray[0] NewArray[3]
S dng i tng Windows
Window l i tng ca mi trng Navigator,ngoi cc thuc tnh Window i tng window cn gi cc
i tng khc m c th c xem nh l cc thnh phn (member) ca window, cc i tng l:
.
Cc frame c to
.
Cc i tng location v histtory
.
i tng document i tng document cha (encompasses) tt c cc thnh phn trong trang
HTML.y l mt i tng hon ho c cc i tng khc ca JavaScript gn (attached) vo n (nh l
anchor,form,history,link).Hu nh mi chng trnh JavaScript u c s dng i tng ny tham kho
n cc thnh phn trong trang HTML.
1) Cc thuc tnh (properties) ca i tng document
a.
a . alink
b.
b . anchor
21
c.
c . bgColor
d.
d . cookies
e.
e . fgColor
f.
f . form
g.
g . lastModified
h.
h . linkColor
i.
i . links
j.
j . location
k.
k . referrer
l.
l . title
m.
m . vlinkColor
2) Cc hnh vi (Methods) ca i tng document
a.
a . clear()
b.
b . close()
c.
c . open()
d.
d . write()
e.
e . writeln()
3) Cc thuc tnh ca i tng Window
a.
a . defaultStatus : Gi tr mt nhin c hin th thanh trng thi
b.
b . frames : Mng cc i tng cha ng mt mc cho mi frame con trong mt frame ti liu
c.
c . parent : c s dng trong FRAMSET
d.
d . self : Ca s hin hnh , dng phn bit gia cc ca s hin hnh v cc forms c cng tn .
e.
e . status : Gi tr ca chui vn bn c hin th ti thanh status bar.Dng hin thi cc thng bo
cho ngi s dng .
f.
f . top : nh cao nht ca ca s cha
g.
g . window
4) Cc hnh vi (Methods) ca i tng window
a.
a . alert() : Hin 1 thng bo trong hp thoi vi OK button.
b.
b . close() : ng ca s hin hnh.
c.
c.
open() : M mt ca s mi vi 1 ti liu c ch ra hoc m mt ti liu trong mt tn ca
s c ch nh.
d.
d . prompt() : Hin mt hp thng bo
e.
e . setTimeout() :
f.
f . clearTimeout() : Hnh vi ny cung cp cch gi pht biu JavaScript sau mt khong thi gian tri
qua .Ngoi ra i tng window c th thc hin event handler : onLoad=statement
Lm vic vi status bar
Khi user di chuyn qua mt hyperlink ta c th hin ra mt thng bo ti thanh status bar ca bowser da
vo event handler onMouseOver v bng cch t self.status l mt chui (hoc window.status). V d:
<HTML>
<HEAD>
<TITLE>Status Example</TITLE>
<BODY>
<A HREF=plc.htm onMouseOver=self.status=Chuyen de PLC ;return true ; >Lop chuyen d PLC </A>
<A HREF=tkweb.htm onMouseOver=self.status=Thiet Ke Trang Web ;return true ; >Thiet Ke Web</A>
</BODY>
</HTML>
M v ng cc ca s
S dng phng php open() v close() ta c th iu khin vic m v ng ca s cha ti liu.
open (URL , WindowName , featureList) ;
Cc c im trong phng php open() gm c:
.
.
.
.
.
.
.
.
.
V d:
window.open( plc.htm,newWindow,toolbar=yes,location=1,directories=yes,status=yes,
menubar=1,scroolbar=yes,resizable=0,copyhistory=1,width=200,height=200);
V d:
<HTML>
<HEAD>
<TITLE>WINDOWS</TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!-function openWindow(url,name) {
popupWin = window.open(url, name, "scrollbars=yes,width=800, heigth=200 ");
}
-->
</SCRIPT>
</HEAD>
<BODY>
<a href="javascript:openWindow('../chuyende/plc.htm','Win')">PLC</a>,
<a href="javascript:openWindow('../chuyende/suachuaw.htm','stoogeWin')">Sua chua</a>,
<a href="javascript:openWindow('../chuyende/tkweb.htm','stoogeWin')">Thiet ke web</a>
</BODY>
</HTML>
c.
d.
e.
f.
g.
h.
i.
j.
k.
l.
m.
n.
o.
p.
q.
r.
s.
c . blink()
d . bold()
e . charAt(index)
f . fixed()
g . fontcolor(color)
h . fontsize(size)
i . indexOf(character,[fromIndex])
j . italics()
k . lastIndexOf(character,[fromIndex])
l . link(URL)
m . small()
n . strike()
o . sub()
p . substring(startIndex,endIndex)
q . sup()
r . toLowerCase()
s . toUpperCase()
Yu cu :
Khi Click chut vo Radio Button th c cc thng ip (Message) t-ng ng
<FORM>
<p>
1:
<INPUT TYPE="radio" NAME="radio" value="Bn chn s 1" onClick="alert(value)">
2:
<INPUT TYPE="radio" NAME="radio" value=" Bn chn s 2 " onClick="alert(value)">
3:
<INPUT TYPE="radio" NAME="radio" value=" Bn chn s 3 onClick="alert(value)" >
</form>
2. Bi tp 2
24
Cho tm bit
Khi ng ca s trnh duyt hoc chuyn sang trang Web khc th xut hin li cho tm bit
<html>
<head>
<title>Click the back to see the Example</title>
<meta name="GENERATOR" content="Copyright Next Step Software 1998 (c)">
</head>
<body onUnload="window.alert('This Message Appears When you exit a page!!!!!!!')">
<form>
<p><input TYPE="button" VALUE=" BACK " onClick="history.go(-1)"> </p>
</form>
<p>Click the back to see the Example!</p>
</body>
</html>
4. Bi tp 4
Yu cu ; Khi nhp vo lin kt th Windows hi .Nu OK th ta link dn trang ,khng th ta
khng l g c
http://www.cidnet.vn
<script>
function rusure(){
question = confirm("YOUR CONFIRM MESSAGE")
if (question !="0"){
top.location = "YOUR LINK GOES HERE"
}
}
</script>
25
Now put this anywhere in your page and change YOUR LINK DESCRIPTION
<a href="" onClick="rusure(); return false;">YOUR LINK DESCRIPTION</a>
5.Bi tp 5
Hy to mt ch-ng trnh my tnh in t nh- sau :
<html>
<head><script LANGUAGE="JavaScript">
function a_plus_b(form) {
a=eval(form.a.value)
b=eval(form.b.value)
c=a+b
form.ans.value = c
}
function a_minus_b(form) {
a=eval(form.a.value)
b=eval(form.b.value)
c=a-b
form.ans.value=c
}
function a_times_b(form) {
a=eval(form.a.value)
b=eval(form.b.value)
c=a*b
form.ans.value=c
}
function a_div_b(form) {
a=eval(form.a.value)
b=eval(form.b.value)
c=a/b
form.ans.value = c
}
function a_pow_b(form) {
a=eval(form.a.value)
b=eval(form.b.value)
c=Math.pow(a, b)
form.ans.value = c
}
</script>
<title>E:\button\windowsizer_.htm</title>
</head>
26
<body>
<form name="formx">
<p><input type="text" size="4" value="12" name="a"> <input type="button" value=" + "
onClick="a_plus_b(this.form)"> <input type="button" value=" - "
onClick="a_minus_b(this.form)"> <input type="button" value=" x "
onClick="a_times_b(this.form)"> <input type="button" value=" / "
onClick="a_div_b(this.form)"> <input type="button" value=" ^ "
onClick="a_pow_b(this.form)"> <input type="number" size="4" value="3" name="b"> =
<input
type "number" value="0" name="ans" size="9"> </p>
</form>
</body>
</html>
6.bI tp 6:
To mt ch-ng trnh m t Lch bn nh- sau :
<html>
<head>
<title>Next Step Software - Java Script Number - 14</title>
<meta name="GENERATOR" content="(c) 1998 Copyright Next Step Software">
</head>
<body>
<script LANGUAGE="JavaScript">
<!-- Begin
monthnames = new Array("January","Februrary","March","April","May","June",
"July","August","September","October","November","Decemeber");
var linkcount=0;
function addlink(month, day, href) {
var entry = new Array(3);
entry[0] = month;
entry[1] = day;
entry[2] = href;
this[linkcount++] = entry;
}
Array.prototype.addlink = addlink;
linkdays = new Array();
monthdays = new Array(12);
monthdays[0]=31;
monthdays[1]=28;
monthdays[2]=31;
monthdays[3]=30;
monthdays[4]=31;
27
monthdays[5]=30;
monthdays[6]=31;
monthdays[7]=31;
monthdays[8]=30;
monthdays[9]=31;
monthdays[10]=30;
monthdays[11]=31;
todayDate=new Date();
thisday=todayDate.getDay();
thismonth=todayDate.getMonth();
thisdate=todayDate.getDate();
thisyear=todayDate.getYear();
thisyear = thisyear % 100;
thisyear = ((thisyear < 50) ? (2000 + thisyear) : (1900 + thisyear));
if (((thisyear % 4 == 0)
&& !(thisyear % 100 == 0))
||(thisyear % 400 == 0)) monthdays[1]++;
startspaces=thisdate;
while (startspaces > 7) startspaces-=7;
startspaces = thisday - startspaces + 1;
if (startspaces < 0) startspaces+=7;
document.write("<table border=2 bgcolor=white ");
document.write("bordercolor=black><font color=black>");
document.write("<tr><td colspan=7><center><strong>"
+ monthnames[thismonth] + " " + thisyear
+ "</strong></center></font></td></tr>");
document.write("<tr>");
document.write("<td align=center>Su</td>");
document.write("<td align=center>M</td>");
document.write("<td align=center>Tu</td>");
document.write("<td align=center>W</td>");
document.write("<td align=center>Th</td>");
document.write("<td align=center>F</td>");
document.write("<td align=center>Sa</td>");
document.write("</tr>");
document.write("<tr>");
for (s=0;s<startspaces;s++) {
document.write("<td> </td>");
}
count=1;
while (count <= monthdays[thismonth]) {
for (b = startspaces;b<7;b++) {
linktrue=false;
document.write("<td>");
for (c=0;c<linkdays.length;c++) {
if (linkdays[c] != null) {
if ((linkdays[c][0]==thismonth + 1) && (linkdays[c][1]==count)) {
document.write("<a href=\"" + linkdays[c][2] + "\">");
linktrue=true;
}
28
}
if (count==thisdate) {
document.write("<font color='FF0000'><strong>");
}
if (count <= monthdays[thismonth]) {
document.write(count);
}
else {
document.write(" ");
}
if (count==thisdate) {
document.write("</strong></font>");
}
if (linktrue)
document.write("</a>");
document.write("</td>");
count++;
}
document.write("</tr>");
document.write("<tr>");
startspaces=0;
}
document.write("</table></p>");
// End -->
</script>
</body>
</html>
7.Bi tp 7
Gi th-
Khi Click vo link hoc button th cho php ta nhp vo a ch ng-i nhn v subject.
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
function mailsome1(){
who=prompt("Enter recipient's email address: ","antispammer@earthling.net");
what=prompt("Enter the subject: ","none");
if (confirm("Are you sure you want to mail "+who+" with the subject of "+what+"?")==true){
parent.location.href='mailto:'+who+'?subject='+what+'';
}
}
// End -->
</SCRIPT>
<BODY>
29
<CENTER>
<a href='javascript:mailsome1()'>E-Mail Someone!</a>
<FORM>
<input type=button value="E-Mail Someone!" onClick="mailsome1()">
</FORM>
</CENTER>
8.Bi tp 8
Vit ch-ng trnh cho php link dn mt trang Web khc trong cho php tu chn cc i t-ng
Window
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
function customize(form) {
var address = document.form1.url.value;
var op_tool = (document.form1.tool.checked== true) ? 1 : 0;
var op_loc_box = (document.form1.loc_box.checked == true) ? 1 : 0;
var op_dir = (document.form1.dir.checked == true) ? 1 : 0;
var op_stat = (document.form1.stat.checked == true) ? 1 : 0;
var op_menu = (document.form1.menu.checked == true) ? 1 : 0;
var op_scroll = (document.form1.scroll.checked == true) ? 1 : 0;
var op_resize = (document.form1.resize.checked == true) ? 1 : 0;
var op_wid = document.form1.wid.value;
var op_heigh = document.form1.heigh.value;
var option = "toolbar="+ op_tool +",location="+ op_loc_box +",directories="
+ op_dir +",status="+ op_stat +",menubar="+ op_menu +",scrollbars="
+ op_scroll +",resizable=" + op_resize +",width=" + op_wid +",height="+ op_heigh;
var win3 = window.open("", "what_I_want", option);
var win4 = window.open(address, "what_I_want");
}
function clear(form) {
document.form1.wid.value="";
document.form1.heigh.value="";
}
30
// End -->
</SCRIPT>
<BODY>
<CENTER>
<h4>Please choose from the following selections to customize your window</h4>
<br>
<TABLE cellpadding=5 border><TR><TD><PRE>
<FORM name=form1 ACTION="javascript:" METHOD="POST">
<INPUT TYPE="text" NAME="url" value="http://www.geocities.com" >: URL
<INPUT TYPE="checkbox" NAME="tool">: Toolbar
<INPUT TYPE="checkbox" NAME="loc_box">: Location
<INPUT TYPE="checkbox" NAME="dir">: Directories
<INPUT TYPE="checkbox" NAME="stat">: Status
<INPUT TYPE="checkbox" NAME="menu">: Menubar
<INPUT TYPE="checkbox" NAME="scroll">: Scrollbars
<INPUT TYPE="checkbox" NAME="resize">: Resizable
<INPUT TYPE="text" NAME="wid" value= >: Width
<INPUT TYPE="text" NAME="heigh" value=>: Height
<BR><CENTER>
<INPUT TYPE="button" VALUE="=ENTER=" OnClick="customize(this.form)">
<INPUT TYPE="reset" VALUE="=RESET=" onClick="clear(this.form)">
</PRE></TD></TR></TABLE>
</FORM>
</CENTER>
10. Bi 10 .
kim tra tnh hp l ca thng tin nhp vo
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
function validate(){
var digits="0123456789"
var temp
if (document.testform.Name.value=="") {
alert("No Name !")
return false
}
if (document.testform.age.value=="") {
alert("Invalid Age !")
return false
}
for (var i=0;i<document.testform.age.value.length;i++){
temp=document.testform.age.value.substring(i,i+1)
if (digits.indexOf(temp)==-1){
alert("Invalid Age !")
return false
}
}
31
return true
}// End -->
</SCRIPT>
<BODY>
<FORM name="testform" onSubmit="return validate()">
Name:<input type="text" size=30 name="Name">
Age:<input type="text" size=3 name="age">
<input type="submit" value="Submit">
</FORM>
11. BI tp 11.
To dng ch chy trn thanh trng thi:
Welcome to Total..
<html>
<head><script LANGUAGE="JavaScript">
<!-- Begin
function scrollit(seed) {
var m1 = "Welcome to Total JavaScript 99! ";
var m2 = "..... You can find all the scripts you need here! ";
var m3 = "......Enjoy ";
var m4 = "";
var msg=m1+m2+m3+m4;
var out = " ";
var c = 1;
if (seed > 100) {
seed--;
cmd="scrollit("+seed+")";
timerTwo=window.setTimeout(cmd,100);
}
else if (seed <= 100 && seed > 0) {
for (c=0 ; c < seed ; c++) {
out+=" ";
}
out+=msg;
seed--;
window.status=out;
cmd="scrollit("+seed+")";
timerTwo=window.setTimeout(cmd,100);
}
else if (seed <= 0) {
if (-seed < msg.length) {
out+=msg.substring(-seed,msg.length);
seed--;
window.status=out;
cmd="scrollit("+seed+")";
timerTwo=window.setTimeout(cmd,100);
}
32
else {
window.status=" ";
timerTwo=window.setTimeout("scrollit(100)",75);
}
}
}
// End -->
</script>
<title></title>
</head>
<body onLoad="scrollit(100)">
</body>
</html>
12. BI tp 12
To dng ch chy trong TextBox
<script language="JavaScript">
<!-- begin
var max=0;
function textlist()
{
max=textlist.arguments.length;
for (i=0; i<max; i++)
this[i]=textlist.arguments[i];
}
tl=new textlist
(
"This is a message",
"Another one",
"And this will be the third",
"And the fourth is the last !"
);
var x=0; pos=0;
var l=tl[0].length;
function textticker()
{
document.tickform.tickfield.value=tl[x].substring(0,pos)+"_";
if(pos++==l) { pos=0; setTimeout("textticker()",1000); x++;
if(x==max) x=0; l=tl[x].length; } else
setTimeout("textticker()",50);
}
// end -->
</script>
<html>
<head>
<title>E:\javascripts\scrolls\classic_.htm</title>
</head>
<body onLoad="textticker()">
<form name="tickform">
33
13.V d 13.
To ngy thng chy trn thanh trng thi
<html>
<head>
<title>E:\scrolls\classic_.htm</title>
</head>
<body>
<script LANGUAGE="JavaScript">
<!-- Begin
var osd = " "
osd +="This is yet another JavaScript Scroll example ";
osd +="from the good folks at The JavaScript Source. ";
osd +="This one has the date and time at the front.";
osd +="Did you notice? It's coming around again, look! ";
osd +="
";
var timer;
var msg = "";
function scrollMaster () {
msg = customDateSpring(new Date())
clearTimeout(timer)
msg += " " + showtime() + " " + osd
for (var i= 0; i < 100; i++){
msg = " " + msg;
}
scrollMe()
}
function scrollMe(){
window.status = msg;
msg = msg.substring(1, msg.length) + msg.substring(0,1);
timer = setTimeout("scrollMe()", 200);
}
function showtime (){
var now = new Date();
var hours= now.getHours();
var minutes= now.getMinutes();
var seconds= now.getSeconds();
var months= now.getMonth();
var dates= now.getDate();
var years= now.getYear();
var timeValue = ""
timeValue += ((months >9) ? "" : " ")
timeValue += ((dates >9) ? "" : " ")
timeValue = ( months +1)
34
if (!confirm('Re-initialize snapIn?'))
return false
killScroll = true
scrolling = true
var killID = window.setTimeout('killScroll=false',6)
scrollID = window.setTimeout('scroll(100,0)',10)
return true
}
var scrollID = Object
var scrolling = false
var killScroll = false
// End -->
</script>
<title></title>
</head>
<!-- STEP TWO: Add the onLoad event handler to the BODY tag -->
<body onLoad="startScroller()">
</body>
</html>
15.Bi tp 15
To 3 button nh- sau :
<html>
<head>
<title>Create a New Window</title>
</head>
<body>
<form NAME="winform">
<p><input TYPE="button" VALUE="Open New Window"
onClick="NewWin=window.open('','NewWin',
'toolbar=no,status=no,width=200,height=100'); ">
</p>
<p><input TYPE="button" VALUE="Close New Window" onClick="NewWin.close();">
</p>
<p><input TYPE="button" VALUE="Close Main Window" onClick="window.close();">
</p>
</form>
</body>
</html>
37
16.BI tp 16
Ca s t tr-t
<script language="JavaScript1.2">
var currentpos=0,alt=1,curpos1=0,curpos2=-1
function initialize(){
startit()
}
function scrollwindow(){
if (document.all)
temp=document.body.scrollTop
else
temp=window.pageYOffset
if (alt==0)
alt=1
else
alt=0
if (alt==0)
curpos1=temp
else
curpos2=temp
if (curpos1!=curpos2){
if (document.all)
currentpos=document.body.scrollTop+1
else
currentpos=window.pageYOffset+1
window.scroll(0,currentpos)
}
else{
currentpos=0
window.scroll(0,currentpos)
}
}
function startit(){
setInterval("scrollwindow()",10)
}
window.onload=initialize
</script>
17. Bi tp 17
To Combo box c fulldown menu
<html>
<head><script LANGUAGE="JavaScript">
<!-- Begin
function formHandler(){
var URL = document.form.site.options[document.form.site.selectedIndex].value;
window.location.href = URL;
// End -->
}
</script>
<title>E:\button\pushme_.htm</title>
</head>
38
<!-- STEP ONE: Paste this code into the BODY of your HTML document -->
<body>
<form name="form">
<p><select NAME="site" SIZE="1" onChange="formHandler()">
<option VALUE>Go to.... </option>
<option VALUE="http://www.metacrawler.com">Metacrawler </option>
<option VALUE="http://www.altavista.digital.com">Altavista </option>
<option VALUE="http://www.webcrawler.com">Webcrawler </option>
<option VALUE="http://www.lycos.com">Lycos </option>
<option VALUE="http://www.javascriptsource.com">The JavaScript Source </option>
</select></p>
</form>
</body>
</html>
18 Bi tp 18
To hiu ng ; khi -a chut vo th xut hin nh khc khi -a ra khi nh th hin nh c
<html>
<head>
<title>Document Title</title>
</head>
<body link="ffffff" alink="ffffff" vlink="ffffff">
<font SIZE="+2" FACE="Coronet">
<p align="center">onMouse<b><i>Over</i></b></font><br>
<br>
<a href="index.htm" onMouseOver="s.src='_view1.gif'"
onMouseOut="s.src='_view2.gif'"><img
SRC="_view2.gif" name="s" width="158" height="29"></a><br>
<br>
<font SIZE="+2" FACE="Coronet">onMouse<b><i>Out</i></b></font><br>
<br>
<b>Pass the mouse over the images </b><br>
<b>Check out the script! See how easy this function is.</b><br>
</p>
</body>
</html>
19. Bi tp 19
To nt bm khi ng-i dng bm vo th hin m ngun ch-ng trnh
<FORM>
<INPUT TYPE=button NAME="view" VALUE="click me for the source of the page "
OnClick='window.location="view-source:" +window.location.href'>
</FORM>
20.Bi tp 20
39
return count
}
}
function getCookieVal(offset) {
var endstr = document.cookie.indexOf (";", offset);
if (endstr == -1)
endstr = document.cookie.length;
return unescape(document.cookie.substring(offset, endstr));
}
// End -->
</script>
<title>E:\cookies\name_.htm</title>
</head>
<body>
<script LANGUAGE="JavaScript">
<!-- Begin
document.write("You've been here <b>" + amt() + "</b> times.")
// End -->
</script>
</body>
</html>
41