Giao Trinh Java Script 7512

1
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.
3. Built-in Object trong JavaScript:

JavaScript cung cp 1 b cc Built-in Object cung cp cc thng tin v s hin hnh ca cc i tng c load trong trang Web v ni dung ca n.Cc i tng ny bao gm cc phng php (Method) lm vic vi cc thuc tnh (Properties) ca n.
4. Cc i tng c cung cp bi mi trng Netscape:

Netscape Navigator cung cp cc i tng cho php JavaScript tng tc vi file HTML, cc i tng ny cho php chng ta iu khin vic hin th thng tin v p ng cc s kin trong mi trng Navigator.V d i tng M t Window Cung cp cc phng php v cc tnh cht cho ca s hin hnh ca trnh duyt,bao gm cc i tng cho mi frame. Location Cung cp cc tnh cht v phng php lm vic vi cc a ch URL hin hnh c m. History Cc i tng history cung cp thng tin v cc danh sch c v c th gii hn s tng tc vi danh sch. Document y l mt i tng c s dng nhiu nht .N cha ng cc i tng,tnh cht v cc phng php lm vic vi cc thnh phn ca ti liu nh cc :form,link,anchor,applet.
5. Cc i tng do ngi lp trnh xy dng:

a. nh ngha thuc tnh ca i tng: (Object Properties) C php : Object-name.Property-name (tn i tng.tn c tnh) V d :Mt i tng airplane c cc thuc tnh nh sau: Airplane.model Airplane.maxspeed Airplane.price Airplane.fuel 2
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 .
6 . Nhng JavaScript vo trong tp tin HTML:

C php: <SCRIPT LANGUAGE=JavaScript> JavaScript Program </SCRIPT> Thuc tnh ca th SCRIPT .+ SRC :a ch URL ch n tp tin chng trnh JavaScript (*.js) .+ LANGUAGE: Ch nh ngn ng c s dng trong Script v cc phin bn s dng (v d nh :JavaScript ,JavaScript .1.2 vv ,VBScript).
7. n cc Scripts i vi cc Browser khng cung cp JavaScript:

<SCRIPT LANGUAGE=JavaScript> <!- - Dng du Script i vi cc Browser khng cung cp (support) JavaScript Program //Dng kt thc vic du Script v ch thch - - > </SCRIPT>
8. S dng tp tin JavaScript bn ngoi :

<SCRIPT LANGUAGE=JavaScript SRC=http://www.hcmuns.edu.vn/scroll.js> <!- - Dng du Script i vi cc Browser khng cung cp (support) JavaScript Program //Dng kt thc vic du Script v ch thch - - > </SCRIPT>
9. Thm chng trnh vo tp tin HTML:

<HTML> <HEAD> <TITLE>Listing 2.1</TITLE> </HEAD> <BODY> Here is result: <SCRIPT LANGUAGE="Javascript"> 3
<!-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!"); }
3. Xut d liu ra ca s trnh duyt:

Dng 2 phng php document.write() v document.writeln() V d: document.write(Test); document.writeln(Test); 4. Xut cc th HTML t JavaScript V d 1:
<HTML> <HEAD> <TITLE>Outputting Text</TITLE> </HEAD> <BODY> This is text plain <BR> <B> <SCRIPT LANGUAGE="Javascript"> <!- document.write("This is text bold </B>"); - -> </SCRIPT> </BODY> </HTML>
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.
5. S dng phng php writeln() vi th PRE: 6. Cc k t c bit trong chui:

document.writeln("Two,"); document.write("Three"); document.write("..."); - -> </SCRIPT> </PRE> </BODY> </HTML>
<HTML> <HEAD> <TITLE>Outputting Text</TITLE> </HEAD> <BODY> <PRE> <SCRIPT LANGUAGE="Javascript"> <!- document.writeln("One,");
\n : New line \t : Tab \r : carriage return \f : form feed \b: backspace V d: document.writeln("It work!\n");
7. Lm vic vi cc dialog boxes

S dng hm alert() hin th thng bo trong mt hp. V d:
<HTML> <HEAD> <TITLE>Example 2.5 </TITLE> </HEAD> <BODY> <SCRIPT LANGUAGE="Javascript"> <!- alert("Welcome to Netscape Navigator 21"); document.write('<IMG SRC="welcome.gif">'); - -> </SCRIPT> </BODY>
8. Tng tc vi ngi s dng:

S dng phng php promt() tng tc vi ngi s dng. V d 1:
<HTML> <HEAD> <TITLE>Listing 2.6</TITLE> </HEAD> <BODY> <SCRIPT LANGUAGE="Javascript"> <!- -
V d 2:
<HTML> <HEAD> <TITLE>Listing 2.6</TITLE> </HEAD> <BODY> <SCRIPT LANGUAGE="Javascript"> <!- document.write('<IMG SRC="welcome.gif">');
S dng du + cng 2 chui n li: V d 3:

<HTML> <HEAD> <TITLE>Listing 2.6</TITLE> </HEAD> <BODY> <SCRIPT LANGUAGE="Javascript"> <!- -
document.write('<IMG SRC="welcome.gif">');
9. Cc kiu d liu trong JavaScript:

a. D liu kiu s: + S nguyn: v d 720 + S Octal: v d :056 + S Hexa:v d:0x5F + S thp phn :v d :7.24 , -34.2 ,2E3 b. D liu kiu chui: v d: Hello 245 c. D liu kiu Boolean: Kt qu tr v l true hoc false.
document.write("Your favorite color is:"); document.writeln(prompt("enter your favorite color:","Blue")); - -> </SCRIPT> </BODY> </HTML> document.write("<H1>Greeting ,"); document.writeln(prompt("enter your name:","name")); document.write("Welcome to netscape navigator 2.01 </H1>"); - -> </SCRIPT> </BODY> </HTML>
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)
10. To bin trong JavaScript:

Var example; Var example=Hello; Ta c th dng document.write(example); xut ni dung ca bin. 6
V d 1: dng t kha var khai bo bin

<HTML> <HEAD> <TITLE>Example 3.1</TITLE> <SCRIPT LANGUAGE="Javascript"> <!- var name=prompt("enter your name:","name"); - -> </SCRIPT> </HEAD>
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>
11. Lm vic vi bin v biu thc:

Thit lp biu thc: C php: <bin> <ton t > <biu thc> * Ton t: = Thit lp gi tr bn phi cho bn tri V d :x=5
<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>
+= Cng tri v phi ,sau gn kt qu cho bn tri php ton V d: cho 7
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> var output = (response==answer) ? correct:incorrect; </SCRIPT> </HEAD>
<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>
12. Cu trc iu kin if else if iu kin lnh ; if iu kin { M JavaScript } V d: if (day==Saturday) { document.writeln(Its the weekend); alert( Its the weekend); } V d: If (day==Saturday) { document.writeln(Its the weekend); } Cu trc kt hp : if iu kin 1 { Cc lnh JavaScript If (day!=Saturday) { document.writeln(Its not Saturday); } S dng cu trc else if cho v d trn If (day==Saturday) { document.writeln(Its the weekend); } else { document.writeln(Its not Saturday); } if iu kin 2 { Cc lnh JavaScript } else { cc lnh khc } Cc lnh JavaScript } else { Cc lnh khc } V d 1 : S dng phng php confirm() vi pht biu if
<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"); if (response != answer) { if (confirm("Wrong ! press OK for a second change")) response=prompt(question,"0"); } var output = (response ==answer ) ? correct:incorrect ; </SCRIPT> </HEAD> <BODY> <SCRIPT LANGUAGE="Javascript"> <!-document.write(output); --> </SCRIPT> </BODY> </HTML>
V d 2 : S dng phng php confirm() vi pht biu if - else

<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"); if (response != answer) { if (confirm("Wrong ! press OK for a second change")) response=prompt(question,"0"); }else { if (confirm("Correct ! press OK for a second question")) { question="What is 10*10"; answer=100; response=prompt(question,"0"); } } var output = (response ==answer ) ?
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
var user = John; printName(user);

Khi name l John. Nu bn mun thay i gi tr ca name bn c th lm nh sau : name
= 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>  </SCRIPT> </BODY> </HTML>
Hm eval dng chuyn i gi tr chui s thnh gi tr s eval(10*10)tr v gi tr l 100
Hm gi li hm:
V d:
<HTML> <HEAD> <TITLE>Example 4.2</TITLE> <SCRIPT LANGUAGE=JavaScript>  </SCRIPT> </BODY> </HTML>
V d 2:
<HTML> <HEAD> <TITLE>Example 4.2</TITLE> <SCRIPT LANGUAGE=JavaScript> //DEFINE LOCAL VARIABLES FOR THE FUNCTION var answer=eval(question); var output=What is + question +
12
 </SCRIPT> </BODY> </HTML>
Bi 4: TO I TNG TRONG JAVASCRIPT

1. nh ngha thuc tnh ca i tng:
function student(name,age, grade) { this.name = name; this.age = age; this.grade = grade; } to mt Object ta s dng pht biu new.V d to i tng student1
student1 = new student(Bob,10,75);

3 thuc tnh ca i tng student1 l :
student1.name student1.age student1.grade

13
V d to i tng student2 student2 = new student(Jane,9,82);
thm thuc tnh cho student1 bn c th lm nh sau: student1.mother = Susan; hoc

