Bài giảng JavaScript Hàm và đối tượng

Bài giảng JavaScript Hàm và đối tượng giải thích về hàm, tham số của hàm, câu lệnh return, mô tả các đối tượng, sự khác nhau của các đối tượng giữa các trình duyệt, Document Object Model.

JAVASCRIPT Hàm Đối tượng Mục tiêu  Giải thích hàm  Giải thích tham số hàm  Giải thích câu lệnh return  Mơ tả đối tượng  Giải thích khác đối tượng trình duyệt  Mơ tả Document Object Model (DOM) HTML5 / Hàm Đối tượng Giới thiệu Để tạo cho code hướng nhiệm vụ dễ quản lý, JavaScript cho phép nhóm câu lệnh lại trước chúng thực gọi Điều đạt cách sử dụng chức Một chức khối mã có khả tái sử dụng thực thi xuất kiện Sự kiện hành động người dùng trang lời gọi kịch HTML5 / Hàm Đối tượng Các hàm Là khối mã độc lập tái sử dụng thực số thao tác biến biểu thức để hồn thành nhiệm vụ Có thể chấp nhận tham số biến giá trị Có thể trả giá trị kết để hiển thị trình duyệt sau hoạt động thực Hàm JavaScript tạo phần tử script JavaScript hỗ trợ hai loại là: hàm người dùng định nghĩa hàm có sẵn hệ thống HTML5 / Hàm Đối tượng Mô tả định nghĩa hàm 1-2 Không thể bắt đầu chữ số chứa khoảng trắng Có thể bao gồm ký tự, chữ số, gạch Tên hàm Không thể từ khóa JavaScript Chỉ bắt đầu chữ dấu gạch HTML5 / Hàm Đối tượng Mô tả định nghĩa hàm 2-2  Cú pháp định nghĩa hàm function function_name(list of parameters) { // Body of the function } HTML5 / Hàm Đối tượng Gọi hàm 1-2 Một hàm cần phải gọi gọi để thực trình duyệt Để gọi hàm, tên hàm cặp ngoặc () tham số bên có Một hàm định nghĩa gọi tập tin JavaScript bên ngồi Một hàm gọi từ hàm khác JavaScript Một hàm để gọi hàm khác gọi hàm gọi Các hàm cung cấp tiện lợi cách cho phép người sử dụng để gọi hàm nhiều lần HTML5 / Hàm Đối tượng Gọi hàm 2-2 HTML5 / Hàm Đối tượng Các tham số hàm Các hàm javascript chấp nhận tham số Các tham số hàm Có thể tạo có nhu cầu nhận giá trị từ người sử dụng Các tham số chứa giá trị mà hàm cần thực thao tác HTML5 / Hàm Đối tượng Các cách truyền tham số 1-3 Có hai cách truyền đối số cho hàm cụ thể là, truyền giá trị truyền tham số Truyền giá trị- Tức chuyển biến tham số tới hàm Hàm gọi không thay đổi giá trị tham số truyền tới nó gọi HTML5 / Hàm Đối tượng 10 Đối tượng Window 4-4  HTML5 / Hàm Đối tượng Ví dụ window Object function new_window() { if(confirm(‘Do you want to open a new page?’)) { window.open(‘http://www.aptech-education.com/pages/aboutus/about-aptech.html’, ‘_parent’); } else { window.alert(‘In the Current Window’); } } 36 Đối tượng History 1-2 Cho phép bạn để xác định số lượng URL danh sách lịch sử cách sử dụng thuộc tính length Là phần đối tượng cửa sổ Đối tượng history Là mảng cho phép đề cập đến URL cụ thể cách xác định số số mảng Chứa tập hợp URL truy cập người dùng cửa sổ trình duyệt HTML5 / Hàm Đối tượng 37 Đối tượng history 2-2  Các phương thức đối tượng history Phương thức HTML5 / Hàm Đối tượng Mô tả back() Lấy hiển thị URL trước từ danh sách lịch sử forward() Lấy hiển thị URL danh sách lịch sử go() Hiển thị URL định Nó chấp nhận tham số, mà hai chuỗi số để đến trang cụ thể 38 Đối tượng navigator 1-2 Chứa thông tin trình duyệt sử dụng máy khách  Đối tượng navigator Bảng sau liệt kê thuộc tính navigator Mơ tả Thuộc tính HTML5 / Hàm Đối tượng Cho phép người sử dụng để lấy thông tin, chẳng hạn tên, số phiên bản, appName Lấy tên trình duyệt appVersion Lấy số phiên tảng trình duyệt browserLanguage Lấy ngơn ngữ trình duyệt cookieEnabled Xác định xem tập tin cookie kích hoạt trình duyệt platform Lấy loại máy Win32, trình duyệt máy khách 39 Đối tượng navigator 2-2  HTML5 / Hàm Đối tượng Ví dụ navigator Object function display_browser() { document.write(‘Browser name: ‘ +navigator.appName+ ‘’); document.write(‘Browser version: ‘ +navigator.appVersion+ ‘’); document.write(‘Browser language: ‘ +navigator.browserLanguage+ ‘’); document.write(‘Platform: ‘ +navigator.platform+ ‘’); if(navigator.cookieEnabled) { document.write(‘Cookie is enabled in the browser.’); } } 40 Đối tượng location Cho phép truy cập thông tin đầy đủ URL tải cửa sổ trình duyệt  Đối tượng location Bảng sau liệt kê phương thức thuộc tính đối tượng location Phương thức/Thuộc tính HTML5 / Hàm Đối tượng Là phần đối tượng Window Mô tả host Lấy tên máy số cổng URL href Quy định cụ thể lấy toàn URL pathname Quy định cụ thể lấy tên đường dẫn URL assign() Tải tài liệu với URL định reload() ải lại tài liệu cách lần gửi yêu cầu đến máy chủ replace() Ghi đè lịch sử URL cho tài liệu với tài liệu 41 DOM-Mơ hình đối tượng tài liệu 1-3 Một trang web có chứa phần tử khác nhau, chẳng hạn nút, hộp văn bản, hộp kiểm tra, Những phần tử tồn hệ thống phân cấp tổng thể đại diện cho tài liệu HTML JavaScript cho phép người dùng truy cập phần tử HTML thay đổi cấu trúc có trang HTML cách sử dụng Document Object Model (DOM) đặc điểm kỹ thuật DOM Application Programming Interface (API) xác định cấu trúc đối tượng để truy cập thao tác phần tử HTML Được sử dụng với JavaScript để thêm, chỉnh sửa, xóa, nội dung trang web Thơng số kỹ thuật DOM đặt World Wide Web Consortium (W3C) thực tất trình duyệt để khắc phục vấn đề khơng tương thích DOM đọc tất phần tử có trang HTML xử lý phần tử HTML nút Toàn tài liệu HTML đại diện cho nút tài liệu Nút tài liệu bao gồm nút phần tử, nút thuộc tính, nút văn Nút tài liệu nút cấp cao nút văn người thấp HTML5 / Hàm Đối tượng 42 DOM-Mơ hình đối tượng tài liệu 2-3  Ví dụ Welcome Introduction Click Here HTML5 / Hàm Đối tượng 43 DOM-Mơ hình đối tượng tài liệu 3-3   Tất nút hệ thống nút chứa thuộc tính định Các thuộc tính cung cấp thơng tin nút Các thuộc tính nút khác sau: nodeName - Đại diện cho tên nút Nó chứa tên thẻ phần tử HTML trường hợp nodeValue - Đại diện văn chứa nút Thuộc tính có sẵn cho nút thuộc tính khơng cho tài liệu phần tử nút nodeType – Đại diện cho loại nút Ví dụ, nút tài liệu, nút phần tử,  HTML DOM cung cấp đối tượng tiêu chuẩn cho tài liệu HTML số đối tượng sau:     HTML5 / Hàm Đối tượng Document object Form object Link object Table object 44 Đối tượng Document 1-3 Được sử dụng Javascript để truy cập tất phần tử HTML trình bày trang Đại diện cho tồn tài liệu HTML cung cấp truy cập cho phần tử khác, chẳng hạn liên kết, neo, Chỉ có đối tượng tài liệu tạo phần tử BODY tải trang web Cũng phần đối tượng cửa sổ truy cập window.document Cung cấp thuộc tính cho phép người dùng định lấy thông tin phần tử nội dung HTML5 / Hàm Đối tượng 45 Đối tượng Document 2-3  Bảng sau liệt kê phương thức tượng Document thuộc tính củacủa đốiđối tượng Document Thuộc tình thức Phương body close() title Mô tả Mô tả Cung cấp truy cập vào phần tử BODY Đóng dịng liệu hiển thị liệu thu thập cách sử dụng phương thức open() Quy định cụ thể lấy tiêu đề tài liệu getElementById() Lấy tập hợp phần tử HTML cách sử dụng ID anchors Lấy sưu tập có chứa tất neo văn getElementsByName() Lấy tập hợp phần tử HTML cách sử dụng tên phần tử forms Lấy sưu tập có chứa tất form văn getElementsByTagName() Lấy tập hợp phần tử HTML với tên thẻ xác định images Lấy sưu tập có chứa tất hình ảnh có tài liệu open() links write() HTML5 / Hàm Đối tượng Mở luồng để chấp nhận đầu từ phương thức write () Lấy sưu tập có chứa tất liên kết có tài liệu writeln () Viết văn biểu cho tài liệu HTML 46 Đối tượng Document 3-3  Ví dụ Document Object function change_image() { var imgText=document.getElementById(‘myImg’).alt; if(imgText==”ford”) { document.getElementById(‘myImg’).src=”ferrari.jpg”; document.getElementById(‘myImg’).alt =”ferrari”; document.getElementById(‘mytext’).value =”Ferrari Car”; } else { document.getElementById(‘myImg’).src=”ford.jpg”; document.getElementById(‘myImg’).alt =”ford”; document.getElementById(‘mytext’).value =”Ford Car”; } } Model: HTML5 / Hàm Đối tượng 47 Đối tượng Form 1-2 Chấp nhận đầu vào từ người sử dụng gửi liệu người dùng xác nhận Một tài liệu HTML chứa nhiều form Đặc điểm kỹ thuật DOM cung cấp đối tượng form đại diện cho form HTML tạo cho thẻ tài liệu HTML HTML5 / Hàm Đối tượng 48 Đối tượng Form 2-2  Ví dụ Form Object functiondisplay_length() { var count =document.getElementById(“form1”).length; alert(‘Number of controls on the form: ‘ + count); } First name: Last name: Age : HTML5 / Hàm Đối tượng 49 Tổng kết HTML5 / Hàm Đối tượng  Một hàm phần tái sử dụng mã, thực tính tốn tham số biến khác   Các câu lệnh return trả kết đầu sau gọi hàm  Có hai cách để tạo đối tượng tùy biến cụ thể là, cách trực tiếp từ đối tượng Object đối tượng cách tạo hàm tự xây dựng  JavaScript cung cấp đối tượng khác xây dựng sẵn, chẳng hạn String, Math, Date  JavaScript cung cấp đối tượng Browser, chẳng hạn window, history, location, navigation  DOM kỹ thuật tiêu chuẩn cho việc truy cập thao tác phần tử HTML DOM cung cấp đối tượng tài document sử dụng Javascript để truy cập tất phần tử HTML trình bày trang Đối tượng thực thể có thuộc tính phương thức giống đối tượng thực tế đời sống 50 ... Objects – đối tượng người dùng định nghĩa HTML5 / Hàm Đối tượng 15 Tạo đối tượng người dùng 1-3 Object đối tượng cha tất đối tượng JavaScript Đối tượng người dùng tạo bắt nguồn từ đối tượng Object... tượng HTML5 / Hàm Đối tượng 14 Đối tượng JavaScript 2-2  JavaScript cung cấp đối tượng xây dựng sẵn đối tượng người dùng định nghĩa Built-in Objects – đối tượng định nghĩa sẵn javascript Custom... JavaScript Một hàm để gọi hàm khác gọi hàm gọi Các hàm cung cấp tiện lợi cách cho phép người sử dụng để gọi hàm nhiều lần HTML5 / Hàm Đối tượng Gọi hàm 2-2 HTML5 / Hàm Đối tượng Các tham số hàm