Công nghệ web và dịch vụ trực tuyến

Trong bài giảng này, nội dung được viết theo hướng trang bị cho người học kiến thức nền tảng về công nghệ web và dịch vụ trên Internet cũng như cách cài đặt và sử dụng các dịch vụ đó.. T

Trang 1

KHOA CÔNG NGHỆ THÔNG TIN



ThS NGUYỄN ĐÌNH HOÀNG SƠN

TÀI LIỆU THAM KHẢO

NHA TRANG - 2017

Trang 2

Bài giảng Công nghệ web và dịch vụ trực tuyến được biên soạn để phục vụ đào tạo đại học của Trường Đại học Nha Trang Đây là tài liệu tham khảo hữu ích cho sinh viên Ngành Công nghệ Thông tin học tập và nghiên cứu Trong bài giảng này, nội dung được viết theo hướng trang bị cho người học kiến thức nền tảng về công nghệ web và dịch vụ trên Internet cũng như cách cài đặt và sử dụng các dịch vụ đó

Các chủ đề chính của bài giảng bao gồm

 Tổng quan về Internet và công nghệ web

 Các công nghệ web phổ biến phía Client và Server

 Công nghệ AJAX và ứng dụng: Google API, RSS

 Dịch vụ web

 Các dịch vụ trực tuyến

Bên cạnh phần lý thuyết còn có các bài tập thực hành kèm theo để người học luyện tập, vận dụng những kiến thức đã học vào thực tế, tăng cường khả năng tự học, đáp ứng được yêu cầu đổi mới phương pháp học tập theo học chế tín chỉ

Dù có nhiều cố gắng trong công tác biên soạn nhưng bài giảng chắc chắn sẽ có ít nhiều sai sót Chúng tôi mong nhận được các ý kiến đóng góp của các đồng nghiệp cũng như của sinh viên để hoàn thiện bài giảng trong những lần xuất bản tiếp theo

KHOA CÔNG NGHỆ THÔNG TIN

BỘ MÔN HỆ THỐNG THÔNG TIN

2017

Trang 3

AJAX Asynchronous JavaScript and XML

API Application Programming Interface

ASP Active Server Pages

CERN Conseil Européen pour la Recherche Nucléaire

(European Organization for Nuclear Research) CGI Common Gateway Interface

CSS Cascading Style Sheets

DOM Document Object Model

GCP Google Cloud Platform

HTML HyperText Markup Language

HTTP HyperText Transfer Protocol

IaaS Infrastructure as a Service

JAX-RS Java API for RESTful Web Services

JAX-WS Java API for XML Web Services

JSON JavaScript Object Notation

NIST National Institute of Standards and Technology

PaaS Platform as a Service

PHP Hypertext Preprocessor

POM Project Object Model

RDF Resource Description Framework

REST Representation State Transfer

RPC Remote Procedure Call

RSS Really Simple Syndication

SaaS Software as a Service

SGML Standard Generalized Markup Language

SOA Service-Oriented Architecture

SOAP Simple Object Access Protocol

SSI Server Side Includes

TCP/IP Transmision Control Protocol/Internet Protocol

UDDI Universal Discovery Description and Integration

URL Uniform Resource Locator

W3C World Wide Web Consortium

WSDL Web Service Description Language

XHTML eXtensible HyperText Markup Language

XML eXtensible Markup Language

Trang 4

TỔNG QUAN VỀ INTERNET VÀ CÔNG NGHỆ WEB 1

1.1 Internet 1

Khái niệm 1

Lịch sử 1

1.2 Các giai đoạn phát triển của công nghệ web 2

Công nghệ web thế hệ thứ nhất – Web 1.0 2

1.2.1.1 Đặc điểm 2

1.2.1.2 Hạn chế 2

Công nghệ web thế hệ thứ hai – Web 2.0 2

1.2.2.1 Đặc điểm 3

1.2.2.2 Hạn chế 4

1.2.2.3 Các dịch vụ ứng dụng Web 2.0 tiêu biểu 4

1.2.2.4 Sử dụng Web 2.0 trong chính phủ điện tử hiện nay 5

Công nghệ web thế hệ thứ 3 – Web 3.0 (Semantic Web) 6

1.2.3.1 Khái niệm 6

1.2.3.2 Đặc điểm của Semantic Web 7

1.2.3.3 Thách thức của Web 3.0 8

BÀI TẬP CHƯƠNG 1 8

CÔNG NGHỆ VÀ NGÔN NGỮ LẬP TRÌNH PHÍA CLIENT 9

2.1 HyperText Markup Language (HTML) 9

Giới thiệu HTML 9

Đặc điểm của HTML 9

Cấu trúc của văn bản HTML 9

2.1.3.1 Cấu trúc của HTML element 9

2.1.3.2 Cấu trúc của văn bản HTML 10

Khai báo chuẩn HTML 11

2.1.4.2 Khai báo 11

XHTML 11

2.1.5.2 Các thay đổi về cú pháp trong XHTML so với HTML 12

Giới thiệu HTML5 13

2.2 Cascading Style Sheets (CSS) 14

Giới thiệu CSS 14

Mục đích sử dụng CSS 14

Cú pháp CSS 14

2.2.3.1 Selector 15

2.2.3.2 Property 15

2.2.3.3 Value 15

Đơn vị CSS 16

2.2.4.1 Đơn vị đo chiều dài 16

2.2.4.2 Đơn vị màu sắc 16

Trang 5

2.2.5.1 Kiểu thuộc tính (Inline Style) 17

2.2.5.2 Kiểu tập hợp nhúng bên trong tài liệu HTML (Internal Style Sheet) 17

2.2.5.3 Liên kết ngoài (External Style Sheet) 17

2.2.5.4 Mức độ ưu tiên giữa các cách nhúng CSS vào tài liệu HTML 20

Giới thiệu CSS3 20

2.3 Javascript 21

Giới thiệu JavaScript 21

Đặc điểm của JavaScript 21

Mục đích sử dụng JavaScript 22

Nhúng mã JavaScript vào file HTML 22

2.3.4.1 Sử dụng thẻ <script> 22

2.3.4.2 Dùng file chứa mã JavaScript 23

2.3.4.3 Dùng biểu thức JavaScript làm giá trị thuộc tính xử lý sự kiện 24

2.3.4.4 Thẻ <noscript> 24

Document Object Model (DOM) 25

2.3.5.1 window 25

2.3.5.2 location 26

2.3.5.3 history 27

2.3.5.4 document 27

2.3.5.5 form 29

Xử lý sự kiện 30

2.3.6.2 Xử lý sự kiện cho các thẻ HTML 30

2.3.6.3 Một số sự kiện chủ yếu 31

2.3.6.4 Đăng ký sự kiện 32

jQuery 33

2.3.7.2 Cú pháp 33

2.3.7.3 Các điều khiển jQuery 33

2.3.7.4 Hàm jQuery API 34

CÔNG NGHỆ VÀ NGÔN NGỮ LẬP TRÌNH PHÍA SERVER 38

3.1 Server Side Includes (SSI) và Common Gateway Interface (CGI) 38

SSI 38

CGI 39

3.2 Hypertext Preprocessor (PHP) 40

Giới thiệu 40

Cấu trúc cơ bản 40

3.3 Active Server Pages (ASP) 41

Giới thiệu 41

Cấu trúc cơ bản 41

3.4 ASP.NET 42

Giới thiệu 42

Trang 6

Các điều khiển ASP.NET 45

3.4.3.1 HTML Server Control 45

3.4.3.2 ASP.NET Server Control (Web Server Control) 47

CÔNG NGHỆ AJAX 49

4.1 Mô hình ứng dụng web client-server 49

Khái niệm ứng dụng web 49

Mô hình client-server 49

4.1.2.1 Client 49

4.1.2.2 Server 49

HTTP Request và HTTP Response 49

4.1.3.1 HTTP Request 50

4.1.3.2 HTTP Response 51

4.2 Ngôn ngữ XML 53

Giới thiệu 53

Cấu trúc tài liệu XML 54

4.2.2.1 Khai báo 54

4.2.2.2 Phần tử XML 55

4.2.2.3 Không gian tên 55

4.2.2.4 Schema 57

4.3 AJAX 59

Cơ chế hoạt động của AJAX 60

Ưu nhược điểm của AJAX 61

4.3.2.1 Ưu điểm 61

4.3.2.2 Nhược điểm 61

Ứng dụng của AJAX 62

Kỹ thuật lập trình Ajax 63

4.3.4.1 Xây dựng đối tượng XMLHttpRequest 63

4.3.4.2 Tạo yêu cầu (request) đến server 63

4.3.4.3 Xây dựng hàm xử lý kết quả client nhận được khi server response 64

4.3.4.4 Tạo xử lý ở server 65

Jquery Ajax 65

4.3.5.1 Phương thức load() 65

4.3.5.2 Phương thức get() và post() 66

4.3.5.3 Phương thức ajax() 66

Google Map API 67

4.3.6.1 Giới thiệu 67

4.3.6.2 Tạo Google Map cho ứng dụng 67

4.3.6.3 Dịch vụ trên Google Map 74

RSS 77

4.3.7.2 Cấu trúc file RSS 77

Trang 7

WEB SERVICE 83

5.1 Công nghệ Web Service 83

Khái niệm 84

Đặc điểm của Web Service 85

5.1.2.1 Đặc điểm 85

5.1.2.2 Ưu nhược điểm của Web Service 86

Nền tảng của Web Service 86

Các công nghệ của Web Service 87

5.1.4.1 XML – RPC 87

5.1.4.2 Giao thức truyền thông điệp SOAP 87

5.1.4.3 Ngôn ngữ mô tả Web Service - WSDL 90

5.1.4.4 Đăng ký dịch vụ UDDI 95

5.2 Kiến trúc Web Service 97

Cơ chế hoạt động của Web Service 97

Kiến trúc phân tầng của Web Service 97

Kiến trúc hướng dịch vụ SOA 98

