Bài giảng Thiết kế và lập trình Web - Bài 4: JS – JavaScript

Bài giảng Thiết kế và lập trình Web - Bài 4: JS – JavaScript cung cấp cho người học các kiến thức: Giới thiệu về Javascript, nhúng Javascript vào trang web, kiểu dữ liệu & các cú pháp Javascript, xử lý sự kiện, DOM HTML với Javascript. Mời các bạn cùng tham khảo.

Thiết kế lập trình Web Bài JS – JavaScript Viện CNTT & TT Thiết kế lập trình Web Nội dung  Giới thiệu Javascript  Nhúng Javascript vào trang web  Kiểu liệu & Các cú pháp Javascript  Xử lý kiện  DOM HTML với Javascript  Ví dụ Thiết kế lập trình Web Giới thiệu Javascript  Script? – Ngơn ngữ kịch – Là ngơn ngữ lập trình cho phép tạo điều khiển ứng dụng khác – Các ngôn ngữ kịch thường thông dịch  JS ngôn ngữ Client-side script hoạt động trình duyệt người dùng ( client )  Chia sẻ xử lý ứng dụng web Giảm xử lý không cần thiết server  Giúp tạo hiệu ứng, tương tác cho trang web Thiết kế lập trình Web Giới thiệu Javascript  Client-Side Script: – Script thực thi Client-Side ( trình duyệt ): Thực tương tác với người dùng ( tạo menu chuyển động, … ) , kiểm tra liệu nhập, …  Server-Side Script: – Script xử lý Server-Side, nhằm tạo trang web có khả phát sinh nội dung động Một số xử lý chính: kết nối CSDL, truy cập hệ thống file server, phát sinh nội dung html trả người dùng… Thiết kế lập trình Web Giới thiệu Javascript  Cung cấp tương tác với người dùng – Sự kiện người dùng tạo ra: di chuột, click chuột… – Sự kiện hệ thống tạo ra: thay đổi kích thước trang, tải trang…  Thay đổi động nội dung – Thay đổi nội dung vị trí thành phần trang Web theo tương tác người dùng  Hợp lệ hóa liệu – Kiểm tra xem liệu có hợp lệ khơng trước gửi (submit) đến Web Server để xử lý Thiết kế lập trình Web Nội dung  Giới thiệu Javascript  Nhúng Javascript vào trang web  Kiểu liệu & Các cú pháp Javascript  Xử lý kiện  DOM HTML với Javascript  Ví dụ Thiết kế lập trình Web Nhúng Javascript vào trang web Định nghĩa script trực tiếp trang html: Nhúng sử dụng script cài đặt từ file js khác: Thiết kế lập trình Web Nhúng Javascript vào trang web  Đặt tag : script thực thi trang web mở  Đặt tag : script phần body thực thi trang web mở (sau thực thi đoạn script có phần )  Số lượng đoạn client-script chèn vào trang khơng hạn chế  File JavaScript bên ngồi cho phép sử dụng lại nhiều lần chỉnh sửa dễ dàng Thiết kế lập trình Web Nhúng Javascript vào trang web document.write("Welcome to JavaScript"); Thiết kế lập trình Web Nội dung  Giới thiệu Javascript  Nhúng Javascript vào trang web  Kiểu liệu & Các cú pháp Javascript  Xử lý kiện  DOM HTML với Javascript  Ví dụ Thiết kế lập trình Web Bài tập – Đèn tắt, bật Thiết kế lập trình Web bLight=0; function changeimage(){ if (bLight==0){ bLight=1; document.myimage.src="bulbon.gif"; } else{ bLight=0; document.myimage.src="bulboff.gif“; } } Thiết kế lập trình Web Bài tập – Bổ sung thành phần động  Dynamic 124 Thiết kế lập trình Web Bài tập Enter Your Mail Address 125 Thiết kế lập trình Web // tạo nút button Remove var NumOfRow=1; var newButton=document.createElement('input'); function Button1_onclick() newButton.type='button'; { newButton.value='Remove'; NumOfRow++; newButton.id='btn'+NumOfRow; // lấy tham chiếu đến main Div // gắn kiện click cho button var mainDiv=document.getElementById('MainDiv'); newButton.onclick=function RemoveEntry() { var mainDiv=document.getElementById('MainDiv'); // tạo div để chứa điều khiển khác mainDiv.removeChild(this.parentNode); var newDiv=document.createElement('div'); newDiv.setAttribute('id','innerDiv'+NumOfRow); } //tạo span để chứa đoạn text // append span, textbox the button vào div var newSpan=document.createElement('span'); newDiv.appendChild(newSpan); newSpan.innerHTML="Enter Your Mail Address "; newDiv.appendChild(newTextBox); // tạo textbox newDiv.appendChild(newButton); var newTextBox=document.createElement('input'); // cuối gắn div vào main div newTextBox.type='text'; mainDiv.appendChild(newDiv); newTextBox.setAttribute('id','txtAddr'+NumOfRow); } Thiết kế lập trình Web Bài tập  Xây dựng trang Web liệt kê danh sách hóa đơn “Orders.html”:  Nút “Save” cho phép gửi hóa đơn đánh dấu đến file “Process.php” server để xử lý, nút “Back” cho phép quay lại trang trước nút “Reset” dùng để xóa nút chọn (checkbox)  Nút chọn cho phép chọn tất hủy chọn tất dòng hóa đơn bên  Nếu tất dòng bên chọn nút đánh dấu 127 Thiết kế lập trình Web … … 128 Thiết kế lập trình Web Bài tập function docheck(status){ var num = document.frmList.chkid.length; for(var i=0; i