Bài giảng Thiết kế và lập trình web bằng ngôn ngữ ASP

Lý thuyết: 45 tiết Thực hành: 30 tiết • GVHD: Dương Khai Phong • Email: khaiphong@gmail.com • Website: http://sites.google.com/site/khaiphong 1/ Giới thiệu tổng quan Web 2/ HTML JavaScript 3/ Các đối tượng ASP.Net 4/ ADO.Net (kết nối sở liệu) 5/ Triển khai ứng dụng Web + Ôn tập PHẦN 1: Webpage – Website HTML, XHTML, DHTML Các ngơn ngữ lập trình web Web Server – Web Browser – HTTP Mơ hình ứng dụng Quá trình Request - Respone a Webpage:  Web hệ thống văn có mối siêu liên kết bên với (interlinked hypertext documents) truy xuất thông qua hệ thống Internet  Webpage trang thông tin chứa: văn (text), hình ảnh (images), phim (videos) đa phương tiện khác…có mối siêu liên kết với (hyperlinks)  Một trang web tập tin HTML XHTML truy xuất thông qua giao thức HTTP b Website:  Website tập hợp trang web nằm tên miền tên miền phụ WWW hệ thống mạng Internet Phân loại: • Website tĩnh: chủ yếu giới thiệu thơng tin • Website động: có tương tác với người dùng WEBSITE WEB PAGE Trang chủ WEB PAGE Giới thiệu WEB PAGE Tin tức WEB PAGE Liên hệ WEB PAGE Quảng cáo WEB PAGE Sản phẩm WEB PAGE Hình ảnh WEB PAGE Menu WEB PAGE Sự kiện WEB PAGE Videos a HTML:  HTML viết tắt HyperText Markup Language (ngôn ngữ đánh dấu siêu văn bản)  HyperText – văn kết nối đến văn khác  Sử dụng “thẻ” để “đánh dấu” văn bản, giúp trình duyệt xác định cách biểu diễn trang web đến người sử dụng  Một tập tin HTML tập tin văn có chứa thẻ đánh dấu (các tập tin có phần mở rộng *.htm *.html) b XHTML:  XHTML viết tắt eXtensible HyperText Markup Language (ngôn ngữ đánh dấu siêu văn mở rộng): ngôn ngữ đánh dấu tương tự ngơn ngữ HTML có cú pháp chặt chẽ  XHTML xem hệ HTML dựa chuẩn XML c DHTML:  DHTML viết tắt Dynamic HyperText Markup Language (ngôn ngữ đánh dấu siêu văn động)  Là ngôn ngữ dùng tạo trang web dựa kết hợp nhiều kỹ thuật như: ngôn ngữ HTML tĩnh, ngôn ngữ kịch máy khách (Javascript), ngôn ngữ định dạng trình diễn Cascading Style Sheets (CSS) Document Object Model (DOM)  DHTML cho phép người dùng thêm hiệu ứng vào trang web mà HTML không thực a Giới thiệu:  Các đối tượng javascript hỗ trợ: Array Math Date String … Window objects Document Event Frames History Location Navigator Screen b • • • • c  Đối tượng bản: Array: đối tƣợng dùng quản lí danh sách mảng Math: đối tƣợng liên quan đến phép tính tốn học String: đối tƣợng dùng để thao với chuỗi văn Date: đối tƣợng liên quan đến ngày Đối tượng trình duyệt: window:  Công dụng: dùng quản lý thông tin tất đối tƣợng cửa sổ trình duyệt  Các thuộc tính bản: đối tƣợng window đƣợc xem đối tƣợng (base class) tất đối tƣợng khác  Các phương thức bản: alert(), blur(), close(), open(), focus(), navigate() c Đối tượng trình duyệt:  document:  Cơng dụng: dùng quản lý thông tin tài liệu HTML cửa sổ trình duyệt (đƣợc xem đối tƣợng window)  Các thuộc tính phương thức: Các thuộc tính: • alinkColor • bgColor • Body • fgColor • linkColor • location • Title • URL • vlinkColor Các phƣơng thức: • clear() • close() • open() • write() • writeln() c Đối tượng trình duyệt:  history:  Cơng dụng: dùng quản lý danh sách URL duyệt  Các thuộc tính phương thức: Các thuộc tính: • current • length • next • previous Các phƣơng thức: • back() • forward() • go(relPos string) c Đối tượng trình duyệt:  location:  Cơng dụng: dùng quản lý thông tin URL  Các thuộc tính phương thức: Các thuộc tính: • hash • host • hostname • href Các phƣơng thức: • reload() • replace(URL) a Giới thiệu:  Javascript quản lý tƣơng tác ngƣời dùng trình duyệt thơng qua quản lý kiện (Event) Form đối tƣợng Form b Sự kiện: (Event)  Sự kiện kết thao tác ngƣời dùng tác động lên đối tƣợng  Một kiện bao gồm thông tin:  Kiểu kiện: click, double click, change,  Vị trí trỏ thời điểm xảy kiện  Các kiện thƣờng gặp: • • • • • • onClick onChange onFocus onBlur onSelect onMouseOver • • • • • • onMouseOut onLoad onUnload onSubmit onMouseDown onMouseUp c Các kiện đối tượng:  Đối tượng window: (onLoad - onUnload)  Công dụng: kiện xảy ngƣời dùng mở trang đóng trang  Ví dụ: viết trang ngƣời dùng mở trang hiển thị thông báo nhập Tên  xuất “Hi, welcome my pages”, sau đóng trang hiển thị thơng báo “Good bye, see you again !” var name = ""; function hello() { name = prompt('Enter Your Name:','Name'); alert('Hi ' + name + ', welcome to my page!'); } function goodbye() { alert('Goodbye ' + name + ', see you again!'); } c Các kiện đối tượng:  Đối tượng form:  Sự kiện form đƣợc xử lý phụ thuộc vào yếu tố sau: • Thuộc tính kiện form: Action, Method, … • Việc xử lý kiện đối tƣợng (button, textbox, ) bên form: onSubmid, onClick, onBlur, onChange, …  Ví dụ chu trình kiện form: c Các kiện đối tượng:  Đối tượng form:  Ví dụ chu trình kiện form: Ngƣời dùng tác động lên Form Ngƣời dùng tác động lên đối tƣợng Form Bộ lắng nghe kiện Javascript hoạt động Ngƣời dùng thực thao tác xác nhận Form abcdef *****  OnMouseOver OnChange (tuỳ đối tượng) OnClick OnSubmit Xử lý Form phụ thuộc vào thuộc tính kiện c Các kiện đối tượng:  Đối tượng form:  Ví dụ chu trình kiện form:  Thuộc tính kiện:  Action: thuộc tính dùng để chuyển trang hành đến trang khác theo địa URL truyền vào  Method: phƣơng thức gởi nội dung đi: “get / post” OnMouseOver OnChange (tuỳ đối tượng) OnClick OnSubmit Xử lý Form phụ thuộc vào thuộc tính kiện d Các ví dụ xử lý kiện:  Ví dụ 1: thiết kế trang gồm button cho phép ngƣời dùng thay đổi màu trang nhƣ sau: d Các ví dụ xử lý kiện:  Ví dụ 2: thiết kế trang cho phép nhập thông tin họ tên năm sinh, xuất câu chào cho biết tuổi ngƣời đó: Muiten01 d Các ví dụ xử lý kiện:  Ví dụ 3: thiết kế trang gồm radio button cho phép ngƣời dùng thay đổi hình ảnh trang nhƣ sau: d Các ví dụ xử lý kiện:  Ví dụ 4: thiết kế trang cho phép ngƣời dùng đăng nhập, thành cơng cho phép ngƣời dùng xem sản phẩm trang sanpham.html ... Language (ngôn ngữ đánh dấu siêu văn động)  Là ngôn ngữ dùng tạo trang web dựa kết hợp nhiều kỹ thuật như: ngôn ngữ HTML tĩnh, ngôn ngữ kịch máy khách (Javascript), ngơn ngữ định dạng trình diễn... quan Web 2/ HTML JavaScript 3/ Các đối tượng ASP. Net 4/ ADO.Net (kết nối sở liệu) 5/ Triển khai ứng dụng Web + Ôn tập PHẦN 1: Webpage – Website HTML, XHTML, DHTML Các ngơn ngữ lập trình web Web... người dùng WEBSITE WEB PAGE Trang chủ WEB PAGE Giới thiệu WEB PAGE Tin tức WEB PAGE Liên hệ WEB PAGE Quảng cáo WEB PAGE Sản phẩm WEB PAGE Hình ảnh WEB PAGE Menu WEB PAGE Sự kiện WEB PAGE Videos