bn c th nh ngha li hm student function student(name, age, grade, mother) { this.name = name; this.age = age; this.grade = grade; this.mother = mother; }
i tng l thuc tnh ca i tng khc

V d: function grade (math, english, science) { this.math = math; this.english = english; this.science = science; } bobGrade = new grade(75,80,77); janeGrade = new grade(82,88,75); student1 = new student(Bob,10,bobGrade); student2 = new student(Jane,9,janeGrade); student1.grade.math:dng ly im Ton ca student1 student2.grade.science: dng ly im mn Khoa hc ca student2
2. Thm phng php cho i tng:

function displayProfile() { document.write(Name: + this.name + <BR>); document.write(Age: + this.age + <BR>); document.write(Mothers Name: + this.mother + <BR>); document.write(Math Grade: + this.grade.math + <BR>); document.write(English Grade: + this.grade.english + <BR>); document.write(Science Grade: + this.grade.science + <BR>); } function student(name,age, grade) { this.name = name; this.age = age; this.grade = grade; this.mother = mother; this.displayProfile = displayProfile; } student1.displayProfile();
V du:
<HTML> <HEAD> <TITLE>Example 4.3</TITLE> <SCRIPT LANGUAGE=JavaScript>  </script>
Trong phn body bn c th xut ra dng nh sau:
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>
Bi 5: S KIN TRONG JAVASCRIPT

Cc s kin cung cp cc tng tc vi ca s trnh duyt v ti liu hin hnh ang c load trong trang web, cc hnh ng ca user khi nhp d liu vo form v khi click vo cc button trong form. Khi s dng b qun l s kin bn c th vit cc hm biu din cho cc hnh ng da vo cc s kin oc chn
Bng s kin trong Javascript B qun l s kin (Event Handler)

Tn s kin blur 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
alert(Please enter a number greater than 5.); } > V d: <INPUT TYPE=text onChange= alert(Thanks for the entry.); confirm(Do you want to continue?); > T kha this: quy cho i tng hin hnh.Trong Javascript Form l m i tng.Cc thnh phn ca Form bao gm text fields, checkboxes, radio buttons, buttons, v selection lists. V d: <INPUT TYPE=text onChange=checkField(this)>
Cc b qun l s kin trong Javascript

i tng B qun l s kin tng ng. Selection list Text element Textarea element Button element Checkbox Radio button Hypertext link Reset button Submit button Document Window Form onBlur, onChange, onFocus onBlur, onChange, onFocus, onSelect onBlur, onChange, onFocus, onSelect OnClick onClick OnClick onClick, onMouseOver OnClick OnClick
onLoad, onUnload onLoad, onUnload onSubmit
Cch dng b qun l s kin onLoad & onUnload