5.2.3.1 Khái niệm kiến trúc hướng dịch vụ SOA 98

5.2.3.2 Nguyên tắc thiết kế của SOA 99

5.2.3.3 Ích lợi khi sử dụng SOA 99

5.3 Xây dựng Web Service 99

Các vấn đề cần xác định rõ trước khi xây dựng ứng dụng Web Service 99

Xây dựng Web Service với ASP.NET 100

5.3.2.1 Tạo mới Web Application Project 100

5.3.2.2 Tạo mới Web Service 101

Xây dựng Web Service với Java 103

5.3.3.1 Thiết lập môi trường 103

5.3.3.2 Xây dựng Web Service với JAX-WS 107

5.3.3.3 Xây dựng Web Service với Axis2 111

5.4 Khai thác Web Service 119

Tạo ứng dụng khai thác Web Service bằng ASP.NET 119

Tạo ứng dụng khai thác Web Service bằng PHP 122

5.5 Bảo mật trong Web Service 123

Tổng quan về bảo mật 123

Một số kiểu đánh cắp thông tin và cách phòng chống 124

5.5.2.1 Message Replay Attack 124

5.5.2.2 Web Spoofing 125

Bảo mật trong web service 127

5.5.3.1 Xác thực client và server sử dụng 129

5.5.3.2 Sử dụng protocol HTTPS 130

5.5.3.3 Soap Header extension 131

RESTFUL WEB SERVICE 133

Trang 8

6.2 Nguyên tắc thiết kế RESTful 133

6.2.1.1 Sử dụng các phương thức HTTP rõ ràng 133

6.2.1.2 Phi trạng thái 134

6.2.1.3 Cấu trúc thư mục giống URIs 135

6.2.1.4 Truyền tải XML, JSON 136

6.3 Xây dựng RESTful Web Service 137

Xây dựng RESTful Web Service với ASP.NET Web API 137

6.3.1.1 Giới thiệu về ASP.NET Web API 137

6.3.1.2 Xây dựng Web API 138

6.3.1.3 Triển khai API 141

Xây dựng RESTful Web Service với Java 144

6.3.2.1 Khái niệm Maven 144

6.3.2.2 Cài đặt, cấu hình Maven 145

6.3.2.3 Xây dựng RESTful Web Service với Maven 147

6.3.2.4 Triển khai Web Service 155

6.4 Khai thác RESTful Web Service 155

Tạo ứng dụng khai thác RESTful Web Service bằng ASP.NET 155

Tạo ứng dụng khai thác RESTful Web Service bằng PHP 160

DỊCH VỤ CLOUD COMPUTING 161

7.1 Khái niệm 161

7.2 Đặc điểm của Cloud Computing 162

7.3 Lợi ích của Cloud Computing 162

7.4 Các mô hình dịch vụ Cloud Computing 162

Phần mềm là dịch vụ (Software as a Service – SaaS) 163

Nền tảng là dịch vụ (Platform as a Service – PaaS) 163

Hạ tầng là dịch vụ (Infrastructure as a Service – IaaS) 163

7.5 Các mô hình triển khai Cloud Computing 163

Private Cloud 163

Community Cloud 163

Public Cloud 163

Hybrid Cloud 163

7.6 Các dịch vụ Cloud Computing tiêu biểu 164

Google Cloud Platform 164

Microsoft Azure 165

Amazon Web Services 166

CHÍNH PHỦ ĐIỆN TỬ 169

8.1 Khái niệm chính phủ điện tử (eGovernment) 169

8.2 Mục tiêu của chính phủ điện tử 169

8.3 Lợi ích của chính phủ điện tử 169

8.4 Hình thức hoạt động và dịch vụ trong chính phủ điện tử 170

Hình thức hoạt động 170

8.4.1.1 Thư điện tử 170

8.4.1.2 Mua sắm công trong CPĐT 170

Trang 9

8.4.1.4 Tra cứu, cập nhật thông tin qua mạng 170

Dịch vụ do chính phủ điện tử cung cấp 170

8.4.2.1 Các dịch vụ công trực tuyến của chính phủ 170

8.4.2.2 Hệ thống thông tin địa lý (Geographic Information System – GIS) 170

8.5 Cổng thông tin điện tử (Portal) 171

Khái niệm 171

Mục đích và nhiệm vụ cơ bản của cổng thông tin trong chính phủ điện tử 172 BÀI TẬP CHƯƠNG 8 173

TÀI LIỆU THAM KHẢO 174

Trang 10

TỔNG QUAN VỀ INTERNET VÀ CÔNG NGHỆ WEB 1.1 Internet

Khái niệm

Internet là một liên mạng máy tính toàn cầu được hình thành từ các mạng nhỏ hơn, liên kết hàng triệu máy tính trên thế giới thông qua cơ sở hạ tầng viễn thông Internet là mạng của các mạng máy tính Trong mạng này, các máy tính và thiết bị mạng giao tiếp với nhau bằng một ngôn ngữ thống nhất Đó là bộ giao thức TCP/IP (Transmision Control Protocol – Internet Protocol)

Lịch sử

Internet có khởi thủy là ARPANET, mô ̣t dự án do Bô ̣ Quốc phòng Hoa Kỳ khởi xướng vào năm 1969 Ma ̣ng ARPANET khởi đầu là ma ̣ng kết nối giữa Bô ̣ Quốc phòng Hoa Kỳ với các nhà thầu nghiên cứu khoa ho ̣c và quân sự la ̣i với nhau, trong đó phần lớn là các trường đa ̣i ho ̣c đang tiến hành các nghiên cứu khoa ho ̣c được tài trợ

Thiết kế của ARPANET đô ̣c đáo ở chỗ là ma ̣ng vẫn có thể hoa ̣t đô ̣ng khi mô ̣t phần của nó bi ̣ phá hủy Nếu mô ̣t trong những liên kết ma ̣ng bi ̣ phá hủy do chiến tranh hay thiên

ta ̣i thı̀ lưu thông trên đó có thể được tự đô ̣ng chuyển sang các liên kết khác

Vào đầu năm 1980 giao thức TCP/IP được phát triển và nhanh chóng trở thành giao thức mạng chuẩn được dùng trên mạng ARPANET Hệ điều hành được dùng trên mạng lúc này là BSD UNIX cũng được tích hợp để sử dụng giao thức TCP/IP Hệ điều hành này nhanh chóng trở thành một công cụ hữu hiệu để phát triển mạng máy tính

Với các công nghệ mới này số lượng mạng máy tính đã phát triển nhanh chóng ARPANET thành công vang dô ̣i và mo ̣i trường đa ̣i ho ̣c ta ̣i Hoa Kỳ đều muốn gia nhâ ̣p vào

ma ̣ng này Với viê ̣c mở rô ̣ng đối tượng tham gia vào ma ̣ng, ARPANET bắt đầu trở nên khó quản lý hơn Do đó nó đã được chia làm hai ma ̣ng: MILNET dành cho mu ̣c đı́ch quân sự và ARPANET mới, với quy mô nhỏ hơn, dành cho các mu ̣c đı́ch phi quân sự

ARPANET nhanh chóng trở nên quá tải do sự phát triển của số lượng các máy tı́nh kết nối vào ma ̣ng này cũng như băng thông mà các máy tı́nh này đòi hỏi Quỹ Khoa ho ̣c Quốc gia Hoa Kỳ (National Science Foundation - NSF) đã lâ ̣p nên ma ̣ng NSFNET vào năm 1986, mô ̣t ma ̣ng riêng và nhanh hơn nhiều của mı̀nh NSF đã thiết lâ ̣p mô ̣t chuỗi các

ma ̣ng khu vực nhằm liên kết những người sử du ̣ng trong từng khu vực với nhau, cũng như kết nối các ma ̣ng khu vực này với NSFNET NSFNET đã dần thay thế cho ARPANET và sau này trở thành mạng Internet

Internet đươ ̣c thiết kế dựa trên ý tưởng là có thể có nhiều ma ̣ng hoàn toàn đô ̣c lâ ̣p với nhau kết nối vào nó, các ma ̣ng này có thể truyền thông với nhau thông qua phương thức truyền gói dữ liê ̣u (packet switching) và qua kiến trúc ma ̣ng mở (open-architecture networking) Kiến trúc ma ̣ng mở nghı̃a là các ma ̣ng con có thể có giao diê ̣n, cấu trúc của riêng nó Điều này giải thı́ch ta ̣i sao ngày nay chúng ta có thể kết nối Internet bất kể máy tı́nh của mı̀nh đang sử du ̣ng hê ̣ điều hành gı̀

Về mă ̣t vâ ̣t lý, Internet sử du ̣ng mô ̣t phần của toàn bô ̣ tài nguyên ma ̣ng viễn thông hiê ̣n có Về mă ̣t kỹ thuâ ̣t, Internet sử du ̣ng tâ ̣p giao thức nền tảng go ̣i là TCP/IP (Transmission Control Protocol / Internet Protocol) Với TCP trước đây, khi đi ̣nh nghı̃a về Internet, IP không phải là mô ̣t bô ̣ phâ ̣n trong thiết kế Trong quá trı̀nh phát triển, Danny Cohen ở Đại học Nam California (University of Southern California-USC) cho rằng các chức năng hướng kết nối của TCP là không cần thiết đối với mô ̣t số kiểu truyền dữ liê ̣u và chúng ta ̣o ra phı́ tổn phát sinh Ông đề nghi ̣ tách TCP ra để thỏa mãn yêu cầu "đúng giờ hơn là chı́nh xác" Điều cần thiết là tı̀m cách lấy dữ liê ̣u nhanh chóng để chuyển sang hê ̣ thống khác Như vâ ̣y, TCP trở thành TCP và IP

Ngày nay Internet là mô ̣t ma ̣ng công cô ̣ng kết nối hàng trăm triê ̣u người trên thế giới Internet, cùng với những mă ̣t tốt hoă ̣c xấu của nó mà người ta đang sử du ̣ng hoă ̣c phải đối

