Tài liệu hạn chế xem trước, để xem đầy đủ mời bạn chọn Tải xuống
1
/ 107 trang
THÔNG TIN TÀI LIỆU
Thông tin cơ bản
Định dạng
Số trang
107
Dung lượng
1,29 MB
Nội dung
Tổngquanvề JS Giới thiệu: -JS được sử dụng trong hàng triệu trang web và được yêu thích trên thế giới với nhiều lý do khác nhau: thiết kế giao diện, hiệu lực form, tìm kiếm trình duyệt, tạo ra cookies v.v…. -JS là một ngôn ngữ kịch bản phổ biến nhất trên Internet, tương thích với đa số trình duyệt như: Internet Explorer, Mozilla, Firefox, Netscape, Opera. 1) JS là gì? - JS (JS) là một ngôn ngữ kịch bản, được thiết kế để tăng thêm tính tương tác cho các trang HTML. Đặc trưng của loại ngôn ngữ này là “nhẹ” hơn ngôn ngữ lập trình thông thường, nghĩa là không cần trình biên dịch. Do đó người ta còn gọi JS là ngôn ngữ phiên dịch (script được thực thi không cần biên dịch trước) - JS là ngôn ngữ Browser, nghĩa là được thực thi trực tiếp trên máy Client - JS được nhúng trực tiếp vào các trang HTML - Mọi người có thể sử dụng JS mà không c ần mua bản quyền 2) Java và JS hoàn toàn giống nhau? Không! Java và JS là 2 ngôn khác nhau hoàn toàn cả về hình thức lẫn nội dung. Java là một ngôn ngữ mạnh và phức tạp hơn JS 3) Thế mạnh và hạn chế của JS a) Thế mạnh - JS cung cấp một công cụ lập trình với cú pháp rất đơn giản, dễ sử dụng. Do đó, dù không phải là một lập trình viên chuyên nghiệp, bạn cũng dễ dàng nhúng các đoạn JS vào các trang HTML của mình. - JS làm cho trang HTML sinh động hơn với hiệu ứng chuột hay hiệu ứng text,… - JS có thể phản ứng với các sự kiện: nghĩa là một đoạn JS sẽ được thực thi khi có một sự kiện nào đó xảy ra.Ví dụ: khi nạp trang vào trình duyệt, khi người dùng click chuột vào trang HTML,… - JS có thể đọc và tương tác với nội dung của trang HTML. - JS thường dùng để hiệu lực dữ liệu trong form, nghĩa là kiểm tra dữ liệu có thỏa những tiêu chuẩn định trước hay không trước khi gửi từ form lên server. Điều này giúp giảm bớt công việc xử lý trên server, làm cho chương trình chạy nhanh hơn so với một số ngôn ngữ lập trình khác. - JS còn được dùng để tạo cookies , nghĩa là lưu trữ và truy lục được các thông tin trên máy tính của người dùng. b) Hạn chế: - Nếu so sánh với những ngôn ngữ lập trình khác thì phương thức, các hàm có sẵn của JS không nhiều. - Môi trường phát triển và debug ít, khó sử dụng. Bài 1: JS đầu tiên Giới thiệu: Trong chương này, chúng ta sẽ tìm hiểu 1 đoạn JS đơn giản, thông qua các nội dung sau: - Nhúng JS vào 1 trang HTML - Lệnh và khối lệnh - Các hàm xuất văn bản - Thứ tự phiên dịch 1 trang HTML có chứa JS I) Phương pháp nhúng JS vào một trang HTML Để nhúng 1 đoạn JS vào trang HTML, ta sử dụng thẻ <script> 1) Thẻ <script> Đoạn chương trình JS được đặt giữa hai thẻ <script> và </script> <script language="javascript"> Viết chương trình ở đây </script> Ví dụ 1: <script language="javascript"> document.write("Chào các bạn! "); </script> Chạy đoạn script này sẽ hiện kết quả ra màn hình như sau: 2) Các thuộc tính của thẻ script: a) Thuộc tính src - Chỉ định đường dẫn của file chứa mã nguồn JS. File này phải có phần tên mở rộng là .js b) Thuộc tính language - Chỉ định loại ngôn ngữ lập trình được sử dụng như: C#, JS, jscript, php, vb, vbscript. 3) Biện pháp dành cho các trình duyệt không hỗ trợ JS a) Thực trạng - Một số trình duyệt không hỗ trợ JS sẽ không hiểu đoạn JS nằm giữa thẻ <script> và </script > nên sẽ xuất tất cả ra trình duyệt như dạng text của HTML b) Biện pháp khắc phục: Có thể khắc phục tình trạng trên bằng cách đặt đoạn JS vào giữa <!- -và > (ghi chú của HTML) <script language = "javascript"> < ! Chương trình JS > </script> Giải thích: - Đối với trình duyệt không hỗ trợ JS sẽ hiểu đoạn JS như là HTML, do đó nội dung bên trong thẻ <script> được hiểu là ghi chú và không xuất ra ngoài 4) Vị trí của JS trong trang HTML JS có thể đặt bên trong hoặc bên ngoài trang HTML. Có thể đặt nhiều JS vào cùng 1 trang HTML với nhiều vị trí khác nhau: bên ngoài, trong phần header hoặc trong phần body a) Đặt bên trong: Như đã biết cấu trúc trang HTML như sau: <html> <head> …phần đầu </head> <body> … phần thân </body> </html> - JS có thể đặt trong phần đầu chương trình (giữa <head> và </head>) hoặc phần thân chương trình (giữa <body> và </body>) với sự khác biệt về thứ tự phiên dịch và cách sử dụng. - JS đặt trong phần đầu sẽ được phiên dịch trước phần thân, và chỉ thực thi khi được gọi hoặc khi event tương ứng phát sinh trong trang HTML. Đây là cách phổ biến nhất vì nó giúp đảm bảo JS đã được phiên dịch trước khi được gọi - JS đặ t trong body được phiên dịch và thực thi khi trang đã nạp vào trình duyệt. b) Đặt bên ngoài: - Thường dùng cho các đoạn JS dài, phức tạp hoặc cho các đoạn JS dùng lại nhiều lần trong nhiều trang HTML khác nhau. Chỉ cần lưu JS thành một file với phần mở rộng là js và khai báo trong thuộc tính src của những trang HTML cần sử dụng <script language = "javascript" src="xxx.js"> src: khai báo tên file chứa JS với phần tên mở rộng là js. Cách phổ biến nhất là đặt file này cùng thư mục với file HTML. Nếu đặt khác thư mục, trong src phải khai báo cả đường dẫn. - Lợi ích của cách làm này là: • Giúp chương trình dễ viết, dễ debug và nâng cấp. • Giúp code của JS tự động ẩn trong những trình duyệt không hỗ trợ. Tuy nhiên, cách này làm chậm tốc độ truy xuất của server vì server phải mất thời gian tìm và truy xu ất file chứa JS. Lưu ý: JS đặt bên ngoài không được đặt trong thẻ <script> </script> Nên tập thói quen khai báo script có thuộc tính src ngay tại vị trí mà bạn muốn đoạn script đó thi hành II) Lệnh. Cũng như các ngôn ngữ lập trình khác, 1 chương trình JS được xây dựng từ đơn vị cơ bản là lệnh. 1) Khái niệm. Lệnh là 1 đơn vị cơ bản trong JS. Là phát biểu được viết trên 1 dòng, mà người lập trình dùng ra lệnh cho chương trình thực hiện một đơn vị công việc. Lệnh kết thúc bằng dấu chấm phẩy. Ví dụ: document.write("Chào bạn ! "); 2) Khối lệnh. -Khối lệnh gồm nhiều lệnh được đặt giữa 2 dấu { } nhằm thực hiện nhiều đơn vị công việc theo chủ ý của người lập trình. Các lệnh trong khối lệnh tương tác, hỗ trợ nhau. Ví dụ 2: <script language="javascript"> { document.write("Đây là ví dụ về "); document.write("khối lệnh"); } </script> -Các khối lệnh có thể lồng vào nhau không giới hạn: { <khối lệnh bên ngoài> { <khối lệnh bên trong> } } III) Xuất văn bản Trong hầu hết các ngôn ngữ lập trình, một trong những kỹ năng cơ bản nhưng rất cần thiết là xuất văn bản. 1) Xuất văn bản dạng text. - document.write xuất văn bản ra cửa sổ trình duyệt. Lệnh này được đặt trong trang HTML ngay tại vị trí cần xuất văn bản. Ví dụ: document.write(“Chào bạn !”); Lưu ý: Có những ký tự đặc biệt sẽ không xuất ra như văn bản thông thường, mà thực hiện một công việc nào đó như \n \t \r \f \b … Khi đó, nếu muốn xuất ra trình duyệt đúng các ký tự đó, ta phải thêm dấu \ vào trước. Ví dụ: document.write(“Chào bạn! \\n”); Khi sử dụng khối lệnh lồng nhau, nên canh lề cho dấu { và } thẳng hàng. Điều đó giúp chương trình sáng sủa, dễ đọc. 2) Xuất văn bản bằng hộp thoại: - Nếu dùng document.write thì văn bản sẽ xuất trực tiếp vào trang HTML và tồn tại ở đó. Nếu chúng ta chỉ muốn hiển thị thông tin cho người dùng trong một khoảng thời gian ngắn và biến mất khỏi trang HTML, người ta dùng hộp thoại (dialog box). -Khi được gọi, dialog box xuất ra thông tin được chỉ định và chờ đến khi người dùng xác nhận thì quay lại trang HTML. Dialog box hoàn toàn độc lập và không ảnh hưởng đến nội dung trang HTML a) Phương th ức alert - alert là phương thức phổ biến nhất, thường dùng để đưa ra thông báo hay chỉ dẫn - Phương thức alert nhận 1 tham số truyền vào là chuỗi. - alert đôi khi được các lập trình viên dùng để debug chương trình Cú pháp: alert("…"); Ví dụ: alert("Chỉ chấp nhận số nguyn"); b) Phương thức prompt - Dùng để lấy thông tin người dùng - Nhận 2 tham số truyền vào là 2 chuỗi: • Chuỗi thứ 1 thường là một yêu cầu. • Chuỗi thứ 2 đưa ra ví dụ để người dùng hiểu rõ hơn về yêu cầu. - Cung cấp 1 textfield cho phép nhập dữ liệu và lưu lại thông tin người dùng nhập vào để xử lý. Cú pháp: prompt(“chuoi1”, “chuoi2”); Ví dụ: prompt(“Bạn thường làm gì vào cuối tuần?”, “xem phim”); Muốn lưu lại giá trị từ phương thức prompt, chúng ta phải dùng một biến (sẽ học ở chương sau) bienx= prompt(“Bạn thường làm gì vào cuối tuần?”, “ngủ”); Khi đó nếu người dùng nhập vào “đi dã ngoại” thì bienx=”đi dã ngoại”. • Nếu chọn OK, bienx được lưu vào chương trình • Nếu chọn Cancel, không làm gì c) Phương thức confirm -Phương thức confirm là 1 dialog box dùng để xuất ra thông báo cho người dùng. -Ph ương thức confirm nhận tham số truyền vào là chuỗi. -Trả về true nếu người dùng chọn OK -Trả về false nếu người dùng chọn Cancel. Cú pháp: confirm(“……….”); Ví dụ: confirm(“Mình đi shopping nhé!”); IV) Ghi chú trong JS - Những lập trình viên chuyên nghiệp thường có thói quen ghi chú rõ ràng trong chương trình. Điều đó rất hữu ích khi làm việc nhóm hoặc chương trình quá dài. Nội dung ghi chú sẽ được bỏ qua khi phiên dịch chương trình Cú pháp: Ghi chú một dòng lệnh // thông tin ghi chú Ghi chú một khối lệnh /* thông tin ghi chú 1 thông tin ghi chú 2 ………………… */ Tổng kết: Qua chương này, cần nắm vững các vấn đề sau: - Cách nhúng JS vào trang HTML - Sử dụng thẻ script và các thuộc tính - Các cách khai báo JS bên trong và ngoài trang HTML - Lệnh và khối lệnh - Cách ghi chú trong JS - Các phương thức xuất văn bản: document.write - Các dialog box dùng phương thức alert, prompt và confirm. Bài 2: Dữ liệu và thông tin Giới thiệu: Trong bất cứ ngôn ngữ lập trình nào, dữ liệu và thông tin luôn là vấn đề được quan tâm hàng đầu. Một chương trình trình được viết ra dù đơn giản đến phức tạp cũng không ngoài mục đích cung cấp thông tin cho người dùng hoặc lấy thông tin từ người dùng nhập vào để xử lý, tính toán. JS cung cấp 4 loại dữ liệu cơ bản dành cho số và chuỗi. Cách hiệu quả nhất khi làm việc với các loại dữ liệu là sử dụng biến. Trong chương này, sẽ xem xét các vấn đề sau: -Kiểu dữ liệu trong JS -Khai báo và sử dụng biến. -Biểu thức gán giá trị -Toán tử -Phép toán so sánh if…else -Mở rộng tương tác với người dùng bằng phương thức prompt I) Kiểu dữ liệu trong JS -Có 4 kiểu cơ bản: Số number Chuỗi string Đúng/sai boolean Không xác định null Lưu ý : null khác với 0 của number và khác chuỗi rỗng “ ” của string 1) Number: kiểu số a) Số nguyên: Integer -là kiểu dữ liệu số không có phần thập phân Ví dụ: 1, 3, 5, 7, -9, 0…. -Kích thước tối đa của Integer phụ thuộc vào nền chạy ứng dụng JS -Integer được thể hiện ở 3 chuẩn: chuẩn 10 (hệ thập phân phổ biến nhất), chuẩn 8 (hệ octal), chuẩn 16 (hệ hexadecimal) b) Số thực:Float -là kiểu dữ liệu số có phần thập phân. Phần số và thập phân ngăn cách nhau bởi dấu chấm Ví dụ: 5.8 , 10.9 Các số thực quá lớn hoặ c quá nhỏ thường biểu diễn dạng En tương ứng với 10 lũy thừa n Ví dụ: 2000000 = 2*10^6 = 2E6 -0.000002 = 2*10^(-6) = 2E-6 2) String: kiểu chuỗi -là kiểu dữ liệu văn bản đặt trong “” Ví dụ: “Hello!” :chuỗi có giá trị là Hello “9” :chuỗi có giá trị là 9 “” :chuỗi rỗng (empty string) 3) Boolean: kiểu đúng/sai Kiểu boolean có hai giá trị -đúng: true -sai: false trong một số ngôn ngữ lập trình khác, boolean có thể chấp nhận cặp giá trị (true =1, false=0) nhưng trong JS thì không 4) Giá trị null - Là kiểu dữ liệu đặc biệt trong JS. null nghĩa là không xác định Giả sử tham chiếu một biến chưa định nghĩa, kết quả trả về là null. Hoặc khi sử dụng phương thức prompt, nếu người dùng chọn cancel, giá trị trả về là null 5) Tính linh động của JS -JS được xem là 1 ngôn ngữ lập trình linh động. Trong loại ngôn ngữ này, kiểu dữ liệu không cần định nghĩa trước và tự thay đổi theo từng ngữ cảnh cụ thể. Ví dụ: Chuyển số sang chuỗi “Count to” +10 Æ “Count to 10” Chuyển chuỗi sang số: (*) 3.5+”10” Æ 3.5+10 = 13.5 (*) Các phiên bản hiện nay của JS có xu hướng quản lý chặt chẽ hơn việc chuyển từ chuỗi sang số bằng cách dùng hàm -chuyển chuỗi sang số nguyên: parseInt(“13”) Æ 13 -chuyển chuỗi sang số thực: parseFloat(“45.2”) Æ 45.2 II) Biến Là nơi chứa thông tin bạn muốn lưu trữ. Biến có tên và giá trị. Giá trị của biến có thể thay đổi suốt chương trình và giá trị sau cùng là giá trị thực của biến khi được gọi 1) Cách đặt tên biến: -Phân biệt hoa / thường -Bắt đầu bằng 1 chữ cái hoặc dấu nối (_) Ví dụ: temp: biến hợp lệ _temp: biến hợp lệ 2temp: biến không hợp lệ vì bắt đầu bằng số 2) Khai báo biến: Trước khi sử dụng biến phải khai báo biến để JS biết rằng biến đã tồn tại. Cú pháp: var tenbien; var là từ khóa của JS , cuối lệnh khai báo phải có dấu chấm phẩy (;) Ví dụ: var bien1; khai báo nhưng chưa gán giá trị var bien2 = 123; gán giá trị ngay lúc khai báo bien3 = ”hello”; không cần dùng từ khóa var. Tuy nhiên, không khuyến khích dùng cách thứ 3, vì làm cho chương trình không rõ ràng và khó xác định phạm vi biến 3) Ví dụ đoạn JS có sử dụng biến: Ví dụ 1 <script language="javascript"> var ten = prompt("Hãy nhập tên của bạn vào đây","Tèo"); document.write("<h3>Chào mừng " + ten + " đến với JS! </h3>"); </script> Giả sử bạn gõ tên Tý vào Phân tích: - Chương trình dùng đoạn JS gồm 2 dòng lệnh. Lệnh thứ 1 khai báo biến ten dùng để lưu thông tin người dùng nhập vào. Lệnh thứ 2 sử dụng biến ten và xuất ra lời chào. - Phương thức prompt xuất ra hộp thoại “Hãy nhập tên của bạn vào đây”. Khi hộp thoại hiện ra, nếu người dùng nhập tên mới vào thì tên mới được xuất ra kèm theo lời chào, ngược lại tên khởi t ạo (Tèo) sẽ được xuất ra. III) Biến và biểu thức: Để thao tác trên biến, người ta dùng biểu thức. Biểu thức là tập hợp gồm các biến và toán tử. Các biểu thức có thể lồng vào nhau không giới hạn. Các loại biểu thức: -Biểu thức gán: gán giá trị vào biến -Biểu thức đại số: kết quả trả về là một số -Biểu thức chuỗi: kết quả trả về là một chuỗi -Biểu thức logic: kết quả trả về là giá trị boolean 1) Biểu thức gán: Bao gồm biến và các toán tử gán Cú pháp: var biến toán tư gán biểu thức; Ví dụ: Gán giá trị “hello !” vào biến strname bằng toán tử = [var] strname = "Hello !"; toán tử gán là = Hoặc x += 5; toán tử gán là += Bảng các tốn tử gán trong JS Tốn tử gán Diễn giải Ví dụ Diễn giải ví dụ = bằng x = y x = y += cộng x += y x = x+y -= trừ x -= y x = x-y *= nhân x *= y x = x*y /= phia x /= y x = x/y %= phần dư x %= y x = x%y Ví dụ: x= 10, y=5 x += y x = 15; x %= y x = 0; (vì 10 chia 5 dư 0) 2) Biểu thức đại số Bao gồm biến và các tốn tử đại số. Biến có giá trị number. Kết quả của biểu thức đại số là number Toán tử đại số Diễn giải Ví dụ Kết quả + cộng x = 2 y = 2 x+y = 4 - trừ x = 5 y = 2 x-y =3 * nhân x = 5 y = 4 x*y =20 / chia 15/5 5/2 3 2.5 % phần dư 5%2 10%8 1 2 ++ tăng 1 x = 5 ++x x=6 giảm 1 x = 5 x x=4 Đối với phép tốn ++ và thì có sự khác biệt lớn khi đặt trước / sau biến Ví dụ y = 5 x = y++ -> x = 5 y = 6 Phân tích Trong biểu thức x = y++ phép tốn = được thực hiện trước , nghĩa là x= y=5. Sau đó, đến phép tốn ++ được thực hiện, nghĩa là y++. Do đó y = 6 3) Biểu thức logic: Bao gồm biến và các tốn tử logic. Biến có giá trị boolean. Kết quả của biểu thức logic là một giá trị boolean Tốn tử logic Diễn giải Ví dụ và kết quả && và x = 6 y = 3 (x < 10 && y > 1) trả về true || hay x=6 [...]... vòng lặp đó Cú pháp: Continue; Ví dụ 5: Nhập vào 3 số 1 thì trả về n*giaithua(n-1); nếu n = 1 thì trả về n Ở bước 2, hàm giaithua được gọi lại với tham số truyền vào là (n-1) Lưu y: Khi làm việc với hàm đệ qui, trong hàm phải có ít nhất 1 điều kiện dừng Nếu không có điều kiện dừng, chương trình sẽ lặp vô tận Tổng kết: Qua chương này, cần nắm vững các vấn đề sau: -Hàm được dùng để nhóm... tảng, sử dụng các phương thức và thuộc tính của đối tượng, quan hệ giữa các đối tượng,… để phát triển chương trình theo cấu trúc thừa kế và sử dụng lại 1) Khái niệm đối tượng Nền tảng của OOP là đối tượng Do đó, điều đầu tiên và quan trọng nhất là xây dựng đối tượng Nghĩa là, khởi tạo đối tượng, xây dựng các thuộc tính cho đối tượng, khai báo quan hệ giữa các đối tượng,… Chúng ta sẽ dùng hàm định nghĩa... thị undefined) Sau đó xuất thông tin ra theo 1 định dạng chỉ định Tổng kết: Qua chương này, cần nắm vững các vấn đề sau: -Hàm được dùng để nhóm các đoạn code lại thành một thể thống nhất và có thể sử dụng lại Hàm được định nghĩa bởi tên Hàm nhận tham số truyền vào và trả về kết quả -Khi thao tác trên hàm, phạm vi biến là môt khái niệm rất quan trọng Nghĩa là cần xác định được biến chỉ hiệu lực bên trong... true false true Toán tử điều kiện: () ? : ; Xét biểu thức điều kiện, nếu đúng trả về giá trị gt_dung, ngược lại trả về gt_sai Ví dụ: (day= =”thu 7”)? “Chúc cuối tuần vui vẻ” : “Chào ngày mới”; Ví dụ 2 Sử dụng toán tử điều kiện để đố người dùng var cauhoi = "Đố bạn 10 + 10 = ?"; var dapan = 20; var dung = ""; var sai... các vấn đề sau: -Hàm được dùng để nhóm các đoạn code lại thành một thể thống nhất và có thể sử dụng lại Hàm được định nghĩa bởi tên Hàm nhận tham số truyền vào và trả về kết quả -Khi thao tác trên hàm, phạm vi biến là môt khái niệm rất quan trọng Nghĩa là cần xác định được biến chỉ hiệu lực bên trong hàm hay cả bên ngoài hàm -Hàm đệ qui là những hàm tự gọi lại chính nó ít nhất 1 lần Hàm đệ qui là một... điều kiện dừng hoặc điều kiện dừng không đúng Bài 6 Đối tượng Trong thực tế lập trình, các dữ liệu thường có quan hệ đan xen nhau nên người ta có xu hướng xây dựng đối tượng Đối tượng, cũng như lớp trong C++ và các ngôn ngữ khác, giúp chương trình có hệ thống, dể sử dụng lại và dễ nâng cấp về sau Trong chương này, chúng ta sẽ xem xét các phần sau: - Khi niệm đối tượng - Thuộc tính của đối tượng - Cách