Hướng dẫn tự học ngôn ngữ lập trình javascrip

v à o mộl w e b site, sử dụng JavaScript với Document Object Model, các eveni trình duyệt, các frame và 'veb form > Với các chủ điểm JavaScript nâng cao như gỡ rối một chương trình JavaS

ThS NGUYỄN NAM THUẬN

v à nhóm tin học thực dụ n g

©

y Sách dành cho tất cả những ai quan tâm đến JavaScript, mong muốn

tnục hiện đuỢc, mọi khứ /ối JavaScript, nhất là thêm các thành phần

tương lác vào các trang web cá nhân của minh

> Sách õề cụp óến những k/úa cạnh miết yếu của các ngôn ngữ lạp

trình như các câu lệnh đối tượng, và các kiểu dữ liệu

> Hưổng d ẫ u c á c h ú d i h ụ p JavaSeiipî v à o mộl w e b site, sử dụng

JavaScript với Document Object Model, các eveni trình duyệt, các frame và 'veb form

> Với các chủ điểm JavaScript nâng cao như gỡ rối một chương trình

JavaScript, phát hiện mã Ici, và liên kết ''ôi các đối tượng khác được nhúng trong mộl trang web

NHÀ XUẤT BẢN THÔNG TIN VÀ TRUYỀN THÔNG

Chưởng 1: Chuẩn bị để lập trình bằnq JavaScript 7

PHẦN í

Hoc những điểm cơ bản về

JavaScript

Chiứýng 1 : Chuẩn bị đ ể lậ p trình bằng J a v a S c rip t

Chương 2: H ọc những đ iểm c ơ bản về J a v a S c rip t

Chương 3: Sử dụ n g c á c c la ss

J a v a S c rip t c à i sẵ n Chương 4 : TỔ chức dữ liệii thành

cá c m ảng

8 Chương 1: Chuẩn bị để lập trình bằng JavaScript

Chuẩn bị để lộp trình bòng

JavaScript

T ro n g ch ư ơ n g n à y b ạ n sẽ học n h ữ n g đ iể m c h ín h sa u đây:

B Chọn một môi tnỉờng phát triển

ỄỄ Học nbữnq gì JavaScript cỏ thể và không thề thực biện

M Quyết định phiêti bản lĩèiO của JavaScript đ ề sủ dụng

B Test các chương trình JavaScript sứ dụng HTML

R Sử dụnq thẻ HTML <scrỉpỉ>

B Tạo một template JavaScript bằng Microsoft Notepad

B Giao tiếp với người dùng

Đằng sau mọi bộ phim th à n h công có m ột người ở hậu trường chi phối sự tương tác của các diễn viên, n h â n viên điều khiển

cam era, tác giả kịch bản và những th à n h viên ê kíp khác

Đây chính là đạo diễn và mặc dù bạn không th ậ t sự th ấy người này trên

m àn hình, nhưng ch ất lượng của bộ phim phụ thuộc vào sự th à n h công

của những nỗ lực của người này

Jav aS crip t là "đạo diễn" đằng sau hậu trường của nhiều web site

In tern et Công việc của nó là chi phối sự tương tác của các đối tượng và

sự kiện sao cho cả h ai tương tác trơn tru với nhau Nói chung, web site

Chưởng 1: Chuẩn bi để lập trình bằng JavaScript 9

càng phức tạp th ì nó càng phụ thuộc vào Jav aS crip t đạo diễn Ánh sáng! Camera! T rìn h duyệt! Diễn!

Có lẽ câu hỏi đầu tiên cần được hỏi về JavaS cript là, nó là gì? Câu trả lòi đơn giản n h ấ t là JavaScript là một ngôn ngữ lập trìn h đơn giản, được

sử dụng chủ yếu để mang sự tương tác đến các web site Nó thường đươc gọi là ngôn ngữ viết script (kịch bản) nhưng nó cũng có một dạng không viết script

Một script tro n g th u ật ngữ lập trìn h là một chương trìn h không cần được biên dịch để chạy Các script cần thực hiện một tác vụ riêng biệt và sau đó th o á t và thường không có một giao diện người dùng đồ họa (GUI)

để nói đến Jav aS crip t, Perl và VBScript là những ngôn ngữ viết script phổ biến n h ấ t được sử dụng bởi các web site In tern et

Tìm h iểu lịch sử củ a JavaS cript

Jav aS crip t được sinh ra do nhu cầu cộng tác các tra n g web (H ypertext

M arkup Language) với nội dung nhúng chẳng h ạ n như các applet Java Nhưng Ja v a S c rip t được sử dụng cho nhiồu điều hơn thế Nó còn dược sử dụng để giúp những người đùng điền vào các form, cung cấp sự tương tác

\*eb sk e thúng qjfi L á c meixU dộng và cung cấp n àn g lượng cho các shopping cart (giỏ mua sắm) thương mại điện tử (e-commerce) T h ậ t ra, người ta nói rằ n g 25% trong tấ t cả web site ngày nay sử dụng JavaS cript bằng m ột cách này hoặc cách kia

Điều phúc làn h là sự hỗ trợ JavaS cript khá n h ấ t quán qua nhiều nhà tạo trìn h duyệt và số phiên bản Các nhà p h át triể n Web có th ể thực thi một chương trìn h JavaS cript và không phái bận tâm quá nhiều về những vấn đề khả n ă n g tương thích (ngoại trừ trá n h những kỹ th u ậ t viết mã không tương thích n h ât định) JavaS cript đã được chọn lựa sử dụng rộng rãi như vậy chủ yếu vì các nhà p h át triển có th ể tin tưởng nó sẽ làm việc.Lời nguyền rủa là trong khi JavaS cript vẫn giậm chân tạ i chỗ, thì các ngồn ngữ khác đã nổi lên để lấp đầy khoảng trống kỹ thuật Ngày càng

có nhiều web site sử dụng Visual Basic Script (VBScript) hoặc Jav a

10 Chương 1: Chuẩn bị để lập trình bằng JavaScript

Server Pages (JSP) làm một ngôn ngữ viết script web phía server thay

vì JavaS cript T h ậ t ra, việc một phần mềm web server thông dụng được tung ra gần đây (iP lanet Web Server) đã loại bỏ sự hỗ trự JavaScript Tuy nhiên, điều này có th ể th ay đổi khi JavaS cript2.0 thu hút sự chú ý của các n h à p h á t triển

Nguồn gốc của JavaScript

Jav aS crip t đã xuất hiện lần đầu tiên trong N etscape 2.0 vào năm

1995 Ban đầu JavaS cript được th iế t k ế để giúp tích hợp các tran g HTML với các applet Ja v a - ứng dụng Ja v a được nhúng trong các tran g web Các n h à p h á t triể n n h an h chóng n hận ra tiềm năng th ậ t sự của nó và chẳng bao lâu Jav aS crip t đá được sử dụng để thèm khả năng tương tác vào các web site - phần lớn thời gian không có sự trợ giúp của Java

H ình 1.1 m inh họa N avigator 2.0, trìn h duyệt web được b ật JavaScript đầu tiên

JavaScript xâm nhập vào Internet Explorer

Ngay sau khi Netscape Communications lần đầu giới thiệu JavaS cript trong trìn h duyệt N avigator 2.0 của nó, Microsoft đã n h ận ra tầm quan trọng của việc k ết n h ập ngôn ngữ này vào trìn h duyệt In te rn e t Explorer của nó Vì N etscape không chính xác sẽ gởi m ail cho Microsoft mã nguồn và th ậm chí thông số’ ngôn ngữ là một bí m ật được bảo vệ tốt, Microsoft đã buộc phải th iế t k ế đối chiếu Jav aS crip t để tạo phiên bản riêng của nó Microsoft đ ặt tên cho phiên bản của nó là Jscrip t, V Ị

Netscape đã sở hữu thương hiệu trên từ JavaScript.

Các phiên bản trước dó của Jsc rip t đá không thực thi các ciiức náng

n h ấ t định theo chính xác cùng một cách như Jav aS crip t và do đó sự không tương thích Jav aS crip t giữa các trìn h duyệt đã là điều mà các nhà

p h át triể n thường phải xem xét khi viết script các tra n g web của họ

JavaScript trở thành một chuẩn chính thức

Trong những ngày đầu của Web, khả năng tương thích giữa các trình duyệt đã là một vấn đề lớn - lớn hơn nhiều so với ngày nay Hai công ty trìn h duyệt chính đã có những thay đổi đối với các ngôn ngữ HTML và JavaScript để cố đ ạt được một ưu th ế cạnh tra n h với nhau, gây ra nhừng cơn đau đầu lớn cho các nh à phát triển web cố tạo các tran g web hỗ trợ cả hai trìn h duyệt May thay cả hai công ty này đã bớt căng thẳng hơn.Netscape khôn ngoan chuyển sự chuẩn hóa Jav aS crip t sang hiệp hội các n h à sản xuất m áy tín h châu Âu (ECMA) vào năm 1996 ECMA đã

tậ p tru n g vào việc chuẩn hóa ngôn ngữ cốt lõi nhưng để những thứ khác (chẳng hạn như JavaScript Document Object Model hoặc DOM) cho những

nh à sản xuất trìn h duyệt K ết quả là những sự không tương thích tiếp tục tồn tại giữa các trìn h duyệt

hlnh 1.1 ũiện mạo của Web trong nàm 1995 qua con mắt của Navigator 2 0

ECMA đă p h á t h àn h ngôn ngữ viết script được chuẩn hóa được gọi là ECM AScript vào năm 1997 Họ cập n h ậ t chuẩn này hai lần trong hai năm tiếp theo gọi các bản cập n h ật là Edition 2 và Edition 3 JavaS cript 1.5 phù hợp vrti Edition 3 của chuẩn

Vị ti í của JavaScript ngày nd)

Chuẩn ECM AScript Edition 4 sẽ ià bản cập n h ật đầu tiên được tung

ra Irong hơn 4 nàm JavaScript ‘2.0 pnù họp với Edition 4 của chuẩn

EC M A Scnpt, và sự khác biệt, giữa hai ấn bản này th ì cực kỳ nhó

12 Chưởng 1: Chuẩn bị để lập trình bằng JavaScript

Bảng 1.1 Trình ỉự thời gian của các phiẽn bản JavaScrip t

P h iên bản

JavaS crip t

Ngày phát hành

Các trình duyệt Tuân th eo chuẩn

Internet Explorer 5

ECMÂScript i, ISO-16262

không xuất hiện trong bất kỳ trình duyệt web

ECMAScript 1, ISO-16262

B ảng 1.1 trìn h b ày m ột d an h sách theo th ứ tự thờ i g ia n của các phiên

b ả n J a v a S c rip t bao gồm m ột danh sách n g ắn các trìn h d u y ệt th ô n g d ụ n b

hỗ trợ nhau

Q Ị x d í -

-Mqdij phát hành ckínli xóc của JavaScript 2 0 và các pliiên bản của các trìnli dui^ệt vốn sẽ liỗ tpợ nó chưa dược quijết ẩịnli Uli sách nàij được viết.

C họn một môi trư ờ n g p h á t triể n

M ột tro n g n h ữ n g ưu t h ế lớn n h ấ t của J a v a S c rip t là nó hỗ trợ trê n nhiều n ề n k h ác n hau, thường cho những mục đích k h ác n h au Loại ứng dụng J a v a S c rip t phổ biến n h ấ t ngày nay là m ột ứng dụng chạy bên tro n g m ột tr ìn h duyệt web dưới dạng m ột sc rip t p h ía clien t Từ lâu

J a v a S c rip t cũng đã được hỗ trợ như là m ột ngôn ngữ p h ía web server, tro n g các môi trư ờ n g phổ biến chẳng h ạ n như IIS và L iveW ire Từ đây các n h à p h á t triể n th ậ m chí có nhiều lựa chọn hơn cho việc sử dụng

J a v a S c rip t tro n g các môi trư ờng khác nhau

T rong p h ầ n n ày chúng ta sẽ xem Ja v a S c rip t được sử d ụ n g tro n g từ ng môi trường này n h ư th ế nào N hững môi trường này chưa hỗ trợ Jav aS crip t

2.0, n h ư n g điều quan trọ n g là hãy xem những môi trư ờ n g tiề m n ă n g m à

k ể từ k h i hỗ trợ có lẽ sẽ được giới thiệu tro n g tương lai gần

Chương 1: Chuẩn bi để lậo trình bằng JavaScript 13

P h ần này cũng sẽ thảo luận các môi trường p h á t triể n cho các nh à

p h á t triể n Jav a S c rip t Trong vài năm đầu Ja v a S c rip t h iện hữu, các n h à

p h á t triể n đã phải tạo các chương trìn h Ja v a S c rip t của họ sử dụng chĩ

m ột bộ biên tậ p te x t m à không có sự trợ giúp của các môi trường p h á t triể n tích hợp (IDE) Nhưng khi các công cụ HTM L p h á t triể n , nhiều người đã th ém sự hỗ trợ p h á t triể n cho ngôn ngữ v iết scrip t phổ biến

n h ấ t th ố giới Và ngày 1)11’ sự hỗ tro' đó h iện hữu tro n g tấ t cả công cụ lớn như chúng ta sẽ th ấ y sau trong p h ần này

Phát triển các trang web được vận hành bằng JavaScript

Các ứng dụng m à được th iế t k ế để chạv bên tro n g m ột trìn h duyệt cho đến bây giờ được sử dụng phổ biến n h ấ t cho Ja v a S c rip t Ja v a S c rip t đã đưực tích hựp r ấ t m ạn h vào môi trường duyệt web th ông qua DOM

N etscape giới thiệu DOM gôíic trong Ja v a S c rip t 1.0

Điều bạn cẩn biết

Sự tương tự p hía client

Trcnçj cônc nghệ phát triển w e t, 'rình d jyêt web ' à nr.áy t'n ’ 1 mà r ó chạy

tính mà nó chạy trên đó được gọi là server Do đó thuật ngữ client-side JavaScript (JavaScript phía C lie n t ) ám chỉ đến các chương trình JavaScript được nhúng bên trong một trang web và chạy trên máy C lie n t JavaScript chạy tren rráy &e-.'V3r đưọc gọi ià servei-s.díỉ Ja/sSonpt (Ja/aSoript pnía server).

C h ẳn g bao lâu sau đó việc điều k h iển DOM đã được chuyển sang World W iif 'Nìb Consortium (W3C , một tố ciiiic tiêu ohuẩn Cnuẩn

DOM đá p h á t triể n từ việc xử lý cách Ja v a S c rip t tương tác với m ột trìn h duyệt đến việc xử iý các cách chuẩn để tao, đọc và ch ìn h sửa các tài liệu

Các ứng dụng Ja v a S c rip t đã được th iế t k ế để chạy bên trong m ột

tr ìn h duyệt p h ải chịu m ột số h ạ n chế an n in h N hững ứng dụng này thường không tru y cập ổ đĩa cứng của người dùng hoặc b ấ t kỳ ứng dụng được cài đ ặ t trê n m áy tín h của người dùng Đối với người dùng, điều nàyHTML và XML

14 Chương 1: Chuẩn bị để lập trình bằng JavaScript

có nghĩa là m ột ứng dụng JavaScript thường không gây ra rủi ro an ninh

vì nó không th ể chứa m ột vi rút hoặc mã độc h ại khác

N etscape N avigator 4.0 (còn được gọi là Communicator) đã giới thiệu

k hái niệm về các signeđ script (các script có chữ ký) M ột scrip t đã được

ký sử dụng m ột key (khóa) số an toàn có th ể yêu cầu th êm các đặc quyền bên trong môi trường trìn h duyệt chẳng hạn như k h ả n ă n g gởi e-mail hoặc đọc một file từ đĩa cứng Trình duyệt thường nhắc người dùng để hỏi họ có cho script đặc quyền như vậy hay không

T rình duyệt web Mozilla và người họ hàng của nó, N avigator 6 đã

th ay đổi cách script có chữ ký được xử lý bằng một cách không còn tương thích với N avigator 4 íiữa Mioioso?; IntcTiifet Explorer xử lý an