mă ̣t, đã trở thành mô ̣t phần quan tro ̣ng của đời sống con người

Trang 11

1.2 Các giai đoạn phát triển của công nghệ web

Công nghệ web thế hệ thứ nhất – Web 1.0

World Wide Web (WWW hay Web) đã được Tim Berners-Lee, một chuyên gia, viện

sĩ Viện Hàn lâm Anh tại CERN, Geneva, Thụy Sĩ phát minh ngày 12 tháng 3 năm 1989 Khởi đầu nó chỉ là một dự án liên lạc nội bộ của CERN, nhưng Berners-Lee nhận ra ý tưởng này có thể thực hiện với quy mô toàn cầu Tim Berners-Lee và Robert Cailliau, đồng nghiệp của ông tại CERN đề xuất vào năm 1990 sử dụng siêu văn bản "để liên kết và truy cập thông tin như một mạng lưới các nút trong đó người dùng có thể duyệt thông tin theo

ý muốn", và Berners-Lee đã hoàn thành trang web đầu tiên vào tháng 12 năm 1990 Tim Berners-Lee công bố chính thức WWW trên alt.hypertext vào ngày 7 tháng 8 năm 1991 Web 1.0 được nhắc đến như là thế hệ đầu tiên của Web, được Tim Berners-Lee mô

tả là Web chỉ đọc (Read Only Web) Web 1.0 chỉ đơn giản là môi trường xuất bản thông tin một chiều nơi mà người sử dụng tìm kiếm thông tin và chỉ đọc chúng Người dùng gần như không thể tương tác hoặc đóng góp thay đổi nội dung của trang web

Hình 1.1 Web 1.0: Read Only Web – Web of Documents

Công nghệ web thế hệ thứ hai – Web 2.0

Khái niệm web 2.0 đầu tiên được Dale Dougherty, phó chủ tịch của O’Reilly Media, đưa ra tại hội thảo Web 2.0 lần thứ nhất do O’Reilly Media và MediaLive International tổ chức vào tháng 10/2004 Dougherty không đưa ra định nghĩa mà chỉ dùng các ví dụ so sánh phân biệt Web 1.0 và Web 2.0

Hình 1.2 Web 2.0: Read and Write Web – Web of Content

Trang 12

 Dữ liệu có vai trò then chốt

 Phần mềm được cung cấp ở dạng dịch vụ web và được cập nhật không ngừng

 Phát triển ứng dụng dễ dàng và nhanh chóng

 Phần mềm có thể chạy trên nhiều thiết bị

 Giao diện ứng dụng phong phú

Ban đầu, Web 2.0 được chú trọng tới yếu tố công nghệ, nhấn mạnh tới vai trò nền tảng ứng dụng Nhưng đến hội thảo Web 2.0 lần 2 tổ chức vào tháng 10/2005, Web 2.0 được nhấn mạnh đến tính chất sâu xa hơn – yếu tố cộng đồng

Về cơ bản, Web 2.0 cho phép người sử dụng tương tác, sáng tạo nội dung trên các trang web Nội dung do người sử dụng tạo ra chính là điểm khác biệt lớn nhất của Web 2.0

so với Web 1.0 – nơi chỉ cho phép người truy cập đọc thông tin một cách thụ động, không tương tác, không phản hồi Với hình thức truyền thông hai chiều, thông tin đi từ nguồn phát tin tới nguồn nhận và đồng thời nguồn nhận tin chủ động phản hồi Khái niệm nguồn phát, nguồn nhận tin trộn lẫn vào nhau Khi con người có vị trí bình đẳng trong quy trình truyền đạt và tiêu thụ thông tin thì ranh giới phân chia giữa nhà quản lý và công chúng bị xoá nhoà

Về mặt công nghệ, Web 2.0 được phát triển dựa trên hàng loạt công nghệ nhằm làm cho ứng dụng trên web mạnh hơn, nhanh hơn và dễ sử dụng hơn Trong đó một trong những công nghệ nền tảng được sử dụng rộng rãi là AJAX (Asynchronous JavaScript and XML) với kỹ thuật ứng dụng mashup

Kiến trúc hướng dịch vụ SOA (Service-Oriented Architecture) là phần cơ bản trong Web 2.0 hiện vẫn đang phát triển nhưng cơ bản bao gồm: cơ chế cung cấp nội dung, các dịch vụ web và phần mềm máy chủ

a) Cung cấp nội dung

Bước phát triển đầu tiên và quan trọng nhất hướng đến Web 2.0 đó là cơ chế cung cấp nội dung, sử dụng các giao thức chuẩn hoá để cho phép người dùng sử dụng thông tin theo cách của mình (nghĩa là có khả năng tùy biến thông tin) Có nhiều tiêu chuẩn được phát triển để cung cấp nội dung như RSS, RDF, tất cả đều dựa trên XML

b) Dịch vụ web

Các giao thức truyền thông 2 chiều là một trong những thành phần then chốt của kiến trúc Web 2.0 Trong đó, với giao thức SOAP (Simple Object Access Protocol) và kiến trúc REST (Representation State Transfer), dịch vụ web đều được gọi qua API

c) Phần mềm máy chủ

Web 2.0 được xây dựng trên kiến trúc web thế hệ trước nhưng chú trọng hơn đến phần mềm làm việc ở hậu trường Cơ chế cung cấp nội dung chỉ khác phương thức cấp phát nội dung động (của Web 1.0) về danh nghĩa, tuy nhiên dịch vụ web yêu cầu tiến trình làm việc và dữ liệu chặt chẽ hơn

Các giải pháp phát triển theo hướng Web 2.0 hiện nay có thể phân làm 2 loại: hoặc xây dựng hầu hết tính năng trên một nền tảng máy chủ duy nhất; hoặc xây dựng ứng dụng

bổ sung cho máy chủ web, có sử dụng giao tiếp API

Trang 13

 Các thách thức về an ninh và bảo mật cũng như các vấn đề về luật pháp về tự do

cá nhân và bản quyền kỹ thuật số do sự phơi bày thông tin cá nhân/tổ chức hoặc dữ liệu trên Web 2.0 Đây là vấn đề mâu thuẫn có tính nguyên tắc giữa tự do trên mạng Internet với pháp luật

 Sự kết nối và chia sẻ thông tin giữa các nền tảng ứng dụng vẫn còn hạn chế do sự mâu thuẫn giữa tự do truy cập và lợi nhuận kinh doanh

 Chu kỳ lặp lại không đổi của việc thay đổi và nângcấp các dịch vụ Điều này có thể dẫn đến xung đột giữa các phiên bản cũ và mới cũng như tạo sự mệt mỏi cho người dùng khi phải liên tục theo dõi cập nhật

1.2.2.3 Các dịch vụ ứng dụng Web 2.0 tiêu biểu

a) Trang web cá nhân (blog)

Blog là loại trang web được thiết kế và duy trì bởi một cá nhân, nơi mà họ có thể chia

sẻ suy nghĩ, hình ảnh, video, kiến thức và kinh nghiệm cá nhân về những vấn đề khác nhau Tất cả các blog đều có tính năng nhận xét giúp người đọc có thể bình luận những nội dung

mà người tạo blog đưa ra

b) Mạng xã hội (Social Network)

Mạng xã hội là một dịch vụ web cho phép các cá nhân hoặc tổ chức xây dựng hồ sơ công khai hoặc bán công khai trong một hệ thống có giới hạn Mạng xã hội kết nối các thành viên cùng sở thích trên Internet lại với nhau với nhiều mục đích khác nhau không phân biệt không gian và thời gian

Trang 14

g) Mashup

Mashup được định nghĩa như một công cụ có khả năng lấy thông tin từ nhiều nguồn

dữ liệu khác nhau nhằm tạo ra một dịch vụ tích hợp đơn nhất và hoàn toàn mới mẻ Mashup thể hiện rõ đặc trưng của Web 2.0 là "cá nhân hóa thông tin" Ví dụ, một nhà lập trình có thể tạo website chia sẻ ảnh và video của riêng mình khi kết hợp hai dịch vụ YouTube và Flickr

1.2.2.4 Sử dụng Web 2.0 trong chính phủ điện tử hiện nay

Mức thu hút chính phủ điện tử với người dân gia tăng từ mức đầu tiên về sử dụng tập trung vào giao tiếp sử dụng đến sử dụng tập trung vào dịch vụ

 Tập trung vào truyền thông: thông tin của chính phủ được truyền bá đến người dân càng xa và rộng thì càng tốt Nhóm người dân thu được tri thức về nội dung, có thể dễ dàng truy cập đến thông tin ở bất cứ đâu và chính phủ có thể khuyến khích chiến dịch quốc

tế với chi phí hiệu quả

Mục đích chính của việc sử dụng là tăng nội dung mà chính phủ đưa vào các công cụ mạng xã hội, như blogs, podcasts và vlogs, RSS, wikis, và các mạng xã hội trong doanh nghiệp Sử dụng tập trung vào truyền thông được xem là cách dễ nhất để thực hiện, đối với những tổ chức bắt đầu kinh nghiệm với những việc thực hiện trước đó với bất kỳ ứng dụng nào khác

Hình 1.3 Web 2.0 trong chính phủ điện tử

Tuy nhiên, truyền đạt đối với sử dụng chất lượng đảm bảo đi kèm với khu vực công

và những gì cần để chính phủ xây dựng mối quan hệ với người dân Chính phủ phải thiết lập một quy tắc rõ ràng cho việc tham gia vào các blog và wikies để không vi phạm luật chứng thực

Web 2.0 cho phép bên thứ ba tải và kiết xuất nội dung từ tài nguyên chính phủ và đưa thông tin đến người dân Điều quan trọng là chính phủ cho phép thông tin được truyền bá

Trang 15

rộng rãi hơn đến người dân qua các phương tiện khác nhau, nhưng họ phải đảm bảo xác thực thông tin chính phủ được cung cấp ở website của bên thứ ba

 Tập trung vào tương tác: tương tác với người dân để có phản hồi của họ về chính trị, các vấn đề, dịch vụ và kế hoạch của chính phủ, để có lợi trong việc tạo nội dung mới

và làm cho người sử dụng phương tiện trung gian để tạo mashups nội dung có lợi cho những người khác Sử dụng tập trung vào tương tác là khó hơn được thực hiện để so sánh với sử dụng tập trung vào giao tiếp, vì khó để xác thực nội dung được tạo bởi người sử dụng trước khi trộn với nội dung mới

 Tập trung vào dịch vụ: sử dụng mạng xã hội quan trọng bao nhiêu, khó thực hiện

để thành công bấy nhiêu Mạng xã hội yêu cầu chính phủ giám sát để cung cấp giá trị đến người sử dụng Phương tiện trung gian có thể tích hợp vào nội dung không của chính phủ với nội dụng của chính phủ và tạo những sản phẩm thông tin mới để gia tăng giá trị thông tin chính phủ Chính phủ phải tin cậy và xác thực các phương tiện trung gian để tạo các dịch

vụ và cung cấp giá trị phù hợp với người dân Trong khi sử dụng các phương tiện trung gian

có thể thay đổi dịch vụ ở chi phí thấp nhất, chính phủ phải đảm bảo tính đồng nhất và công bằng về chất lượng dịch vụ cho tất cả mọi người

Trong trường hợp sử dụng cuối cùng, thách thức của chính phủ là để đảm bảo tính riêng tư, bảo mật, hợp pháp của dữ liệu Thách thức này gợi ý rằng có các vấn đề quan trọng đưa vào xem xét trước khi phổ biến trên mạng xã hội một cách rộng rãi Chính phủ phải đưa vào các vấn đề, ảnh hưởng, và những mối đe dọa

Công nghệ web thế hệ thứ 3 – Web 3.0 (Semantic Web)

Các kĩ thuật tạo lập Web hiện tại phần nào cản trở khả năng phát triển dịch vụ thông tin trên nó Sự đơn giản trong các kĩ thuật xây dựng tạo ra hiện tượng thắt cổ chai, gây khó khăn trong việc tìm kiếm, rút trích, bảo trì và phát sinh thông tin Máy tính chỉ được dùng như những thiết bị gửi và trả thông tin, không thể truy xuất được những nội dung thật sự cần Do đó, chúng chỉ hỗ trợ ở một giới hạn nào đó, việc truy xuất và xử lý thông tin Kết quả tất yếu là người sử dụng phải chịu trách nhiệm không chỉ truy cập và xử lý thông tin

mà còn phải rút trích và diễn giải thông tin

Tuy nhiên, hoạt động thực tế tạo ra một khối lượng khổng lồ các tài nguyên trên Web Điều này làm nảy sinh vấn đề rất quan trọng là làm thế nào để tìm kiếm chính xác tài nguyên mong muốn Dữ liệu trong các file HTML chỉ hữu ích trong một vài ngữ cảnh nhưng có thể không đem lại ngữ nghĩa trong ngữ cảnh khác Thêm vào đó, HTML không thể mô tả về dữ liệu đóng gói trong đó

Ví dụ, giả sử biết mã vùng (PostCode) và muốn tìm địa chỉ tương ứng Do mỗi quốc gia có tên và hệ thống mã vùng khác biệt và Web không biểu diễn được mối liên hệ này, nên ta không thể nhận được kết quả như mong đợi

Nếu như các thành phần chính yếu của dữ liệu trong Web trình bày theo dạng thức thông thường, khó sử dụng dữ liệu này một cách phổ biến Một thiếu sót của Web hiện nay là thiếu cơ cấu hiệu quả để chia sẻ dữ liệu khi ứng dụng được phát triển một cách độc lập Do đó, cần phải mở rộng Web để máy có thể hiểu, tích hợp dữ liệu, cũng như tái sử dụng dữ liệu thông qua các ứng dụng khác nhau Để khắc phục các yếu điểm của Web hiện tại, khái niệm Semantic Web đã ra đời

1.2.3.1 Khái niệm

Semantic Web không là Web riêng biệt mà là một sự mở rộng của Web 2.0, theo cách thông tin được xác định ý nghĩa tốt hơn, nó cho phép máy tính và người cộng tác với nhau tốt hơn Semantic Web, được hình thành từ ý tưởng của Tim Berners-Lee mô tả là một mạng lưới các thông tin được liên kết sao cho chúng có thể được xử lý dễ dàng bởi các máy tính ở phạm vi toàn cầu Nó được xem là cách mô tả thông tin rất hiệu quả trên World

Trang 16

Wide Web, và cũng được xem là một cơ sở dữ liệu có khả năng liên kết toàn cầu Semantic Web là một phương pháp cho phép định nghĩa và liên kết dữ liệu một cách có ngữ nghĩa hơn nhằm phục vụ cho máy tính có thể "hiểu" được Semantic Web còn cung cấp một môi trường chia sẻ và xử lý dữ liệu tự động bằng máy tính "Semantic Web cung cấp một bộ khung chung để giúp dữ liệu có thể được chia sẻ và tái sử dụng xuyên suốt nhiều ứng dụng, doanh nghiệp và các biên giới cộng đồng" – Theo W3C

Các công nghệ Semantic Web giúp con người có thể tạo các kho dữ liệu trên web, xây dựng bộ từ vựng và viết các luật để xử lý dữ liệu

Hình 1.4 Semantic Web – Web of Data

1.2.3.2 Đặc điểm của Semantic Web

a) Máy có thể hiểu được thông tin trên Web

Internet ngày nay dựa hoàn toàn vào nội dung Web hiện hành chỉ cho con người đọc chứ không dành cho máy hiểu Semantic Web sẽ cung cấp ý nghĩa cho máy hiểu, không phải suy luận dựa vào ngữ pháp và các ngôn ngữ đánh dấu (Markup Language) nữa vì cấu trúc ngữ nghĩa của văn bản (text) thực sự đã chứa nó rồi

b) Thông tin được tìm kiếm nhanh chóng và chính xác hơn

Với Semantic Web, việc tìm kiếm sẽ dễ dàng nếu mọi thứ được đặt trong ngữ cảnh Ý tưởng chính yếu là toàn bộ ngữ cảnh mà người sử dụng được biết đến Mục tiêu của Semantic Web là phát triển các tiêu chuẩn và kĩ thuật để giúp máy hiểu nhiều thông tin trên Web, để máy tìm ra các thông tin dồi dào hơn, tích hợp, duyệt dữ liệu, và tự động hóa các thao tác Với Semantic Web, chúng ta không những nhận được những thông tin chính xác hơn khi tìm kiếm thông tin từ máy tính, mà máy tính còn có thể tích hợp thông tin từ nhiều nguồn khác nhau, biết so sánh các thông tin với nhau

c) Dữ liệu liên kết động

Với Semantic Web, chúng ta có thể kết hợp các thông tin đã được mô tả và giàu ngữ nghĩa với bất kì nguồn dữ liệu nào bằng cách thêm các metadata (siêu dữ liệu) cho các tài liệu khi tạo ra nó

Với Semantic Web, chúng ta không chỉ cung cấp các URI cho tài liệu như đã làm trong quá khứ mà còn cho con người, các khái niệm, các mối liên hệ

Trang 17

d) Hỗ trợ công cụ tự động hóa

Semantic Web cung cấp các loại dịch vụ tự động từ nhiều vùng khác nhau: từ gia đình và các thư viện kĩ thuật số cho đến các dịch vụ kinh doanh điện tử và dịch vụ sức khỏe Semantic Web cung cấp phương tiện để thêm các thông tin chi tiết lên Web nhằm

hỗ trợ sự tự động hóa cho các dịch vụ

1.2.3.3 Thách thức của Web 3.0

 Khối lượng dữ liệu khổng lồ: World Wide Web hiện có cả tỉ trang web, mỗi trang web lại tạo ra một lượng dữ liệu khác nhau Chính vì thế, nếu các nhà thiết kế, nhà phát triển web không kịp thay đổi công nghệ thì sẽ không thể xử lý được hết những dữ liệu này, và không mang lại hiệu quả tối đa cho người dùng Những hệ thống tự động hóa cũng phải được thiết kế lại để xử lý lượng dữ liệu đầu vào rất lớn Ngoài ra, dữ liệu trùng lặp cũng là một vấn đề khi các hệ thống xử lý hiện nay chưa đủ năng lực để phân biệt và loại trừ hết

 Dữ liệu không rõ ràng: phát sinh từ sự không rõ ràng của các truy vấn của người dùng, về các khái niệm được diễn tả bởi các nhà cung cấp nội dung, sự kết hợp các thuật ngữ truy vấn với thuật ngữ của nhà cung cấp, và sự cố gắng kết hợp các cơ sở kiến thức khác nhau với các khái niệm chồng chéo nhau

Ví dụ: những từ như "trẻ", "cao" hoặc "lớn" có thể được xem là dữ liệu không rõ ràng, hay nói cách khác là quá chung chung Như thế nào là trẻ? Như thế nào là cao, cao bao nhiêu? Lớn là gì, lớn ra sao, so với cái gì? Kết quả là những truy vấn tìm kiếm của người dùng cũng sẽ chung chung như thế, ngoài ra còn có sự chung chung trong dữ liệu được cung cấp bởi các công ty/tổ chức, hoặc sự chung chung trong các cơ sở dữ liệu kiến thức

sẽ khiến việc xử lý, trao đổi dữ liệu trở nên khó khăn

 Sự không thống nhất: mặc dù đã có các chuẩn chung nhưng chắc chắn sẽ luôn có

sự khác biệt xuất hiện Có thể là vì giải pháp 1 tốt hơn giải pháp 2 nhưng giải pháp 2 lại dễ dùng hơn nên cả hai tồn tại song song Điều đó tạo ra sự thiếu nhất quán trong thế giới Word Wide Web, ví dụ như Flash và Silverlight, JSON và XML,

 An toàn và bảo mật: khi dữ liệu được chia sẻ dễ dàng thì cũng mang theo nguy

cơ cao về an toàn thông tin Ví dụ, thông tin đó có thể bị giả mạo, có thể bị thay thế giữa lúc đang truyền đi, thông tin mang theo mã độc, thông tin không được mã hóa Ngoài ra, trong một số trường hợp nhà sản xuất thông tin cố ý gây nhầm lẫn cho người tiêu dùng để đạt mục đích cụ thể nào đó

Trang 18

CÔNG NGHỆ VÀ NGÔN NGỮ LẬP TRÌNH PHÍA CLIENT 2.1 HyperText Markup Language (HTML)

Giới thiệu HTML

Năm 1989, Tim Berners-Lee, một nhà khoa học ở viện thí nghiệm CERN (Conseil Européen pour la Recherche Nucléaire) - Thụy Sỹ có ý tưởng là cho phép các nhà nghiên cứu có thể trao đổi tài liệu bằng mạng điện tử Từ đó World Wide Web (Web) được hình thành

Tim Berners-Lee muốn tài liệu trên Web phải được tổ chức lại sao cho người dùng

có thể tham chiếu các tài liệu khác nhau trên mạng thông qua các liên kết ngay trong tài liệu đang được sử dụng Ông dựa vào ngôn ngữ Standard Generalized Markup Language (SGML), để phát triển nên HTML, ngôn ngữ trình bày nội dung tài liệu và các liên kết thông qua hệ thống các thẻ đánh dấu

HTML đã trải qua các phiên bản gồm HTML phiên bản đầu tiên (1992), HTML 2 (1994), HTML 3 (1995), HTML 4 (1997) Qua các phiên bản phát triển, HTML ngày càng

có nhiều thẻ mới, tính năng mới cũng như là tính đơn giản hóa ngày càng cao

HTML 4 đươc phát triển vào năm 1997, nâng cấp 4.01 năm 1999, là phiên bản thành công nhất được sử dụng phổ biến cho đến hiện nay HTML 4.x hỗ trợ hiển thị hầu hết ngôn ngữ trên thế giới dựa trên chuẩn Universal Character Set, thay vì các phiên bản trước chỉ hiển thị theo chuẩn ISO-8859-1 HTML 4.x còn có thêm một số tính năng quan trọng sau:

 Hỗ trợ ngôn ngữ lập trình của client-script và có thể nhúng thêm các tập tin script bên ngoài vào Hỗ trợ các sự kiện client-script như onclick, onchange… cho các thẻ

 Hỗ trợ CSS với các thuộc tính mới ID, Class và Style Ba thuộc tính này giúp các thẻ liên kết với các style được khai báo trong CSS

Cùng với sự phát triển của công nghệ web thì HTML dần bộc lộ một số nhược điểm (mặc dù không phải là nghiêm trọng) do cấu trúc không chặt chẽ, việc hiển thị trên các trình duyệt cũng như trên các thiết bị di động không thống nhất Để có thể khắc phục những hạn chế của HTML, tháng 2/2000, W3C giới thiệu ngôn ngữ XHTML (Extensible HyperText Markup Language) XHTML cũng là một ngôn ngữ đánh dấu có cùng các khả năng như HTML, nhưng có cú pháp chặt chẽ hơn

Đặc điểm của HTML

 HTML (XHTML) sử dụng tập những mã đánh dấu – phần tử (element) – để mô

tả các thành phần của văn bản Trong các phần tử HTML, cách thức dữ liệu hiển thị trên trình duyệt được mô tả thông qua một ký hiệu đánh dấu gọi là tag, hoặc thẻ HTML Khi một trang web được tải về trình duyệt, trình duyệt sẽ căn cứ trên các tag HTML để hiển thị nội dung

 HTML (XHTML) không được coi là ngôn ngữ lập trình

 Văn bản HTML (XHTML) không có khái niệm trang, Văn bản được trı̀nh bày tùy theo kı́ch thước của cửa sổ hiển thi ̣: cửa sổ rô ̣ng bề ngang thı̀ sẽ thu ngắn hơn, cửa sổ he ̣p bề ngang thı̀ sẽ được kéo dài ra để hiển thi ̣ cho hết nô ̣i dung Đô ̣ dài của văn bản HTML thực sự không bi ̣ ha ̣n chế

 Văn bản HTML (XHTML) là các tâ ̣p tin có phần mở rô ̣ng html hay htm Ta có thể ta ̣o các file HTML bằng bất kỳ bô ̣ xử lý văn bản nào

Cấu trúc của văn bản HTML

2.1.3.1 Cấu trúc của HTML element

Một element cơ bản bao gồm tag (thẻ) mở, nội dung của element, tag đóng Ngoài ra element còn có thể có các thuộc tính cung cấp thêm thông tin element

Trang 19

2.1.3.2 Cấu trúc của văn bản HTML

Một văn bản HTML thường có cấu trúc cơ bản sau

Được bắt đầu bởi tag <HTML> và kết thúc bởi </HTML>

Cặp tag này định nghĩa phạm vi của văn bản HTML

b) Header section

Được bắt đầu bởi tag <HEAD> và kết thúc bởi </HEAD>

Phần này chứa thông tin mô tả trang web, chẳng hạn như tiêu đề trang web, các từ khóa dùng để tìm kiếm và nhận diện trang web, các khai báo định dạng (CSS), các mã điều khiển (script)… Những thông tin này không được hiển thị trên trang web

Thẻ head có thể bị lược bỏ nếu ta không cần mô tả về trang hiện tại

c) Body section

Được bắt đầu bởi tag <BODY> và kết thúc bởi </BODY>

Phần này chứa nội dung của trang web xuất hiện trên trình duyệt được thể hiện bởi các phần tử HTML

Đoạn chú thích có thể được đặt bất cứ vị trí nào trong văn bản HTML

[Tag đóng]

Trang 20

Khai báo chuẩn HTML

2.1.4.1 Khái niệm

Mỗi tiêu chuẩn HTML và XHTML đều có một DOCTYPE (Document Type Declaration) để khai báo khi được kiểm tra rằng phiên bản HTML hoặc XHTML đang được sử dụng DOCTYPE, thường được đặt ở đầu mỗi Web Document, là thành phần chính của các Web Document chuẩn mực Thiếu DOCTYPE, các thành phần đánh dấu và định dạng sẽ không được kiểm duyệt

Một DOCTYPE thường gồm một đường dẫn cụ thể để khai báo với trình duyệt các quy chuẩn mà trình duyệt sẽ dựa vào đó để dịch và hiển thị các mã HTML hoặc XHTML, CSS một cách đúng đắn và thống nhất

Không chọn hoặc chọn nhầm DOCTYPE sẽ khiến các trình duyệt xem như là các web documents được viết theo kiểu tự do, gọi chung là "Quirks" mode Theo đó, các trình duyệt sẽ xử lý trang web làm sao đó để nó tương thích ngược với các phiên bản của mỗi trình duyệt, và làm theo cách riêng của chúng Vì thế, web documents sẽ được hiển thị khác nhau trên các trình duyệt khác nhau, đôi lúc có thể làm hỏng bố cục các web documents

2.1.4.2 Khai báo

Các DOCTYPE được xây dựng bởi W3C, do đó các DOCTYPE được cung cấp trên website của W3C Tuy nhiên mã DOCTYPE thường khó nhớ và dài dòng (trừ HTML5), thông thường trong các IDE hỗ trợ soạn thảo code HTML như Adobe Dreamweaver hay Komodo Edit đều có tạo sẵn DOCTYPE

DOCTYPE thường được khai báo dưới dạng <!DOCTYPE …>, tuy nhiên nó không phải là một thẻ HTML

DOCTYPE luôn được khai báo ở ngay đầu trang soạn thảo trang web, trước cả thẻ <html> a) HTML 4.01

Có 3 phiên bản DOCTYPE của HTML 4.01

Trang 21

Một số lý do để sử dụng XHTML

 Quy tắc ngữ pháp trong XHTML ít tùy ý hơn so với HTML Do đó, trang web sẽ

ít lỗi hơn và ít tốn thời gian hơn để sữa chữa

 XHTML rất thích hợp với nhiều yêu cầu do được tổ chức như một ứng dụng của XML, vì thế nó trở thành một lựa chọn tuyệt với cho những nhà thiết kế và phát triển Web

 Học tập và giảng dạy XHTML dễ dàng hơn do nó có các quy tắc chặt chẽ hơn

 Đặc điểm mở rộng sẽ cung cấp cho nhu cầu về tính linh động lâu dài

 Một điểm đáng chú ý nữa là XHTML có thể hiển thị chính xác trên mọi trình duyệt trên máy tính và kể cả trên các thiết bị di động XHTML cần ít thời gian tải hơn so với HTML, qua đó cải thiện được vị trí trang web trên các trang web xếp hạng cũng như các

hệ thống Search engine

2.1.5.2 Các thay đổi về cú pháp trong XHTML so với HTML

Trang web được viết bằng XHTML phải có đặc tả dạng chuẩn (well-form) theo W3C a) Phải có khai báo DOCTYPE

c) Phải có các thẻ cơ bản <html>, <head>, <title>, <body>

d) Phải có khai báo namespace cho thẻ <html>

e) Tên thẻ và thuộc tính phải được viết thường

Ví dụ:

Trong HTML có thể viết

Nhưng với XHTML phải viết

f) Các thẻ phải đi theo cặp (mở-đóng) và lồng nhau đúng cách (như của XML)

Trang 22

<input type="text" />  Thẻ rỗng cũng phải được đóng h) Giá trị của thuộc tính phải được đặt trong cặp dấu " "

Ví dụ:

Trong HTML có thể viết

i) Không ghi tối giản thuộc tính

Về cơ bản, cách khai báo, cấu trúc và cú pháp HTML5 được phát triển dựa trên HTML 4.01 (là loại đang được dùng phổ biến hiện nay) HTML5 làm việc tốt với tất cả các phiên bản CSS Tuy nhiên, với HTML5, quá trình mã hóa trở nên dễ dàng và hợp lý hơn Các tính năng độc đáo và ấn tượng của HTML5 không những có trong tiến trình sử

lý đa phương tiện như <video>, <audio>, <canvas> mà còn tích hợp các nội dung đồ họa vector (trước đây chính là thẻ <object>) Điều này có nghĩa rằng media và vector trên website được xử lý và thực hiện dễ dàng hơn, nhanh hơn mà ko cần phải bổ sung bất kì phần mềm liên quan hoặc thư viện API nào khác Điều này giúp HTML5 tương thích với tất cả các thiết bị độc lập đặc biệt ở mảng di động

HTML5 kết hợp với CSS3 cũng làm cho các ứng dụng Web và các trang web hấp dẫn hơn HTML5 có các tính năng mới được thêm vào giúp cho việc xây dựng ứng dụng web dễ dàng hơn rất nhiều Ví dụ như nhiều màu sắc hơn và hỗ trợ đường cong, việc làm

mờ, góc tròn (thay vì ép buộc các nhà thiết kế web sử dụng các hình ảnh để tạo ra các góc tròn), và dĩ nhiên là cả việc lưu trữ offline Tất cả những điều này là một trang web trở nên

dễ nhìn hơn, bắt mắt hơn và làm cho mọi thứ trở nên sát với những gì mà nhà thiết kế tưởng tượng trong đầu hơn

Tuy nhiên, do vẫn ở trong giai đoạn thử nghiệm và liên tục phát triển nên HTML5 cùng với CSS3 vẫn chưa được W3C công nhận là một chuẩn chính thức, ngoài ra các trình duyệt hiện tại cũng hỗ trợ HTML5 ở những mức độ khác nhau

Do HTML5 không dựa trên ngôn ngữ SGML nên không có tham chiếu DOCTYPE,

do đó đối với HTML5, W3C đề nghị tạm thời khai báo như sau

<!DOCTYPE html>

Một số thẻ quan trọng mới được phát triển trong HTML5

 <article> - thẻ này định nghĩa một bài viết hoặc bình luận của người dùng Nó độc lập với content của website

 <aside> - thẻ này đánh dấu nội dung bên cạnh của trang hiện tại Ví dụ như một slidebar

Trang 23

 <header> và <footer> - hai thẻ này giúp không cần định nghĩa id cho tiêu đề và cuối trang

 <nav> - thẻ này định nghĩa phần menu điều hướng cho website

 <section> - đây là một thẻ quan trọng, nó giúp xác định các thành phần khác nhau trong website

 <audio>, <video> - hai thẻ này giúp hiển thị một đoạn phim hoặc một bài hát trên website đơn giản hơn rất nhiều

 <embed> - thẻ này xác định một container các plugin tương tác với ứng dụng bên ngoài

 <canvas> - thẻ này cho phép vẽ đồ họa mà không cần phải qua bất kì đoạn mã hỗ trợ nào (chủ yếu là javascript)

2.2 Cascading Style Sheets (CSS)

Năm 1998, CSS2 ra đời và đã thêm vào rất nhiều tính năng mới CSS2 cho phép canh chỉnh vị trí cho các thẻ của HTML, cho phép thay đổi font chữ cho trang web và cho phép định dạng kiểu in Hầu hết các trình duyệt hiện nay đều hỗ trợ đầy đủ CSS2

Năm 2009, CSS 3 được phát triển song song với HTML5 với nhiều tính năng định dạng đặc biệt CSS3 được chia thành module, các thành phần cũ được chia nhỏ và có một

số thành phần mới được thêm vào Tuy nhiên CSS3 vẫn chỉ dừng lại ở mức độ chuẩn đề nghị và sự hỗ trợ của các trình duyệt dành cho CSS3 là khác nhau

 Các mã CSS có thể chia sẻ cho nhiều nhà thiết kế khác nhau Các nhà thiết kế có thể xây dựng giao diện từ những mã CSS có sẵn mà không cần phải viết từ đầu

 Có thể đồng bộ giao diện của nhiều trang web từ một mã CSS duy nhất

 CSS còn cho phép áp đặt những kiểu trình bày thích hợp hơn cho các phương tiện khác nhau như màn hình máy tính, máy in, điện thoại,…

Cú pháp CSS

Cú pháp CSS cơ bản

selector { property : value; }

Trang 24

2.2.3.1 Selector

Các đối tượng được áp dụng các thuộc tính trình bày Đó có thể là các tag HTML, class hay id

Ví dụ: body, h2, p, img, #title, #content, username,…

Nếu có nhiều selector có chung định dạng (style) thì ta có thể nhóm các selector đó lại với nhau và chỉ phải khai báo css 1 lần duy nhất cho tất cả các thành phần này Khi nhóm lại thì mỗi selector được phân cách bởi dấu ","

Là các thuộc tính quy định cách trình bày

Ví dụ: background-color, font-family, color, margin,…

Mỗi thuộc tính CSS phải được gán một giá trị Nếu có nhiều hơn một thuộc tính cho một selector thì phân cách các thuộc tính bằng dấu ";" Tất cả các thuộc tính trong một selector sẽ được đặt trong cặp { } sau selector

Ví dụ:

