Đang tải... (xem toàn văn)
Tài liệu hướng dẫn lập trình JAVA SCRIPT
JavaScript 1CHNG 1 LI NểI UVi HTML and Microsoft FrontPage bn ó bit cỏch to ra trang Web - tuy nhiờn ch mi mc biu din thụng tin ch cha phi l cỏc trang Web ng cú kh nng ỏp ng cỏc s kin t phớa ngi dựng. Hóng Netscape ó a ra ngụn ng script cú tờn l LiveScript thc hin chc nng ny. Sau ú ngụn ng ny c i tờn thnh JavaScript tn dng tớnh i chỳng ca ngụn ng lp trỡnh Java. Mc dự cú nhng im tng ng gia Java v JavaScript, nhng chỳng vn l hai ngụn ng riờng bit.JavaScript l ngụn ng di dng script cú th gn vi cỏc file HTML. Nú khụng c biờn dch m c trỡnh duyt din dch. Khụng ging Java phi chuyn thnh cỏc mó d biờn dch, trỡnh duyt c JavaScript di dng mó ngun. Chớnh vỡ vy bn cú th d dng hc JavaScript qua vớ d bi vỡ bn cú th thy cỏch s dng JavaScript trờn cỏc trang Web.JavaScript l ngụn ng da trờn i tng, cú ngha l bao gm nhiu kiu i tng, vớ d i tng Math vi tt c cỏc chc nng toỏn hc. Tuy vy JavaScript khụng l ngụn ng hng i tng nh C++ hay Java do khụng h tr cỏc lp hay tớnh tha k.JavaScript cú th ỏp ng cỏc s kin nh ti hay loi b cỏc form. Kh nng ny cho phộp JavaScript tr thnh mt ngụn ng script ng.Ging vi HTML v Java, JavaScript c thit k c lp vi h iu hnh. Nú cú th chy trờn bt k h iu hnh no cú trỡnh duyt h tr JavaScript. Ngoi ra JavaScript ging Java khớa cnh an ninh: JavaScript khụng th c v vit vo file ca ngi dựng.Cỏc trỡnh duyt web nh Nescape Navigator 2.0 tr i cú th hin th nhng cõu lnh JavaScript c nhỳng vo trang HTML. Khi trỡnh duyt yờu cu mt trang, server s gi y ni dung ca trang ú, bao gm c HTML v cỏc cõu lnh JavaScript qua mng ti client. Client s c trang ú t u n cui, hin th cỏc kt qu ca HTML v x lý cỏc cõu lnh JavaScript khi no chỳng xut hin. Cỏc cõu lnh JavaScript c nhỳng trong mt trang HTML cú th tr li cho cỏc s kin ca ngi s dng nh kớch chut, nhp vo mt form v iu hng trang. Vớ d bn cú th kim tra cỏc giỏ tr thụng tin m ngi s dng a vo m khụng cn n bt c mt quỏ trỡnh truyn trờn mng no. Trang HTML vi JavaScript c nhỳng s kim tra cỏc giỏ tr c a vo v s thụng bỏo vi ngi s dng khi giỏ tr a vo l khụng hp l.Mc ớch ca phn ny l gii thiu v ngụn ng lp trỡnh JavaScript bn cú th vit cỏc script vo file HTML ca mỡnh.Khoa Toan tin, Đại học Quốc gia Hà Nội JavaScript 2CHƯƠNG 2 NHẬP MÔN JAVASCRIPT2.1.NHÚNG JAVASCRIPT VÀO FILE HTMLBạn có thể nhúng JavaScript vào một file HTML theo một trong các cách sau đây:• Sử dụng các câu lệnh và các hàm trong cặp thẻ <SCRIPT>• Sử dụng các file nguồn JavaScript• Sử dụng một biểu thức JavaScript làm giá trị của một thuộc tính HTML• Sử dụng thẻ sự kiện (event handlers) trong một thẻ HTML nào đóTrong đó, sử dụng cặp thẻ <SCRIPT> .</SCRIPT> và nhúng một file nguồn JavaScript là được sử dụng nhiều hơn cả.2.1.1.Sử dụng thẻ SCRIPTScript được đưa vào file HTML bằng cách sử dụng cặp thẻ <SCRIPT> và <\SCRIPT>. Các thẻ <SCRIPT> có thể xuất hiện trong phần <HEAD> hay <BODY> của file HTML. Nếu đặt trong phần <HEAD>, nó sẽ được tải và sẵn sàng trước khi phần còn lại của văn bản được tải.Thuộc tính duy nhất được định nghĩa hiện thời cho thẻ <SCRIPT> là “LANGUAGE=“ dùng để xác định ngôn ngữ script được sử dụng. Có hai giá trị được định nghĩa là "JavaScript" và "VBScript". Với chương trình viết bằng JavaScript bạn sử dụng cú pháp sau :<SCRIPT LANGUAGE=”JavaScript”>// INSERT ALL JavaScript HERE</SCRIPT>Điểm khác nhau giữa cú pháp viết các ghi chú giữa HTML và JavaScript là cho phép bạn ẩn các mã JavaScript trong các ghi chú của file HTML, để các trình duyệt cũ không hỗ trợ cho JavaScript có thể đọc được nó như trong ví dụ sau đây:<SCRIPT LANGUAGE=”JavaScript”><!-- From here the JavaScript code hidden// INSERT ALL JavaScript HERE// This is where the hidden ends --></SCRIPT>Dòng cuối cùng của script cần có dấu // để trình duyệt không diễn dịch dòng này dưới dạng mã JavaScript. Các ví dụ trong chương này không chứa đặc điểm ẩn của JavaScript để mã có thể dễ hiểu hơn.Khoa Toan tin, §¹i häc Quèc gia Hµ NéiChú ý:Ghi chú không được đặt trong cặp thẻ <- và -> như ghi chú trong file HTML. Cú pháp của JavaScript tương tự cú pháp của C nên có thể sử JavaScript 32.1.2. S dng mt file ngun JavaScript Thuc tớnh SRC ca th <SCRIPT> cho phộp bn ch rừ file ngun JavaScript c s dng (dựng phng phỏp ny hay hn nhỳng trc tip mt on lnh JavaScript vo trang HTML).Cỳ phỏp:<SCRIPT SRC="file_name.js"> </SCRIPT>Thuc tớnh ny ry hu dng cho vic chia s cỏc hm dựng chung cho nhiu trang khỏc nhau. Cỏc cõu lnh JavaScript nm trong cp th <SCRIPT> v </SCRIPT> cú cha thuc tinh SRC tr khi nú cú li. Vớ d bn mun a dũng lnh sau vo gia cp th <SCRIPT SRC=" ."> v </SCRIPT>:document.write("Khụng tỡm thy file JS a vo!");Thuc tớnh SRC cú th c nh rừ bng a ch URL, cỏc liờn kt hoc cỏc ng dn tuyt i, vớ d:<SCRIPT SRC=" http://cse.com.vn ">Cỏc file JavaScript bờn ngoi khụng c cha bt k th HTML no. Chỳng ch c cha cỏc cõu lnh JavaScript v nh ngha hm.Tờn file ca cỏc hm JavaScript bờn ngoi cn cú uụi .js, v server s phi ỏnh x uụi .js ú ti kiu MIME application/x-javascript. ú l nhng gỡ m server gi tr li phn Header ca file HTML. ỏnh x uụi ny vo kiu MIME, ta thờm dũng sau vo file mime.types trong ng dn cu hỡnh ca server, sau ú khi ng li server:type=application/x-javascriptNu server khụng ỏnh x c uụi .js ti kiu MIME application/x-javascript , Navigator s ti file JavaScript c ch ra trong thuc tớnh SRC v khụng ỳng cỏch.Trong vớ d sau, hm bar cú cha xõu "left" nm trong mt cp du nhỏy kộp:function bar(widthPct){document.write(" <HR ALIGN='LEFT' WIDTH="+widthPct+"%>")}2.3. TH <NOSCRIPT> V </NOSCRIPT>Cp th ny dựng nh rừ ni dung thụng bỏo cho ngi s dng bit trỡnh duyt khụng h tr JavaScript. Khi ú trỡnh duyt s khụng hiu th <NOSCRIPT> v nú b l i, cũn on mó nm trong cp th ny s c Navigator hin th. Ngc li, nu trỡnh duyt cú h tr JavaScript thỡ on mó trong cp th <NOSCRIPT> s c b qua. Tuy nhiờn, iu ny cng cú th xy ra nu ngi s dng khụng s dng JavaScript trong trỡnh duyt ca mỡnh bng cỏch tt nú i trong hp Preferences/Advanced.Khoa Toan tin, Đại học Quốc gia Hà NộiChỳ ýKhi bn mun ch ra mt xõu trớch dn trong mt xõu khỏc cn s dng du nhỏy n ( ' ) phõn nh xõu ú. iu ny cho phộp script nhn JavaScript 4Vớ d:<NOSCRIPT><B> Trang ny cú s dng JavaScript. Do ú bn cn s dng trỡnh duyt Netscape Navigator t version 2.0 tr i!<BR><A HREF="http://home.netscape.com/comprd/mirror/index.html">Hóy kớch chut vo õy ti v phiờn bn Netscape mi hn</A></BR>Nu bn ó s dng trỡnh duyt Netscape t 2.0 tr i m vn c c dũng ch ny thỡ hóy bt Preferences/Advanced/JavaScript lờn</NOSCRIPT>Hỡnh 2.3: Minh ho th NOSCRIPT2.3. HIN TH MT DềNG TEXTTrong hu ht cỏc ngụn ng lp trỡnh, mt trong nhng kh nng c s l hin th ra mn hỡnh mt dũng text. Trong JavaScript, ngi lp trỡnh cng cú th iu khin vic xut ra mn hỡnh ca client mt dũng text tun t trong file HTML. JavaScript s xỏc nh im m nú s xut ra trong file HTML v dũng text kt qu s c dch nh cỏc dũng HTML khỏc v hin th trờn trang.Hn na, JavaScript cũn cho phộp ngi lp trỡnh sinh ra mt hp thụng bỏo hoc xỏc nhn gm mt hoc hai nỳt. Ngoi ra, dũng text v cỏc con s cũn cú th hin th trong trng TEXT v TEXTAREA ca mt form.Trong phn ny, ta s hc cỏch thc write() v writeln() ca i tng document.Khoa Toan tin, Đại học Quốc gia Hà Nội JavaScript 5Đối tượng document trong JavaScript được thiết kế sẵn hai cách thức để xuất một dòng text ra màn hình client: write() và writeln(). Cách gọi một cách thức của một đối tượng như sau:object_name.property_nameDữ liệu mà cách thức dùng để thực hiện công việc của nó được đưa vào dòng tham số, ví dụ:document.write("Test");document.writeln('Test');Cách thức write() xuất ra màn hình xâu Text nhưng không xuống dòng, còn cách thức writeln() sau khi viết xong dòng Text tự động xuống dòng. Hai cách thức này đều cho phép xuất ra thẻ HTML. Ví dụ: Cách thức write() xuất ra thẻ HTML<HTML><HEAD><TITLE>Ouputting Text</TITLE></HEAD><BODY> This text is plain.<BR> <B><SCRIPT LANGUAGE="JavaScript"><!-- HIDE FROM OTHER BROWSERSdocument.write("This text is bold.</B>");// STOP HIDING FROM OTHER BROWSERS --></SCRIPT></BODY></HTML> Khoa Toan tin, §¹i häc Quèc gia Hµ Néi JavaScript 6Ví dụ: Sự khác nhau của write() và writeln():<PRE><SCRIPT LANGUAGE="JavaScript"><!-- HIDE FROM OTHER BROWSERSdocument.writeln("One,");document.writeln("Two,");document.write("Three ");document.write(" .");// STOP HIDING FROM OTHER BROWSERS --></SCRIPT></PRE> Khi duyệt sẽ được kết quả:Hình 2.5: Sự khác nhau của write() và writeln()2.4. GIAO TIẾP VỚI NGƯỜI SỬ DỤNGJavaScript hỗ trợ khả năng cho phép người lập trình tạo ra một hộp hội thoại. Nội dung của hộp hội thoại phụ thuộc vào trang HTML có chứa đoạn script mà không làm ảnh hưởng đến việc xuất nội dung trang.Cách đơn giản để làm việc đó là sử dụng cách thức alert(). Để sử dụng được cách thức này, bạn phải đưa vào một dòng text như khi sử dụng document.write() và document.writeln() trong phần trước. Ví dụ:alert("Nhấn vào OK để tiếp tục");Khoa Toan tin, §¹i häc Quèc gia Hµ Néi JavaScript 7Khi ú file s ch cho n khi ngi s dng nhn vo nỳt OK ri mi tip tc thc hinThụng thng, cỏch thc alert() c s dng trong cỏc trng hp: Thụng tin a v form khụng hp l Kt qu sau khi tớnh toỏn khụng hp l Khi dch v cha sn sng truy nhp d liuTuy nhiờn cỏch thc alert() mi ch cho phộp thụng bỏo vi ngi s dng ch cha thc s giao tip vi ngi s dng. JavaScript cung cp mt cỏch thc khỏc giao tip vi ngi s dng l promt(). Tng t nh alert(), prompt() to ra mt hp hi thoi vi mt dũng thụng bỏo do bn a vo, nhng ngoi ra nú cũn cung cp mt trng nhp d liu vo. Ngi s dng cú th nhp vo trng ú ri kớch vo OK. Khi ú, ta cú th x lý d liu do ngi s dng va a vo.Vớ d: Hp hi thoi gm mt dũng thụng bỏo, mt trng nhp d liu, mt nỳt OK v mt nỳt CancelChng trỡnh ny s hi tờn ngi dựng v sau ú s hin th mt thụng bỏo ngn s dng tờn mi a vo. Vớ d c lu vo file Hello.html<HTML><HEAD><TITLE> JavaScript Exemple </TITLE><SCRIPT LANGUAGE= JavaScript>var name=window.prompt(Hello! Whats your name ?,);document.write(Hello + name + ! I hope you like JavaScript );</SCRIPT></HEAD><BODY> </BODY></HTML>Khi duyt cú kt qu:Vớ d ny hin th du nhc nhp vo tờn vi phng thc window.prompt. Giỏ tr t c s c ghi trong bin cú tờn l name. Bin name c kt hp vi cỏc chui khỏc v c hin th trong ca s ca trỡnh duyt nh phng thc document.write.Khoa Toan tin, Đại học Quốc gia Hà NộiHỡnh2.1: Hin th ca s nhp tờnHỡnh 2.2: Hin th li ch o ng i nhp JavaScript 8Bõy gi bn ó cú ý tng v cỏc chc nng cú th t c qua JavaScript, chỳng ta hóy tip tc tỡm hiu thờm v chớnh ngụn ng ny.2.5. IM LI CC LNH V M RNGLNH/M RNG KIU Mễ TSCRIPT th HTML Hp cha cỏc lnh JavaScript SRC Thuc tớnh ca th SCRIPTGi a ch ca file JavaScript bờn ngoi. File ny phi cú phn uụi .jsLANGUAGE thuc tớnh ca th SCRIPTnh rừ ngụn ng script c s dng (JavaScript hoc VBScript)// Ghi chỳ trong JavaScript ỏnh du ghi chỳ mt dũng trong on script/* .*/ Ghi chỳ trong JavaScript ỏnh du ghi chỳ mt khi trong on script document.write() cỏch thc JavaScript Xut ra mt xõu trờn ca s hin thi mt cỏch tun t theo file HTML cú on script údocument.writeln() Cỏch thc JavaScript Tng t cỏch thc document.write() nhng vit xong t xung dũng.alert() Cỏch thc ca JavaScript Hin th mt dũng thụng bỏo trờn hp hi thoipromt() Cỏch thc JavaScript Hin th mt dũng thụng bỏo trong hp hi thoi ng thi cung cp mt trng nhp d liu ngi s dng nhp vo.Khoa Toan tin, Đại học Quốc gia Hà Nội JavaScript 9CHNG 3 BIN TRONG JAVASCRIPT3.1. BIN V PHN LOI BINTờn bin trong JavaScript phi bt u bng ch hay du gch di. Cỏc ch s khụng c s dng m u tờn mt bin nhng cú th s dng sau ký t u tiờn.Phm vi ca bin cú th l mt trong hai kiu sau: Bin ton cc: Cú th c truy cp t bt k õu trong ng dng.c khai bỏo nh sau :x = 0; Bin cc b: Ch c truy cp trong phm vi chng trỡnh m nú khai bỏo. Bin cc b c khai bỏo trong mt hm vi t khoỏ var nh sau:var x = 0;Bin ton cc cú th s dng t khoỏ var, tuy nhiờn iu ny khụng thc s cn thit.3.2. BIU DIN T T TRONG JAVASCRIPTT t l cỏc giỏ tr trong chng trỡnh khụng thay i. Sau õy l cỏc vớ d v t t:8The dog ate my shoetrue3.3. KIU D LIUKhỏc vi C++ hay Java, JavaScript l ngụn ng cú tớnh nh kiu thp. iu ny cú ngha l khụng phi ch ra kiu d liu khi khai bỏo bin. Kiu d liu c t ng chuyn thnh kiu phự hp khi cn thit.Vớ d file Variable.Html:<HTML><HEAD><TITLE> Datatype Example </TITLE><SCRIPT LANGUAGE= "JavaScript">var fruit='apples';var numfruit=12;numfruit = numfruit + 20;var temp ="There are " + numfruit + " " + ".";document.write(temp);</SCRIPT></HEAD><BODY></BODY></HTML>Cỏc trỡnh duyt h tr JavaScript s x lý chớnh xỏc vớ d trờn v a ra kt qu di õy:Khoa Toan tin, Đại học Quốc gia Hà NộiChỳ ýKhỏc vi C, trong JavaScript khụng cú kiu hng s CONST biu din mt giỏ tr JavaScript 10Trình diễn dịch JavaScript sẽ xem biến numfruit có kiểu nguyên khi cộng với 20 và có kiểu chuỗi khi kết hợp với biển temp.Trong JavaScript, có bốn kiểu dữ liệu sau đây: kiểu số nguyên, kiểu dấu phẩy động, kiểu logic và kiểu chuỗi.1.1.1. KIỂU NGUYÊN (INTERGER)Số nguyên có thể được biểu diễn theo ba cách:• Hệ cơ số 10 (hệ thập phân) - có thể biểu diễn số nguyên theo cơ số 10, chú ý rằng chữ số đầu tiên phải khác 0.• Hệ cơ số 8 (hệ bát phân) - số nguyên có thể biểu diễn dưới dạng bát phân với chữ số đầu tiên là số 0.• Hệ cơ số 16 (hệ thập lục phân) - số nguyên có thể biểu diễn dưới dạng thập lục phân với hai chữ số đầu tiên là 0x.1.1.2. KIỂU DẤU PHẨY ĐỘNG (FLOATING POINT)Một literal có kiểu dấu phẩy động có 4 thành phần sau:• Phần nguyên thập phân.• Dấu chấm thập phân (.).• Phần dư.• Phần mũ.Khoa Toan tin, §¹i häc Quèc gia Hµ NéiHình 3.1: Kết quả của xử lý dữ liệu [...]... ngơn ngữ lập trình Java. Mặc dù có những điểm tương đồng giữa Java và JavaScript, nhưng chúng vẫn là hai ngôn ngữ riêng biệt. JavaScript là ngơn ngữ dưới dạng script có thể gắn với các file HTML. Nó khơng được biên dịch mà được trình duyệt diễn dịch. Không giống Java phải chuyển thành các mã dễ biên dịch, trình duyệt đọc JavaScript dưới dạng mã nguồn. Chính vì vậy bạn có thể dễ dàng học JavaScript... thành một ngôn ngữ script động. Giống với HTML và Java, JavaScript được thiết kế độc lập với hệ điều hành. Nó có thể chạy trên bất kỳ hệ điều hành nào có trình duyệt hỗ trợ JavaScript. Ngồi ra JavaScript giống Java ở khía cạnh an ninh: JavaScript không thể đọc và viết vào file của người dùng. Các trình duyệt web như Nescape Navigator 2.0 trở đi có thể hiển thị những câu lệnh JavaScript được nhúng... cách sử dụng JavaScript trên các trang Web. JavaScript là ngơn ngữ dựa trên đối tượng, có nghĩa là bao gồm nhiều kiểu đối tượng, ví dụ đối tượng Math với tất cả các chức năng toán học. Tuy vậy JavaScript không là ngôn ngữ hướng đối tượng như C++ hay Java do khơng hỗ trợ các lớp hay tính thừa kế. JavaScript có thể đáp ứng các sự kiện như tải hay loại bỏ các form. Khả năng này cho phép JavaScript trở... bng number. Khoa Toan tin, Đại học Quèc gia Hµ Néi JavaScript 3 2.1.2. Sử dụng một file nguồn JavaScript Thuộc tính SRC của thẻ < ;SCRIPT& gt; cho phép bạn chỉ rõ file nguồn JavaScript được sử dụng (dùng phương pháp này hay hơn nhúng trực tiếp một đoạn lệnh JavaScript vào trang HTML). Cú pháp: < ;SCRIPT SRC="file_name.js"> < /SCRIPT& gt; Thuộc tính này rấy hữu dụng cho việc chia... WIDTH="+widthPct+"%>") } 2.3. THẺ <NOSCRIPT> VÀ </NOSCRIPT> Cặp thẻ này dùng để định rõ nội dung thơng báo cho người sử dụng biết trình duyệt khơng hỗ trợ JavaScript. Khi đó trình duyệt sẽ khơng hiểu thẻ <NOSCRIPT> và nó bị lờ đi, cịn đoạn mã nằm trong cặp thẻ này sẽ được Navigator hiển thị. Ngược lại, nếu trình duyệt có hỗ trợ JavaScript thì đoạn mã trong cặp thẻ <NOSCRIPT> sẽ được bỏ qua.... và điều hướng trang. Ví dụ bạn có thể kiểm tra các giá trị thông tin mà người sử dụng đưa vào mà không cần đến bất cứ một quá trình truyền trên mạng nào. Trang HTML với JavaScript được nhúng sẽ kiểm tra các giá trị được đưa vào và sẽ thông báo với người sử dụng khi giá trị đưa vào là khơng hợp lệ. Mục đích của phần này là giới thiệu về ngơn ngữ lập trình JavaScript để bạn có thể viết các script. .. Preferences/Advanced/JavaScript lên </NOSCRIPT> Hình 2.3: Minh hoạ thẻ NOSCRIPT 2.3. HIỂN THỊ MỘT DÒNG TEXT Trong hầu hết các ngơn ngữ lập trình, một trong những khả năng cơ sở là hiển thị ra màn hình một dịng text. Trong JavaScript, người lập trình cũng có thể điều khiển việc xuất ra màn hình của client một dòng text tuần tự trong file HTML. JavaScript sẽ xác định điểm mà nó sẽ xuất ra trong file HTML và dòng... dữ liệu, một nút OK và một nút Cancel Chương trình này sẽ hỏi tên người dùng và sau đó sẽ hiển thị một thơng báo ngắn sử dụng tên mới đưa vào. Ví dụ được lưu vào file Hello.html <HTML> <HEAD> <TITLE> JavaScript Exemple </TITLE> < ;SCRIPT LANGUAGE= “JavaScript”> var name=window.prompt(“Hello! What’s your name ?”,””); document.write(“Hello ” + name + “ ! I hope you like JavaScript... Các câu lệnh JavaScript nằm trong cặp thẻ < ;SCRIPT& gt; và < /SCRIPT& gt; có chứa thuộc tinh SRC trừ khi nó có lỗi. Ví dụ bạn muốn đưa dịng lệnh sau vào giữa cặp thẻ < ;SCRIPT SRC=" "> và < /SCRIPT& gt;: document.write("Không tìm thấy file JS đưa vào!"); Thuộc tính SRC có thể được định rõ bằng địa chỉ URL, các liên kết hoặc các đường dẫn tuyệt đối, ví dụ: < ;SCRIPT SRC="... tuyệt đối, ví dụ: < ;SCRIPT SRC=" http://cse.com.vn "> Các file JavaScript bên ngồi khơng được chứa bất kỳ thẻ HTML nào. Chúng chỉ được chứa các câu lệnh JavaScript và định nghĩa hàm. Tên file của các hàm JavaScript bên ngồi cần có đi .js, và server sẽ phải ánh xạ đi .js đó tới kiểu MIME application/x-javascript. Đó là những gì mà server gửi trở lại phần Header của file HTML. Để ánh . "VBScript". Với chương trình viết bằng JavaScript bạn sử dụng cú pháp sau :< ;SCRIPT LANGUAGE=”JavaScript”>// INSERT ALL JavaScript. các trình duyệt cũ không hỗ trợ cho JavaScript có thể đọc được nó như trong ví dụ sau đây:< ;SCRIPT LANGUAGE=”JavaScript”><!-- From here the JavaScript