<HTML> <HEAD> <TITLE>Example 5.1</TITLE> </HEAD> <BODY onLoad=alert(Welcome to my page!); onUnload=alert(Goodbye! Sorry to see you go!);> <IMG SRC=title.gif> </BODY> </HTML>
Vi du:
<HTML> <HEAD> <TITLE>Example 5.1</TITLE> <SCRIPT LANGUAGE=JavaScript> 
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>  </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>  </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>
The result of this expression is: <INPUT TYPE=text NAME=results VALUE= onFocus=this.blur();>
</FORM> </BODY> </HTML>
formObjectName.fieldname:Dng ch tn trng ca hin hnh trong Form. formObjectName.fieldname.value: dng ly gi tr ca trng form hin hnh. S dng vng lp trong JavaScript 1 . Vng lp for : C php : for ( init value ; condition ; update expression ) V d : for (i = 0 ; i < 5 ; i++) { lnh ; } V d:
<HTML> <HEAD> <TITLE> for loop Examle </TITLE> </HEAD> <BODY> <SCRIPT LANGUAGE="JavaScript"> <!- var name=prompt("What is your name?" ,"name"); var query= " " ; document.write("<H1>" + name + " 's 10 favorite foods </H1> "); for (var i=1 ;i<=10;i++)
{
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: . toolbar : to mt toolbar chun 22
. . . . . . . .
location: to mt vng location directories: to cc button th mc chun status: to thanh trng thi. menubar : to thanh menu ti nh ca ca s scrollbars: to thanh scroll bar resizable: cho php user thay i kch thc ca s width : ch nh chiu rng ca s theo n v pixel height : ch nh chiu cao ca s theo n v pixel
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>
ng ca s ta c th dng phng php close() V d:

<HTML> <HEAD> <TITLE>Close Example</TITLE> </HEAD> <BODY > <A HREF="#" ONCLICK="self.close();return false"><IMG ALIGN="middle" SRC="../demo.gif" WIDTH="16" HEIGHT="16" BORDER="0"></A> <A HREF="#" ONCLICK="self.close();return false">Close This Sample</A> </BODY > </HTML>
S dng i tng string String l mt i tng ca JavaScript,khi dng i tng string chng ta khng cn cc pht biu to mt instance (th nghim) ca i tng ,bt k lc no ta t text gia hai du ngoc kp v gn n n mt bin hoc mt thuc tnh th ta to mt i tng string. 1. Cc thuc tnh ca i tng string Thuc tnh length gi s k t ca string. 2. Cc hnh vi (Methods) ca i tng string a. a . Anchor (nameAttribute) b. b . big() 23
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()
Bi tp thc hnh JavaScript

1. Bi Tp 1: To Giao Din Nh- Sau
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
Khi Click chut vont Message th hin ln cu cho <form> <input type="button" value="message" onClick="alert('How are you'); return true"> </form> 3.BI tp 3 Khi ng ca s trnh duyt hoc chuyn sang trang Web khc th xut hin li cho tm bit
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">  </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">  </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">  </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">  </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">  </script> <title></title> </head> <body onLoad="scrollit(100)"> </body> </html> 12. BI tp 12 To dng ch chy trong TextBox <script language="JavaScript">  </script> <html> <head> <title>E:\javascripts\scrolls\classic_.htm</title> </head> <body onLoad="textticker()"> <form name="tickform"> 33
<p><input type="text" name="tickfield" size="40"></p> </form> </body> </html>
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">  </script> </body> </html> 14. V d 14. To dng ch bay vo thanh trng thI tng ch ci mt <html> <head><script LANGUAGE="JavaScript">  </script> <title></title> </head>  <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
<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">  } </script> <title>E:\button\pushme_.htm</title> </head> 38
Ca s t tr-t
 <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
S dng Cookies m s ln truy cp trang Web <html> <head><script LANGUAGE="JavaScript">  </script> <title>E:\cookies\name_.htm</title> </head> <body> <script LANGUAGE="JavaScript">  </script> </body> </html>
41

Giao Trinh Java Script 7512

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

Giao Trinh Java Script 7512

Uploaded by

Copyright:

Available Formats

1

3. Built-in Object trong JavaScript:

4. Cc i tng c cung cp bi mi trng Netscape:

5. Cc i tng do ngi lp trnh xy dng:

6 . Nhng JavaScript vo trong tp tin HTML:

7. n cc Scripts i vi cc Browser khng cung cp JavaScript:

8. S dng tp tin JavaScript bn ngoi :

9. Thm chng trnh vo tp tin HTML:

<!-document.writeln("It work<BR>"); --> </SCRIPT> </BODY> </HTML>

3. Xut d liu ra ca s trnh duyt:

5. S dng phng php writeln() vi th PRE: 6. Cc k t c bit trong chui:

7. Lm vic vi cc dialog boxes

8. Tng tc vi ngi s dng:

S dng du + cng 2 chui n li: V d 3:

9. Cc kiu d liu trong JavaScript:

10. To bin trong JavaScript:

V d 1: dng t kha var khai bo bin

11. Lm vic vi bin v biu thc:

+= Cng tri v phi ,sau gn kt qu cho bn tri php ton V d: cho 7

<BODY> <SCRIPT LANGUAGE="Javascript"> <!-document.write(output); --> </SCRIPT> </BODY> </HTML>

V d 2 : S dng phng php confirm() vi pht biu if - else

var user = John; printName(user);

Hm eval dng chuyn i gi tr chui s thnh gi tr s eval(10*10)tr v gi tr l 100

?; var correct=<IMG SRC=correct.gif>;

Bi 4: TO I TNG TRONG JAVASCRIPT

student1 = new student(Bob,10,75);

student1.name student1.age student1.grade

V d to i tng student2 student2 = new student(Jane,9,82);

thm thuc tnh cho student1 bn c th lm nh sau: student1.mother = Susan; hoc

i tng l thuc tnh ca i tng khc

2. Thm phng php cho i tng:

Trong phn body bn c th xut ra dng nh sau:

Bi 5: S KIN TRONG JAVASCRIPT

Bng s kin trong Javascript B qun l s kin (Event Handler)

Cc b qun l s kin trong Javascript

onLoad, onUnload onLoad, onUnload onSubmit

Cch dng b qun l s kin onLoad & onUnload

form.entry.blur(); form.entry.value = prompt(Please enter a JavaScript mathematical

VALUE= onFocus=getExpression(this.form);> <BR>

</FORM> </BODY> </HTML>

- -> </SCRIPT> </BODY> </HTML>

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:

ng ca s ta c th dng phng php close() V d:

Bi tp thc hnh JavaScript

<p><input type="text" name="tickfield" size="40"></p> </form> </body> </html>

13.V d 13. To ngy thng chy trn thanh trng thi

You might also like