n inh hoàn toan khác sử dụng cac trusttíd zone (các vùng tin cậy ỳ Kết quả của những giải pháp an ninh không đồng n h ất, vẫn có các chuẩn để viết các ứng dụng cho script vốn đã có những đặc quyền mở rộng Thực

t ế Jav aS crip t được ký hiếm khi được sử dụng

Sự p h á t triể n ứng dụng phía C lie n t vẫn là một tro n g những điểm

m ạnh cốt lõi của JavaScript Các nhà p h át triể n thực sự gặp rủi ro không tương thích với nhiều hệ điều hành và trìn h duvệt web bằng việc chọn b ấ t kỳ ngôn ngữ không phải JavaS cript cho sự p h á t triển phía

Client của họ

Tạo các ứhg dụng web dựa vào nền server

Mặc dù Jav aS crip t chi phối tấ t cả ngôn ngữ khác khi nói về lập trìn h web C lie n t, điều đó không phải là trường hợp với lập trìn h phía server Jav aS crip t đã lá một trong nnửng ngôn ngữ phía server đầu tiên được hồ trợ (trở lại năm 1996, khi JavaScript tung ra nền web serv er của nó», nhưng nó đã không th ể sử dụng sự khởi đầu đó có theo hướng lợi cho nó

P erl n h a n h chóng trở th à n h một õôiig cụ viết script p h ía Client phổ biến

và một sô" ngôn ngữ khác đã nổi lên (bao gồm VBScript tro n g môi trường ASP, PH P và JS P ) như là những lựa chọn được ưa thích

Một trong những lý do các ngôn ngữ phía server th a y đổi r ấ t nhiều là môi trường server có th ể được điều khiển ở một mức độ n h ấ t định bời các

n h à p h á t triển web Trong hầu hết các trường hợp, các n h à p h á t triển có

r ấ t ít k h ả n ăn g điều khiển đối với những trìn h duyệt m à người ta s ử

dụng Vì vậy tro n g k h i việc chọn ngôn ngữ lập tr ìn h p h ía Client th ậ t sự

là m ột quyết định "mẫu số chung nhỏ nhất" (ngôn ngữ nào được hỗ trợ bởi hầu h ế t các trìn h duyệt), sự lựa chọn trê n server là b ấ t kỳ những gi

mà n h à p h á t triể n muốn sử dụng

ĐỐI với một số n h à p h á t triển, chọn ngôn ngữ lập trìn h giống như một đứa trẻ trong một cửa hàng bánh kẹo Có nhiều ngôn ngữ lập trìn h phía Client để chọn lựa và không có lý do th ậ t sự để chọn cái n ày so với cái kia ngoại trừ sở th ích cá nhân

Chường 1: Chuẩn bi để lập trình bằng JavaScript 15

Sứ dụng JavaScript trong một môi trường DOS hoặc Windows

Trong một khoảng thời gian dài, Microsoft đã cung cấp những công cụ

W indows S cript Host (WSH) như là một add-on m iễn phí cho Windows dưới d ạng m ột bản download từ web site của nó WSH bao gồm những phiên bản mới n h ấ t của hai ngôn ngữ viết script của Microsoft - VBScript

h iện diện và việc kích hoạt môi trường viết script Windows và trong những thời điểm ý thức về an ninh này, đó là điều mà bạn không th ể tin

cậy quá nhiều

Các công cụ phát triẻn JavaScript

M ột ctoiig nhứr^g điểin mạnh OJ& »JavaScript la cáo côug cụ phác iriển

mở rộng thường không được yêu cầu Với một bộ soạn thảo text (chẳng hạn hh í N oteỉ.a-1 :ài sẳn V.ÌO W indow , ban c5 thể tírO n.ẵ JavaScript tương đối phức tạp với một chút công sức Vì nó là một ngôn ngữ biên dịch bên trong ngữ cánh của một trìn h duyệt web, th ậm chí bạn không cần raua m ội trin h biên dịch (compiler)

Nhưng việc bởi vì JavaS cript có thể được biên tập trong một bộ biên

tậ p te x t đơn giản không có nghĩa là nó nên như vậy Các môi trường

p h á t triể n đưa ra một số nguồn tài nguyên chính thường làm cho việc

p h á t triể n trở nên n h a n h hơn và dễ dàng hơn chẳng h ạ n như:

* Các script định nghĩa sản có thể dễ dàng được thêm vào một trang web

16 Chương 1: Chuẩn bị để lập trình bằng JavaScript

B S ự trợ giúp tích hợp đ ề nhanh chóng dò tìm cú p h á p của m ột hà m

B Tự động upload FTP lên một iveb server

B Các công cụ gỡ rối tích bợp

P h ần n ày sẽ xem xét bốn bộ biên tập HTML hàng đầu Từng bộ biên tập này có sự hỗ trợ đáng kể cho việc p h át triển JavaS cript bao gồm các script sẵn sàng sử dụng, các công cụ biên tập JavaS cript và sự trợ giúp nhúng

Microsoft FrontPage

M icrosoft đã p h á t triể n m ột bộ biên tập HTML phổ biến được gọi là

F ro n tP ag e F ro n tP ag e cung cấp cho các n h à p h á t triể n web m ột số' công

cụ Ja v a S c rip t dể hỗ trợ tro n g việc tạo môt web site tương tác Trước đây

J a v a S c rip t đã là công cụ d ẫn đầu được thừ a n h ậ n tro n g các công cụ phát triể n H TM L và Jav a S c rip t Bây giờ hai đối thủ cạnh tr a n h k h ác trong lĩnh vực này đã lấy m ột phần đáng kể của thị phần Microsoft - M acromedia

F ro n tP a g e có th ể m ua với giá 90 đô la đến 170 đô la làm cho I1Ó trở

th à n h m ột công cụ có giá r ẫ t phải chăng cho những n h à p h á t triể n web site không chuyên

-M icro so ft đưa pa một pkiên bđn P ro n lP a q e 2 0 0 2 dùng thủ 3 0 n q á ij C D

dùnq thủ có thế được ềđnq ký từ hitp://www rnicrosoft.com/fpontpaqe.

Macromedia Dreamweaver M X

M acrom edia D ream w eaver MX là một bộ biên tập HTML và JavaS cript

r ấ t th ô n g dụng tro n g giới p h á t triể n web chuyên nghiệp Nó chứa đầy các tín h n ă n g bao gồm k h ả n ăn g biên tập hầu h ế t các ngôn ngữ lập trìn h web s e rv e r (như A SP, J S P và PH P), cung cấp m ột sô" th à n h p hần

Ja v a S c rip t tạo sẵn tiệ n lợi, tích hợp các cơ sở dữ liệu, v à tu â n theo các chuẩn mới chẳng h ạ n n h ư XHTML và XML Tóm lại nó bao gồm nhiều

th ứ tố t m à các chuyên gia sẽ th ấ y hữu dụng, n h ư n g n h iề u người dùng tạ i

gia có th ể không đòi hỏi

Chương 1: Chuẩn N 1ê’ l?p tr;nh hằng JavaScript 17

*£ h o n ip a g e b p ltx e i • My New W eb |hllp //1ocaího8t/(nỹpftì|ec0

£(8 yèw ioob ftefc)

DìJ«wP«oe ị f ^ E U f e h 3 vjfc ỉ & % *?* X rin '■

M embei* Schedule Staius Aichfve S e * c h

U.J jn

3 5 3 him

3/¿1/0¿: 12:36.14 PM 9/21/0212.5618 PM

V 2 /02 z * s > u * i

9/21/02 12:56.14 PK»

S c o tt Dufly SeoN Dufly S« 0« - ully

S c o tt D iiiy

zf1

Hình 1.2 Sử dụng Frontpage Explorer để ỉổ chức một web site.

Sức m ạnh của môi trường 1''reamweaver MX đượr m inh h ọ a trong

h ìn h 1.3

Giá bán le của Macromedia Dreamweaver MX là khoảng 200 đô đến

400 đô la, điều này làm cho nó trở tbành môt côrtíỊ oụ lv t,ưởpg cho cá«'

n h à phat, trie n chuyen nghiệp

Bgn có íh ế download mộf bân <Jủnq thủ của M acrom edia Opcamweovep M X cho

W indows ^loijc M ac tgi ktipy/vs'wv nrac'onedia.c.om/softw^pc/dfCGmwenvtp.

Macromedia HomeSite 5

M acromedia đã mua Allaire Corporation và tiếp quản việc sở hữu sản phẩm h àn g đầu của Allaire, HomeSite P hiên bản gần đây n h ấ t là

H om eSite 5, và Macromedia có một bản miễn phí của nó với mỗi bản

D ream w eaver m à nó bán HomeSite thu hút người dùng tại gia do giá cả của nó mặc dù nó thiếu hầu h ết những tín h năng tin h vi của đàn a n h của nó

18 Chương 1: Chuẩn bị để lập trình bằng JavaScript

MX - [ỈỈAỉt *iJ 0(v.urrĩ4 iH’iti'lptft 7*1 II

o ••H»it*dOK»wwwSI»F

* ^¿J Cié*»«.

Hình 1.3 Dreamweaver MX là một mồi trường làm việc tuyệt hảo cho nhà phát triển

web chuyên nghiệp.

Với giá 29 đô la đến 99 đô la, người dùng nhận được m ột bộ biên tập HTML và Jav aS crip t để quản lý tốt web site cá n h ân của họ Những người dùng có các site lớn để quản lý hoặc nhiều nhà p h á t triển có th ể muốn xem xét đầu tư thêm tiền để mua Dreamweaver th ay vào đó

Chướng 1 : C iL ẩ t, bị 3ể lí';p tr'nl, tằ.ig J.ivaSciip; 19triển thường xuvên làm việc với các công cụ biên tập đồ họa và video của Adobe, GoLive có th ể là một lựa chọn dễ dàng.

NetObjects Fusion

F rontP age, Dreamweaver, GoLive và NetObjects Fusion tạo nên 4 công cụ p h á t triể n web site hàng đầu thông dụng n h ấ t hiện nay T hật không may, NetObjects đã không có đủ tài chính hoặc nguồn lực để tiếp tục trụ lại trong cuộc đua với những đôì thủ cạnh tra n h khắc n ghiệt như vậy Còng ty đã được bán và chủ sở hữu mới, Web site Pros đã tiếp tục

p h á t triể n công cụ Fusion với tên nhản hiệu hiện có

Fusion có giá cạnh tra n h từ 70 đô la đến 100 đô la Nó bao gồm nhiều tín h n ăn g mới thú vị chẳng hạn như tích hợp VỚI các aịch vụ th a n h toán trực tuyến th ô n g dụng, các m»ru pop-up Jav aS crip t vè sự hỗ trọ cải tiến cho đa phương tiện (multimedia) nhúng Trước đây nó đã là công cụ thông dung với các nhà phát triển và có th ể trở th à n h loại như vậy với

sự hướng dẫn mới

Tìm h iểu những gì JavaScript có thể v à không thể thực hiện

Về m ặt lịch sử JavaScript đã tự phàn biệt với những ngôn ngữ khác

bằng những cách sau đáy:

0 Nó dễ dàng phát triển

B NÓ giao tiếp tốt với cức ngôn nqũ trì môi trteờng khác

B Không đòi hỏi các côníị cụ hoặc trình biên dich (lặc biệt hoặc bộ biên dịch đặc biệt

B NÓ linh hoại

Những đặc tín h này làm cho nó đặc biệt thích hợp cho việc p h á t triển web Các tra n g web có th ể được làm cho động với tôi thiểu m ột dòng mã Jav aS crip t và thường chỉ đòi hỏi một số dòng để hoàn th à n h các tác vụ

thông thường DOM cung cấp sự truy cập Jav aS crip t cho trìn h duyệt, tra n g web và tấ t cả dối tượng (Java, multimedia ) nhúng bên trong nó

20 Chương 1: Chuẩn bị để lập trình bằng JavaScript

B ất kể những cải tiến đáng kể, Jav aS crip t 2.0 đã không được th iế t k ế như là m ột ngôn ngữ đa năng Cụ thể nó không có ý định th ách thức với c , C++ hoặc Ja v a tro n g các lĩnh vực nơi mà những ngôn ngừ đó hiện chi phối Thay vào đó Jav a S c rip t 2.0 cố cải th iện tốt hơn những ưu th ế của ngôn ngữ hiện có đồng thờ i bổ sung các tín h năng m à các nh à p h át triển thường muốn sử dụng k h i p h át triển m ã lớn hoặc m ã phức tạp đó là:

B Khả năng viết các ứng dụng module và ứng clụng hướng đối tượng

M Khả năng giao d iện cải tiến với các ngôn ììgũ' lập trình khác

u Khả năng viết các script vốn có th ể được biên dịch đ ể thực thi nhanh

bơt:

B Khả năng giới h ạ n các hàm va má duợc sử dựng

ECMA đã thực sự th iế t k ế JavaScript với những mục đích này trong đầu

Sử dụng JavaScript làm một ngôn ngữ phía client

Một tro n g những đặc tín h độc đáo của th ô n g số Ja v a S c rip t cốt lõi là

nó không cố đ ịn h n g h ĩa cách Jav aS crip t tương tác với môi trường của

nó K hông có các phương thức hoặc hàm Ja v a S c rip t tro n g thông sô" này định n g h ĩa cách vẽ giao diện người dung hoặc cách v iết text lên m àn

h ình Tương tự, không có các thường trìn h n b ập / x u ất file cho phép ngôn ngữ tru y cập ổ đĩa cứng

T ính n ăn g đó có th ể được xem vừa là m ột ưu điểm vừa là một khuyết điểm Sự lin h h o ạ t m à việc thiếu một giao diện I/o chuẩn náy đã dần đến việc Ja v a S c rip t được sử dụng trong nhiều môi trường khác nhau (các trìn h duyệt, server, ứng dụng độc iập, th iế t bị di động ) Điều này đã eho phép những th iế t bị có những cách lưu trữ dứ ìiệu khác nhau và những cách h iển th ị k ế t quả khác nhau dể chạy các ứng (lụng Jav aS crip t

K huyết điểm của sự lin h hoạt này là cùng m ột ứng dụng Jav a S c rip t không th ể được chạy tro n g mỗi môi trường m à không có m ột sự th ay đổi nào đó T rong k h i hầu h ế t các trìn h duyệt web đã chuẩn hóa trê n một

mô h ìn h đối tượng tà i liệu, vẫn có m ột số điểm khác b iệt giữa các DOM của những n h à sản x u ất trìn h duyệt khác nhau Ví dụ, m ột ứng dụng

Ja v a S c rip t được th iế t k ế để chạy tro n g m ột trìn h duyệt web có th ể không chạy được trê n m ột web server m à không xem x ét mô h ìn h đối tượng riên g của serv er đó

N gày nay thực tế Ja v a S c rip t là ngôn ngữ v iết scrip t duy n h ấ t được sử dụng bên tro n g các tra n g web Mặc dù có m ột sô" lựa chọn khác (đáng chú

ý n h ấ t là (VBScript), nhưng Jav aS crip t đã (và vẫn) là ngôn ngữ viết scrip t duy n h ấ t được hỗ trợ bởi tấ t cả n h à sản xuất trìn h duyệt lớn Nó

là ngôn ngữ v iết scrip t duy n h ấ t đáng được học cho việc p h á t triể n phía client

Chưởng 1: Chuẩn bị để lập trình bằr.g JavaScript 21

Sử dụng JavaScript làm một ngôn ngữ phía server

Jav a S c rip t cũng được ưa thích một phẩn như là một ngôn ngữ lập trin h web server Cả Netscape E nterprise Server và Microsoft IIS (các web serv er thông dụng giữa những năm 1990) đã hỗ trợ việc p h át triể n Jav a S c rip t phía server Netscape đã hỗ trợ điều này thông qua ngôn ngữ phía server LiveWire Microsoft đã cho phép Jav a S c rip t như là một trong những ngôn ngữ tiồ ri uếng :ho việc phát triển ASP

T h ậ t không may, Netscape E nterprise S erver (bây giờ được gọi là

iP la n e t Web server) không còn hỗ trợ JavaS cript trê n server nữa, b ắt đầu với phiên bản 6 Điều này có th ể liên quan đến việc Jav aS crip t là một p h ầ n của iP lanet của Sun Microsystems và Sun M icrosystem s thích các n h à lập trìn h sử dụng Jav a hơn

Mặc dù môi trường Microsoft ASP đã th àn h công rấ t lớn, nhưng các

n h à p h á t triển thích sứ dụng VBScript hơn khi p h á t triển cho nền đó Với việc giới thiệu nền ASP.NET của Microsoft, VB.NET và C# đã trở

th à n h h ai ngôn rigữ mà các nhà p h át triển sử dụng nhiều nhâ't

Microsoft >iâ có m Ịt ƯJ ŨÍ:Ĩ1 nhó cho cộng đồng JavaS cript, kh* nó đ ia

sự hỗ trợ JS cript.N E T vào môi trường p h át triể n Visual Studio.NET

JS crip t.N E T có sự truy cập đên tá t cá class (iớp) cúa NET Fram ew ork

và là sự thực th i (mặc dù cực kỳ sớm) đầu tiền hỗ trợ các tín h năng của

đề xuất ECM AScript Edition 4

Mặc dù ECMA đã cho JavaS cript khả năng hoạt động như một ngôn ngứ lập ín n n đáy đủ, nhưng JavaS cript không n h ấ t th iế t tních hợp cho mọi moi trường Có lê bạn không muôn sử dụng Jav aS crip t là một ngón

r g » ì ’ ậ o * ;r 'n h c h o c 1 c l o ạ ' t á r ’’Ụ S"ÌL' đ â T*:

B Các ứniị dụng rất lớn

u Các linỵ dụng qỉtini trọng và bicu Sĩiấi

B C.ác driver thiết bị và những chương trình cấp tbấp khác

Q uyết định p h iên b ả n nào củ a JavaS cript đ ể sử dụng

Một quyết, định mà các nhà phát triển JavaS cript phải thực hiện sớm trong tiến trìn h p h á t triển là phiên bản nào của ngôn ngữ mà họ muốn

hỗ trợ Một số yếu tố nằm trong quyết định này chẳng h ạn như:

t Kích cỡ và phạm vi của tác VXỊL lập trình đang có

B Khả năng cải tiến trong tương lai cho lập trình

KỄ Việc cần chương trình dễ dàng liên vận hành với những chương trình khác được viết bằng các ngôn ngữ lập trình khác nhau

B Việc Cần tận dụng những tính năng mới chỉ được đưa ra trong JavaScript 2.0 (vi dụ các đổi tượng cài sẵn mới)

22 Chương 1: Chuẩn bị để lập trình bằng JavaScript

R Phiên bản cửa JavaScript được hỗ trợ bởi công cụ ph á t triển ưa thích

B Phiên bản của JavaScript được hỗ trợ hởi đa số khá n giả mục tiêu

Cho đến bây giờ vấn đề cân nhắc quan trọng n h ất là vấn đề sau cùng

Đ ặt Jav aS crip t 2.0 bên trong các tran g web sẽ không có ích lợi gì nếu

m ột lượng k h á n giả đáng kể mục tiêu vẫn sử dụng các trìn h duyệt không

hỗ trợ nó Dĩ n h iên nếu chương trìn h sẽ thường trú chỉ trê n server (một chương trìn h phía server), tấ t cả những gì quan trọng là phiên bản được

Do đó theo qui tắc chung hãy th ậ t cẩn th ậ n về việc p h á t triể n trong

mã Jav aS crip t 2.0 phía client nếu khán giả chỉ định của bạn sẽ có th ể chạv nhiều trìn h duyệt web khác nhau Nếu không chắc chắn bạn biết phiên bản trìn h duyệt tối thiểu sẽ là gì hoặc p h át triể n trong một môi trường server hoặc môi trường nhúng, hãy thoải mái sử dụng các tín h năng và những cải tiến mới trong JavaScript 2.0

Test c á c chương trìn h JavaScript sử dụng HTML

Trước khi nhảy vào những điểm cơ bản của JavaScript, chúng ta cần

th iế t lập m ột cách để te st mã Cách dễ n h â t đế test một chương trìn h Jav aS crip t là bằng cách đ ặt nó bên trong một tran g HTML và tải nó vào một trìn h duyệt dược b ậ t JavaScript

Để chạy b ấ t kỳ mẫu mã trong sách này sử dụng phương thức HTML, bạn sẽ cần m ột trìn h duyệt web Bạn nên sử dụng IE 5 hoặc N avigator

4 và một số ứng dụng sẽ không làm việc với các phiên bản trước

Nếu bạn muôn nâng cấp trìn h duyệt trên máy tín h lên th à n h một phiên bản gần đây hơn, bạn có th ể ghé thăm web site của Microsoft tại http://www.microsoft.com/windows/ie hoặc Netscape Browser C entral tại http://channels.netscape.com /ns/brow sers

Tạo một template JavaScript

Thẻ <script> là phần tử HTML được sử dụng để báo hiệu mã JavaScript Bạn nên tạo file này dưới dạng một tem plate sử dụng Notepad (hoặc công cụ web ưa thích) và lưu nó trên ổ đĩa cứng Theo cách đó b ắ t đầu tạo các tra n g web điều khiển bằng JavaScript thì dễ dàng hơn nhiều bằng cách sử dụng m ã HTML này làm cơ sở

Sau đáy là cách tạo tem plate trong Notepad:

1 Trong W indow s, nhấp nút menu Start.

2 Chọn R un từ menu pop-up.

3 Gõ nhập notepad được minh họa ở đây và n h ấ n ENTER.

<h1>My Sample Code</h1>

<script language-”JavaScripf type="texưjavascript”>

<! // Begin // NOTE: Replace this line with JavaScript code

// End - >

</script>

</body>

</html>

5 Chọn menu F ile và chọn S av e As.

6 Đ ịnh hướng sang vị trí mong muốn trên ổ đĩa cứng Folder My Documents thường được sử dụng nhưng bạn cũng có th ể chọn lưu

24 Chương 1: Chuẩn bị để lập trình bằng JavaScript

8 Đóng N otep a d

9 Từ desktop Windows, chọn My Computer Điều này sẽ mở ra Windows Explorer cho phép bạn định hướng sang th ư mục nơi bạn đã lưu file HTML

10 N hấp đôi file HTML Một trìn h duyệt web (thường là Microsoft

In te rn e t Explorer) sẽ mở tà i liệu HTML

11 Bạn sẽ th ấ y các từ "My Sam ple Code" bằng các chữ lớn

12 Đóng cửa sổ trìn h duyệt khi bạn hoàn tất

H ình 1.4 m inh họa diện mạo của tem plate HTML trong trìn h duyệt Đâv là ví dụ cơ bản n h ấ t về một th ẻ <script> trong một tra n g HTML

Jav a S c rip t son-rte coric M m iosnlt In tern et Exploier

My Sample Code

Hình 1.4 Một tài liệu HTML đơn giản chứa một thè <scripỉ> khống iàm gì cả.

Chương 1: Chuẩn bị để lập trình bằnq JavaScript 25

Tìm hiểu template JavaScript

H ãy nhớ rằ n g các tà i liệu HTML được chia th à n h h ai p h ầ n riên g biệt:

p h ầ n h e a d e r và body (phần thân) Các tài liệu HTM L luôn b ắ t đầu với

B Một tiêu đề bắt buộc cho tài liộu (<title>)

ễt Các định nghĩa style sheet (<siylc> và <liĩĩk>)

B ¡Acta ấa,a, cbcỉng bạn n h ư (.ác từ khóa lìm kiểm (<meta>)

• Cácoàm JavaScript ị <.,cãỊ't>)

P h ầ n lớn tài liệu HTML nằm bên tro n g p h ần body được p h ân cấp bằng các th ẻ <body> và </body> Trong phần này b ạn tìm th ấ y text, các

ản h , form và nội dung nhúng Jav aS crip t cũng có th ể được sử dụng trong

p h i r n à y để X !jấ t te » , lộng ìê a m àn hlnh P h ầìi budy cùa tem p late trô n g n h ư sau

■cbocfy;

<h1>My Sample Code</h1>

<script lanyuage= JavaScript: type= textjjavascripts

<!-'// Begin /■ / NOTE:: Rsplace this line with JavaScript code // End >

để biểu th ị ngôn ngữ viết scrip t đang sử dụng

26 Chương 1: Chuẩn bị dể lập trình bằng JavaScript

T em plate chứa b a dòng bên trong phần <script>:

<! // Begin

// Chú ý:: Replace this line with JavaScript code // End ">

T ấ t cả ba dòng này là các comment Trong lập trìn h web, m ột com-

m en t là m ột hoặc nhiều dòng text được bỏ qua bởi trìn h duyệt k h i thông dịch m ã Các n h à lập tr ìn h thường sử dụng các com m ent để làm cho m ột chương trìn h dễ đọc hơn bởi người, nhưng tro n g m ã trước, dòng đầu tiên

và dòng cuối cùng được sử dụng dể dũng cac trin h duyệt vốn k h òng hỗ trợ Ja v a S c rip t khỏi h iể n thị mã Khi thời gian trôi qua, kỹ th u ậ t này ngày càng trở n ên í t quan trọng hơn Nhưng nó vẫn h o àn to à n phổ biến

và không có lý do gì để không đưa nó vào < !-v à - > là các m a rk e r cho

sự b ắ t đầu v à sự k ế t thúc của các com m ent HTM L C ác com m ent

Ja v a S c rip t được đ án h dâu bằng các dấu gạch chéo đôi (//), đây là lý do tạ i sao trìn h duyệt cũng sẽ bỏ qua dòng th ứ hai

G iao tiế p v ái người dùng

N hiều chương trìn h Jav a S c rip t thực th i các tác vụ của chúng m ột cách lặn g lẽ M ột tra n g web có th ể sử dụng Jav a S c rip t để kiểm chứng rằ n g

tấ t cả trường (íìeld) tr ê n m ột form đã được hoàn t ấ t đúng cách K h : chúng h oàn chỉnh, chương trìn h JavaS cript cho các form được đệ trìn h lên web serv er để xử lý th êm nữa Nhưng nếu m ột tro n g các trư ờng form

đã không được điền vào đúng cách, về m ặt Jý tưởng J a v a S c rip t sẽ báo cho người dùng b iế t để họ có th ể sửa chữa vấn đề và đệ tr ìn h lại form.Thường có h ai cách để làm cho người dùng chú ý m ột lỗi n h ư lỗi này Cách đầu tiê n là tậ n dụng hộp báo động (a le rt box) J a v a S c rip t đòi hỏi người dùng n h ấ p m ột n ú t OK để tiếp tục xử lý Đây được gọi là m ột kỹ

th u ậ t có p h ầ n xâm p h ạm bảo đảm người dùng đọc và báo n h ậ n thông báo lỗi

Cách còn lại là v iết m ột thông báo m ang tín h th ô n g tin bên trong tra n g web m ột cách trực tiếp Đây rõ ràng là m ột kỹ th u ậ t í t xâm phạm hơn m ặc dù bạn p h ải chắc chắn rằn g người dùng không vô ý bỏ qua

th ông báo

P h ầ n này sẽ xem x é t cách giao tiếp với người dùng sử dụng cả hai phương p h áp vì mỗi phương pháp sẽ quan trọ n g trước k h i chúng ta tiếp tục đi đến chương tiếp theo

Hiển thị một báo động

Ja v a S c rip t cung cấp b a loại hộp thoại pop-up để sử dụng cho các ứng dụng:

u Một hột) báo đòng i'a.'ert box)

B Một hộp xác nhận (confnm box)

B Một hộp nhắc n ụ cời clùnq nbập dữ liệu

Các cảnh báo cơ bản được hiển thị sử dụng hàm a le rt cài sẵn:

alert ("This message will De displayed to the browser");

B ạn có th ế d ặt bất kỷ chuòi text hoặc biếu thức bén trong các dấu ngoặc đơn Hộp thoại hiển thị trông giống như hộp thoại sau đây trong

In te rn e t Explorer

N etscape N avigator hiển thị một hộp thông báo tương tự

Một hộp xac n h ạn hoạt động tneo cùng một cách như m ột hộp báo

động ngoại trừ nó hiển thị cả hai nút OK và C a n cel cho người dùng

Hộp xác n h ậ n cho chương tiìn h biếi rán nào ma người dùng chọn, đưa ra

h ai k ết quả khác nhau

rẹsult - oonf¡rn¡ ("Would you like a piece oi chocoiate oaKe'?“),

Biến k ết quả sẽ chứa true nếu người dùng chọn nút OK, hoặc ngược lại là false Đáy là cách hộp xác nhận xuát hiện trong In tern et Explorer

Sau cùng, hộp nhắc người dùng nhập dữ liệu cho phép chương trìn h đòi hỏi m ột sự p hản hồi được gõ nhập trong m ột thông báo Hộp này

28 Chướng 1: Chuẩn bị để lập trình bằng JavaScrip t

hiếm k h i được sử dụng trê n các tran g web In tern et, vì các w eb form HTML là m ột cách thường được chấp n h ận nhiều hơn để truy tìm dữ liệu

n h ập của người dùng

firstname = prompt (what is your first name?“,

"Enter name here’);

K ết quả của m ã Ja v a S c rip t này được m inh họa ở đây

G hi text sang cửa sổ trình duyệt

N hiều ví dụ tro n g sách này sẽ sử dụng h àm docum ent.writeO để in tex t vào cửa sổ trìn h duyêt web Hàm này có th ể đươc sử dụng cho không chỉ việc báo cáo lỗi T h ậ t ra bạn rấ t thường th ấy các web site sử dụng docum ent.w rite() để hỗ trợ các chức năng động chẳng h ạn n h ư định hướng (navigation), trợ giúp người dùng (user help), xoay qu ản g cáo

b a n n e r và nhiều hơn nữa

document.write (“<b>This text goes right into the browser</b>")

Chú ý cách b ạ n có th ể đưa các th ẻ HTML vào bèn tro n g h àm docum ent.w rite( ) và trìn h duyệt sẽ xử lý các th ẻ đó như th ế nào Bằnr* việc th êm m ột vào câu lệnh document.write( ) vào tem p late HTM L, bạn

có th ể tạo m ột tra n g web cố nhiểu nội dung hơn m ột chút

<h1>Hamlet, by Bill Shakespeare</h1>

<script language='JavaScripf type='texưjavascript‘>

<! // Begin // NOTE:: Replace this line with JavaScript code document.write ('To be, or not to be: that is the question:<br>‘y1 document.write (‘Whether ‘tis nobler in the mind to suffer<br>‘); document.write ('The slings and arrows of outrageous fortune,<br>‘); document.write

Chương 1: Chuẩn bị để lập tnnh bềnci JavaSnriot 2 9

('Or to take arms against a sea C'f troubles,<br>‘ ); document.write ("And by opposing end them.cbo”);

Tìm h iểu thêm vẻ các chủ đẻ được thảo lu ận trong chương nà'

Có sẵn m ột vài cuốn sách hay dể tìm hiểu th êm về HTML và Ja v a đó

B Lcani to Programs With Java của íííCỊịia Ịobìì Sm ũey <Oìbunie 2 0 0i )

1^31 JavdSciipl sample code - Miciosoft Internet Explore! l-lnlxll

T o b e, o r n o t to be: that is the question:

W h eth er 'tis nobler in the mind to suffer

T h e sling>; and arrow s r f oulraceous fortune

O r to take aim s against a sea o f troubles,

A n d b y o p p o sin g end them.

_ _ _ _ _ _ _ J

[¿ jD o n e ” r \r~ Local intranet ¿ỷ

Hình 1 5 Lời độc thoại nếi tiếng của Hamlet được tạo ra bởi JavaScrip t.

30 Chương 1: Chuẩn b| để lập trình bằng JavaScript

Ngoài ra, bạn có th ể tham khảo một số web site sau đây:

R DevGuni: http://www.devgtini.com

ẫt W3 Schools: http://ivuruiw3schools.coin/html

R Sim Microsystems Java homepage: http://java.snn.com

B JavaRanch: hltp://iưwu' javaranch.com

Chương 2 :H p c I , hững điểm cơ bản vể JavaScript 31

u Thực Ibi mã một cách cỏ điều kiện

* ựị> ìựi ( ả t ù ìu lộnb stỉ dụng ( ảc 1 ’ÒHiị lập

tẵ Viết com m ent cho mã

R Xác lập )ìt,ộ: đổi tượnt,; í iặc định

JavaScript cực kỳ phụ thuộc vào những công nghệ khác để nhận sự trợ giúp Thực tế, nếu bạn đã cố viết m ột chương trìn h bằng

Jav a S c rip t vốn đã không phụ thuộc vào tấ t cả những gì bên

ngoài th ô n g số Jav a S c rip t chính thức, chương trìn h sẽ không th ể làm

32 Chương 2: Học những điểm cơ bản về JavaScript

được gi nhiều Jav aS crip t phụ thuộc vào các th àn h p h ần bên ngoài để giao tiếp với th ế giới bên ngoài chẳng hạn như ghi sang m ột m àn hình, truy tìm dữ liệu từ một web form và nhận thông báo về các sự kiện trìn h duyệt

Chương này sẽ xem xét các điểm cơ bản của Jav aS crip t Bạn sẽ học những điểm cơ bản về việc viết một chương trìn h bằng cách học về các câu lệnh, biến và hàm - ba khối tạo cơ bản của b ấ t kỳ chương trìn h

Tìm h iểu thuợt n gữ cơ bản

Như những người thực hành các chuyên môn khác, các n h à lập trìn h

m áv tín h đã p h á t t.riển biệt ngữ riêng của mình tro n é nhiều năm Các từ tiếng Anb thông thường chằng hạn như v n r.ab b (biến), ñinction (hàrr.),

và strin g (chuỗi) đã được cho các ý nghĩa liên quan đến m áy tín h Bảng 2.1 liệt kê m ột số th u ật ngữ lập trình mả bạn sẽ gặp phải trong chương

này và qua suốt sách này

Luu trữ dữ liệu tro n g các biến

Khi đi th ẳ n g vào vấn đề, chỉ có ba nơi để lưu trữ th ông tin trong điện toán hiện đại: đĩa cứng, một cơ sứ dữ liệu hoặc bộ nhớ Cùng có các

m edia (phương tiện) lưu trữ khác, chẳng hạn như các đĩa m ềm , CD, đĩa Zip và băng sao lưu mà thông tin có th ể được lưu trên đó, nhưng các th iế t

bị mà m edia này đòi hỏi chậm hơn một ổ đĩa cứng nhiều - đôi khi m ất lâu gấp 100 lần trở lên để ghi cùng một dữ liệu Do đó các n h à lập trình ứng dụng không th ể và không nên phụ thuộc vào b ấ t kỳ m edia này khi lưu trữ thông tin

Bảng 2.1 Thuật ngữ lập trình JavaScript thông thường

có thể được t hay đổi trong quá trình thực thi chương trình

không thể dược thay đổi trong quá trình thực thi chương trình

một phép toán nào đó và có thể tùy ý trả về một giá trị đơn

keyword (từ khóa) Một từ có một ý nghĩa ấn định sẵn trong

JavaScript, và không thể được sử dụng cho bất kỳ mục đích khác

ChUớng ?: Hoc nhC'nj d i e rr C 3 ban /€ JavaScript 33

expression (biểu thức)

operator (toán tử) Thướng là một ký hiệu (chẳng hạn như +, -,

*, hoặc /ì lây một hoặc nhiều giá trị (được gọi là các toán hạng) và trả về một kết quả.Một tổ hợp các từ khóa, toán tử, biến và / hoặc hàm mà từ đó một kết quả có thể được tính toán

strirg (chi ỗi) Mộv '.r ìn h tự g ồ m c h o ặ c n h iề u m ẫ ư Lự, s ố

h o ặ c n h ữ n g k ý t ự t e x t k h á c ; c ác c h u ỗ i th ư ờ n g được đ ặ t t r o n g c á c d ấ u n g o ặ c k é p n h ư t r o n g

"this is a string"

true hoặc faJse

literal (trực kiện) Một Boolean, số hoặc chuỗi được viết trực

tiếp trong mã; ví dụ biểu thức (3+2)/total) chứa hai trực kiện sô’ là 3 và 2

T rên đĩa cúng, thông tin được lưu trữ dưới dạng các file Trong một cơ

sở dử iệu thông tin được lưu trữ dưới dạng các record (bản ghi) Nhưng tro n g bộ nhớ, dữ liệu ohương trinh đượ*; lưi trù \ à được uruy tin* sử dụng các biến Các biến (variable) là các phần bộ nhớ được đ ặt tên

số, chuồi, Boolean (true vá faise) hoặc các đối tưựng Để tiện iợi, bạn có

th ế gán cho biến một giá trị ban đầu như sau:

var counter = 5,

Chúng ta đã gán biến có cên là counler một giá trị ban đáu là 5

JavaScript 2.0 đã giới thiệu khái niệm về các kiểu dữ liệu vào lập trình JavaScript Trước khi ngôn ngữ này được tung ra, các nhà iập trình không thể định nghĩa sẵn các kiểu dữ liệu mà một biến có thể chứa ' tất

cả biến JavaScript có thể được gán bất kỳ kiểu dữ liệu

Nhưng với phiên bản mới quan trọng này của ngôn ngữ, bây giờ chúng ta có th ể giới hạn các biến chỉ trong các kiểu dữ liệu n h ấ t định: ví

dụ các sô" nguyên hoặc các chuỗi Cố gán dữ liệu vốn không thuộc về kiểu

34 Chương 2: Học những điểm cơ bản về JavaScript

dữ liệu ấn định sẵn của biến sẽ dẫn đến m ột lỗi Các kiểu dữ liệu được định nghĩa như sau:

var counter: Integer;

Biến counter được định nghĩa ở đây thuộc về kiểu dữ liệu Integer Do đó

biến đó có th ể không bao giờ chứa b ất cứ những gì ngoại trừ các số nguyên (Chương 3 sẽ trìn h bày tấ t cả kiểu dữ liệu có sẵn tro n g JavaS cript 2.0)

Đ ịn h ng hĩa c á c hằng

Các biến được gọi là các biến vì m ột lý do: m ột chương trìn h tự do

th ay đổi giá trị được bill trữ bên trong biến b ấ t cứ lúc nào Các b ằng tưưng tự như các biến, nhưng m ột khi một giá trị đã được gán, các h ằng không th ể được th ay đổi

Các h ằn g đã được giới thiệu trong Jav aS crip t b ắ t đầu với phiên bản 1.5, do đó các phiên bản ban đầu của ngôn ngữ k h ông hỗ trợ chúng Nhưng những ngôn ngữ lập trìn h khác (đáng chú ý n h ấ t là c, sử dụng các h ằn g m ột cách có hiệu quả và chúng cũng có th ể hữu dụng trong lập trìn h Jav aS crip t

Các h ằn g đươc đinh nghĩa sử dụng tư khóa const:

const ER R JN V A LID JJSERID

Trong m ã trê n m ột h ằn g được tạo có tên là ERR_INVALID_ƯSERID Chú ý tê n được viết hoa Nó không b ắ t buộc nhưng nó là m ột qui ước lập trìn h thường được sử dụng tro n g c, do đó đôi khi b ạ n sẽ th ấ y các hằng cũng được v iết hoa trong JavaS cript

Điểu bạn cẩn biết

J a v a S c r ip t có t h ể lư u tr ữ m ộ t s ố s ố lớn m ạ n h

Các số nguyên trong JavaScript 2.0 là các số dấu chấm động có độ chính xác kép cho phép chúng chứa những giá trị trong dãy xấp xỉ +/ 100 unodecillion - 1 với 38 số zero sau nó.

Một k h i m ột giá tr ị đã được xác lập, một h ằ n g k h ông th ể được thay

Các hòng Kiện chỉ được Í18 ti*ợ tỏi Netscape 6 fi*ỏ lên hoộc trình duiịệl wet> Mozilla Microsoft IE chưa có sự íiỗ trộ kết nliộp, do đỏ việc sủ dụng các hòng nên giói kọn chỉ trong nkữnq ứng dgng khi bgn hoàn toàn chác cliổn cliúnq an toàn

dổi

const ER R JN V A LID JJSER ID = 300;

ER R JN V A LID JJS ER ID = 50; // This will cause an error!

Chương 2: Học nhữnọ điểm C <1 hản wề JavaScript 35

Các h ằn g thường được s ử dụng để đăt các tên mà người đọc được cho các m ã lỗi và những số khác vốn 'có một n g h ĩa nào đó" Người đọc mã sau đây dễ dàng hơn nhiều so với nếu nó chỉ sử dụng trực tiếp các số lỗi:

// etc.

}

Những tín h nàng m ớ i trong Jav aS crip t Z.O

Như các biên (variable), các hằng (constant) cũng được gán một kiểu dữ liệu trong JavaScript 2.C

Tìm h iểu dòng chương trình

P h ần lớn chương này dành để nói về việc học những điểm cơ bản của ngôn ngữ lập trìn h JavaS cript, các câu lệnh và hàm Nhưng trước khi đi vào vấn đề đó, điều quan trọng là hãy dành m ột vài phút xem xét dòng chương trìn h (orogram flow)

Khi nổi về (lòng chương trình có Ìighìa là nói về th ứ tự Jav aS crip t thực th i m ã của một chương trìn h Giả s ử ban có một chương trìn h dài 5 dong, Jav aS crip t s ẽ luôn b ắt đâu bầng V iệc thực th i dòng m ã đầu tiên,

v ề lý thuyết, dòng thứ hai được thực thi tiếp theo rồi đến dòng th ứ ba và

cứ như th é cho đen khi nó tiến đén dỏng CUỐI cùng (dòng 5 trong ví dụ này) H ình 2.1 m inh họa điều này

Thực tế, đó là một sự đơn giản quá rnức thực hiện n h ữ ng gì đang' xảv

ra Dòng k ế tiếp cần được t.hực thi phụ thuộc vào tác vụ m à dòng hiện

h àn h đã yêu cầu JavaS cript thực hiên Nếu dòng hiện h àn h gọi một

hàm , t ấ t cả m ã bên tro n g h àm s ẽ được thực th i trước tiê n trước khi

Jav aS crip t tiếp tục với dòng tiếp theo Nếu dòng hiện h à n h chứa một vòng lặp (loop), cùng một nhóm dòng sẽ được thực th i liên tục Và nếu dòng hiện h à n h khai báo một dòng mới cần được định nghĩa, Jav aS crip t

sẽ đọc hàm vào bộ nhớ m à không thực thi b ấ t kỳ p h ần nào của nó (cho đến khi nó được gọi ở nơi khác trong chương trình)

36 Chương 2: Học những điểm cơ bản vể JavaScript

Hình 2.1 JavaScript thực thi một chương trình theo thứ tự từ đầu đến cuôì.

tuñction myfunc o I

Hình 2.2 JavaScript sẽ ngưng thực thi một chương trình để thực thi nội dung cùa một

hàm.

Nhưng, phần lớn mô tả đặc điểm một chương trìn h là được thực thi theo th ứ tự từ đầu đến cuối th ì vẫn hợp lý H ình 2.2 m inh họa dòng chương trìn h nhảy xung quanh như th ế nào phụ thuộc vào chính mã Chúng ta có th ể th ấy rằn g tấ t cả mã bên trong h àm được thực th i trước khi chương trìn h tiếp tục nơi nó dã rời khỏi

Điều khiển dòng chưong trìn h b ằ n g c á c c â u lện h

Tem plate HTML m à chúng ta đa định nghĩa trong chương 1 (xem phần "Tạo m ột tem plate JavaScript") đã không th ậ t sự làm b ấ t cứ điều

gì hữu ích ngoại trừ hiển th ị m ột số te?:t hcader Cách duy n h ấ t ir à chúng la cò tn ế làm cno Cxiuơĩig tn n ìi Jav aS crip t thực h iện b ấ t cứ nhứng

gì là thêm một số câu lệnh (statem ent)

Một câu lệnh (statem ent) là mục h à n h động cơ bản tro n g b ấ t kỳ mã chương trìn h T h ậ t ra mỗi câu lệnh yêu cầu máy tín h làm m ột diều gì đó Các câu lệnh có th ể được phân chia th à n h 5 h ạn g mục:

B Conditỉonal (có điều kiện)

và p h át triể n hiệu quả hơn Chương 5 sẽ trìn h bày chi tiế t hơn Các hàm

sẽ được trìn h bày chi tiế t hơn ở phần sau trong chương này và các class

sẽ được đề cập trong chương 5

Chưđng 2: Học nhữoq điểm cơ bản về JavaScript 37

Thực thỉ mã một cách có điều kiện• • •

Các chương trìn h máy tính hầu như luôn chứa các câu lệnh có điều

k iệ n (conditional S t a t e m e n t ) Có h ai câu lệ n h có điều k iện tro n g JavaS cript: if và switch Câu lệnh if cho phép chương trìn h chọn một tro n g hai lựa chọn dưa vào hê số ấn định sẵn Thực tế, bạn có th ể quyết định rá n g nếu trời khóng mưa thì bạn muốn đi xem trậ n bóng chày Dĩ nhiên, lếu trời ưiưíi thì bại c u \ê \ định ở nhà Bại) có th ể đưa ra quyếc

định y như th ế trong một chương trìn h JavaS cript bằng m ã sau đây:

fonction stay_or_go (raining) {

if (raining == false) { return “Go to baseball game'”;

} eise { return “Got to stey home tcday.";

Do (ló bạn tná.y các câu iệnh có điều kiện sẽ cho những chương trìn h raột lựa chọn giũte hai hoặ: n h ie j Jự* chọn giống y như b ạ n đưa ra những lựa chọn đó tro n g thực tế

Cầu lệnh if

Phụ thuộc vảo bạn sử dụng nó như th ế nào, câu lệnh i f có th ể r ấ t đơn

giản hoác r ấ t phức tạp Oáu lệnh it’có th ế được sử dung bàng những cách sau đây:

if (expression) (statements;! Nêu exorpssion lươníỊ giá thành tru<\ thực

thi cac ăt.atement

if (expression 1 (statements 1;) Nếu expression lượng giá thành true, thựctlstì ¡statement 2;i thi statement 1 Nêu không thực thi state­

ments 2

if (expression lì IstaternenU ].:} Nế;j ('xpression lượng giá thành true, thựcelse if (expression 2} thi staement 1 Nếu không, nếu expression(statement 2} 2 lượng giá thành true, thực thi statement

2 Nếu không, thực thi statement 3

Câu lệnh if lượng giá một biểu thức để quyết định tập hợp câu lệnh nào để thực th i nếu có

Vì câu lệnh i f mong đợi một biểu thức Boolean (biểu thức lượng giá

th à n h true hoặc false), nó sẽ cố chuyển đổi các biểu thức của các kiểu dữ liệu khác th à n h true hoặc false)

38 Chướng 2: Học những điểm cơ bản về JavaScript

• • • • • • •

JavaScript đưa ra những giả định chắc chắn khi chuyển đổi từ các kiểu dữ liệu khác thành Boolean Các chuỗi "true" và "false" lượng giá thành true và falsc Booleans Các số nguyên 1 và 0 cũng được chuyển đổi thành các Boolean true

và false.

Trong th u ậ t ngữ lập trìn h m áy tín h , m ột biểu thức (expression) là một đoạn mã mà khi được lượng sẽ giá trả về một giá trị Trong JavaScript, những đối tượng sau đây có th ể được sử dụng làm biểu thức

Một hàm trả về một giá trị if (myfunc(x) {statements;}

Các biến, hàm, và trực kiện if (a > 5) {statements;}

Câu lệnh if có th ể bao gồm m ột m ệnh đề else tùy chọn, để quyết định giữa m ột trong h ai lựa chọn Dạng này của câu lệnh đôi khi được gọi là câu lệnh if-else:

if (expression) {statementsl;}

else {statements2;}

M ệnh đề else cho phép bạn xác định một câu lệnh hoặc nhóm câu lệnh m à sẽ được thực th i nếu biểu thức không lượng giá th à n h true Chỉ

một m ệnh đề else được cho phép trong bất kỳ câu lệnh if Lần nữa, câu lệnh có th ể được sử dụng có hoặc không có các dấu ngoặc cong.

Sau cùng, câu lệnh if có thể được sử dụng để chọn giữa một trong ba lựa chọn trở lên Với việc đưa ra mệnh đề else-if, câu lệnh if có th ể bao gồm nhiều biểu thức mà từng biểu thức sẽ được lượng giá cho đến khi mọt trong những biểu thức nay lượng giá th à n h true hoặc gặp phải

m ệnh đề else Nhiều m ệnh đề sh e if CC th ể được đưa "'ào, nhưng hãv nhtf

rằ n g m ệnh đề else-if phải luôn đứng trước b ấ t kỳ m ệnh đề else

Câu lênh switch

Câu lệnh switch có một vai trò rấ t tương tự như câu lệnh if trong Ja\aS cv ip t Câu lìn h switch lưọng k,iấ m ội bií-u thức \ à sc sár.h giá trị với một hoặc nhiều m ệnh đề case Nếu bạn cán so sán h một biến với hơn

h i i hoặ-: lia giá trị, :â j ệah switch ‘à Ccdi ItiỊu quả n aả t.

Mă sau dây trìn h bày cách câu lệnh switch thường được sử dụng trong lập trìn h JavaScript Trong ví dụ nàv, chương trìn h sẽ cố quyết định tên của một quốc gia dựa vào mã quốc gia ISO (In te rn atio n al O rganization for Standardization) ba mẫu tự chính thức của nó

// ISO official country codes

40 Chương 2: Học những điểm cơ bản về JavaScript

th ấy điều gì đang xảy ra

Dòng đầu tiê n của câu lệnh sử dụng từ khóa sw itch theo sau là biểu thức cần được lượng giá

switch (countrycode) {

Trong ví dụ này, countrycode là một biến ngẫu nhiên chứa m ột chuỗi

Ba dòng tiếp theo trong câu lệnh switch chứa m ệnh đề case đầu tiên

B X ác lập biến countrỵstring sang "Albania".

B Thoát câa lệnh switch tại câu lệnh break.

Dĩ nhiên, nếu giá trị của countrycode không khớp với chuỗi "ALB", biến countrystring không được xác lập và câu lệnh switch tiếp tục

M ệnh đề case tiếp theo so sán h biểu thức với m ột giá trị mới:

case "DZA":

countrystnng=’‘Algena";

break;

Cáu lệnh switch ìuợng giá từng cảu lệnh case theo th ứ tự cho đên khi

nó tìm th ấy m ột câu lẹnh tương hợp Sau đó nó thực th i mã m à theo sau ngay m ệnh đề case cho đến khi gặp phải câu lện h b reak đầu tiên

Một khi một giá trị tương hựp được tìm thấy, JavaScript sẽ thực thi tất cả mã

♦heo sau thậm cbí hêr t'ong những mệnh đề rase khác cho đến khỉ £ặp phải câu lệnh break.

T rong JavaS cript, câu lệnh switch có m ột loại m ệnh đề case đặc biệt được gọi là m ệnh đề default M ệnh đề default thực th i chỉ nếu Jav aS crip t

đã k h ông th ể tương hợp biểu thức với b ất kỳ m ệnh đề trước M ệnh đề default phải luôn là m ệnh đề cuối cùng trong câu lện h switch

bean tro n g m ện h đề d efault sẽ được thực th i vì k h ô n g có m ệ n h đề b reak

đ# dừng nó lại

Lặp lại các câu lệnh sử dụng các vòng lặp

Các vòng lặp (loop) là những câu lệnh tiện lợi trong hai mục đích:

■ Kbì bạn n uốn i(tù ’(ỉ, ti’ộ tập bel) rau 'ộ.ỉ/, với W.5/ ĩó ỉo n cụ toổ

• K hi bạn m uốn hỉp /ạ i m ột tập bợp cân lộnb t'ớt s ố lần bất định

Có bốn câu lệnh vòng lặp trong JavaScript: while, do-while, for, và for-in Jav aS crip t củng cung cấp các câu lện h break và continué để cho các n h à lập trìn h thêm khả n ăng điều khiển đối với cách các vòng lặp thực th i n h ư th ế nào P h ần này s ẽ trình bày từng câu lệnh liên quan đến việc lặp lại và xem chúng có th ể được áp dụng trong các chương trìn h như th ế nào

Vòng lặp vvhile

Vòng lặp while lượng giá m ột biểu thức trước khi thực th i m ột nhóm câu lệnh Nó sẽ thực th i liên tục các câu lệnh, cho đến khi biểu thức không còn được lượng giá th à n h true nữa.

42 Chưđng 2: Học những điểm cơ bản về JavaScript

Một bẫy lập trìn h thông tnường là vòng lặp vô hạn Một vòng lặp vô hạn là m ột câu lệnh vòng lặp không bao giờ k ết thúc và k h ả n ă n g nhiều

n h ấ t điều này xảy ra với câu lệnh while Hầu h ế t các trìn h duyệt sẽ báo cho người dùng biết khi nào m ột script m ất quá lâu để thực th i để cho phép người dùng b ắ t buộc k ết thúc một vòng lặp vô hạn

Để trá n h các vòng lặp vô hạn, việc bảo đảm biểu thức luôn có kha năng lượng giá th à n h false là một thói quen lập trìn h th ông thường Câu lệnh while sau đây được bảo đảm là không gây ra một vòr.g lặp VC bạn:

h ạ n như toán tử ++, ở phần sau trong chương này Trong mã này, toán

tử + + lấy biến counter và tăn g nó lên 1) Khi nó đ ạt đến 101, vòng lặp s ẽ

thoát, vì "counter<10 1" sẽ lượng giá th à n h false

Nếu chúng ta dán vòng lặp while này vào tem plate HTML từ chương

1, chúng ta có được m ã HTML sau đây:

vlri>Vly Sarr.pb C0(!e<7h1>

<script language="JavaScript” type=“texưjavascript">

<! // Begin var counter = 1;

while (counter < 101) { document.write (This is line number" + counter + "<fcr>\n'');

Tai iná HTML nky vào n>ội trìn h duyêt web sẽ cho bạn m ột thứ gì đó

tương tự như hình 2.3 Cửa sổ trìn h duyêt đã đươc cuộn hết đến cuối để

m inh họa chính xác bao nhiêu dòng đã được in

Th' Ifc Sne number P8

'Ihể* \s Une num ber 89

This ti ĩmc num ber 90

T h í IS k ie num ber 01

T h í tỉ faie num ber 92

This is tine num bw 93

T h í ts kne num ber 94

T h e ti tn e num ber 95

T h i tí bne num ber 96

15 k&£ num ber 97

T h f tí lmc cu m b er 98

T h í 1 $ fait num ber 99

This <9kne num ber 100

sd3 5^s ĩ7 - : —

2 J^vd5ci(rf ttffnple «MỈr • Mnuiolt lolcion» txitlitiM PĨ1*)

Hình 2.3 Vòng lặp while in chính xác 100 dòng.

44 Chường 2: Học những điểm cơ bản về JavaScript

Vòng lặp do~while

Vòng lặp do-while có cách làm việc chính xác giống như vòng lặp while, với m ột ngoại lệ Biểu thức được lượng giá sau khi k ế t thúc mỗi lần lặp lại tro n g vòng lặp do-while Điều này có nghĩa là vòng lặp được bảo đảm thực th i tối thiểu một lần Một vòng lặp while lượng giá biểu thức của nó trước mỗi lần lặp lại, nghĩa là có th ể nội dung của vòng lặp

sẽ không bao giờ được thực thi

n h ấ t bị ản h hưởng bằng việc chọn do-while th ay vì m ột vòng lặp while

là lần chạy đầu tiên qua vòng lặp

}

Vòng lặp while đó có th ể viết lại sử dụng một vòng lặp for Thực tế, loại vòng lặp này (sử dụng một biến counter) thích hợp hơn cho một vòng lặp for

for (var counter = 1 ; counter <101; counter++) {