Giáo Trình JAVASCRIPT Biên soạn : Nguyễn Minh Thành Tp.HCM, 2010 Mục Lục Bài TỔNG QUAN VỀ JAVASCRIPT I Giới thiệu II Nhúng JavaScript vào trang web Nhúng nguồn Javascript vào trang Sử dụng file nguồn javascript Ẩn javascript trình duyệt không hỗ trợ III Các lệnh Cú pháp lệnh Hiển thị dòng text Hiển thị hộp thoại thông báo – alert() Giao tiếp với người sử dụng – Lệnh Prompt() Hỏi đáp người sử dụng Bài NGÔN NGỮ JAVASCRIPT 10 I Biến 10 II Kiểu liệu 10 Kiểu số nguyên (Integer) 10 Kiểu dấu phẩy động (Float Point) 11 Kiểu Logic (Boolean) 11 Kiểu chuỗi (String) 11 null undefined 11 Lệnh typeof 11 Chuyển đổi kiểu liệu 11 III Lệnh khối lệnh 12 IV Toán tử & biểu thức 12 Định nghĩa phân loại biểu thức 12 Các toán tử 12 V Cấu trúc lập trình 14 Cấu trúc lập trình rẽ nhánh 14 Cấu trúc lặp 15 VI Mảng – Array 17 Bài HÀM - FUNCTION 19 I Giới thiệu 19 II Định nghĩa hàm 19 III Các hàm có sẵn 21 Hàm eval 21 Hàm parseInt 21 Hàm parseFloat 22 ĐỐI TƯỢNG VÀ SỰ KIỆN 23 Bài I Giới thiệu 23 II Các câu lệnh thao tác lên đối tượng 23 Định nghĩa đối tượng 23 Khởi tạo đối tượng – lệnh new 23 Từ khoá this 24 Lệnh For in 25 Lệnh With 25 III Sự kiện 28 Bài CÁC ĐỐI TƯỢNG TRONG JAVASCRIPT 32 I Giới thiệu 32 II CÁC ĐỐI TƯỢNG 33 Đối tượng navigator 33 Đối tượng window 34 Đối tượng location 35 Đối tượng Frame 36 Đối tượng document 39 Đối tượng anchors 40 Đối tượng forms 40 Đối tượng history 52 Đối tượng links 52 10 Đối tượng Math 53 11 Đối tượng Date 54 12 Đối tượng String 55 13 Đối tượng Image 56 14 Đối tượng Link 57 III Bảng tổng kết từ khoá 57 Giáo trình Javascript Bài TỔNG QUAN VỀ JAVASCRIPT I Giới thiệu Với HTML bạn biết cách tạo trang Web - nhiên mức biểu diễn thông tin chưa phải trang Web động có khả đáp ứng kiện từ phía người dùng Hãng Netscape đưa ngôn ngữ script có tên LiveScript để thực chức Sau ngôn ngữ đổi tên thành JavaScript để tận dụng tính đại chúng ngôn ngữ lập trình Java Mặc dù có điểm tương đồng Java JavaScript, chúng hai ngôn ngữ riêng biệt JavaScript ngôn ngữ dạng script gắn với file HTML Nó không biên dịch mà trình duyệt diễn dịch Không giống Java phải chuyển thành mã dễ biên dịch, trình duyệt đọc JavaScript dạng mã nguồn Chính bạn dễ dàng học JavaScript qua ví dụ bạn thấy cách sử dụng JavaScript trang Web JavaScript ngôn ngữ dựa đối tượng, có nghĩa bao gồm nhiều kiểu đối tượng, ví dụ đối tượng Math với tất chức toán học Tuy JavaScript không ngôn ngữ hướng đối tượng C++ hay Java không hỗ trợ lớp hay tính thừa kế JavaScript đáp ứng kiện tải hay loại bỏ form Khả cho phép JavaScript trở thành ngôn ngữ script động Giống với HTML Java, JavaScript thiết kế độc lập với hệ điều hành Nó chạy hệ điều hành có trình duyệt hỗ trợ JavaScript Ngoài JavaScript giống Java khía cạnh an ninh: JavaScript đọc viết vào file người dùng Các trình duyệt web Nescape Navigator 2.0 trở hiển thị câu lệnh JavaScript nhúng vào trang HTML Khi trình duyệt yêu cầu trang, server gửi đầy đủ nội dung trang đó, bao gồm HTML câu lệnh JavaScript qua mạng tới client Client đọc trang từ đầu đến cuối, hiển thị kết HTML xử lý câu lệnh JavaScript chúng xuất Các câu lệnh JavaScript nhúng trang HTML trả lời cho kiện người sử dụng kích chuột, nhập vào form điều hướng trang Ví dụ bạn kiểm tra giá trị thông tin mà người sử dụng đưa vào mà không cần đến trình truyền mạng Trang HTML với JavaScript nhúng kiểm tra giá trị đưa vào thông báo với người sử dụng giá trị đưa vào không hợp lệ Mục đích giáo trình giới thiệu ngôn ngữ lập trình JavaScript để bạn viết script vào file HTML II Nhúng JavaScript vào trang web Bạn nhúng JavaScript vào File HTML theo cách sau đây:  Sử dụng câu lệnh hàm cặp thẻ …  Sử dụng File nguồn JavaScript  Sử dụng biểu thức JavaScript làm giá trị thuộc tính cho thẻ HTML  Sử dụng thẻ kiện (event handlers) thẻ HTML Trong đó, sử dụng cặp thẻ nhúng File nguồn JavaScript sử dụng nhiều Nhúng nguồn Javascript vào trang Script đưa vào File HTML cách sử dụng cặp thẻ Các thẻ xuất phần hay File HTML Nếu đặt phần , tải sẵn sàng trước phần lại văn tải Biên soạn Nguyễn Minh Thành Giáo trình Javascript Thuộc tính định nghĩa thời cho thẻ "language=…" dùng để xác định ngôn ngữ script sử dụng Có hai giá trị định nghĩa "JavaScript" hay "VBScript" Với chương trình viết JavaScript bạn sử dụng cú pháp sau : // Chèn mã Javacript vào Sử dụng file nguồn javascript Dùng phương pháp hay nhúng trực tiếp lệnh JavaScript vào trang HTML Cú pháp: Thuộc tính SRC định rõ địa URL, liên kết đường dẫn tuyệt đối, VD: Các File JavaScript bên không chứa thẻ HTML Chúng chứa câu lệnh JavaScript định nghĩa hàm Tên File hàm JavaScript bên cần có đuôi js, Ẩn javascript trình duyệt không hỗ trợ JavaScript cho phép bạn ẩn mã JavaScript ghi File HTML, để trình duyệt cũ không hỗ trợ cho JavaScript đọc VD sau đây: Thẻ Cặp thẻ 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 không hiểu thẻ bị lờ đi, đoạn mã nằm cặp thẻ Navigator hiển thị Ngược lại, trình duyệt có hỗ trợ JavaScript đoạn mã cặp thẻ bỏ qua Tuy nhiên, điều xảy người sử dụng không sử dụng JavaScript trình duyệt cách tắt hộp Preferences/Advanced Vd: Tạo trang (KTTrinhDuyet) Trang có sử dụng JavaScript Cần sử dụng trình duyệt Netscape 2.0 trở đi! Hãy tải phiên Netscape nhất Nếu không đọc bật Preferences/Advanced/JavaScript lên Còn sử dụng Internet Explorer Click phải Infomation Bar => Allow blocked content Chào mừng bạn Biên soạn Nguyễn Minh Thành Giáo trình Javascript III Các lệnh Cú pháp lệnh Câu lệnh JavaScript bao gồm hàm, phát biểu, toán tử biểu thức dòng kết thúc ; Cách gọi phương thức đối tượng sau: object_name.property_name; vd: document.writeln("Chào bạn!"); Hiển thị dòng text Trong hầu hết ngôn ngữ lập trình, khả sở hiển thị hình dòng text Trong JavaScript, người lập trình điều khiển việc xuất hình client dòng text File HTML JavaScript xác định điểm mà xuất File HTML dòng text kết dịch dòng HTML khác hiển thị trang Trong phần này, ta học lệnh xuất văn write() writeln() đối tượng document (chi tiết 5) Đối tượng document JavaScript thiết kế sẵn hai cách thức để xuất dòng text hình client: write() writeln() Cách gọi cách thức đối tượng sau: document.write(“Chuỗi văn bản”); vd: document.write("Chào bạn"); document.writeln(“Chào bạn”); Cách thức write() xuất hình xâu Text không xuống dòng, cách thức writeln() sau viết xong dòng Text tự động xuống dòng Hai cách thức cho phép xuất thẻ HTML Ghi chú: dùng “+” để ghép nhiều chuỗi ký tự Cho phép dùng kí tự đặc biệt chuỗi: \n : Xuống dòng \t : Tab Khi có dùng ký tự đặc biệt khoảng trắng phải đặt khối JavaScript cặp thẻ vd: Tạo trang (OutputText.htm) dùng cách thức write() xuất thẻ HTML Chào bạn. Biên soạn Nguyễn Minh Thành Giáo trình Javascript vd: Tạo trang (OutputText2.htm) phân biệt khác write() writeln(): vd: Tạo trang (OutputText3.htm) xuất thẻ html từ JavaScript: Hiển thị hộp thoại thông báo – alert() JavaScript hỗ trợ khả cho phép người lập trình tạo hộp hội thoại thông báo Cách đơn giản để làm việc sử dụng lệnh alert() Để sử dụng cách thức này, bạn phải đưa vào dòng văn Cú pháp: alert("Câu thông báo"); Khi File chờ người sử dụng nhấn vào nút OK tiếp tục thực Thông thường, cách thức alert() sử dụng trường hợp thông báo: Thông tin đưa form không hợp lệ Kết sau tính toán không hợp lệ Khi dịch vụ chưa sẵn sàng để truy nhập liệu, hay có lỗi xảy ra… Biên soạn Nguyễn Minh Thành Giáo trình Javascript vd: Tạo trang (Thongbao.htm) Chúc bạn thành công!!! Giao tiếp với người sử dụng – Lệnh Prompt() Lệnh alert() cho phép thông báo với người sử dụng chưa thực giao tiếp với người sử dụng JavaScript cung cấp lệnh prompt() để giao tiếp với người sử dụng tạo hộp hội thoại gồm dòng thông báo, trường nhập liệu, nút OK nút Cancel Người sử dụng nhập vào trường kích vào OK Khi đó, ta xử lý liệu người sử dụng vừa đưa vào Cú pháp: prompt("Câu thông báo","nội dung mặc định"); vd: Tạo trang (Hello1.htm) thị hộp thoại hỏi tên người dùng sau hiển thị thông báo chào tên đưa vào Ví dụ hiển thị dấu nhắc nhập vào tên với phương thức window.prompt Giá trị đạt ghi biến có tên name Biến name kết hợp với chuỗi khác hiển thị cửa sổ trình duyệt nhờ phương thức document.write vd: Tạo trang (Hello2.htm) sau Biên soạn Nguyễn Minh Thành Giáo trình Javascript vd: Tạo trang (Hello3.htm) sau vd: Tạo trang (Hello4.htm) sau Hỏi đáp người sử dụng Lệnh confirm cho phép xuấ hộp thọai thông báo tùy theo hành động định click chuột người sử dụng mà lệnh thực hịên Lệnh confirm() tạo hộp hội thoại gồm dòng thông báo, nút OK nút Cancel Người sử dụng click vào OK Khi đó, ta xử lý thực hành động theo yêu cầu, ngược lại Click vào Cancel bỏ đóng hộp thọai thông bao Thường sử dụng trường hỏi đáp, xác nhận định xử lý thông tin từ phía người dùng Cú pháp: confirm("Câu thông báo hỏi ?"); vd: Tạo trang (HoiDap.htm) sau function Hoidap(){ question = confirm("Bạn thật muốn truy cập Website") if (question !="0"){ top.location = "http://www.tuoitre.com.vn/" } } Hãy click vào để truy cập website :Báo Tuổi Trẻ Biên soạn Nguyễn Minh Thành Giáo trình Javascript Bài NGÔN NGỮ JAVASCRIPT I Biến Cũng ngôn ngữ lập trình khác javascript dùng biến để lưu trữ giá trị nhập vào, giá trị tính toán nói cách khác biến vùng nhớ sử dụng để lưu trữ giá trị khác trình chương trình hoạt động Mỗi biến có tên, Tên biến JavaScript phải bắt đầu chữ hay dấu gạch Các chữ số không sử dụng đầu tên biến sử dụng sau ký tự Phạm vi biến hai kiểu sau: Biến toàn cục: Có thể truy cập từ đâu ứng dụng khai báo: x = 0; Biến cục bộ: Chỉ truy cập phạm vi chương trình mà khai báo Biến cục khai báo hàm với từ khoá var, định nghĩa hàm (function) đó: var x = 0; II Kiểu liệu Khác với C++ hay Java, JavaScript ngôn ngữ có tính định kiểu thấp Điều có nghĩa kiểu liệu khai báo biến Kiểu liệu tự động chuyển thành kiểu phù hợp cần thiết vd : Tạo trang (DataType.htm) sau Datatype Example var a="Trái táo"; var n=12; n = n + 20; var tb ="Có tất " + n + " " + a; document.write(tb); Trình diễn dịch JavaScript xem biến n có kiểu nguyên cộng với 20 kết hợp với biến tb chuyển thành kiểu chuỗi Trong JavaScript, có bốn kiểu liệu sau đây: kiểu số nguyên, kiểu dấu phẩy động, kiểu logic kiểu chuỗi Kiểu số nguyên (Integer) Số nguyên biểu diễn theo ba cách:  Hệ số 10 (hệ thập phân) - biểu diễn số nguyên theo số 10, ý chữ số phải khác 0.(vd: 450) Biên soạn Nguyễn Minh Thành 10 Giáo trình Javascript b Phần tử checkbox Các phần tử checkbox có khả bật tắt dùng để chọn không chọn thông tin Các checkbox có nhiều thuộc tính cách thức button Bảng danh sách thuộc tính cách thức phần tử checkbox Cách thức thuộc tính Mô tả checked Cho biết trạng thái thời checkbox (thuộc tính) defaultChecked Cho biết trạng thái mặc định phần tử (thuộc tính) name Cho biết tên phần tử định thẻ INPUT (thuộc tính) value Cho biết giá trị thời phần tử định thẻ INPUT (thuộc tính) click() Mô tả click vào checkbox (Cách thức) Phần tử checkbox có thẻ kiện onClick VD (Trang Checkbox.htm) Tạo hộp checkbox để nhập vào số lựa chọn tính nhân đôi bình phương: checkbox example function calculate(form,callingfield) { if (callingfield == "result") { if (form.square.checked){ form.entry.value = math.sqrt(form.result.value); }else{ form.entry.value = form.result.value / 2; } //end if(2) }else{ if (form.square.checked){ form.result.value=form.entry.value*form.entry.value; }else { form.result.value = form.entry.value * 2; } } } value: action: square result: Trong script này, bạn thấy cách sử dụng thẻ kiện onClick thuộc tính checked giá trị kiểu Boolean dùng làm điều kiện câu lệnh if else Bạn thêm checkbox tên square vào form Nếu hộp check, chương trình lấy giá trị nó, không, thực thi mặc định nhân đôi giá trị Thẻ kiện onClick checkbox định nghĩa: (Báo Tuổi Trẻ Biên soạn Nguyễn Minh Thành Giáo trình Javascript Bài NGÔN NGỮ JAVASCRIPT I Biến Cũng ngôn ngữ lập trình khác javascript dùng biến để lưu trữ giá trị nhập vào, giá trị