body { background:#FFF; color:#FF0000; font-size:14pt }

có thể viết các thuộc tính và giá trị thành các hàng riêng biệt

body {

background : #FFF;

color : #FF0000;

font-size : 14pt }

Trang 25

Đối với một giá trị có chứa khoảng trắng thì giá trị đó phải được đặt trong dấu nháy kép

" " hoặc nháy đơn ' '

Ví dụ:

font-family:"Times New Roman", Arial;

Đối với các giá trị là đơn vị đo, không đặt một khoảng cách giữa số đo với đơn vị của

nó, nếu không thì định dạng đó sẽ bị vô hiệu hóa trên một số trình duyệt như FireFox

1ex bằng chiều cao của chữ x in thường của font hiện hành Do

đó, đơn vị này không những phụ thuộc trên kích cỡ font chữ mà còn phụ thuộc loại font chữ vì cùng 1 cỡ 14px nhưng chiều cao chữ x của font Times New Roman và font Tahoma là khác nhau 2.2.4.2 Đơn vị màu sắc

Trang 26

Nhúng mã CSS vào file HTML

Có ba cách khác nhau để nhúng CSS vào trong một tài liệu HTML

2.2.5.1 Kiểu thuộc tính (Inline Style)

Đây là một phương pháp nguyên thủy nhất để nhúng CSS vào một tài liệu HTML bằng cách nhúng vào từng thẻ HTML muốn áp dụng Trong trường hợp này, selector sẽ bị giản lược

Với kiểu thuộc tính, các định dạng CSS sẽ được định nghĩa bởi thuộc tính style của từng thẻ

2.2.5.2 Kiểu tập hợp nhúng bên trong tài liệu HTML (Internal Style Sheet)

Với cách này, tất cả các khai báo CSS được tập hợp vào trong thẻ <style> của tài liệu HTML

Cú pháp:

selector_1 { property_1 : value_1;

property_2 : value_2;

… property_n : value_n;

} selector_2 {

… }

…

<style>

2.2.5.3 Liên kết ngoài (External Style Sheet)

Với cách này, các mã CSS sẽ được đưa vào trong một file (có phần mở rộng css) và liên kết vào trang web Đây là cách làm đặc biệt hữu ích cho việc đồng bộ hay bảo trì một website lớn sử dụng cùng một kiểu mẫu

Hình 2.1 External CSS

Trang 27

Có 2 cách tạo liên kết đến file CSS

Trang 28

 Chú ý:

 Nếu sử dụng thẻ <link> để khai báo CSS liên kết ngoài thì chỉ có 1 file CSS được

sử dụng Nếu phải sử dụng nhiều file CSS ngoài thì có thể khai báo như sau

@import url("style.css") print;

Một số giá trị media thông dụng

o all : giá trị mặc định, áp dụng khi muốn hiển thị định dạng trên tất cả các

thiết bị

o screen : định dạng sử dụng màu mà màn hình máy tính có thể hiển thị được

Trang 29

o print : định dạng theo chế độ in ấn (print preview), có thể chuyển các màu

thành trắng đen nếu máy in đơn sắc, một số thuộc tính có thể bị vô hiệu hóa

 Chú thích trong CSS: ta đặt đoạn cần chú thích trong cặp ký tự /* và */

2.2.5.4 Mức độ ưu tiên giữa các cách nhúng CSS vào tài liệu HTML

Thứ tự ưu tiên áp dụng định dạng khi sử dụng các loại CSS được sắp xếp theo thứ tự giảm dần như sau

1 Inline Style

2 Internal Style Sheet

3 External Style Sheet

4 Browser Default Style

Nếu muốn thay đổi thứ tự ưu tiên thì sử dụng từ khóa !important ngay phía sau định dạng cần ưu tiên

 Tạo các hiệu ứng (animation) mà không sử dụng flash

 Tùy chỉnh layout và thiết kế trang web sao cho phù hợp với thiết bị của người dùng (mobile, iPad hoặc Desktop) mà không sử dụng Javascript

CSS3 được chia thành các module, các thành phần cũ (thuộc CSS1, CSS2) được chia nhỏ và bổ sung các thành phần mới

Một số module chủ yếu trong CSS3

o Selectors

o Box Model

o Backgrounds and Borders

o Image Values and Replaced Content

o Text Effects

o 2D/3D Transformations

Trang 30

2.3 Javascript

Giới thiệu JavaScript

Với HTML và CSS chúng ta đã biết cách tạo ra trang Web – tuy nhiên chỉ mới ở mức biểu diễn thông tin chứ chưa phải là các trang web động có khả năng đáp ứng các sự kiện từ phía người dùng Để giải quyết vấn đề tương tác với người dùng trên trình duyệt, hãng Netscape Communications Corporation đã phát triển ngôn ngữ kịch bản có tên là LiveScript (tên mã là Mocha) xuất hiện lần đầu trong trình duyệt Netscape Navigator 2.0, năm 1995 Hai tháng sau nó được đổi tên thành JavaScript trong một thông báo chung với Sun Microsystems Tên gọi JavaScript có thể gây nhầm lẫn với Java (là một ngôn ngữ của Sun), xuất hiện cùng lúc với việc Netscape hỗ trợ công nghệ Java trong trình duyệt của họ Tuy nhiên giữa Java và Javascript có rất ít các điểm chung dù rằng cú pháp của chúng có thể có những điểm giống nhau

JavaScript nhanh chóng trở nên phổ biến như là một ngôn ngữ kịch bản phía client, hoạt động trong trình duyệt Năm 1996, Netscape gửi JavaScript lên tổ chức ECMA International (European Computer Manufactures Association) để xem xét như một chuẩn công nghệp, ECMA tập trung chủ yếu vào việc chuẩn hoá phần lõi của ngôn ngữ và để lại những phần khác, chẳng hạn như DOM – JavaScript Document Object Model, cho các nhà phát triển trình duyệt Kết quả là là một phiên bản chuẩn hóa mang tên ECMAScript ra đời

hỗ trợ tương thích giữa các trình duyệt khác nhau Phiên bản hiện tại là ECMAScript 5.1 (Tháng 06/2011)

Ngày nay, với sự bùng nổ của thế giới web và sự hỗ trợ tích cực từ các trình duyệt, JavaScript trở thành ngôn ngữ rất phổ biến trong phát triển ứng dụng web JavaScript (ECMAScript) không chỉ xuất hiện trên các trang web, nó còn dùng trong lập trình Flash (Action Script), web server (Node.js) hay lập trình ứng dụng HTML5 Nền tảng lập trình PhoneGap còn cho phép sử dụng JavaScript lập trình ứng dụng trên các hệ điều hành điện thoại phổ biến, với đầy đủ tính năng như một ứng dụng thông thường

Đặc điểm của JavaScript

 JavaScript không liên quan đến Java, đây là hai ngôn ngữ lập trình khác nhau

 Là một ngôn ngữ kịch bản (script) cung cấp một số chức năng điều khiển trang web

 Là một trình thông dịch nên mã nguồn có thể chỉnh sửa dễ dàng (chỉ là file văn bản), chương trình có thể phát nhanh chóng và mềm dẻo

Trang 31

 Các lệnh trong chương trình JavaScript sẽ được thực thi từng dòng một Nếu gặp lỗi thì chương trình sẽ kết thúc, các dòng lệnh còn lại không được thực thi

 Là ngôn ngữ có thể được viết theo hướng thủ tục (procedural language) hoặc hướng đối tượng (object-based language)

 Chương trình được viết bởi JavaScript không thể thực thi độc lập mà phải được chạy trên trình duyệt hoặc ứng dụng web có hỗ trợ JavaScript

 Các câu lệnh, biến, hàm,… trong JavaScript có sự phân biệt chữ hoa và chữ thường

 Chương trình JavaScript chỉ có thể đọc hoặc ghi thông tin vào file gọi là "cookie"

do trình duyệt tạo ra, không thể đọc hoặc ghi vào file do người dùng tự định nghĩa

 Kiểm tra dữ liệu mà người dùng nhập vào trước khi gửi yêu cầu tới server

 Điều khiển tính năng, hoạt động của trình duyệt như hiện thông báo, mở cửa sổ mới, xác định người dùng truy cập trang web…

 Thay đổi nội dung và hình thức thể hiện của trang web

 Lưu trữ và sử dụng dữ liệu người dùng cho mục đích xác định của ứng dụng thông qua cookie

 Nhận và xử lý thông tin từ server (ví dụ: xử lý thông tin sử dụng công nghệ AJAX) Nhúng mã JavaScript vào file HTML

Các lệnh JavaScritp vào trong một tài liệu HTML theo những cách sau đây:

 Nhúng các câu lệnh trực tiếp vào trong tài liệu bằng cách sử dụng thẻ <script>

 Liên kết file nguồn JavaScript với tài liệu HTML

 Đặt các biểu thức JavaScript làm giá trị cho thuộc tính xử lý sự kiện của thẻ HTML 2.3.4.1 Sử dụng thẻ <script>

Mã JavaScript được nhúng vào trong tài liệu HTML bằng thẻ <script>, có thể nhúng nhiều script vào trong cùng một tài liệu Khi trình duyệt gặp phải một thẻ <script> nào đó,

nó sẽ đọc và thực thi từng dòng lệnh một cho đến khi gặp thẻ đóng </script> Nếu gặp phải lỗi, trình duyệt sẽ chấm dứt hoạt động đọc và thực thi lệnh JavaScript

 Mỗi một lệnh trong JavaScript được kết thúc bằng dấu ;

 Có thể viết nhiều lệnh trên cùng 1 hàng

 Trong JavaScript, có thể dùng chú thích bằng 1 trong 2 cách sau

o Chú thích 1 dòng: sử dụng ký hiệu // đầu dòng chú thích

o Chú thích nhiều dòng (khối lệnh): đặt ký hiệu /* ở đầu khối và ký hiệu */

ở cuối khối

Trang 32

Ví dụ:

Có thể thêm thuộc tính language trong thẻ script chỉ ra phiên bản của JavaScript hoặc ngôn ngữ phía client khác (ví dụ VBScript) mà trình duyệt sẽ dùng tác động lên trang web

hoặc dùng thuộc tính type

Các thẻ <script> có thể đặt ở trong thẻ <head> hoặc bất cứ đâu trong thẻ <body> tùy theo mục đích của người lập trình

2.3.4.2 Dùng file chứa mã JavaScript

Các câu lệnh JavaScript có thể được viết trong một file riêng Để có thể thực thi các công việc được mô tả trong file chứa mã JavaScript tác động đến trang web thì file được khai báo thông qua thuộc tính src (source) của thẻ <script>

Cú pháp:

Ví dụ: Viết lại ví dụ ở phần 4.1, nếu đưa mã JavaScript vào file thì thực hiện như sau Tạo một file có phần mở rộng là js trong cùng thư mục với tài liệu HTML Trong trường hợp này là vidu.js chứa mã JavaScript sau

Trang 33

Tương tự như External Style, khi các mã JavaScript được đưa vào file riêng sẽ được dùng chung cho các trang web nếu các trang đó có khai báo sử dụng Điều này sẽ làm giảm dung lượng trang web, quản lý hoạt động của các trang web tốt hơn

2.3.4.3 Dùng biểu thức JavaScript làm giá trị thuộc tính xử lý sự kiện

Một thẻ HTML có thể chịu sự tác động của một sự kiện nào đó xảy ra khi một thời điểm được xác định hoặc khi người dùng tương tác với trang web Một trình xử lý sự kiện

là đoạn mã sẽ được thực thi nhằm đáp trả một sự kiện

Cú pháp:

với tag là tên thẻ HTML, event là tên sự kiện

Ví dụ: Khi người dùng thực hiện sự kiện click vào button trên trang web thì một thông báo xuất hiện

sẽ được thực hiện và nội dung trong thẻ <noscript> bị bỏ qua

Ví dụ:

Trang 34

Document Object Model (DOM)

Các đối tượng trình duyệt đại diện cho các thành phần trên trang web Tất cả các đối tượng trình duyệt được tổ chức phân cấp dạng hình cây gọi là mô hình DOM, Ở mức trên cùng là đối tượng window biểu thị cho khung hay cửa sổ của trình duyệt, các phần tử còn lại là đối tượng con của window

Hình 2.2 Document Object Model

2.3.5.1 window

Là đối tượng cao nhất trong mô hình DOM, là nơi chứa tất cả các thành phần của trang web

a) Thuộc tính

defaultStatus Thiết lập chuỗi thông báo trên thanh trạng thái Text

status Thiết lập thông báo trên thanh trạng thái tại thời điểm hiện hành Text

location Xác định vị trí trang hiện tại trong cửa sổ Text URL

alwaysLowered Hiển thị cửa sổ bên dưới các của sổ khác true/false

alwaysRaised Hiển thị cửa sổ trên tất cả các cửa sổ khác true/false

fullscreen Hiển thị chế độ đầy màn hình true/false

height Thiết lập chiều cao của cửa sổ Số nguyên

width Thiết lập chiều rộng của cửa sổ Số nguyên

left Thiết lập khoảng cách từ text đến cạnh cửa sổ Số nguyên

text fileupload password hidden submit reset radio checkbox button select

Plugin Mime Type frame

document

location

history

layer link image area anchor applet plugin form

navigator

option

Trang 35

titlebar Hiển thị thanh tiêu đề true/false

resizable Cho phép thay đổi kích thước cửa sổ true/false

scrolbars Cho phép xuất hiện thanh cuộn true/false

closed Trả về giá trị true, false True khi cửa sổ đóng true/false

b) Phương thức

close() Đóng cửa sổ hiện hành

focus() Đặt focus cho cửa sổ hiện hành

blur() Bỏ focus cho cửa sổ hiện hành

open(URL,name

,specs,replace)

Mở một cửa sổ (tab) mới

 URL : URL được nạp vào cửa sổ

 name: tên cửa sổ

 specs : danh sách các thuộc tính của cửa sổ: toolbars, menu, status ….(các thuộc tính phân cách bởi dấu ,

 replace: đưa cửa sổ được mở vào history (false) hoặc thay thế history của cửa sổ hiện hành (true)

moveBy(dx,dy) Di chuyển cửa sổ 1 đoạn vị trí (dx,dy) so với cửa sổ hiện hành moveTo(x,y) Di chuyển cửa sổ đến vị trí (x,y) so với màn hình

resizeBy(dx,dy) Thay đổi kích thước cửa sổ (dx,dy) so với cửa sổ hiện hành resizeTo(x,y) Thay đổi kích thước cửa sổ

scrollBy(dx,dy) Cuộn nội dung sang phải dx, xuống dưới dy pixel

scrollTo(x,y) Cuộn nội dung trên trang đếnvị trí (x,y)

2.3.5.2 location

Đối tượng này lưu thông tin về URL hiện tại Nó cung cấp phương thức cho phép URL hiện tại có thể được tải lại

a) Thuộc tính

 hostname: trả về hostname của URL hiện tại

 href: trả về đường dẫn đầy đủ đến vị trí của tài liệu hiện tại

 pathname: trả về đường dẫn tương đối đến URL hiện tại

 port: trả về cổng nhận thông tin của URL hiện tại, mặc định là cổng 80

Ví dụ: Thay thế trang hiện tại bằng một trang khác

location.href = "www.newpage.com";

Trang 36

b) Phương thức

 assign(URL): mở trang mới URL

 reload(): mở lại trang hiện tại

 replace(URL): thay thế trang hiện tại bằng trang mới URL

2.3.5.3 history

Đối tượng này cung cấp các phương thức truy cập đến danh sách các URL được duyệt trước đó

 back(): quay trở lại trang vừa mới được ghé thăm ngay trước khi mở trang hiện tại

 forward(): quay lại trang được mở ngay sau trang hiện tại

 go(number): điều khiển trình duyệt mở trang thứ number ngay trước trang hiện tại

và nó vẫn tồn tại nếu trang được nạp Các thuộc tính của document phản ánh thuộc tính của tag body

Trong body có 2 sự kiện onload và unload

a) Thuộc tính

 cookie : chứa tên và giá trị các cookies dành cho tài liệu hiện hành

 domain : trả về giá trị tên miền máy chủ chứa document

 forms : trả về tập hợp các form trong tài liệu hiện hành

 documentURI : thiết lập hoặc trả về địa chỉ của tài liệu

 URL : trả về địa chỉ của tài liệu

 lastModified : trả về ngày giờ tài liệu được cập nhật gần nhất

 inputEncoding : trả về bảng mã ký tự được dùng trong tài liệu

 title : thiết lập hoặc trả về tiêu đề của tài liệu (trang web)

Trang 37

 getElementsByTagName(tagName) : lấy danh sách các element (mảng các element) với thẻ có tên là tagName

 createElement(elementName): tạo element

 createAttribute(attName): tạo thuộc tính cho element

 createTextNode(textValue): tạo nội dung cho element

Ví dụ:

var newElement = document.createElement("h1");

var eValue = document.createTextNode("Hello World"); newElement.appendChild(eValue); //đưa nội dung vào element var newAtt = document.createAttribute("class");

newAtt.value = "myClass";

newElement.setAttributeNode(newAtt); // đặt thuộc tính

cho element c) Thay đổi nội dung của Element

JavaScript cung cấp một số thuộc tính cho các đối tượng element cho phép thay đổi nội dung của element Các thuộc tính đó được chia thành 2 loại: inner và outer

 inner : là nội dung chứa bên trong của đối tượng Có 2 thuộc tính

o innerHTML : lấy nội dung text và thẻ HTML bên trong đối tượng

o innerText : chỉ lấy nội dung text bên trong đối tượng

 outer : là phần inner và bản thân đối tượng

o outerHTML : lấy nội dung text và tag HTML bên trong và của cả đối tượng

o outerText : chỉ lấy nội dung text bên trong đối tượng

Ví dụ: Xét 1 element <div> sau

<div id="myId">Hello <strong>World</strong></div>

inner

outer Lấy đối tượng element

e = document.getElementById("myId");

Lấy nội dung của element

s1 = e.innerHTML; // s1 = 'Hello <strong>World</strong>'

s2 = e.innerText; // s2 = 'Hello World'

s3 = e.outerHTML; // s3 = '<div id = "myId">Hello <strong>World

</strong></div>'

s4 = e.outerText; // s4 = 'Hello World'

d) Thay đổi giá trị thuộc tính của Element

Ví dụ:

Xét element sau

<img src="IBM.jpg" alt="Company Logo" id="picture" /> Giả sử ta muốn thay đổi hình ảnh được thể hiện bởi thẻ <img> ở trên, nghĩa là thay đổi giá trị của thuộc tính src thì mã JavaScript như sau

e = document.getElementById("picture"); // lấy đối tượng e.src = " /pictures/logo.gif"; /* thay đổi hình ảnh hiện tại

bằng hình ảnh có đường dẫn

là " /pictures/logo.gif" */

Trang 38

e) Thay đổi định dạng của Element

Thay đổi định dạng của Element thực chất là thay đổi giá trị thuộc tính style của Element đó

Ví dụ:

Xét element sau

<img src="IBM.jpg" alt="Company Logo" id="picture" /> Giả sử ta muốn điều chỉnh kích thước của hình ảnh được thể hiện bởi thẻ <img> thì

mã JavaScript như sau

e = document.getElementById("picture"); // lấy đối tượng e.style.width = "100px"; // điều chỉnh chiều rộng e.style.height = "80px"; // điều chỉnh chiều cao 2.3.5.5 form

Đối tượng form (biểu mẫu) cho phép người sử du ̣ng nhập vào văn bản và tạo ra các lựa chọn từ các phần tử form như các hộp chọn (checkbox), các nút bấm radio và các danh sách lựa chọn (selection lists)… Form có thể được sử dụng để gửi dữ liê ̣u đến một server Đối tượng form đươ ̣c tạo ra khi người lập trình truy xuất thẻ <form> của HTML Công cụ thi hành JavaScript tạo ra một đối tượng form cho mỗi thẻ <form> trong tài liệu Các đối tượng form được truy xuât thông qua thuô ̣c tı́nh document.forms và thông qua các thuô ̣c tı́nh chỉ định của đối tượng đó

a) Thuộc tính của form

name Trả về giá trị tên của form

thứ i

nameForm=document.forms[i].name

method Chỉ định phương thức dữ

liệu của form i gửi đến

b) Phương thức của form

reset() Xóa toàn bộ thông tin đã nhập trên form

submit() Gửi dữ liệu đến server

c) Các thuộc tính trên mảng element

Trang 39

type Xác định lọai của đối tượng document.forms[i].elements[j].type

value Xác định giá trị của phần tử thứ j trong form i document.forms[i].elements[j].value

Cho phép/không thay

đổi nội dung của phần

Các chương trình JavaScript thường là hướng sự kiện Các sự kiện là các hành động,

sự việc xảy ra trên trang web Một sự kiện có thể do người dùng tạo ra – như kích chuột vào một nút (button) – hoặc do hệ thống tạo ra – như thời gian hệ thống đến một thời điểm xác định

Hầu hết các trı̀nh duyê ̣t đều hỗ trợ đối tượng Event Mỗi sự kiện có một đối tượng Event tương ứng Đối tượng Event cung cấp thông tin về sự kiện – loại sự kiện và vị trí của con trỏ tại thời điểm xảy ra sự kiện Khi một sự kiện được phát sinh, nó đươ ̣c gửi đi như một đối số đến trình xử lý sự kiện

Ví dụ: Khi người dùng nhấp chuột, sự kiện onmousedown đươ ̣c phát sinh Đối tượng Event chứa những thông tin sau:

 Loại sự kiện – trong trường hợp này là nhấp chuột

 Vị trí x và y của con trỏ khi nhấp chuột

 Nút chuột nào được nhấn

 Các phím hỗ trợ (Control, Alt, Shift…) được nhấn vào thời điểm xảy ra sự kiện Đối tượng Event không thể được sử du ̣ng trực tiếp với đối tượng window, nó được sử du ̣ng như một phần của trình xử lý sự kiện

Một sự kiện bắt đầu bằng hành động hoặc điều kiện khởi tạo sự kiện và kết thúc bằng việc đáp lại của trình xử lý sự kiện Vòng đời của một sự kiện thông thường gồm những bước sau:

1 Hành động người dùng hoặc điều kiện tương ứng với sự kiện xảy ra

2 Đối tượng Event đươ ̣c cập nhật nhằm phản ánh trạng thái của sự kiện

3 Sự kiện đươ ̣c kích hoạt

4 Trình xử lý sự kiện tương ứng đươ ̣c gọi

5 Trình xử lý sự kiện thực hiện hành động và trả về điều khiển cho chương trình 2.3.6.2 Xử lý sự kiện cho các thẻ HTML

Đối với thẻ HTML, có thể sử dụng thuộc tính sự kiện nhằm khai báo sự kiện tác động trên thẻ đó Một thẻ HTML có thể chịu tác động của nhiều sự kiện

Cú pháp: <tag event_1 = "eventHandler_1" event_2 = "eventHandler_2">

Ví dụ:

<input type="button" value="OK" onclick="alert('Hello World');"> Trình xử lý sự kiện có thể là một hàm được xây dựng sẵn

Trang 40

Ví dụ:

2.3.6.3 Một số sự kiện chủ yếu

a) Sự kiện trên chuột

onclick Thực hiện khi click chuột

ondblclick Thực hiện khi double click

onmousedown Thực hiện khi nhấn chuột

onmouseup Thực hiện khi chuột được thả (Sau khi nhấn)

onmousemove Thực hiện khi di chuyển chuột

onmouseover Khi di chuyển chuột lên đối tượng

onmouseout Khi di chuyển chuột ra khỏi đối tượng

b) Sự kiện trên bàn phím

onkeydown Thực hiện khi phím được nhấn

onkeyup Thực hiện khi phím được thả

onkeypress Thực hiện khi phím được nhấn và thả

c) Sự kiện trên form

onfocus Thực hiện khi phần tử form được focus (<label>, <input>,

<select>, textarea>, và <button>) onblur Thực hiện khi phần tử form không được focus

onchange Thực hiện khi phần tử form đuợc thay đổi (<input>,

onreset Khi form được reset

onsubmit Khi form được submit

onselect Khi người dùng chọn một đoạn văn bản (<input> và

<textarea>)

Định dạng
Số trang	358
Dung lượng	14,14 MB