Lập trình web tĩnh Html dành cho người mới bắt đầu học lập trình web Mình khuyên các bạn nên học đầy đủ từ bài số 1 trở đi Và kết hợp với video khi sử dụng slide nhưng do video mình chưa có thời gia up lên khi nào có mình sẽ cho link lên mục này
Chương 13 Các đối tượng JavaScript Mục tiêu: Kết thúc chương này, bạn có thể: Làm việc đối tượng Sử dụng thuộc tính phương thức đối tượng Giới thiệu Khi tạo trang web sử dụng đối tượng trình duyệt, ngôn ngữ kịch thành phần HTML cung cấp Trong chương này, thảo luận đối tượng khác chèn vào tài liệu HTML 15.1 Các đối tượng JavaScript Một đối tượng gói liệu toàn diện Các thuộc tính (biến) dùng để định nghĩa đối tượng phương thức (hàm) tác động tới liệu nằm đối tượng Ví dụ như, xe đối tượng Các thuộc tính xe cấu tạo, kiểu dáng màu sắc Hầu hết xe có vài phương thức chung go(), brake(), reverse() carobj.make = “Fiat” carobj.model = “Uno” carobj.color = “red” Để truy cập thuộc tính đối tượng, phải tên đối tượng thuộc tính nó: objectName.propertyName Ví dụ: Document.bgcolor Trong đó: bgcolor (background color) thuộc tính đối tượng document Để truy cập phương thức đối tượng, phải tên đối tượng phương thức yêu cầu: objectName.method() 15.2 Cây phân cấp đối tượng Khi tạo trang web chèn: Các đối tượng trình duyệt Các đối tượng có sẵn (thay đổi phụ thuộc vào ngôn ngữ kịch sử dụng) Các phần tử HTML { PAGE } Dĩ nhiên, tạo đối tượng để sử dụng theo yêu cầu Đối tượng trình duyệt Đối tượng kịch Phần tử HTML Hình 15.1: Cây phân cấp đối tượng Khi tài liệu HTML hiển thị trình duyệt, phân cấp đối tượng tạo dựa phần tử trang Các đối tượng trình duyệt chẳng hạn văn bản, cửa sổ, khung, vị trí, … nằm phân cấp đối tượng Sau đối tượng JavaScript Đây đối tượng cung cấp JavaScript chẳng hạn đối tượng Date, Array, … Các phần tử HTML nằm sau thẻ HTML tạo nên văn hành Sự hiểu biết phân cấp quan trọng đối tượng truy cập theo phân cấp Ví dụ như, để truy cập đối tượng form bạn cần phải tên form đối tượng chứa văn bản, câu lệnh là: document.form1 Để truy cập thuộc tính phần tử văn bản, Text1 đối tượng form: document.form.text1.value = “Having fun” 15.2.1 Câu lệnh this Câu lệnh ‘this’ không thuộc tính nội Giá trị đối tượng hành có thuộc tính chuẩn chẳng hạn tên, độ dài, giá trị áp dụng phù hợp Câu lệnh ‘this’ dùng phạm vi hàm hay tham chiếu gọi hàm this[.property] Nếu đối số thông qua đối tượng hành Tuy nhiên, nên gán vào thuộc tính hợp lệ để đưa kết Ví dụ 1: { PAGE } function dispname(name) { alert("Welcome to the world of JavaScript, " + name); } Enter your name: Hình 15.2: Kết ví dụ Ví dụ 2: function show(value) { alert("You clicked " + value +" button"); } Enter your name: { PAGE } Hình 15.3: Kết ví dụ 15.2.2 Câu lệnh for…in Câu lệnh for in dùng để lặp thuộc tính đối tượng phần tử mảng Ví dụ như, muốn thực thi khối câu lệnh cho phần tử mảng for (variable in object) { statements; } Ví dụ 3: color = new Array("red", "blue", "green"); for (var prop in color) { var record = "color " ; record += prop + " = " + color[prop] + "" document.write(record) } { PAGE } Hình 15.4: Kết ví dụ 15.2.3 Câu lệnh with Câu lệnh with dùng để thực thi tập hợp lệnh mà lệnh dùng phương thức loại đối tượng Tức là, thuộc tính gán cho đối tượng xác định câu lệnh with with (object) { statements; } Trong ví dụ đây, đối tượng Math xem đối tượng mặc định Ví dụ 4: var a, b, c; var r=10; with (Math) { a = PI * r * r; b = r * cos(PI); c = r * sin(PI/2); } document.write (a + “”); document.write (b + “”); document.write (c + “”); { PAGE } Hình 15.5: Kết ví dụ 15.2.4 Câu lệnh new Toán tử new dùng để tạo thực thể loại đối tượng Loại đối tượng đối tượng sẵn có người dùng định nghĩa Ví dụ đối tượng mảng objectName = new objectType (param1 [,param2] [,paramN]) Trong đó: objectName tên thực thể đối tượng ObjectType hàm định loại đối tượng Ví dụ Array Param[1, 2, ] giá trị thuộc tính đối tượng Chúng ta xem ví dụ để rõ Chúng ta tạo loại đối tượng có tên gọi employee, thuộc tính name, code, designation function employee (name, code, designation) { this.name = name this.code = code this.designation = designation } Để tạo thực thể đối tượng employee, dùng: newemp = new employee(“John Dias”, “A001”, “Officer”) Ví dụ 5: { PAGE } function employee(name, code, designation) { this.name = name this.code = code this.designation = designation } newemp = new employee(“John Dias”, “A001”, “Officer”); document.write(“Employee name : “ + newemp.name + “”); document.write(“Employee code : “ + newemp.code + “”); document.write(“Designation : “ + newemp.designation); Hình 15.6: Kết ví dụ 15.3 Câu lệnh eval Hàm eval dùng để đánh giá chuỗi mã lệnh mà không cần tham chiếu đến đối tượng cụ thể eval(string) Chuỗi biểu thức JavaScript, câu lệnh nhóm câu lệnh Biểu thức bao gồm nhiều biến nhiều thuộc tính đối tượng Nếu chuỗi biểu thức hàm eval định giá trị biểu thức Nếu chuỗi nhiều câu lệnh hàm eval thực thi câu lệnh Chúng ta dùng hàm eval để đưa kết Ví dụ 6: { PAGE } var x = 5; var z = 10; document.write(eval(“x + z + 5”)); Hình 15.7: Kết ví dụ 15.4 Đối tượng String Đối tượng string dùng để thao tác làm việc với chuỗi văn Chúng ta tách thành chuỗi biến đổi chuỗi thành chuỗi hoa thường chương trình Cú pháp tổng quát là: stringName.propertyName Hoặc stringName.methodName Có phương thức khác để tạo chuỗi Dùng lệnh var gán cho giá trị Ví dụ var newstr = “ This is my script” Dùng toán tử (=) có gán với tên biến Ví dụ như: newstr = “This is my script” Dùng hàm khởi tạo String (string) Ví dụ như: var newstr = String (“This is my script”) Các thuộc tính: { PAGE } Tên length Mô tả Trả lại độ dài chuỗi Phương thức: Tên Big Blink Bold Fontcolor Italics Small Strike Sub Sup ToLowerCase ToUpperCase Mô tả Tăng kích thước chuỗi văn Tạo hiệu ứng nhấp nháy cho chuỗi (Internet Explorer không hỗ trợ phương thức này) In đậm chuỗi Xác định màu font chữ Hiển thị chuỗi dạng in nghiêng Giảm kích thước chuỗi văn Hiển thị chuỗi có đường gạch ngang nằm (strikethrough) Hiển thị văn dạng số Hiển thị văn dạng số Chuyển chuỗi thành ký tự thường Chuyển chuỗi thành ký tự hoa Ví dụ hiển thị vài phương thức công dụng chúng: Ví dụ 7: var bstr = "big"; var sstr = "small"; var blstr = "bold"; var blkstr = "blink" var ucase = "Uppercase"; var lcase = "Lowercase"; document.write ("This is "+ bstr.big() + " text"); document.write ("This is "+ sstr.small() +" text"); document.write ("This is "+ blstr.bold() + " text"); document.write ("This is "+ blkstr.blink() + " text"); document.write ("This is "+ ucase.toUpperCase() + " text"); document.write ("This is "+ lcase.toLowerCase() + " text"); { PAGE } Hình 15.8: Kết ví dụ 15.5 Đối tượng Math Đối tượng Math có thuộc tính phương thức biểu thị phép tính toán học nâng cao Thuộc tính: Thuộc tính PI LN10 E Mô tả Giá trị , khoảng 3.1415 Giá trị lg (logarit số 10), khoảng 2,302 Giá trị số Euler, khoảng 2.718 Hằng số Euler dùng số sở cho ln Phương thức: Phương thức Method Abs (number) Sin (number) Cos (number) Tan (number) Min (number1, number2) Max (number1, number2) Round (number) Sqrt (number) Mô tả Description Trả giá trị tuyệt đối số Trả giá trị sin của số (tính radian) Trả giá trị cosin của số (tính radian) Trả giá trị tang của số (tính radian) Trả giá trị nhỏ hai số number1 number2 Trả giá trị lớn hai số number1 number2 Làm tròn đối số tới số nguyên gần Trả bậc hai số Ví dụ 8: function doCalc(x) { { PAGE } { var a; a = Math.PI * x * x; alert ("The area of a circle with a radius of " + x + " " + "is" + " " + a); } Enter the radius of the circle : Time and Tide wait for none The time is displayed on the page Hình 15.11: Kết ví dụ 10 Ví dụ 11: TODAY'S DATE mydate=new Date() document.write("Today's Date is: "+ mydate.getDate()); { PAGE } Hình 15.12: Kết ví dụ 11 { PAGE } Tóm tắt Một đối tượng “gói” liệu toàn diện Câu lệnh ‘this’ không thuộc tính nội Câu lệnh ‘this’ dùng phạm vi hàm hay tham chiếu gọi hàm Câu lệnh with dùng cần thực thi tập hợp lệnh mà lệnh dùng phương thức loại đối tượng Toán tử new dùng để tạo thực thể loại đối tượng Hàm eval dùng để đánh giá chuỗi mã lệnh mà không cần tham chiếu đến đối tượng Đối tượng string dùng để thao tác với chuỗi văn Đối tượng Math có thuộc tính phương thức dùng để biểu thị phép tính toán học nâng cao Đối tượng Date thuộc tính Tuy nhiên, có nhiều phương thức dùng để thiết lập, lấy xử lý thời gian { PAGE } Kiểm tra kiến thức Phương thức làm tròn đối số tới số nguyên gần Một object “gói” liệu toàn diện- True/False Câu lệnh _ dùng phạm vi hàm hay tham chiếu gọi hàm Câu lệnh dùng cần thực thi tập hợp lệnh mà lệnh dùng phương thức loại đối tượng dùng để tạo thực thể loại đối tượng { PAGE } Bài tập củng cố Hãy viết chương trình JavaScript để in ngày theo dạng HH:MM:SS AM/PM sau: { EMBED PBrush } Hãy viết chương trình JavaScript để tính bình phương số { PAGE } This page is intentionally left blank { PAGE } [...]... setMinutes setSeconds setTime setMonth setYear Mô tả Thiết lập ngày trong tháng cho đối tượng Date (0 –31) Thiết lập giờ cho đối tượng Date ( 0-23) Thiết lập phút cho đối tượng Date ( 0-59) Thiết lập giây cho đối tượng Date ( 0-59) Thiết lập giá trị thời gian (tính bằng mili giây) cho đối tượng Date Thiết lập tháng cho đối tượng Date (1-12) Thiết lập năm cho đối tượng Date, năm phải lớn hơn 1900 (năm (–)... NAME="MyPage"> < /HTML> Hình 15.11: Kết quả của ví dụ 10 Ví dụ 11: TODAY'S DATE mydate=new Date() document.write("Today's Date is: "+ mydate.getDate()); < /HTML> { PAGE } Hình 15.12: Kết quả của ví dụ 11 { PAGE } Tóm tắt Một đối tượng là một... Enter the radius of the circle : Hình 15.10 a: Kết quả của ví dụ 9 Hình 15.10 b: Kết quả của ví dụ 9 (sau khi nhấn nút lệnh) 15.6 { PAGE } Đối tượng Date Date là một đối tượng có sẵn chứa thông tin về ngày và giờ Đối tượng Date không có thuộc tính nào Tuy nhiên, nó có nhiều phương thức dùng để thiết lập, lấy và xử lý các thông tin về thời gian Đối tượng Date lưu... thức của cùng một loại đối tượng 5 được dùng để tạo một thực thể mới của một loại đối tượng { PAGE } Bài tập củng cố 1 Hãy viết một chương trình JavaScript để in ngày hiện tại theo dạng HH:MM:SS AM/PM như sau: { EMBED PBrush } 2 Hãy viết một chương trình JavaScript để tính bình phương của một số { PAGE } This page is intentionally left blank { PAGE } ... hh:mm:ss” Ví dụ: tdate = new Date (“ July 29, 1998,10:30:00”) Phương thức: Bảng sau mô tả các nhóm phương thức về thời gian: Nhóm phương thức Set Get To parse và UTC Mô tả Gồm những phương thức dùng để thiết lập các giá trị thời gian Gồm những phương thức được dùng để lấy các giá trị thời gian Gồm những phương thức được dùng để trả về các chuỗi giá trị từ các đối tượng Date Gồm những phương thức được dùng... chuỗi văn bản Đối tượng Math có các thuộc tính và phương thức dùng để biểu thị các phép tính toán học nâng cao Đối tượng Date không có thuộc tính nào Tuy nhiên, nó có nhiều phương thức dùng để thiết lập, lấy và xử lý thời gian { PAGE } Kiểm tra kiến thức 1 Phương thức làm tròn đối số tới số nguyên gần nhất 2 Một object là một “gói” dữ liệu toàn diện- True/False 3 Câu lệnh _ được dùng trong... Date.parse(date string ) Số mili giây trong một date string (chuỗi thời gian) tính từ 1/1/1970 Date.UTC(year, month, Số mili giây của một đối tượng thời gian tính từ 1/1/1970 day, hours, min., secs ) Ví dụ 10: