Ban Dich PDF q5

Bản đã dịch của trang
IWCD_Session_01.pdf
Page 1 Trang 1
Web Page Authoring Web Page Authoring
Objectives Mục tiêu
In this session, you will learn to: Trong phiên này, bạn sẽ học cách:
Define Internet, WWW, and HTML Xác định Internet, WWW, và HTML
Create a Web page Tạo một trang Web
Create hyperlinks Tạo siêu liên kết
Identify the requirements for publishing a website Xác định các yêu cầu cho xuất bản một
trang web
Add colors and backgrounds to a Web page Thêm màu sắc và hình nền cho một trang Web
Add images to a Web page Thêm hình ảnh vào một trang Web
gg
pg pg
Slide 1 of 39 Slide 1 của 39
Ver. Ver. 1.0 1.0
Page 2 Trang 2
Introduction to the Internet, World Wide Web, and Hypertext Markup Language Giới
thiệu về Internet, World Wide Web, và ngôn ngữ đánh dấu siêu văn bản
,,
,,
yp yp
pp
gg gg
The Internet is a vast interconnection of computers that Internet là một kết nối rộng lớn của
máy tính
connects computers across the world. kết nối các máy tính trên toàn thế giới.
World Wide Web (WWW): World Wide Web (WWW):
The WWW, popularly known as the Web, is a collection of Các cá nhân, thường được gọi là
Web, là một bộ sưu tập của
pp Trang
yy
several electronic documents called Web pages. một số tài liệu điện tử được gọi là các trang
web.
These Web pages are interlinked by using hypertext. Những trang web được liên kết với nhau
bằng cách sử dụng siêu văn bản.
Hypertext, also known as hyperlink, connects the content on Siêu văn bản, còn được gọi là
siêu liên kết, kết nối các nội dung trên
one Web page to the content on another Web page. một trang web với nội dung trên một
trang web khác.
A set of interconnected Web pages displaying related Một tập hợp các liên kết trang web hiển
thị liên quan
information on a particular subject is called a website. thông tin về một vấn đề cụ thể được
gọi là một trang web.
EhEh
b it h b nó h
ii
dd đ
th I t lần thứ I t
tk tk
Each website has a unique address on the Internet, known as Mỗi trang web có một địa chỉ
duy nhất trên Internet, được gọi là
the Uniform Resource Locator (URL). Uniform Resource Locator sự (URL).
To view a website, a program called Web browser is used. Để xem một trang web, một
chương trình gọi là trình duyệt Web được sử dụng.
Web browser opens the home page of a website after a user Trình duyệt web sẽ mở ra trang
chủ của website sau khi người dùng
Ver. Ver. 1.0 1.0
Web browser opens the home page of a website, after a user Trình duyệt web sẽ mở ra trang
chủ của trang web, sau khi người dùng
specifies the URL of the website in the browser window. quy định các URL của trang web
trong cửa sổ trình duyệt.
Page 3 Trang 3
Introduction to the Internet, World Wide Web, and Hypertext Markup Language
(Contd.) Giới thiệu về Internet, World Wide Web, và ngôn ngữ đánh dấu siêu văn bản
(Contd.)
,,
,,
yp yp
pp
gg ( gg (
))
Hypertext Markup Language (HTML): Hypertext Markup Language (HTML):
Is a collection of platform-independent styles used to create a Là một bộ sưu tập phong cách
độc lập nền tảng sử dụng để tạo ra một
Web document or a Web page. Web tài liệu hoặc các trang Web một.
Indicates the way in which the document is to be read by the Chỉ ra cách thức mà tài liệu sẽ
được đọc bởi
browser. trình duyệt.
Provides tags that you can use to insert graphics, and specify Cung cấp thẻ mà bạn có thể sử
dụng để chèn đồ họa, và chỉ định
the fonts and colors for the various elements on a Web page. các phông chữ và màu sắc cho
các thành phần khác nhau trên một trang Web.
Slide 3 of 39 Slide 3 / 39
Ver. Ver. 1.0 1.0
Page 4 Trang 4
Considerations Involved in Web Page Creation Cân nhắc tham gia vào việc tạo trang
Web
Considerations Involved in Web Page Creation Cân nhắc tham gia vào việc tạo trang
Web
The success of a website largely depends on how Sự thành công của một trang web chủ yếu
phụ thuộc vào cách
effectively it addresses user requirements. nó có hiệu quả các địa chỉ yêu cầu người dùng.
The considerations involved in creating an accessible Các cân nhắc tham gia vào việc tạo ra
một truy cập
website are: trang web là:
Front-end considerations: Front-end cân nhắc:
Are concerned with the visual interface of a Web page. Có liên quan với giao diện trực quan
của một trang Web.
Includes interface design and design standards. Bao gồm thiết kế giao diện và các tiêu chuẩn
thiết kế.
Back-end considerations: Phía sau những cân nhắc:
Are concerned with the faster download of Web pages and easy Có liên quan với việc tải
xuống nhanh hơn của các trang web và dễ dàng
accessibility of back-end databases. khả năng tiếp cận của cấp cơ sở dữ liệu trở lại.
Includes bandwidth and download time Bao gồm cả băng thông và thời gian tải về
Includes bandwidth and download time. Bao gồm cả băng thông và thời gian tải về.
Ver. Ver. 1.0 1.0
Page 5 Trang 5
Editors Used for Creating Web Pages Biên tập viên sử dụng để tạo trang web
Editors Used for Creating Web Pages Biên tập viên sử dụng để tạo trang web
Editors that can be used for creating Web pages are of two Biên tập viên có thể được sử dụng
để tạo các trang Web có hai
types: các loại:
Text editors: Văn bản biên tập viên:
Text editors allow you to type and save HTML code in the form of biên tập văn bản cho phép
bạn gõ và lưu đoạn mã HTML trong các hình thức
tt fil tt fil
text files. tập tin văn bản.
The text files created are saved with the .htm or .html extension. Các tập tin văn bản được tạo
ra sẽ được lưu với các hoặc. Htm. Mở rộng html.
GUI editors: GUI biên tập:
Are known as What You See Is What You Get (WYSIWYG) Được biết đến như những gì
bạn thấy là những gì bạn có được (WYSIWYG)
Are known as What You See Is What You Get (WYSIWYG) Được biết đến như những gì
bạn thấy là những gì bạn có được (WYSIWYG)
editors. biên tập viên.
Are user-friendly and do not require the user to have any Có người dùng thân thiện và không
đòi hỏi người sử dụng có bất kỳ
programming knowledge for creating Web pages. kiến thức lập trình để tạo các trang Web.
Provide various tools and components that helps a user to create Cung cấp các công cụ khác
nhau và các thành phần giúp người dùng tạo ra
HTML documents easily and quickly. Tài liệu HTML một cách dễ dàng và nhanh chóng.
Ver. Ver. 1.0 1.0
Page 6 Trang 6
Structure of an HTML Document Cấu trúc của một tài liệu HTML
Structure of an HTML Document Cấu trúc của một tài liệu HTML
An HTML document can be created by combining various Một tài liệu HTML có thể được
tạo ra bằng cách kết hợp khác nhau
tags. thẻ.
Tags are special markup codes enclosed in angle brackets Tags là mã đánh dấu đặc biệt kèm
theo trong dấu ngoặc nhọn
that define the structure of the HTML document. xác định cơ cấu của các tài liệu HTML.
An HTML document contains the following structural tags: Một tài liệu HTML chứa các thẻ
cấu trúc sau đây:
<!DOCTYPE> <! DOCTYPE>
<HTML> <HTML>
<HEAD> <HEAD>
<BODY> <BODY>
<SCRIPT> <script>
Ver. Ver. 1.0 1.0
Page 7 Trang 7
Formatting an HTML Document Định dạng một tài liệu HTML
Formatting an HTML Document Định dạng một tài liệu HTML
Web pages can be formatted using various formatting tags. các trang web có thể được định
dạng bằng cách sử dụng định dạng thẻ khác nhau.
The two categories of formatting tags are: Hai loại thẻ định dạng là:
Block level tags Cấp thẻ Block
Text level tagsg Văn bản cấp tagsg
Apart from block level tags and text level tags, there are list Ngoài việc cấp thẻ và thẻ cấp
khối văn bản, có danh sách
tags used to represent a group of elements. thẻ được sử dụng để đại diện cho một nhóm các
phần tử.
Ver. Ver. 1.0 1.0
Page 8 Trang 8
Formatting an HTML Document (Contd.) Định dạng một tài liệu HTML (Contd.)
Block Level Tags: Khối Cấp Tags:
Paragraph tag: <P> Đoạn tag: <P>
Line Break tag: <BR> Line Break tag: <BR>
Horizontal Rule tag: <HR> Quy tắc ngang tag: <hr>
Heading tags: <H1> to <H6> Nhóm các thẻ: <h1> để <h6>
Formatting tag: <PRE> Định dạng tag: <pre>
Blockquote tag: <BLOCKQUOTE> Blockquote tag: <blockquote>
Center tag: <CENTER> Trung tâm tag: <center>
Ver. Ver. 1.0 1.0
Page 9 Trang 9
Text Level Tags: Cấp văn bản Tags:
<FONT> tag <font> Tag
<B> tag <B> Tag
<I> tag <I> Tag
<U> tag <u> Tag
<SUB> and <SUP> tags <SUB> Và thẻ <sup>
<STRIKE> tag <STRIKE> Tag
Ver. Ver. 1.0 1.0
Page 10 Trang 10
List Tags: Danh sách các Tags:
Are compound, block level tags, commonly used in HTML Là hợp chất, khối cấp thẻ, thường
được sử dụng trong HTML
documents. tài liệu.
Have some attributes that enable you to manipulate the Có một số thuộc tính cho phép bạn
thao tác
appearance of the lists and in turn the appearance of the Web xuất hiện của các danh sách và
lần lượt xuất hiện của các Web
page. trang.
Can be nested. Có thể được lồng nhau.
Th Th
ii
tt
f li t f li t
di HTML di HTML
The various types of lists used in HTML are: Các loại danh sách được sử dụng trong HTML
là:
Ordered or numbered lists Đặt hàng và số danh sách
Un-ordered or bulleted lists Un-ra lệnh hoặc các danh sách gạch đầu dòng
Definition lists Định nghĩa danh sách
Ver. Ver. 1.0 1.0
Page 11 Trang 11
Demo: Creating a Web Page Demo: Tạo một trang web
Demo: Creating a Web Page Demo: Tạo một trang web
Problem Statement: Báo cáo vấn đề:
Oats and Meals is a leading restaurant chain in North Yến mạch và các bữa ăn là một chuỗi
nhà hàng hàng đầu ở Bắc
America. Mỹ. As a part of the company's marketing strategy, the Là một phần trong chiến
lược tiếp thị của công ty,
senior management has decided to hire a software quản lý cấp cao đã quyết định thuê một
phần mềm
organization WeBuildWebs Inc to develop their website You tổ chức WeBuildWebs Inc để
phát triển trang web của họ Bạn
organization, WeBuildWebs Inc., to develop their website. tổ chức, WeBuildWebs Inc, phát
triển trang web của họ. You Bạn
are a Web developer at WeBuildWebs Inc., and have been là một nhà phát triển web tại
WeBuildWebs Inc, và đã được
assigned the task of creating a sample Home page for Oats giao nhiệm vụ tạo ra một trang
chủ mẫu cho Oats
and Meals. và các bữa ăn.
Ver. Ver. 1.0 1.0
Page 12 Trang 12
Demo: Creating a Web Page (Contd.) Demo: Tạo một trang web (Contd.)
The following figure displays a sample home page for the Các con số sau đây sẽ hiển thị một
nhà mẫu trang cho
Oats and Meals website. Yến mạch và trang web bữa ăn.
Ver. Ver. 1.0 1.0
Page 13 Trang 13
Solution: Giải pháp:
To solve the preceding problem, you need to perform the Để giải quyết vấn đề trên, bạn cần
phải thực hiện
following tasks: nhiệm vụ sau đây:
Create the Oats and Meals home page. Tạo trang chủ Yến mạch và các bữa ăn.
View the Web page and verify the output. Xem các trang web và kiểm tra đầu ra.
Ver. Ver. 1.0 1.0
Page 14 Trang 14
Linking Web Pages Liên kết trang web
Linking Web Pages Liên kết trang web
Hyperlinks are used to provide links to Web pages, images, Các siêu liên kết được sử dụng để
cung cấp liên kết đến các trang web, hình ảnh,
multimedia files, and documents of applications. các tập tin đa phương tiện, và các văn bản
của ứng dụng.
Hyperlinks in HTML are created using the anchor tag. Các siêu liên kết trong HTML được
tạo ra bằng cách sử dụng thẻ neo.
An anchor tag is represented by <A>…</A> tags. Một thẻ neo được đại diện bởi <A> ...
</ A> thẻ.
gg
pp
yy
gg
The attributes of an anchor tag are: Các thuộc tính của một tag anchor là:
HREF HREF
TITLE TITLE
TARGET MỤC TIÊU
NAME TÊN
Ver. Ver. 1.0 1.0
Page 15 Trang 15
Demo: Creating Hyperlinks Demo: Tạo siêu liên kết
Demo: Creating Hyperlinks Demo: Tạo siêu liên kết
You have created the home page and several other Web Bạn đã tạo ra trang chủ và một số
web khác
pages for the Oats and Meals website. các trang cho website Yến mạch và các bữa ăn. You
need to link all the Bạn cần liên kết tất cả các
Web pages to the home page. Các trang web về trang chủ. For this, you are required to Đối
với điều này, bạn được yêu cầu
create appropriate hyperlinks in the home page The following tạo siêu liên kết thích hợp
trong trang nhà sau đây
create appropriate hyperlinks in the home page. tạo siêu liên kết thích hợp trong trang chủ.
The following Các sau
Web pages have already been created for the Oats and Meals các trang web đã được tạo ra
cho Yến mạch và các bữa ăn
website: website:
Aboutus.html Aboutus.html
BranchesandLocation.html BranchesandLocation.html
Recipe.html Recipe.html
SubmitARecipe.html SubmitARecipe.html
PlaceYourOrder.html PlaceYourOrder.html
Ver. Ver. 1.0 1.0
Page 16 Trang 16
Demo: Creating Hyperlinks (Contd.) Demo: Tạo siêu liên kết (Contd.)
The following figure displays the sample home page after the Các con số sau đây sẽ hiển thị
các nhà mẫu trang sau
hyperlinks have been added. siêu liên kết đã được thêm vào.
Slide 16 of 39 Slide 16 trong 39
Ver. Ver. 1.0 1.0
Page 17 Trang 17
Create the hyperlinks. Tạo các siêu liên kết.
View the Web page and verify the output. Xem các trang web và kiểm tra đầu ra.
Ver. Ver. 1.0 1.0
Page 18 Trang 18
Website Hosting Website Hosting
Website Hosting Website Hosting
Hosting provides storage space for uploading Web Hosting cung cấp không gian lưu trữ để
tải lên Web
To make a website available over the Internet, host the site Để thực hiện một trang web có
sẵn trên Internet, lưu trữ các trang web
documents on the server space provided by an ISP. tài liệu về không gian máy chủ cung cấp
bởi một ISP.
The requirements to host a website are: Các yêu cầu để lưu trữ một trang web là:
The URL of a Web server on which the site is to be hosted. URL của một máy chủ Web mà
trang web sẽ được lưu trữ.
A user name and password to access and publish content of Một tên người dùng và mật khẩu
để truy cập và xuất bản nội dung của
pp
pp
the Web page on the Web server. các trang Web trên máy chủ Web.
Ver. Ver. 1.0 1.0
Page 19 Trang 19
Naming Conventions for Web Pages Công ước đặt tên cho trang Web
Naming Conventions for Web Pages Công ước đặt tên cho trang Web
Naming conventions are a set of rules followed for naming Ước đặt tên một bộ quy tắc sau để
đặt tên
Web pages. Các trang Web.
Hosting service providers have their own set of conventions cung cấp dịch vụ Hosting phải
thiết lập riêng của họ về công ước
supported by their Web server to ensure that the website được hỗ trợ bởi máy chủ web của họ
để đảm bảo rằng trang web
functions properly. chức năng đúng.
Some of the common default file names for home pages Một số tên mặc định tập tin phổ biến
cho các trang nhà
are: là:
index.html/ index.htm index.html / index.htm
default.html/ default.htm default.html / default.htm
welcome.html/ welcome.htm welcome.html / welcome.htm
home.html/ home.htm home.html / home.htm
Ver. Ver. 1.0 1.0
Page 20 Trang 20
Page Colors and Backgrounds Trang Màu sắc và hình nền
Page Colors and Backgrounds Trang Màu sắc và hình nền
The appearance of Web pages can be changed by adding Sự xuất hiện của các trang web có
thể được thay đổi bằng cách thêm
colors to the background, text, fonts, tables, and links in the màu sắc đến, nền văn bản, phông
chữ, bảng biểu, và các liên kết trong
HTML file. HTML file.
HTML provides various tags and their associated attributes HTML cung cấp thẻ khác nhau và
các thuộc tính liên quan của họ
to set colors on a Web page. để thiết lập màu sắc trên một trang web.
Ver. Ver. 1.0 1.0
Page 21 Trang 21
Page Colors and Backgrounds (Contd.) Trang Màu sắc và hình nền (Contd.)
Page Colors and Backgrounds (Contd.) Trang Màu sắc và hình nền (Contd.)
The following table lists the various tags and attributes to set Bảng sau liệt kê các thẻ khác
nhau và các thuộc tính để thiết lập
colors on a Web page. màu sắc trên một trang web.
Tags and their Associated Attributes Tags và liên kết của họ thuộc tính
Role Vai trò
<BODY BGCOLOR=“color name”> <body BGCOLOR="color name">
…Content… ... Nội dung ...
</BODY> </ BODY>
Background Color Màu nền
<BODY TEXT=“color value”> <body TEXT="color value">
Text Color Text Color
</BODY> </ BODY>
<BODY LINK= “color value” <BODY LINK = "màu sắc giá trị"
VLINK= “color value” VLINK = "màu sắc giá trị"
Link Color Liên kết màu
co o đồng o
a ue một ue
ALINK= “color value”> ALINK = "màu sắc giá trị">
</BODY> </ BODY>
<FONT COLOR= “font color”> <FONT COLOR= "font color">
//
Font Color Màu chữ
Ver. Ver. 1.0 1.0
text</FONT> văn bản </ FONT>
Page 22 Trang 22
Specifying Colors in HTML Xác định màu sắc trong HTML
Specifying Colors in HTML Xác định màu sắc trong HTML
HTML colors are defined by the combination of three basic màu HTML được định nghĩa bởi
sự kết hợp của ba cơ bản
colors: Red, Green, and Blue. màu sắc: đỏ, xanh lá, và xanh.
In an HTML file, a color can be represented either by using Trong một tập tin HTML, màu
sắc có thể được đại diện bằng cách sử dụng
its name or by using a corresponding hexadecimal code. Tên của nó hoặc bằng cách sử dụng
một mã thập lục phân tương ứng.
Ver. Ver. 1.0 1.0
Page 23 Trang 23
Hexadecimal Color Codes Các mã màu hệ thập lục phân
Hexadecimal Color Codes Các mã màu hệ thập lục phân
Colors such as red, green, and blue have different Màu sắc như đỏ, xanh lá cây, và màu xanh
có khác nhau
intensities, which is known as the RGB values. cường độ, được gọi là các giá trị RGB.
The RGB values range between 0 and 255 for a color. Các giá trị RGB phạm vi từ 0 đến 255
cho màu sắc.
These values are represented using hexadecimal codes in Những giá trị này được đại diện
bằng cách sử dụng mã số thập lục phân trong
HTML. HTML.
The following figure shows the format of the hexadecimal Hình dưới đây cho thấy các định
dạng của hệ thập lục phân
color code for the color, Fuchsia. mã màu cho màu sắc, Fuchsia.
Ver. Ver. 1.0 1.0
Page 24 Trang 24
Hexadecimal Color Codes (Contd.) Các mã màu hệ thập lục phân (Contd.)
Hexadecimal Color Codes (Contd.) Các mã màu hệ thập lục phân (Contd.)
The following table lists some colors with their hexadecimal Bảng sau đây liệt kê một số màu
sắc với hệ thập lục phân của họ
codes and corresponding RGB values. mã số và giá trị tương ứng RGB.
Color Name Tên màu
Hexadecimal Code RGB Value Mã thập lục giá trị RGB
Black Đen
#000000 # 000000
0,0,0 0,0,0
White Trắng
#FFFFFF # FFFFFF
255,255,255 255,255,255
Red Red
#FF0000 # FF0000
255,0,0 255,0,0
Green Xanh
#00FF00 # 00FF00
0,255,0 0,255,0
Bl Bl
#0000FF # 0000FF
0 0 255 0 0 255
Blue Blue
#0000FF # 0000FF
0,0,255 0,0,255
Ver. Ver. 1.0 1.0
Page 25 Trang 25
Web Safe Color Palette Bảng màu web an toàn
Web Safe Color Palette Bảng màu web an toàn
Web-safe colors are the range of colors that are supported -Màu an toàn web là nhiều màu sắc
được hỗ trợ
by a majority of computer platforms. bởi đa số các nền tảng máy tính.
Web-safe colors can be identified from their RGB values -Màu an toàn web có thể được xác
định từ các giá trị của họ RGB
and hexadecimal codes. và mã thập lục.
A color whose RGB value is either 0 or a multiple of 51 for Một màu RGB có giá trị là 0
hoặc nhiều hoặc là một số 51 cho
each of its components, such as Red, Green ,and Blue, is mỗi thành phần của nó, chẳng hạn
như Red, Green, và Blue, là
identified as a Web-safe color. xác định là một màu an toàn web.
Colors, whose hexadecimal codes for red, green, and blue Màu sắc, có hệ thập lục phân mã
số cho màu đỏ, xanh lá cây, và xanh
are 00, 33, 66, 99, CC, or FF are considered Web-safe. là 00, 33, 66, 99, CC, hoặc FF được
xem là web an toàn.
Ver. Ver. 1.0 1.0
Page 26 Trang 26
Demo: Adding Colors to a Web Page Demo: Thêm màu sắc vào một trang web
Demo: Adding Colors to a Web Page Demo: Thêm màu sắc vào một trang web
You have developed a website for BeautyInFitness, an Bạn đã phát triển một trang web cho
BeautyInFitness, một
organization that deals in quality health products. tổ chức giao dịch các sản phẩm y tế chất
lượng. You need to Bạn cần
enhance the interface of the website using colors that are tăng cường giao diện của trang web
bằng cách sử dụng màu sắc được
supported across browsers The color of the background text hỗ trợ giữa các trình duyệt Màu
sắc của nền văn bản
supported across browsers. hỗ trợ giữa các trình duyệt. The color of the background, text, Các
màu sắc của các văn bản, hình nền,
and hyperlinks of all the Web pages need to be modified. và siêu liên kết của tất cả các trang
web cần phải được sửa đổi.
Ver. Ver. 1.0 1.0
Page 27 Trang 27
Demo: Adding Colors to a Web Page (Contd.) Demo: Thêm màu sắc vào một trang web
(Contd.)
Demo: Adding Colors to a Web Page (Contd.) Demo: Thêm màu sắc vào một trang web
(Contd.)
Open the index.htm Web page. Mở trang web index.htm.
Modify the colors of the index.htm Web page. Sửa đổi màu sắc của trang web index.htm.
Open the product_1.htm Web page. Mở trang web product_1.htm.
Modify the colors of the product_1.htm Web page. Sửa đổi màu sắc của trang Web
product_1.htm.
Open the product 2 htm Web page Mở sản phẩm 2 htm trang Web
product_2.htm.
product_3.htm.
product_4.htm.
View the Web pages and verify the output. Xem các trang web và kiểm tra đầu ra.
Ver. Ver. 1.0 1.0
Page 28 Trang 28
Using Images on a Web Page Sử dụng hình ảnh trên một trang Web
Using Images on a Web Page Sử dụng hình ảnh trên một trang Web
Images help to enhance the visual appeal of a Web page. Hình ảnh giúp tăng cường sự hấp
dẫn trực quan của một trang Web.
They enable users to recollect facts faster. Chúng cho phép người dùng nhớ lại sự kiện nhanh
hơn.
The three formats of images popular on the Web are: Ba định dạng hình ảnh phổ biến trên
Web là:
Graphic Interchange Format (GIF ) Graphic Interchange Format (GIF)
Graphic Interchange Format (GIF ) Graphic Interchange Format (GIF)
Joint Photographic Experts Group (JPEG ) Joint Photographic Experts Group (JPEG)
Portable Network Graphics (PNG ) Portable Network Graphics (PNG)
HTML uses the HTML sử dụng
<IMG> <img>
tag to place static as well as tag để đặt tĩnh cũng như
HTML uses the HTML sử dụng
<IMG> <img>
tag to place static as well as tag để đặt tĩnh cũng như
animated images in a Web page. động hình ảnh trong một trang Web.
The following two image formats can be inserted using the Các định dạng hình ảnh sau hai có
thể được chèn bằng cách sử dụng
<IMG> tag: <img> Tag:
GIF GIF
JPEG JPEG
Ver. Ver. 1.0 1.0
Page 29 Trang 29
Using Images on a Web Page (Contd.) Sử dụng hình ảnh trên một trang web (Contd.)
The attributes of the <IMG> tag are: Các thuộc tính của thẻ <img> là:
ALIGN ALIGN
BORDER BIÊN GIỚI
WIDTH Chiều rộng
HEIGHT Chiều cao
HSPACE Hspace
VSPACE VSpace
ALT ALT
SRC SRC
Ver. Ver. 1.0 1.0
Page 30 Trang 30
Image Maps: Hình ảnh bản đồ:
Image map is a technique of dividing an image into sections Hình ảnh bản đồ là một kỹ thuật
phân chia một hình ảnh thành các phần
that link to different pages. liên kết đến các trang khác nhau.
The sections that link to different pages are known as Các phần liên kết đến các trang khác
nhau được gọi là
hotspots. các điểm nóng.
Different kinds of hotspots can be created on a large image, các loại khác nhau của các điểm
nóng có thể được tạo ra trên một hình ảnh lớn,
such as: chẳng hạn như:
Circular hotspot Thông tư hotspot
Polygonal hotspot Polygonal điểm nóng
Rectangular hotspot Hình chữ nhật điểm nóng
Ver. Ver. 1.0 1.0
Page 31 Trang 31
To create an image map in HTML, the <MAP> tag is used. Để tạo ra một bản đồ hình ảnh
trong HTML, các tag <MAP> được sử dụng.
The NAME attribute of the <MAP> tag specifies the name of the Các thuộc tính NAME của thẻ
<MAP> xác định tên của
map referred to in the HTML document. bản đồ đề cập tới trong tài liệu HTML.
The <MAP> tag is used with an <AREA> tag that is specified Các tag <MAP> được sử dụng
với một thẻ <AREA> được chỉ định
i id th <MAP> t id i th t <MAP>
inside the <MAP> tag. bên trong các tag <MAP>.
The <AREA> tag is used to specify the properties for specific Các tag <AREA> được sử dụng
để xác định các bất động sản cho cụ thể
areas of an image. khu vực của hình ảnh.
The attributes of the <AREA> tag are as follows: Các thuộc tính của thẻ <AREA> như sau:
The attributes of the <AREA> tag are as follows: Các thuộc tính của thẻ <AREA> như sau:
SHAPE SHAPE
COORDS Coords
HREF HREF
Ver. Ver. 1.0 1.0
Page 32 Trang 32
Demo: Adding Images to a Web Page Demo: Thêm hình ảnh vào một trang web
Demo: Adding Images to a Web Page Demo: Thêm hình ảnh vào một trang web
You are creating the Product Gallery Web page for the Bạn đang tạo ra các sản phẩm trang
Web Gallery cho
BeautyInFitness website. BeautyInFitness website. The Web page should display Các trang
web sẽ hiển thị
images of the products and services provided by hình ảnh của sản phẩm và dịch vụ được cung
cấp bởi
BeautyInFitness The information about a product or service BeautyInFitness Các thông tin về
một sản phẩm hay dịch vụ
BeautyInFitness. BeautyInFitness. The information about a product or service Các thông tin
về một sản phẩm hay dịch vụ
should be provided as soon as the user clicks on any image. cần được cung cấp ngay khi
người dùng nhấp vào hình ảnh bất kỳ.
How will you achieve the desired task? Làm thế nào bạn sẽ đạt được công việc mong muốn?
Ver. Ver. 1.0 1.0
Page 33 Trang 33
Demo: Adding Images to a Web Page (Contd.) Demo: Thêm hình ảnh vào một trang
web (Contd.)
web (Contd.)
The following figure is a sample Product Gallery Web page for Hình dưới đây là một sản
phẩm mẫu trang Web Gallery
the BeautyInFitness website. các trang web BeautyInFitness.
Ver. Ver. 1.0 1.0
Page 34 Trang 34
web (Contd.)
web (Contd.)
Open the productgallery.htm Web page. Mở trang web productgallery.htm.
Specify the hyperlinks on the images. Chỉ định các siêu liên kết trên hình ảnh.
View the Web pages and verify the output. Xem các trang web và kiểm tra đầu ra.
Ver. Ver. 1.0 1.0
Page 35 Trang 35
Summary Tóm tắt
In this session, you learned that: Trong phiên này, bạn học được rằng:
The Internet is a vast interconnection of computers that Internet là một kết nối rộng lớn của
máy tính
connects computers across the world. kết nối các máy tính trên toàn thế giới.
The WWW, popularly known as the Web, is a collection of Các cá nhân, thường được gọi là
Web, là một bộ sưu tập của
several electronic documents called Web pages, which are một số tài liệu điện tử được gọi là
các trang web, được
interlinked with each other. liên kết với nhau với nhau.
Interconnection among Web pages is achieved by using Kết nối giữa các trang Web được
thực hiện bằng cách sử dụng
hypertexts also know as hyperlinks hypertexts cũng biết là các siêu liên kết
hypertexts, also know as hyperlinks. hypertexts, còn được gọi là siêu liên kết.
A Web browser lets you specify the URL of a website and Một trình duyệt Web cho phép bạn
chỉ định URL của một trang web và
opens the home page of the website. sẽ mở ra trang chủ của trang web.
HTML is a collection of platform-independent styles used to HTML là một tập hợp phong
cách độc lập nền tảng sử dụng để
HTML is a collection of platform independent styles used to HTML là một tập hợp phong
cách độc lập nền tảng sử dụng để
create a Web document or a Web page. tạo một tài liệu web hoặc các trang Web một.
Before creating Web pages for a website, you need to Trước khi tạo trang web cho trang web,
bạn cần
consider several factors such as, usability and efficiency of the xem xét nhiều yếu tố như, khả
năng sử dụng và hiệu quả của
Ver. Ver. 1.0 1.0
website. website.
Page 36 Trang 36
Summary (Contd.) Tóm tắt (Contd.)
Editors that can be used for creating Web pages are of two Biên tập viên có thể được sử dụng
để tạo các trang Web có hai
types: các loại:
Text editors Văn bản biên tập viên
Graphic User Interface (GUI) editors Giao diện người dùng (GUI) biên tập viên
Graphic User Interface (GUI) editors are also called as What Giao diện người dùng (GUI)
biên tập viên cũng được gọi là gì
Graphic User Interface (GUI) editors are also called as What Giao diện người dùng (GUI)
biên tập viên cũng được gọi là gì
You See Is What You Get (WYSIWYG) editors. Bạn thấy là những gì bạn có được
(WYSIWYG) soạn thảo. GUI editors GUI biên tập viên
provide various tools and components with point and click cung cấp các công cụ khác nhau
và các thành phần với điểm và nhấp chuột
functionality.y functionality.y
Publishing a website involves copying the website content to a Xuất bản một trang web liên
quan đến việc sao chép nội dung trang web để một
Web server and making the site available over the Internet. Máy chủ web và làm cho các
trang web có sẵn trên Internet.
Hosting is a service that provides storage space for uploading Hosting là một dịch vụ cung
cấp không gian lưu trữ để tải lên
Ver. Ver. 1.0 1.0
Page 37 Trang 37
You can change the appearance of Web pages by adding Bạn có thể thay đổi sự xuất hiện của
các trang Web bằng cách thêm
colors to the background, text, fonts, tables, and links in the màu sắc đến, nền văn bản, phông
chữ, bảng biểu, và các liên kết trong
HTML document. HTML tài liệu.
The BGCOLOR attribute of the <BODY> tag is used to set the Các thuộc tính BGColor của
thẻ <BODY> được sử dụng để thiết lập
color for the background of the Web page màu nền của trang Web
color for the background of the Web page. màu nền của trang Web.
The TEXT attribute of the <BODY> tag is used to set the color Thuộc tính văn bản của thẻ
<BODY> được sử dụng để thiết lập màu
for the text in the Web page. với văn bản trong trang Web.
Colors can be set for various states of a hyperlink such as Màu sắc có thể được đặt cho các
tiểu bang khác nhau của một siêu liên kết như:
Colors can be set for various states of a hyperlink, such as Màu sắc có thể được đặt cho các
tiểu bang khác nhau của một siêu liên kết, chẳng hạn như
unvisited hyperlink ( LINK ), active hyperlink ( ALINK ), and unvisited siêu liên kết
(LINK), hoạt động siêu liên kết (ALINK), và
visited hyperlink ( VLINK ) on the Web page. thăm siêu liên kết (VLINK) trên trang Web.
The COLOR attribute of the <FONT> tag is used to set the Các thuộc tính COLOR của thẻ
<font> được sử dụng để thiết lập
colors for a selected text in the Web page. màu sắc cho một văn bản được chọn trong trang
Web.
Colors such as red, green, and blue have different intensities, Màu sắc như đỏ, xanh lá cây, và
màu xanh có cường độ khác nhau,
known as the RGB values. được gọi là các giá trị RGB. The RGB values for a color ranges
RGB Các giá trị cho màu sắc một dãy
between 0 and 255 These values are represented using từ 0 đến 255 Các giá trị này được đại
diện bằng cách sử dụng
Ver. Ver. 1.0 1.0
between 0 and 255. từ 0 đến 255. These values are represented using Những giá trị này được
đại diện bằng cách sử dụng
hexadecimal codes in HTML. mã số thập lục phân HTML.
Page 38 Trang 38
Web-safe colors are a range of colors supported by a majority -Màu an toàn web là một loạt
các màu sắc được hỗ trợ bởi đa số
of computer platforms. các nền tảng máy tính.
Three formats of images are popular on the Web: Ba định dạng của các hình ảnh được phổ
biến trên web:
GIF GIF
JPEG JPEG
PNG PNG
HTML uses the <IMG> tag to place static as well as animated HTML sử dụng các tag
<img> để đặt tĩnh cũng như động
images on a Web page hình ảnh trên một trang Web
images on a Web page. hình ảnh trên một trang Web.
Image mapping is the process of dividing an image into Hình ảnh bản đồ là quá trình phân
chia một hình ảnh vào
several regions that may be linked to different Web pages on một số khu vực có thể được liên
kết đến các trang web khác nhau trên
a website. một trang web.
A hotspot is a region on an image that acts as a hyperlink. điểm nóng là một khu vực trên một
hình ảnh hoạt động như một liên kết.
Ver. Ver. 1.0 1.0
Page 39 Trang 39
The following types of hotspots can be created using the Các loại sau đây của các điểm nóng
có thể được tạo ra bằng cách sử dụng
Polygonal hotspot Polygonal điểm nóng
The <MAP> tag is used to create an image map in HTML. Các tag <MAP> được sử dụng để
tạo ra một bản đồ hình ảnh trong HTML.
The <MAP> tag is used with an <AREA> tag that is specified Các tag <MAP> được sử dụng
với một thẻ <AREA> được chỉ định
Ver. Ver. 1.0 1.0

IWCD_Session_02.pdf
Page 1 Trang 1
Create tables Tạo bảng
Create forms Tạo các hình thức
Work with frames Làm việc với khung hình
Ver. Ver. 1.0 1.0
Page 2 Trang 2
Introducing Tables Giới thiệu bảng
Introducing Tables Giới thiệu bảng
Tables are used to present data in a tabular format. Bàn được sử dụng để trình bày dữ liệu
trong một định dạng bảng.
Tables provide structured information to the end user. Bàn cung cấp các cấu trúc thông tin
cho người dùng cuối.
Tables consist of rows and columns. Bàn bao gồm các hàng và cột.
The Các
< TABLE > <TABLE>
tag is used to create a table tag được sử dụng để tạo một bảng
The Các
< TABLE > <TABLE>
tag is used to create a table. tag được sử dụng để tạo ra một bảng.
Ver. Ver. 1.0 1.0
Page 3 Trang 3
Introducing Tables (Contd.) Giới thiệu bảng (Contd.)
Introducing Tables (Contd.) Giới thiệu bảng (Contd.)
The following table describes the basic tags required to Bảng dưới đây mô tả các thẻ cơ bản
cần thiết để
create a table. tạo một bảng.
Tags Tags
Description Mô tả
<TABLE> <table>
Specifies the tag for creating a table. Chỉ định các tag để tạo một bảng. The table tag starts
with the <TABLE> tag Các tag bảng bắt đầu với các tag <table>
<TABLE> <table>
and ends with a </TABLE> tag. và kết thúc với một / TABLE> tag <.
<TH> <th>
Specifies the table header. Ghi rõ tiêu đề bảng. By default, header cells are in bold and are
center Theo mặc định, các tế bào tiêu đề được in đậm và là trung tâm
aligned. thẳng hàng. A table header starts with the <TH> tag and ends with the </TH> tag.
Một tiêu đề bảng bắt đầu với các tag <th> và kết thúc với </ TH> tag.
<TR> <tr>
Specifies the table row. Ghi rõ hàng của bảng. The contents of the row are placed between
the Nội dung của hàng được đặt giữa
<TR></TR> container tags <tr> </ TR> container thẻ
<TR></TR> container tags. <tr> </ TR> container thẻ.
<TD> <td>
Specifies the table data that must be written within the <TD></TD> container tags. Chỉ định
dữ liệu bảng mà phải được viết trong <td> </ TD> thẻ container.
The <TD> tags are specified within the <TR> tags. Các thẻ <td> được quy định trong
<tr> thẻ.
<CAPTION> <CAPTION>
Specifies the table caption that can be placed above or below the table. Ghi rõ chú thích
bảng có thể được đặt trên hoặc dưới của bảng. The Các
<CAPTION>…</CAPTION> tag should appear inside the <TABLE>…</TABLE>
<CAPTION> ... </ CAPTION> tag sẽ xuất hiện bên trong <table> ... </ TABLE>
CC
OO
CAPTION … /CAPTION tag should appear inside the TABLE … /TABLE CAPTION ... /
CAPTION tag sẽ xuất hiện bên trong ... BẢNG / TABLE
tag. tag.
<THEAD> <THEAD>
Specifies the table header defined inside the <TABLE> tag. Ghi rõ tiêu đề bảng được định
nghĩa bên trong các tag <table>.
<TBODY> <tbody>
Specifies the contents of a table. Ghi rõ nội dung của bảng.
Ver. Ver. 1.0 1.0
<TFOOT> <TFOOT>
Specifies the table footer defined inside the <TABLE> tag. Chỉ định bàn chân được định
nghĩa bên trong tag <table>.
Page 4 Trang 4
Modifying Table Attributes Sửa đổi Bảng thuộc tính
Modifying Table Attributes Sửa đổi Bảng thuộc tính
Attributes enable you to specify additional formatting Thuộc tính cho phép bạn chỉ định định
dạng khác
information such as the height, width, and border of the các thông tin như chiều rộng, chiều
cao, và biên giới của
tags. thẻ.
The <TABLE> tag has the following attributes: Các tag <table> có các thuộc tính sau:
BORDER BIÊN GIỚI
BGCOLOR BGColor
CELLSPACING CELLSPACING
CELLPADDING CELLPADDING
HEIGHT Chiều cao
ALIGN ALIGN
VALIGN VALIGN
Ver. Ver. 1.0 1.0
Page 5 Trang 5
Modifying Table Attributes (Contd.) Sửa đổi Bảng thuộc tính (Contd.)
Modifying Table Attributes (Contd.) Sửa đổi Bảng thuộc tính (Contd.)
BORDERCOLOR BORDERCOLOR
BACKGROUND BỐI CẢNH
FRAME FRAME
RULES QUY
The <TD> tag has the following attributes: Các tag <td> có các thuộc tính sau:
COLSPAN COLSPAN
ROWSPAN ROWSPAN
The <COLGROUP> tag has the following attributes: Các tag <COLGROUP> có các thuộc tính
sau:
ALIGN ALIGN
VALIGN VALIGN
SPAN SPAN
The <CAPTION> tag has the following attributes: Các tag <CAPTION> có các thuộc tính
sau:
ALIGN ALIGN
Ver. Ver. 1.0 1.0
ALIGN ALIGN
Page 6 Trang 6
Demo: Arranging Data by Using Tables Demo: Sắp xếp dữ liệu bằng cách sử dụng bảng
Demo: Arranging Data by Using Tables Demo: Sắp xếp dữ liệu bằng cách sử dụng bảng
Fun Seasons Corp. is a leading departmental store in New Vui Seasons Corp là một cửa hàng
khoa hàng đầu ở New
Jersey, United States. Jersey, Hoa Kỳ. The store offers a wide range of cửa hàng này cung
cấp một loạt các
products. sản phẩm. Recently, the store planned to launch its Web site to Gần đây, các cửa
hàng lên kế hoạch để khởi động trang web của mình
showcase its products and services online to attract more giới thiệu sản phẩm và dịch vụ trực
tuyến để thu hút nhiều hơn
showcase its products and services online to attract more giới thiệu sản phẩm và dịch vụ trực
tuyến để thu hút nhiều hơn
customers. khách hàng. Create a Products and Services Web page that Tạo ra một sản phẩm
và dịch vụ trang web mà
displays information such as the Product Code, Product hiển thị thông tin như Mã sản phẩm,
sản phẩm
Category, Product Name, Product Price, and Product Thể loại, Tên sản phẩm, giá sản phẩm,
và sản phẩm
gy GY
Description in a tabular format. Mô tả trong một định dạng bảng.
You need to enhance the table created by using the various Bạn cần phải tăng cường các bảng
được tạo bằng cách sử dụng khác nhau
table attributes. bảng thuộc tính.
Ver. Ver. 1.0 1.0
Page 7 Trang 7
Demo: Arranging Data by Using Tables (Contd.) Demo: Sắp xếp dữ liệu của bảng Sử
dụng (Contd.)
Demo: Arranging Data by Using Tables (Contd.) Demo: Sắp xếp dữ liệu của bảng Sử
dụng (Contd.)
Create a table in a Web page. Tạo một bảng trong một trang Web.
Populate the table with information. Thông dụng nhất bảng với thông tin.
Verify the solution. Xác minh các giải pháp.
Ver. Ver. 1.0 1.0
Page 8 Trang 8
Creating Forms on a Web Page Tạo hình thức trên một trang Web
Creating Forms on a Web Page Tạo hình thức trên một trang Web
Forms allow you to create interactive Web pages by Các hình thức cho phép bạn tạo các
trang Web tương tác bằng cách
providing an interface for exchanging information on the cung cấp một giao diện cho trao đổi
thông tin trên
Internet. Internet.
The <FORM> tag is used to define a form. Các tag <form> được sử dụng để xác định một
hình thức.
The <FORM> tag supports the following attributes: Các tag <form> hỗ trợ các thuộc tính
sau:
NAME TÊN
ACTION HÀNH ĐỘNG
METHOD PHƯƠNG PHÁP
ENCTYPE ENCTYPE
Ver. Ver. 1.0 1.0
Page 9 Trang 9
Types of Form Fields Các loại Form Fields
Types of Form Fields Các loại Form Fields
You can add the following types of controls to a form: Bạn có thể thêm các loại sau đây của
các điều khiển để tạo thành một:
Text box Hộp văn bản
Radio button Nút Radio
Check box Kiểm tra hộp
Buttons Buttons
Select lists Chọn danh sách
Text area Khu vực văn bản
Ver. Ver. 1.0 1.0
Page 10 Trang 10
Types of Form Fields (Contd.) Các loại ô Mẫu (Contd.)
The <INPUT> Tag: Các khóa <input>:
Represents the fields in which the user can edit content. Đại diện các lĩnh vực mà trong đó
người dùng có thể chỉnh sửa nội dung.
The various attributes of the <INPUT> tag are: Các thuộc tính khác nhau của các tag
<input> là:
TYPE LOẠI
VALUE GIÁ TRỊ
NAME TÊN
CHECKED ĐÁNH DẤU
SIZE SIZE
MAXLENGTH Maxlength
ALIGN ALIGN
SRC SRC
Ver. Ver. 1.0 1.0
Page 11 Trang 11
The <SELECT> Tag: Các khóa <SELECT>:
Is a container tag which allows the user to select one of the Là một tag container cho phép
người dùng lựa chọn một trong các
options from a drop-down list. lựa chọn từ một danh sách thả xuống.
The attributes of the <SELECT> tag are: Các thuộc tính của thẻ <SELECT> là:
MULTIPLE NHIỀU
NAME TÊN
SIZE SIZE
Th <OPTION> T Th T <OPTION>
The <OPTION> Tag: Các khóa <OPTION>:
Occurs within a <SELECT> tag. Xảy ra trong một thẻ <SELECT>.
Represents one choice. Đại diện cho một sự lựa chọn.
Has only two attributes: Chỉ có hai thuộc tính:
SELECTED CHỌN
VALUE GIÁ TRỊ
Ver. Ver. 1.0 1.0
Page 12 Trang 12
The <TEXTAREA> Tag: Các khóa <textarea>:
Enables you to create a field in which the user can enter a Cho phép bạn tạo ra một lĩnh vực
mà trong đó người dùng có thể nhập
large amount of text. số lượng văn bản lớn.
The <TEXTAREA> tag supports the following attributes: Các tag <textarea> hỗ trợ các
thuộc tính sau:
ROWS ROWS
COLS CỘT
NAME TÊN
Ver. Ver. 1.0 1.0
Page 13 Trang 13
Demo: Creating Interactive Web Pages Demo: Tạo trang web tương tác
Demo: Creating Interactive Web Pages Demo: Tạo trang web tương tác
PlaceMe, Inc. is an upcoming placement consultancy firm PlaceMe, Inc là một công ty tư vấn
sắp tới vị trí
based in New York. có trụ sở tại New York. To increase its database of job seekers, Để tăng
cơ sở dữ liệu của người tìm việc,
the firm wants to provide a registration form on their Web site, công ty muốn cung cấp một
mẫu đăng ký trên trang web của họ,
where candidates can enter their personal educational and nơi mà các ứng cử viên có thể nhập
của họ cá nhân và giáo dục
where candidates can enter their personal, educational, and nơi mà các ứng cử viên có thể
nhập, cá nhân của họ giáo dục, và
professional details. nghiệp vụ chi tiết. The form should contain the following Các hình thức
nên có những điều sau đây
fields: các lĩnh vực:
Login Details: Đăng nhập Thông tin chi tiết:
gg
User Name Tên người dùng
Password Mật khẩu
Re-enter Password Nhập lại mật khẩu
Ver. Ver. 1.0 1.0
Page 14 Trang 14
Demo: Creating Interactive Web Pages (Contd.) Demo: Tạo trang web tương tác
(Contd.)
(Contd.)
Personal Details: Thông tin chi tiết cá nhân:
First Name Tên đầu tiên
Last Name Tên cuối cùng
E-mail E-mail
Gender Giới Tính
Phone Number Số điện thoại
Preferred Job Location: User should be able to select multiple job Nơi làm việc ưa thích:
User có thể chọn nhiều công việc
locations. địa điểm.
Professional Details: Chuyên nghiệp Thông tin chi tiết:
Experience (in years) Kinh nghiệm (năm năm)
Job Category: User should be able to select multiple job categories. Ngành nghề: Người dùng
có thể lựa chọn loại công việc khác nhau.
Key Skills Kỹ năng chính
Educational Details: Giáo dục Thông tin chi tiết:
Educational Details: Giáo dục Thông tin chi tiết:
Degree Held Bằng cấp được tổ chức
Specialization Chuyên ngành
Ver. Ver. 1.0 1.0
Page 15 Trang 15
(Contd.)
(Contd.)
The form should also contain buttons to enable a user to Hình thức cũng cần có nút để cho
phép một người sử dụng
submit or reset the values entered in the various fields. trình hoặc thiết lập lại các giá trị được
nhập trong các lĩnh vực khác nhau.
The form should have an interface, as shown in the following Các hình thức nên có một giao
diện, như trong những điều sau đây
figure. con số.
Ver. Ver. 1.0 1.0
Page 16 Trang 16
(Contd.)
(Contd.)
Create a Web form in a Web page. Tạo biểu mẫu web trong một trang Web.
Insert the heading section in the Web form. Chèn phần nhóm ở dạng Web.
Insert the LOGIN DETAILS section in the Web form. Chèn đăng nhập chi tiết phần trong các
hình thức web.
Insert the PERSONAL DETAILS section in the Web form. Chèn CÁ NHÂN phần chi tiết
trong các hình thức web.
Insert the PROFESSIONAL DETAILS section in the Web form Chèn các chi tiết chuyên
môn phần theo hình thức Web
Insert the PROFESSIONAL DETAILS section in the Web form. Chèn CHUYÊN NGHIỆP
chi tiết phần trong các hình thức web.
Insert the QUALIFICATIONS section in the Web form. Chèn phần YÊU CẦU ở dạng Web.
Ver. Ver. 1.0 1.0
Page 17 Trang 17
Working with Frames Làm việc với các khung hình
Working with Frames Làm việc với các khung hình
The layout of a Web page can be made flexible by using Cách bố trí của một trang web có thể
được thực hiện linh hoạt bằng cách sử dụng
frames. khung.
Frames divide the client area into multiple sub regions Khung phân chia các khu vực khách
hàng thành nhiều tiểu vùng
called frames. gọi là khung.
The properties of a frame are: Các đặc tính của một khung là:
It can load its own URL, independent of the other frames. Nó có thể tải URL của riêng mình,
độc lập với các khung hình khác.
It can be given a name so that other URLs can target it. Nó có thể được đặt một cái tên để các
URL khác có thể mục tiêu đó.
gg
gg
It can change its size dynamically according to the change in Nó có thể thay đổi kích thước
của nó tự động theo sự thay đổi
size of the visible client area. kích thước của khu vực khách hàng có thể nhìn thấy.
The basic structure of a frame document resembles an Các cấu trúc cơ bản của một tài liệu
giống như một khung
HTML document, except that the <BODY> tag is replaced HTML tài liệu, ngoại trừ các tag
<BODY> được thay thế
by the <FRAMESET> tag. bởi thẻ <FRAMESET>.
Ver. Ver. 1.0 1.0
Page 18 Trang 18
Working with Frames (Contd.) Làm việc với các khung hình (Contd.)
Using Frame Tags: Sử dụng Tags Frame:
A FRAME document is generated by: Một tài liệu FRAME được tạo ra bởi:
<FRAMESET> Tag <FRAMESET> Tag
<FRAME> Tag <frame> Tag
The <FRAMESET> Tag: Các khóa <FRAMESET>:
Is the main container tag for the frame. Là thẻ container chính cho khung.
The two attributes of the <FRAMESET> tag are: Hai thuộc tính của thẻ <FRAMESET> là:
ROWS ROWS
COLS CỘT
Ver. Ver. 1.0 1.0
Page 19 Trang 19
The <FRAME> Tag: Các khóa <frame>:
Defines one frame in a <FRAMESET> tag. Xác định một khung hình trong một tag
<FRAMESET>.
The <FRAME> tag is not a container tag and does not have any Các tag <frame> không
phải là một tag container và không có bất kỳ
matching end tag. phù hợp với thẻ kết thúc.
The various attributes of the <FRAME> tag are: Các thuộc tính khác nhau của các tag
<frame> là:
The various attributes of the <FRAME> tag are: Các thuộc tính khác nhau của các tag
<frame> là:
SRC SRC
MARGINWIDTH MARGINWIDTH
MARGINHEIGHT MARGINHEIGHT
SCROLLING Di chuyển
NORESIZE NORESIZE
FRAMEBORDER FRAMEBORDER
FRAMESPACING FRAMESPACING
Ver. Ver. 1.0 1.0
Page 20 Trang 20
The <NOFRAME> tag is used for creating alternate content that Các tag <noframe> được sử
dụng cho việc tạo nội dung thay thế đó
is viewable by nonframe-enabled browsers. có thể xem được bởi nonframe-trình duyệt cho
phép.
You can reference a frame by using the following tags: Bạn có thể tham khảo một khung
bằng cách sử dụng các thẻ sau đây:
NAME attribute of the <FRAME> tag TÊN thuộc tính của thẻ <frame>
TARGET tt ib t Tt mục tiêu IB t
f th f ngày
ANCHOR t ANCHOR t
TARGET attribute of the <ANCHOR> tag Mục tiêu thuộc tính của thẻ <ANCHOR>
The <BASE> tag Các tag <BASE>
Ver. Ver. 1.0 1.0
Page 21 Trang 21
Demo: Creating Frames in a Web Page Demo: Tạo khung hình trong một trang web
Demo: Creating Frames in a Web Page Demo: Tạo khung hình trong một trang web
LeadTheRoad Inc. is one of the leading international travel LeadTheRoad Inc là một trong
những du lịch quốc tế hàng đầu
and tourism group in the United States. và nhóm du lịch tại Hoa Kỳ. The company Công ty
provides services to customers at almost 100 locations spread cung cấp dịch vụ cho khách
hàng tại gần 100 địa điểm lây lan
across more than 30 countries Recently the company has trên hơn 30 quốc gia gần đây công
ty đã có
across more than 30 countries. trên hơn 30 quốc gia. Recently, the company has Gần đây,
công ty đã có
planned to include a Web page on their Web site that will dự kiến bao gồm một trang web
trên trang web của họ rằng sẽ
provide information about the popular chains of hotels in cung cấp thông tin về các dây
chuyền phổ biến của các khách sạn ở
various continents, such as Asia, Europe, Australia, and the các châu lục khác nhau, chẳng
hạn như châu Á, châu Âu, Úc, và
pp
United States. Hoa Kỳ. The list of the continents should always be Danh sách các lục địa nên
luôn luôn
visible in the browser window. hiển thị trong cửa sổ trình duyệt.
Ver. Ver. 1.0 1.0
Page 22 Trang 22
Demo: Creating Frames in a Web Page (Contd.) Demo: Tạo khung hình trong một
trang web (Contd.)
Demo: Creating Frames in a Web Page (Contd.) Demo: Tạo khung hình trong một
trang web (Contd.)
Create a Web page that contains the frames. Tạo một trang web có chứa các khung.
Create a Web page for the banner frame of the main.html file. Tạo một trang web cho khung
banner của file main.html.
Create a Web page for the main frame of the main.html file. Tạo một trang web cho các
khung chính của tập tin main.html.
Create a Web page for the contents frame of the main.html file. Tạo một trang web cho các
khung nội dung của các file main.html.
Create a Web page for the Asia continent Tạo một trang web cho lục địa châu Á
Create a Web page for the Asia continent. Tạo một trang web cho lục địa châu Á.
Create a Web page for the Africa continent. Tạo một trang web cho lục địa châu Phi.
Create a Web page for the North America continent. Tạo một trang web cho các lục địa Bắc
Mỹ.
Create a Web page for the South America continent. Tạo một trang web cho lục địa Nam Mỹ.
Create a Web page for the Australia continent. Tạo một trang web cho các lục địa Úc.
Create a Web page for the Europe continent. Tạo một trang web cho lục địa châu Âu.
Ver. Ver. 1.0 1.0
Page 23 Trang 23
Summary Tóm tắt
Tables are used to display data in a tabular format. Bàn được sử dụng để hiển thị dữ liệu
trong một định dạng bảng.
The basic tags required to create a table are: Các thẻ cơ bản cần thiết để tạo ra một bảng là:
<TABLE> <table>
<TH> <th>
<TR> <tr>
<TD> <td>
<CAPTION> <CAPTION>
<THEAD> <THEAD>
<TBODY> <tbody>
<TFOOT> <TFOOT>
Ver. Ver. 1.0 1.0
Page 24 Trang 24
The attributes of the <TABLE> tag are: Các thuộc tính của thẻ <table> là:
BORDER BIÊN GIỚI
BGCOLOR BGColor
CELLSPACING CELLSPACING
CELLPADDING CELLPADDING
HEIGHT Chiều cao
ALIGN ALIGN
VALIGN VALIGN
BORDERCOLOR BORDERCOLOR
BORDERCOLORLIGHT BORDERCOLORLIGHT
BORDERCOLORDARK BORDERCOLORDARK
FRAME FRAME
RULES QUY
Ver. Ver. 1.0 1.0
RULES QUY
Page 25 Trang 25
Forms allow the user to input data on a Web page. Các hình thức cho phép người dùng nhập
dữ liệu trên một trang Web.
Form tags are used to define the contents of a form. Mẫu thẻ được sử dụng để xác định các
nội dung của biểu mẫu.
The <FORM> tag supports the following attributes: Các tag <form> hỗ trợ các thuộc tính
sau:
NAME TÊN
ACTION HÀNH ĐỘNG
ENCTYPE ENCTYPE
METHOD PHƯƠNG PHÁP
Form elements that can be created in the Web form are: các yếu tố mẫu có thể được tạo ra
dưới dạng Web là:
Form elements that can be created in the Web form are: các yếu tố mẫu có thể được tạo ra
dưới dạng Web là:
Text box Hộp văn bản
Radio buttons Radio nút
Buttons Buttons
Select lists Chọn danh sách
Text area Khu vực văn bản
Ver. Ver. 1.0 1.0
Page 26 Trang 26
The fields of a Web form are created using the <INPUT> Các lĩnh vực của một hình thức
Web được tạo ra bằng cách sử dụng <input>
,,
<SELECT> , <OPTION> , and <TEXTAREA> tags. <SELECT>, <OPTION>, Và
<textarea> thẻ.
The layout of the Web pages can be made flexible by using Cách bố trí của các trang web có
thể được thực hiện linh hoạt bằng cách sử dụng
frames. khung.
FF
ll sẽ
th i ibl li t i th li t ibl
tb di id dit tb di id dit
Frames allow the visible client area to be divided into more Các khung hình cho phép khu
vực khách hàng có thể nhìn thấy được chia thành nhiều hơn
than one subregion. hơn một tiểu vùng.
A <FRAMESET> tag is the main container for the frame. Một tag <FRAMESET> là container
chính cho khung.
Some attributes of the <FRAMESET> tag are: Một số thuộc tính của thẻ <FRAMESET> là:
Some attributes of the <FRAMESET> tag are: Một số thuộc tính của thẻ <FRAMESET> là:
ROWS ROWS
COLS CỘT
Ver. Ver. 1.0 1.0
Page 27 Trang 27
Some attributes of the <FRAME> tag are: Một số thuộc tính của thẻ <frame> là:
MARGINWIDTH MARGINWIDTH
MARGINHEIGHT MARGINHEIGHT
SCROLLING Di chuyển
NORESIZE NORESIZE
FRAMEBORDER FRAMEBORDER
FRAMESPACING FRAMESPACING
The <NOFRAME> tag is used for creating alternate content Các tag <noframe> được sử
dụng cho việc tạo nội dung thay thế
The <NOFRAME> tag is used for creating alternate content Các tag <noframe> được sử
dụng cho việc tạo nội dung thay thế
that is viewable by nonframe-enabled browsers. đó là có thể xem được bởi nonframe-trình
duyệt cho phép.
A frame can be referenced by the: khung hình có thể được tham chiếu bởi:
NAME attribute of the <FRAME> tag. TÊN thuộc tính của thẻ <frame>.
TARGET attribute of the <ANCHOR> tag. Mục tiêu thuộc tính của thẻ <ANCHOR>.
<BASE> tag. <BASE> Tag.
Slide 27 of 27 Slide 27 trên 27
Ver. Ver. 1.0 1.0

IWCD_Session_03.pdf
Page 1 Trang 1
Introduction to Web Content Development Giới thiệu về Phát triển Web Content
In this session, you will learn about: Trong phiên này, bạn sẽ tìm hiểu về:
Special characters in HTML Ký tự đặc biệt trong HTML
Special Effect Tags Hiệu ứng đặc biệt Tags
Ver. Ver. 1.0 1.0
Page 2 Trang 2
Special Characters in HTML Nhân vật đặc biệt trong HTML
Special characters: Ký tự đặc biệt:
Special Characters in HTML Nhân vật đặc biệt trong HTML
Are characters that have a special meaning, when used in Là nhân vật có một ý nghĩa đặc
biệt, khi sử dụng
HTML code. HTML code.
Are interpreted with their special meanings when encountered Được hiểu với ý nghĩa đặc biệt
của họ khi gặp phải
in code. trong mã.
Need to be referenced in a different way to display them as Cần phải được tham chiếu theo
một cách khác để hiển thị chúng như
literals on the screen. các chữ trên màn hình.
HTML HTML
id th f ll i id thứ e sẽ i
tt
ff ff
ii
HTML provides the following two ways of referencing HTML cung cấp những cách sau đây
hai trong số tham chiếu
special characters: ký tự đặc biệt:
Entity numbers Thực thể con số
E tit E tit
Entity names Tên thực thể
Ver. Ver. 1.0 1.0
Page 3 Trang 3
Special Characters in HTML (Contd.) Nhân vật đặc biệt trong HTML (Contd.)
When using entity numbers, specify the American Standard Khi sử dụng các số thực thể, xác
định các tiêu chuẩn Mỹ
Code for Information Interchange (ASCII) value of the Mã Thông tin trao đổi (ASCII) giá trị
của
special character that is to be included in the HTML ký tự đặc biệt đó là để được bao gồm
trong HTML
document. tài liệu.
An ASCII value represents the English characters as Một giá trị ASCII đại diện cho các ký tự
tiếng Anh
numbers, with each letter assigned to a number from 0 to số, mỗi lá thư được gán cho một số
từ 0 đến
127. 127.
To display a special character in an HTML document, Để hiển thị một ký tự đặc biệt trong
một tài liệu HTML,
precede the ASCII value of the character by the ampersand trước giá trị ASCII của ký tự của
dấu và
(&) and the hash (#) symbol. (&) Và băm (#) ký hiệu.
For example, to display the heading of a Web page as Ví dụ, để hiển thị tiêu đề của một trang
Web như
Using <HEAD> Tag , the code will be: Sử dụng <HEAD> Tag, mã sẽ là:
<BODY> <BODY>
Ver. Ver. 1.0 1.0
<H1> Using &#60 HEAD &#62 Tag </H1> <h1> Sử dụng <HEAD> Tag </ H1>
</BODY> </ BODY>
Page 4 Trang 4
The following table lists some characters and their Bảng sau đây liệt kê một số nhân vật và họ
corresponding ASCII values. ASCII tương ứng giá trị.
Character Ký tự
ASCII Value Giá trị ASCII
::
58 58
;;
59 59
<<
60 60
==
61 61
62 62
>>
62 62
??
63 63
@@
64 64
!!
33 33
“"
34 34
##
35 35
$$
36 36
%%
37 37
Ver. Ver. 1.0 1.0
%%
37 37
& Và
38 38
Page 5 Trang 5
When using entity names, specify the HTML entity name for Khi sử dụng tên thực thể, ghi rõ
tên đơn vị HTML
the character. các nhân vật.
HTML entities are special characters used for defining an HTML đơn vị là ký tự đặc biệt
được sử dụng để xác định một
HTML tag. HTML tag.
For example, to display the heading of a Web page as Ví dụ, để hiển thị tiêu đề của một trang
Web như
Using <HEAD> Tag , the code will be: Sử dụng <HEAD> Tag, mã sẽ là:
<BODY> <BODY>
<H1> Using < HEAD > Tag </H1> <h1> Sử dụng <HEAD> Tag </ H1>
</BODY> </ BODY>
Ver. Ver. 1.0 1.0
Page 6 Trang 6
The following table lists some of the special characters used Bảng sau liệt kê một số nhân vật
đặc biệt được sử dụng
in HTML, along with their entity references. trong HTML, cùng với các tham chiếu thực thể
của họ.
Characters/ Nhân vật /
Symbols Ký hiệu
Entity Reference Thực thể tham khảo
Meaning Ý nghĩa
Symbols Ký hiệu
¿¿
¿ ¿
Inverted question mark Ngược dấu hỏi
& Và
& Và
Ampersand Dấu
©©
© ©
Copyright Bản quyền
""
" "
Quotation mark Báo giá nhãn hiệu
ÈE
È E
Capital E with grave accent Capital E với dấu huyền
°°
° °
Degree Bằng cấp
Fraction one half Phần một nửa
½½
½ ½
Fraction one-half Phần một nửa
Ver. Ver. 1.0 1.0
Page 7 Trang 7
Special Effect Tags are the tags used in HTML to enhance Tags Hiệu ứng đặc biệt được các
thẻ được sử dụng trong HTML để tăng cường
the visual appeal of a Web page. kháng cáo hình ảnh của một trang Web.
These tags can be used to change the size and appearance Các thẻ này có thể được sử dụng để
thay đổi kích thước và hình
of the text in a Web page. của văn bản trong một trang Web.
These tags can also be used to add special effects, such as Các thẻ này cũng có thể được sử
dụng để thêm các hiệu ứng đặc biệt, chẳng hạn như
scrolling of the text in an HTML document. di chuyển của văn bản trong một tài liệu HTML.
Some of the special effect tags in HTML are: Một số của các thẻ hiệu ứng đặc biệt trong
HTML là:
pp
gg
<CITE> tag <CITE> Tag
<STRONG> tag <STRONG> Tag
<MARQUEE> tag <MARQUEE> Tag
QQ
gg
<BIG> tag <BIG> Tag
<SMALL> tag <SMALL> Tag
Ver. Ver. 1.0 1.0
Page 8 Trang 8
Special Effect Tags (Contd.) Hiệu ứng đặc biệt Tags (Contd.)
<CITE> Tag: <CITE> Tag:
Is used to cite a particular book, journal, or Web site as Được sử dụng để trích dẫn một cuốn
sách cụ thể, tạp chí, hoặc trang web như
reference. tham khảo.
The following example illustrates the use of the <CITE> tag: Ví dụ sau minh họa việc sử
dụng các tag <CITE>:
<BODY> <BODY>
To get more information about the HTML, you can Để có thêm thông tin về HTML, bạn có
thể
refer: tham khảo:
<CITE>HTML: The Definitive Guide </CITE> by <CITE> HTML: The Definitive Guide </
CITE> bằng
<CITE>HTML: The Definitive Guide </CITE> by <CITE> HTML: The Definitive Guide </
CITE> bằng
O'Reilly publication O'Reilly công bố
</BODY> </ BODY>
The preceding code will generate a result as shown in the Các mã trước đó sẽ tạo ra một kết
quả như thể hiện trong
f ll i e sẽ i
fi fi
following figure. sau con số.
Ver. Ver. 1.0 1.0
Page 9 Trang 9
<STRONG> Tag: <STRONG> Tag:
Is used to provide strong emphasis or boldface to the text in an Được sử dụng để cung cấp
nhấn mạnh hoặc in đậm vào văn bản trong một
The following example illustrates the use of the <STRONG> tag: Ví dụ sau minh họa việc sử
dụng các tag <STRONG>:
<Body> <body>
<P> One Audio CD is <STRONG>FREE</STRONG> with <P> Một Audio CD là
<STRONG> miễn phí </ STRONG> với
every purchase you make in this store</P> hàng mua bạn thực hiện trong cửa hàng này </ P>
</Body> </ Body>
The preceding code will generate a result as shown in the Các mã trước đó sẽ tạo ra một kết
quả như thể hiện trong
following figure. sau con số.
Ver. Ver. 1.0 1.0
Page 10 Trang 10
<MARQUEE> Tag: <MARQUEE> Tag:
Special Effect Tags (Contd.) Đặc biệt có hiệu lực Tags (Contd.)
Is used to make text slide or scroll in a particular region of an Được sử dụng để làm cho trình
chiếu văn bản hoặc di chuyển trong một khu vực riêng biệt của một
Has attributes to set the behavior, direction, width, and color of Có thuộc tính để thiết lập
hành vi, hướng, chiều rộng, và màu sắc của
the affected text. các văn bản bị ảnh hưởng.
The following example illustrates the use of the <MARQUEE> Ví dụ sau minh họa việc sử
dụng các <MARQUEE>
tag: tag:
<BODY> <BODY>
<MARQUEE BEHAVIOR= slide DIRECTION="left" WIDTH <MARQUEE HÀNH VI =
slide chỉ đạo = "left" WIDTH
=250 BGCOLOR=cyan> This is a <MARQUEE> = 250 BGColor = cyan> Đây là một
<MARQUEE>
text</MARQUEE> văn bản </ MARQUEE>
</BODY> </ BODY>
Ver. Ver. 1.0 1.0
Page 11 Trang 11
<BIG> Tag: <BIG> Tag:
Is used to increase the font size of the text to the next larger Được sử dụng để tăng kích thước
font chữ của văn bản để lớn hơn tiếp theo
size. kích thước.
The following example illustrates the use of the <BIG> tag: Ví dụ sau minh họa việc sử dụng
các tag <BIG>:
<Body> <body>
<P> You will get <BIG>20% discount</BIG> on every <P> Bạn sẽ nhận được <BIG> 20%
giảm giá </ BIG> trên tất cả các
purchase you make in this store.</P> mua, bạn thực hiện trong cửa hàng này. </ P>
</Body> </ Body>
The preceding code will generate a result as shown in the following Các mã trước đó sẽ tạo ra
một kết quả như sau
figure. con số.
Ver. Ver. 1.0 1.0
Page 12 Trang 12
<SMALL> Tag: <SMALL> Tag:
Is used to decrease the font size of the text to the next smaller Được sử dụng để giảm kích cỡ
phông chữ của văn bản để các nhỏ hơn kế tiếp
size. kích thước.
The following example illustrates the use of the <SMALL> tag: Ví dụ sau minh họa việc sử
dụng các tag <SMALL>:
<Body> <body>
<P>You will get 20% discount on every purchase you <P> Bạn sẽ nhận được giảm giá 20%
trên tất cả các bạn mua hàng
make in this store.</P> làm trong cửa hàng này. </ P>
<P><SMALL>Conditions Apply </SMALL></P> <P> <SMALL> Điều kiện áp dụng </
SMALL> </ P>
<P><SMALL>Conditions Apply.</SMALL></P> <P> <SMALL> Điều kiện áp dụng. </
SMALL> </ P>
</Body> </ Body>
The preceding code will generate a result as shown in the following Các mã trước đó sẽ tạo ra
một kết quả như sau
figure. con số.
Ver. Ver. 1.0 1.0
Page 13 Trang 13
Best Practices Thực tiễn tốt nhất
Ensure that the tags in your HTML document are nested Đảm bảo rằng các thẻ trong tài liệu
HTML của bạn được lồng
properly. đúng cách. For example, consider an HTML document Ví dụ, hãy xem xét một tài
liệu HTML
containing tags in the following sequence: có chứa các thẻ trong trình tự sau đây:
<TAG1><TAG2><TAG3> Text </TAG3></TAG1></TAG2> <TAG1> <TAG2> <TAG3>
Văn bản </ TAG3> </ TAG1> </ TAG2>
Using such a sequence is not a good practice. Sử dụng như một trình tự không phải là một
thực hành tốt. Browsers such Các trình duyệt như vậy
as Internet Explorer might ignore this type of sequence and như Internet Explorer có thể bỏ
qua loại hình này và trình tự
may display the content correctly. có thể hiển thị các nội dung chính xác. However, Netscape
Tuy nhiên, Netscape
Navigator may not display the content properly. Navigator có thể không hiển thị nội dung
đúng cách.
When you create a starting tag, create the corresponding Khi bạn tạo một thẻ bắt đầu, tạo ra
tương ứng
closing tag at the same time. thẻ đóng cùng một lúc. This will help you maintain the Điều này
sẽ giúp bạn duy trì
correct nesting of tags in your HTML document. chính xác làm tổ của các thẻ trong tài liệu
HTML của bạn. For example, Ví dụ,
when you create the <HTML> tag, create the </HTML> tag khi bạn tạo các tag <HTML>,
tạo ra các </ HTML> tag
also. cũng. All tags that need to nested within these tags, can then Tất cả các thẻ mà cần phải
được lồng trong những thẻ này, có thể sau đó
bb
b dd dbt b đ DBT
th thứ
HTML HTML
d /HTML t d / HTML t
Ver. Ver. 1.0 1.0
be embedded between the <HTML> and </HTML> tags. được nhúng giữa <HTML> và </
HTML> thẻ.
Page 14 Trang 14
Best Practices (Contd.) Thực tiễn tốt nhất (Contd.)
Structure the code properly, so that it can be easily Cấu trúc mã đúng, để nó có thể dễ dàng
understood. hiểu rõ. The following figure shows two samples of HTML Hình dưới đây cho
thấy hai mẫu của HTML
code. mã.
<HTML><HEAD><TITLE>My First Document <html> <head> <title> Tài liệu đầu tiên của
tôi
<HTML> <HTML>
<HTML><HEAD><TITLE>My First Document <html> <head> <title> Tài liệu đầu tiên của
tôi
</TITLE> </HEAD> <BODY><H1>Best Coding </ TITLE> </ HEAD> <BODY> <h1>
Coding nhất
Practices</H1></BODY></HTML> Thực tiễn </ H1> </ BODY> </ HTML>
<HTML> <HTML>
<HEAD> <HEAD>
<TITLE> My First Document </TITLE> <title> Tài liệu đầu tiên của tôi </ TITLE>
</HEAD> </ HEAD>
<BODY> <BODY>
<H1> Best Coding Practices </H1> <h1> Coding nhất Thực tiễn </ H1>
</BODY> </ BODY>
</HTML> </ HTML>
Although, both the preceding code samples are same and Mặc dù, cả các mẫu mã trước đó là
cùng
gi e the same o tp t the HTML code in the second sample e gi o tp t mã HTML trong mẫu thứ
hai
Ver. Ver. 1.0 1.0
give the same output, the HTML code in the second sample cung cấp cho cùng một sản
lượng, mã HTML trong mẫu thứ hai
is easier to read and understand. là dễ đọc và dễ hiểu.
Page 15 Trang 15
The various elements of a form should be arranged inside a Các yếu tố khác nhau tạo thành
một nên được bố trí bên trong một
table to ensure proper alignment of the various form elements bảng để đảm bảo sự liên kết
hợp của các yếu tố hình thức khác nhau
with each other. với nhau. Consider the following code snippet that Xem xét các đoạn mã sau
đây
creates a form without using a table: tạo ra một hình thức mà không cần sử dụng một bảng:
<HTML> <HTML>
<BODY> <BODY>
<FORM <MẪU
il il
@ il @ Il
li li
bj bj
ACTION="mailto:xyz@simplesolutions.com?Subject=Fe Hoạt động = "mailto:
xyz@simplesolutions.com Fe? Tiêu đề =
edback" Method=”post”> edback "Phương pháp =" post ">
User Name: <INPUT TYPE="text" NAME="txtname"><br> User Name: <input type="text"
NAME="txtname"> <br>
Password: <INPUT TYPE="password" Mật khẩu: <INPUT TYPE = "password"
Password: <INPUT TYPE password Mật khẩu: <INPUT TYPE mật khẩu
NAME="txtpass"><br> Comments: <TEXTAREA rows=10 NAME = "txtpass"> <br> Bình
luận: <hàng TextArea = 10
cols=10></TEXTAREA> <INPUT TYPE = "Submit" VALUE cols = 10> </ TextArea>
<INPUT TYPE = "Gửi" GIÁ TRỊ
= "Submit Your Feedback“> </FORM> </BODY> </HTML> = "Gửi tin phản hồi của bạn">
</ FORM> </ <> Thân /> HTML
Ver. Ver. 1.0 1.0
Page 16 Trang 16
The following figure displays the output of the preceding Các con số sau đây sẽ hiển thị đầu
ra của trước
code. mã.
Now, consider the following code snippet that uses a table to Bây giờ, hãy xem xét các đoạn
mã sau đây có sử dụng một bảng
,,
gg
pp Trang
organize the elements on a form. tổ chức các yếu tố trên một biểu mẫu.
<HTML> <HTML>
<BODY> <BODY>
Ver. Ver. 1.0 1.0
<FORM ACTION="mailto:xyz@simplesolutions.com" <MẪU hoạt động = "mailto:
xyz@simplesolutions.com"
Method=”post”> Phương pháp = "post">
Page 17 Trang 17
<TABLE> <table>
<TR> <tr>
<TD>User Name:</TD> <td> User Name: </ TD>
<TD><INPUT TYPE="text" NAME="txtname"></TD> <td> <input Type="text"
NAME="txtname"> </ TD>
</TR> </ TR>
<TR> <tr>
<TD>Password:</TD> <td> Mật khẩu: </ TD>
<TD><INPUT TYPE="password” <td> <INPUT TYPE = "password"
NAME="txtpass"></TD> NAME = "txtpass"> </ TD>
</TR> </ TR>
<TR> <tr>
<TD>Comments:</TD> <td> Bình luận: </ TD>
<TD><TEXTAREA rows=10 <td> <TextArea hàng = 10
Ver. Ver. 1.0 1.0
cols=10></TEXTAREA></TD> cols = 10> </ TextArea> </ TD>
</TR> </ TR>
Page 18 Trang 18
<TR> <tr>
<TD><INPUT TYPE = "Submit" VALUE = "Submit <td> <INPUT TYPE = "Gửi" VALUE
= "Gửi
Your Feedback"></TD> Thông tin phản hồi của bạn "> </> TD
</TR> </ TR>
</TABLE> </ TABLE>
</FORM> </BODY></HTML> </ FORM> </ BODY> </ HTML>
The following figure displays the output of the preceding Các con số sau đây sẽ hiển thị đầu
ra của trước
code. mã.
Ver. Ver. 1.0 1.0
Page 19 Trang 19
Tips and Tricks Mẹo và Tricks
Publishing HTML Code on a Web Page: Xuất bản HTML Code trên một trang web:
You may need to display HTML source code on your Web pages Bạn có thể cần để hiển thị
mã nguồn HTML trên các trang Web của bạn
to explain the use of the code, without the code being executed để giải thích việc sử dụng các
mã, mà không có mã đang được thực thi
by the browser. của trình duyệt. For example, in an HTML tutorial Web site, you Ví dụ, trong
một bài hướng dẫn trang web HTML, bạn
may need to show some HTML code For such cases you can có thể cần phải hiển thị một số
mã HTML Đối với trường hợp như vậy bạn có thể
may need to show some HTML code. có thể cần phải hiển thị một số mã HTML. For such
cases, you can Đối với trường hợp này, bạn có thể
use the <XMP> tag that allows you to include the examples of sử dụng thẻ <XMP> cho phép
bạn bao gồm các ví dụ của
the source code on your Web pages. mã nguồn trên các trang web của bạn. When the Web
browser Khi trình duyệt Web
encounters the <XMP> tag, it does not execute the content gặp gỡ các tag <XMP>, nó không
thực hiện các nội dung
gg
enclosed within these tags. kèm theo trong các thẻ. The following example illustrates the Ví
dụ sau minh họa
use of the <XMP> tag: sử dụng các tag <XMP>:
<HTML> <HTML>
<BODY> <BODY>
Consider the following code snippet: Xem xét các đoạn mã sau đây:
<XMP> <XMP>
<HTML> <HTML>
Ver. Ver. 1.0 1.0
Page 20 Trang 20
Tips and Tricks (Contd.) Mẹo và Tricks (Contd.)
<BODY bgcolor="blue"> <body Bgcolor="blue">
<H1>Welcome Users</H1> <h1> Chào mừng thành viên </ H1>
<IMG src="b.gif" height=40 width=40 alt="Flower"> <img Src="b.gif" height=40 width=40
alt="Flower">
</BODY> </ BODY>
</HTML> </ HTML>
</XMP> </ XMP>
</BODY> </ BODY>
</HTML> </ HTML>
The following figure displays the output of the preceding code. Các con số sau đây sẽ hiển thị
đầu ra của mã trước đó.
Ver. Ver. 1.0 1.0
Page 21 Trang 21
Enhancing Form Display: Tăng cường Mẫu Hiển thị:
Internet Explorer 4.0 and later support several features to Internet Explorer 4.0 và sau đó hỗ
trợ nhiều tính năng để
enhance the organization and layout of a form. tăng cường tổ chức và bố trí của một biểu
mẫu. Some of these Một số các
features are: tính năng này là:
Th Th
tt
U dt U dt
ltd ltd
tlbli tlbli
The FIELDSET tag: Used to group related controls by placing Các fieldset tag: Được sử
dụng để điều khiển nhóm liên quan bằng cách đặt
them together inside a bordered field. chúng lại với nhau bên trong một lĩnh vực giáp. The
syntax of the Cú pháp của
FIELDSET tag is: Tag fieldset là:
<FIELDSET> controls to be grouped </FIELDSET> <FIELDSET> Điều khiển được nhóm
lại </ fieldset>
The LEGEND tag: Used to provide a title to the field. Các LEGEND tag: Được sử dụng để
cung cấp một tiêu đề cho lĩnh vực này. The syntax of Cú pháp của
the LEGEND tag is: các tag LEGEND là:
<LEGEND> Title for the fields </LEGEND> <LEGEND> Đề cho các lĩnh vực </
LEGEND>
The ACCESSKEY attribute: Used to specify a keyboard Các Accesskey thuộc tính: Sử
dụng để xác định một bàn phím
The ACCESSKEY attribute: Used to specify a keyboard Các Accesskey thuộc tính: Sử
dụng để xác định một bàn phím
combination to access the controls in the form. kết hợp để truy cập các điều khiển vào biểu
mẫu. The syntax of the Cú pháp của
ACCESSKEY attribute is: Accesskey thuộc tính là:
<INPUT ACCESSKEY = “key combination”> <input Accesskey = "key combination">
Ver. Ver. 1.0 1.0
Page 22 Trang 22
The following example illustrates the use of the FIELDSET and Ví dụ sau minh họa việc sử
dụng các fieldset và
LEGEND elements as well as the ACCESSKEY attribute: LEGEND yếu tố cũng như các
thuộc tính Accesskey:
<HTML> <HTML>
<BODY> <BODY>
<FORM> <form>
 yếu tố ->
<FIELDSET STYLE="height: 100; width: 200“> <FIELDSET STYLE="height: 100; width:
200">
 đến các lĩnh vực ->
<LEGEND>Login Information</LEGEND> <LEGEND> Thông tin Đăng nhập </
LEGEND>
<TABLE> <table>
<TR> <tr>
<TD>  <td> <- Nhấn mạnh U thư Tên người
dùng ->
<LABEL><SPAN STYLE = "text-decoration: <label> <SPAN STYLE = "text-decoration:
Ver. Ver. 1.0 1.0
underline;">U</SPAN>sername nhấn mạnh, "> U </ SPAN> sername
</LABEL> </TD><TD> </ LABEL> </ td> <td>
Page 23 Trang 23
 <- Chỉ định các phím truy cập cho tên
người dùng ->
<INPUT TYPE = "text" NAME = "txtUsername" <INPUT TYPE = "text" NAME =
"txtUsername"
ACCESSKEY = "U"> </TD> </TR> Accesskey = "U"> </ TD> </ TR>
<TR> <TD> <tr> <td>
 <- Nhấn mạnh chữ P ->
<! <! Underlining the letter P > Nhấn mạnh chữ P>
<LABEL><SPAN STYLE = "text-decoration: <label> <SPAN STYLE = "text-decoration:
underline;">P</SPAN>assword nhấn mạnh: "> P </ SPAN> assword
</LABEL> </TD> </ LABEL> </ TD>
<TD> <td>
 lĩnh vực ->
<INPUT TYPE = "text" NAME = "txtPassword" <INPUT TYPE = "text" NAME =
"txtPassword"
INPUT TYPE INPUT TYPE
text NAME TÊN văn bản
txtPassword txtPassword
ACCESSKEY = "P"> Accesskey = "P">
</TD> </TR> </TABLE> </FIELDSET> </ TD> </ TR> </ TABLE> </ fieldset>
</FORM> </ FORM>
Ver. Ver. 1.0 1.0
</BODY> </ BODY>
</HTML> </ HTML>
Page 24 Trang 24
Ver. Ver. 1.0 1.0
Page 25 Trang 25
FAQs Câu hỏi thường gặp
Can I create links without underline? Tôi có thể tạo liên kết mà không có gạch chân?
Yes, you can create links without underline. Có, bạn có thể tạo ra các liên kết mà không có
gạch chân. You can use the Bạn có thể sử dụng
STYLE attribute of the anchor element as illustrated in the STYLE thuộc tính của phần tử
neo như minh họa trong
following code to create links without underline: sau mã để tạo ra các liên kết mà không cần
nhấn mạnh:
\\
\\
<A HREF ="C:\IMAGE\CIRCLE.BMP" STYLE ="TEXT- <A HREF = "C: \ IMAGE \
CIRCLE.BMP" STYLE = "TEXT-
DECORATION: =NONE"> TRANG TRÍ: = NONE ">
How can I make the background image of my Web page Làm thế nào tôi có thể làm cho hình
ảnh nền của trang Web của tôi
stationary? văn phòng phẩm?
Stationary background images remain in one place even when Máy ảnh nền vẫn ở một nơi
ngay cả khi
scrolling through the Web page. di chuyển qua các trang web. Only the text will move. Chỉ
có văn bản sẽ di chuyển.
To create this effect you need to place the following code Để tạo hiệu ứng này bạn cần phải
đặt đoạn mã sau
To create this effect, you need to place the following code Để tạo hiệu ứng này, bạn cần đặt
đoạn mã sau
within the <BODY> tag: trong thẻ <BODY>:
<body background ="yourimage.gif" <Cơ thể nền = "yourimage.gif"
bgproperties="Fixed"> bgproperties = "cố định">
Ver. Ver. 1.0 1.0
gp p gp p
Page 26 Trang 26
FAQs (Contd.) Câu hỏi thường gặp (Contd.)
The preceding code, displays the image, yourimage.gif, in the Các mã trước, hiển thị hình
ảnh, yourimage.gif, trong
background of the Web page. nền của trang Web. The bgproperties attribute Các
bgproperties thuộc tính
with the value, Fixed , will make the background image với giá trị, cố định, sẽ làm cho
hình ảnh nền
stationary when scrolling through the Web page. văn phòng phẩm khi di chuyển qua các
trang web.
How can I place text over an image using HTML? Làm thế nào tôi có thể ra văn bản trên một
hình ảnh bằng cách sử dụng HTML?
How can I place text over an image, using HTML? Làm thế nào tôi có thể ra văn bản qua
hình ảnh, bằng cách sử dụng HTML?
You can place text over an image by using the <TD> tag in a Bạn có thể đặt văn bản trên ảnh
bằng cách sử dụng các tag <td> trong một
table. bảng. To place text over an image: Để đặt văn bản qua hình ảnh:
Use the BACKGROUND attribute of the <TD> tag to place the Sử dụng thuộc tính BỐI CẢNH
của thẻ <td> đặt
Use the BACKGROUND attribute of the <TD> tag to place the Sử dụng thuộc tính BỐI CẢNH
của thẻ <td> đặt
image as background of table data. hình ảnh như là nền tảng của các dữ liệu bảng.
Place the text between the <TD> and </TD> tags. Đặt văn bản giữa các <td> và </ TD>
thẻ.
Consider the following code: Xem xét các mã sau đây:
<HTML> <HTML>
<HEAD> <HEAD>
<TABLE border="0" cellpadding="0" cellspacing="0"> <table Border="0" cellpadding="0"
cellspacing="0">
<TR> <TD idth "400" hi ht "500" <tr> <TD idth "400" hi ht "500"
Ver. Ver. 1.0 1.0
<TR> <TD width="400" height="500" <tr> <TD width = "400" height = "500"
background="image.jpg" valign="center"> nền = "image.jpg" valign = "trung tâm">
Page 27 Trang 27
<FONT SIZE="+5" color=""><BR><BR><BR>This is <FONT SIZE="+5" color=""> <BR>
<BR> này
tt tt
ii
/FONT /TD / FONT / TD
text over an image </FONT></TD> văn bản qua hình ảnh một </ FONT> </ TD>
</TR> </ TR>
</TABLE> </ TABLE>
</HEAD> </ HEAD>
</HTML> </ HTML>
The preceding code creates a table with image.jpg as the Các mã trước đó tạo ra một bảng với
image.jpg là
background of one of its cells and places text inside the cell. nền của một trong các tế bào của
nó và văn bản địa điểm bên trong tế bào.
Ver. Ver. 1.0 1.0
Page 28 Trang 28
Challenge Thách thức
The _________ attribute of the image tag is used to specify Các thuộc tính _________ của
thẻ hình ảnh được sử dụng để xác định
that the image will be used as an image map. mà hình ảnh sẽ được sử dụng như một bản đồ
hình ảnh.
Answer: Trả lời:
usemap usemap
Ver. Ver. 1.0 1.0
Page 29 Trang 29
Challenge (Contd.) Thách thức (Contd.)
The _____________ type value of the <INPUT> tag is used Các loại _____________ giá trị
của thẻ được sử dụng <input>
to create invisible fields. để tạo ra các lĩnh vực vô hình.
hidden ẩn
Ver. Ver. 1.0 1.0
Page 30 Trang 30
The ______________ attribute allows control over the Các thuộc tính ______________ cho
phép kiểm soát
space inserted between the cell data and the cell wall in a không gian giữa các dữ liệu đưa
vào tế bào và tế bào trong một bức tường
table. bảng.
cellpadding cellpadding
Ver. Ver. 1.0 1.0
Page 31 Trang 31
You have created a hyperlink on a Web page. Bạn đã tạo ra một siêu liên kết trên một trang
Web. You want to Bạn muốn
open the Web page corresponding to the hyperlink on a new mở trang web tương ứng với các
siêu liên kết trên một mới
Web page. Trang web. How will you address the given requirement? Làm thế nào bạn sẽ giải
quyết các yêu cầu nào?
You can use the TARGET attribute of the <A> tag to open the Bạn có thể sử dụng thuộc tính
mục tiêu của thẻ <A> để mở
Web page corresponding to a hyperlink in a new blank window. Trang web tương ứng với
một siêu liên kết trong một cửa sổ trống mới.
You need to provide the reserved name blank as the target Bạn cần phải cung cấp tên dành để
trống là mục tiêu
pp
__
gg
name. tên. The following example illustrates how to use this tag: Ví dụ sau minh họa cách sử
dụng thẻ này:
<A HREF=”url.html” TARGET=”_blank”> <A HREF="url.html" target="_blank">
Ver. Ver. 1.0 1.0
Page 32 Trang 32
You have created a hyperlink on a Web page. Bạn đã tạo ra một siêu liên kết trên một trang
Web. You want the Bạn muốn
hyperlink to link to a particular area on another Web page. siêu liên kết để liên kết đến một
khu vực cụ thể trên một trang web khác.
How will you address this requirement? Làm thế nào bạn sẽ giải quyết yêu cầu này?
By default, a hyperlink takes the user to the beginning of the Theo mặc định, một liên kết đưa
người sử dụng để đầu
linked Web page. liên kết trang web. To enable the hyperlink to jump to a Để kích hoạt các
siêu liên kết để chuyển đến một
pg pg
yp yp
jj
pp
particular text block in a new Web page, you need to identify đặc biệt là khối văn bản trong
một trang web mới, bạn cần phải xác định
and name the text location with the help of the NAME attribute và tên các vị trí văn bản với sự
giúp đỡ của các thuộc tính NAME
of an <A> tag. của một tag <A>. Then, you need to specify the name of the Sau đó, bạn cần
phải chỉ định tên của
location along with the Web page name while creating the vị trí cùng với tên trang web trong
khi tạo
location along with the Web page name, while creating the vị trí cùng với tên trang web,
trong khi tạo
hyperlink. siêu liên kết. The syntax for naming a location in the linked Web Cú pháp để đặt
tên một vị trí trong trang web liên kết
page is <A NAME =”location_name”>. trang <A TÊN ="location_name">.
The preceding code will be placed at the text location where Các mã trước đó sẽ được đặt tại
vị trí văn bản hợp
Ver. Ver. 1.0 1.0
pp
gg
pp
you would like the user to view a particular text block in a Web bạn muốn người dùng xem
một khối văn bản cụ thể trong một Web
page when the hyperlink is clicked. trang khi liên kết được click.
Page 33 Trang 33
The syntax for creating a link that refers to a named location in Các cú pháp cho việc tạo ra
một liên kết mà dùng để chỉ một vị trí có tên trong
a Web page is: một trang web là:
<A href=”filename.html#location_name”> <A Href="filename.html#location_name">
……….</A> ... ... ...>. </ A
Th Th
di di
dd
ill b bệnh b
ll
dh dh
hh
The preceding code will be placed where you create the Các mã trước đó sẽ được đặt nơi bạn
tạo ra
hyperlink in a Web page. siêu liên kết trong một trang Web.
Ver. Ver. 1.0 1.0

IWCD_Session_05.pdf
Page 1 Trang 1
JavaScript Fundamentals JavaScript cơ bản
Identify the structure of a JavaScript program Xác định cấu trúc của một chương trình
JavaScript
Define variables and data Xác định các biến và dữ liệu
Control program flow Chương trình điều khiển lưu lượng
Use functions and events Sử dụng chức năng và sự kiện
Ver. Ver. 1.0 1.0
Page 2 Trang 2
Overview of JavaScript Tổng quan về JavaScript
Overview of JavaScript Tổng quan về JavaScript
Scripting with JavaScript: Viết kịch bản với JavaScript:
A scripting language is a programming language that can be Một ngôn ngữ kịch bản là một
ngôn ngữ lập trình có thể được
used for Web-based programming. được sử dụng để lập trình trên nền Web.
JavaScript is extensively used in HTML documents to validate JavaScript được sử dụng rộng
rãi trong các tài liệu HTML để xác nhận
end-user input. người dùng cuối đầu vào.
Ver. Ver. 1.0 1.0
Page 3 Trang 3
Overview of JavaScript (Contd.) Tổng quan về JavaScript (Contd.)
JavaScript: JavaScript:
Is object-based Là dựa trên đối tượng
Is event-driven Là hướng sự kiện
Is platform-independent Là nền tảng độc lập
Enables rapid development Cho phép nhanh chóng phát triển
Is easy to learn Là dễ học
Ver. Ver. 1.0 1.0
Page 4 Trang 4
Structure of a JavaScript Program: Cấu trúc của một chương trình JavaScript:
The <SCRIPT> and </SCRIPT> tags are used to mark the Các <script> và </
SCRIPT> thẻ được sử dụng để đánh dấu
beginning and end of the JavaScript code. đầu và cuối của mã JavaScript.
The <SCRIPT> tag may contain the LANGUAGE attribute, Các tag <script> có thể chứa
các thuộc tính NGÔN NGỮ,
which indicates the scripting language to be used for writing mà chỉ ra các ngôn ngữ kịch bản
được sử dụng để viết
the code. mã.
Ver. Ver. 1.0 1.0
Page 5 Trang 5
The following code demonstrates the inclusion of Các mã sau đây thể hiện sự bao gồm của
JavaScript code in an HTML file: Mã JavaScript trong một tập tin HTML:
<HTML> <HTML>
<HEAD> <HEAD>
<TITLE>Displaying Message</TITLE> <title> Hiển thị tin nhắn </ TITLE>
</HEAD> </ HEAD>
<BODY> <BODY>
<SCRIPT LANGUAGE="JavaScript"> <script LANGUAGE="JavaScript">
/* Prints “Hello World! / * In "Xin chào thế giới! on the screen.*/ trên màn hình .* /
document.write(“Hello World!”); document.write ("Hello World!");
</SCRIPT> </ SCRIPT>
</BODY> </ BODY>
</HTML> </ HTML>
Ver. Ver. 1.0 1.0
Page 6 Trang 6
Comparing Server-side and Client-side Applications: So sánh phía máy chủ và các ứng dụng
phía máy khách:
Client-side JavaScript Client-side JavaScript
Server-side JavaScript Server-side JavaScript
Client-side scripts provide a front-end to Client-side script cung cấp một đầu cuối đến
Web sites for validating and processing Các trang web để phê chuẩn và chế biến
Server-side scripts provide a back-end to Kịch bản phía máy chủ cung cấp một back-end
Web sites for processing client requests Các trang web cho các yêu cầu của khách hàng chế
biến
client requests. khách hàng yêu cầu.
on the Web server. trên máy chủ Web.
Client-side script is embedded into an -Side script Khách hàng được nhúng vào một
HTML page and is executed by a Web HTML trang và được thực hiện bởi một web
Server-side script is embedded into an -Side script Server được nhúng vào một
HTML page and is executed on a Web HTML trang và được thực hiện trên một trang web
server. máy chủ.
Client-side scripts are mostly used to Client-side script này chủ yếu là dùng để
validate the data entered by the users. chứng thực dữ liệu nhập bởi người sử dụng.
Server-side scripts are mostly used to Server-side script này chủ yếu là dùng để
handle database-related requests and xử lý các yêu cầu liên quan đến cơ sở dữ liệu và
manipulate data. thao tác dữ liệu.
The client-side scripts are visible to the Các kịch bản phía máy khách có thể nhìn thấy đến
users người sử dụng
The server-side scripts are not visible to Các kịch bản phía máy chủ không thể nhìn thấy
the users because the script statements người sử dụng vì kịch bản báo cáo
users. người sử dụng.
the users because the script statements người sử dụng vì kịch bản báo cáo
get processed at the server-side and only được chế biến ở phía máy chủ và chỉ
the output of the script, in HTML form, is đầu ra của kịch bản, trong HTML hình thức, là
sent to the browser. gửi đến trình duyệt.
Statements are embedded within Báo cáo được nhúng vào trong
<SCRIPT> </SCRIPT> tags <script> </ SCRIPT> thẻ
Statements are embedded within Báo cáo được nhúng vào trong
<SERVER></SERVER> tags <SERVER> </ SERVER> thẻ
Ver. Ver. 1.0 1.0
<SCRIPT> </SCRIPT> tags. <script> </ SCRIPT> thẻ.
<SERVER></SERVER> tags. <SERVER> </ SERVER> thẻ.
Page 7 Trang 7
Building Blocks of a JavaScript Program: Xây Dựng của một chương trình JavaScript:
Variables: Variables are used to store values in computer Biến: Các biến được sử dụng để lưu
trữ các giá trị trong máy tính
memory. bộ nhớ. These values can be referenced later in the Những giá trị này có thể được
tham chiếu sau này trong
program. chương trình. The values to be stored can be of different types, Các giá trị được lưu
trữ có thể được các loại khác nhau,
such as numbers strings and boolean values chẳng hạn như số các chuỗi và các giá trị boolean
such as, numbers, strings, and boolean values. chẳng hạn như, số, chuỗi, và các giá trị
boolean.
Operators: Operators are used to perform computations on Các nhà khai thác: Các nhà khai
thác được sử dụng để thực hiện các tính toán về
variables and constants. các biến và hằng số. Operators can be of different types, Các nhà
khai thác có thể được các loại khác nhau,
such as, arithmetic, string, assignment, or relational operators. chẳng hạn như, số học, chuỗi,
chuyển nhượng, hoặc toán tử quan hệ.
such as, arithmetic, string, assignment, or relational operators. chẳng hạn như, số học, chuỗi,
chuyển nhượng, hoặc toán tử quan hệ.
Expressions: Expressions are a combination of values, Biểu thức: Biểu thức là một sự kết hợp
của các giá trị,
variables, and operators and are used to perform biến, và các nhà khai thác và được sử dụng
để thực hiện
computations. tính toán.
Functions: Functions are a block of statements that perform a Chức năng: Chức năng là một
khối các câu lệnh để thực hiện một
particular task. nhiệm vụ cụ thể.
Ver. Ver. 1.0 1.0
Page 8 Trang 8
Rules and Conventions Used in JavaScript: Công ước quy định và được sử dụng trong
JavaScript:
Semicolon: JavaScript does not require you to use a Dấu chấm phẩy: JavaScript không yêu
cầu bạn phải sử dụng
semicolon after each statement to indicate the end of the dấu chấm phẩy sau mỗi câu lệnh để
chỉ kết thúc
statement. tuyên bố. However, when two or more statements are written Tuy nhiên, khi hai
hoặc nhiều báo cáo được viết
on a single line they must be separated by a semicolon trên một dòng duy nhất họ phải được
phân cách bởi dấu chấm phẩy
on a single line, they must be separated by a semicolon. trên một dòng đơn, thì phải được
phân cách bằng dấu chấm phẩy.
Comments: JavaScript uses comment indicators to place Bình luận: JavaScript sử dụng các
chỉ số bình luận để đặt
comments in a HTML document. ý kiến trong một tài liệu HTML.
Quotes: You can use either double quotation marks (" ") or Thống kê: Bạn có thể sử dụng dấu
ngoặc kép, hoặc gấp đôi (""), hoặc
Quotes: You can use either double quotation marks ( ) or Thống kê: Bạn có thể sử dụng dấu
ngoặc kép, hoặc gấp đôi () hoặc
single quotation marks (' ') to enclose a string of characters. dấu ngoặc đơn ('') để gửi kèm
theo một chuỗi ký tự.
Case Sensitivity: JavaScript is case-sensitive scripting Trường hợp nhạy: JavaScript là trường
hợp nhạy cảm với kịch bản
language. ngôn ngữ.
gg gg
Ver. Ver. 1.0 1.0
Page 9 Trang 9
Working with Variables and Data Làm việc với các biến và dữ liệu
Working with Variables and Data Làm việc với các biến và dữ liệu
To store the values entered by the user in a Web page, you Để lưu trữ các giá trị nhập vào bởi
người sử dụng trong một trang web, bạn
can use variables. có thể sử dụng các biến.
JavaScript uses certain words called keywords and JavaScript sử dụng một số từ được gọi là
các từ khoá và
reserved words. dành từ.
Keywords and reserved words cannot be used for variable Từ khoá và từ dành riêng không
thể được sử dụng cho biến
or function names. hoặc chức năng tên.
Keywords are predefined identifiers that form the Từ khoá được xác định trước định danh đã
hình thành
yy
pp
foundation of JavaScript. nền tảng của JavaScript.
Keywords perform unique pre-defined functions, such as Từ khoá thực hiện được xác định
trước các chức năng độc đáo, chẳng hạn như
declaring variables ( var ) and defining functions khai báo biến (var) và chức năng xác
định
gg
((
))
gg
( function ). (Chức năng).
Ver. Ver. 1.0 1.0
Page 10 Trang 10
Working with Variables and Data (Contd.) Làm việc với các biến và dữ liệu (Contd.)
Variables: Biến:
In JavaScript, variables can store different types of data. Trong JavaScript, các biến có thể
lưu trữ các loại dữ liệu khác nhau.
Data types can be classified into three categories: các loại dữ liệu có thể được phân thành ba
loại:
Number Số
String String
Boolean Boolean
Variable Naming Conventions: Công ước đặt tên biến:
ff
ff
The first character of the variable must begin with an alphabet or Các ký tự đầu tiên của biến
phải bắt đầu bằng một chữ cái hay
the underscore (_) character, which can be followed by letters, gạch dưới (_) nhân vật, có thể
được theo sau bởi các chữ cái,
numbers, and the underscore character. số và ký tự gạch dưới.
Whenever a combination of two or more words is used as a Bất cứ khi nào một sự kết hợp
của hai hoặc nhiều từ được sử dụng như một
variable name, the first character of each word except that of the tên biến, nhân vật đầu tiên
của mỗi từ ngoại trừ việc của
first word should be capitalized. từ đầu tiên phải là chữ hoa. For example, to store first name,
Ví dụ, để lưu trữ tên,
you can use a variable called firstName . bạn có thể sử dụng được gọi là firstName
biến.
JavaScript is case-sensitive. JavaScript là trường hợp nhạy cảm.
Ver. Ver. 1.0 1.0
pp
Variable declaration is implicit. Biến khai báo là tiềm ẩn.
Page 11 Trang 11
Variable Declaration: Biến Tuyên bố:
A variable is declared using the var keyword. Một biến được khai báo sử dụng từ khóa
var.
Scope of a Variable: Phạm vi của biến a:
A variable can be accessed either in the function in which it is biến có thể được truy cập hoặc
trong các chức năng trong đó nó được
declared or in any other function tuyên bố hoặc trong bất kỳ chức năng khác
declared or in any other function. tuyên bố hoặc trong bất kỳ chức năng khác.
Depending upon the accessibility of the variable, it can be Tuỳ thuộc vào khả năng tiếp cận
của biến, nó có thể được
categorized into a local variable or a global variable. phân loại thành một biến địa phương
hoặc toàn cầu một biến.
Ver. Ver. 1.0 1.0
Page 12 Trang 12
Operators: Các nhà khai thác:
Operators are used to perform computations, such as Các nhà khai thác được sử dụng để thực
hiện tính toán, chẳng hạn như
addition, subtraction, comparison, and concatenation on Ngoài ra, trừ, so sánh, và nối vào
operands. toán hạng.
JavaScript provides the following types of operators: JavaScript cung cấp các loại sau đây
của các nhà khai thác:
Arithmetic, such as +, -, *, /, %,and ++ are used to perform Số học, ví dụ như +, -, *, /,%, và
+ + được sử dụng để thực hiện
mathematical calculations. toán học tính toán.
Logical such as && || and ! Logic chẳng hạn như & & | | và! are used to perform Boolean
được sử dụng để thực hiện Boolean
Logical, such as &&, ||, and ! Hợp lý, ví dụ như & &, | | và! are used to perform Boolean
được sử dụng để thực hiện Boolean
operations. hoạt động.
Comparison, such as ==, !=,>, <, >=, <= are used to compare So sánh, chẳng hạn như ==, !
=,>, <,> =, <= được sử dụng để so sánh
two numerical values. hai số giá trị.
St i St i
hh
+i+I
df df
ti ti
tt
ti ti
String, such as + is used for string concatenation. String, chẳng hạn như + được sử dụng để
nối dây.
Ver. Ver. 1.0 1.0
Page 13 Trang 13
Bit manipulation: Operators, such as &, |, ^, and << perform Bit thao tác: khai thác, như &, |
^,, và <<thực hiện
ti ti
th bit thứ bit
t ti t ti
ff
ll
hh
hifti hifti
operations on the bit representation of a value, such as shifting hoạt động trên các đại diện bit
của một giá trị, chẳng hạn như chuyển đổi
the bits to the right or the left. các bit sang phải hoặc trái.
Assignment: Operators, such as = , are used to assign values to Bài tập: Các nhà khai thác,
như =, được sử dụng để gán giá trị cho
variables. biến.
Conditional: Operators, such as, ? Có điều kiện: Các nhà khai thác, chẳng hạn như,? :
evaluates a condition based : Đánh giá dựa trên một điều kiện
on the values passed. trên các giá trị thông qua.
Ver. Ver. 1.0 1.0
Page 14 Trang 14
Other Operators: Các nhà khai thác:
The following table lists the other operators described by Bảng sau đây liệt kê các nhà khai
thác khác được mô tả bởi
JavaScript. JavaScript.
Operator Điều Hành
Example Ví dụ
Return Value Quay trở lại giá trị
delete xóa
Deletes a property Xóa một tài sản
of an object or an của một đối tượng hoặc một
element in the phần tử trong
array index Chỉ số mảng
delete Arr[5] xóa Q. [5]
Deletes the sixth Xóa thứ sáu
element of the phần tử của
array, Arr mảng, Q.
new mới
Creates an Tạo một
instance of an thể hiện của một
object type loại đối tượng
Arr=new Arr = new
Array() Array ()
Assigns memory Gán bộ nhớ
for the array, Arr cho các mảng, Q.
typeof typeof
Returns a string Trả về một chuỗi
A= typeof 17 A = typeof 17
The value assigned Giá trị giao
yp yp
Returns a string Trả về một chuỗi
value that identifies giá trị xác định
the data type of an các kiểu dữ liệu của một
operand toán hạng
yp yp
The value assigned Giá trị giao
to A is number với A là số
Ver. Ver. 1.0 1.0
Page 15 Trang 15
Expressions in JavaScript: Biểu thức vào trong JavaScript:
JavaScript supports the following types of expression: JavaScript hỗ trợ các loại sau đây của
biểu thức:
Assignment expression: An expression in which a value is Phân biểu: Một biểu thức trong đó
một giá trị được
assigned to a variable is called an assignment expression. giao cho một biến được gọi là một
biểu hiện chuyển nhượng.
A ith Một thứ i
ti ti
ii
AA
ii
ii
hi h hi h
ith thứ i
ti ti
Arithmetic expression: An expression in which some arithmetic Biểu thức số học: Một biểu
thức trong đó một số số học
operation is performed is called an arithmetic expression. hoạt động được thực hiện được gọi
là một biểu thức số học.
String expression: An expression in which operations are Chuỗi biểu thức: Một biểu thức
trong đó hoạt động được
performed on strings is called a string expression. thực hiện trên dây được gọi là một biểu
thức chuỗi.
Logical expression: This expression evaluates to a boolean Logic biểu: biểu này đánh giá
cho một boolean
( true or false ) value. (Đúng hoặc sai) giá trị.
Ver. Ver. 1.0 1.0
Page 16 Trang 16
Controlling Program Flow Chương trình kiểm soát dòng chảy
Controlling Program Flow Chương trình kiểm soát dòng chảy
All programming languages offer programming constructs Tất cả các ngôn ngữ lập trình cung
cấp các chương trình xây dựng
used for constructing a program. được sử dụng để xây dựng một chương trình. The
programming Các lập trình
constructs are of two types: xây dựng có hai loại:
Decision Making or Conditional Constructs. Ra quyết định hoặc có điều kiện xây dựng.
Iterative Constructs or Looping Constructs. Lặp đi lặp lại cấu trúc hoặc Looping xây dựng.
Ver. Ver. 1.0 1.0
Page 17 Trang 17
Controlling Program Flow (Contd.) Chương trình kiểm soát lưu lượng (Contd.)
Controlling Program Flow (Contd.) Chương trình kiểm soát lưu lượng (Contd.)
Using Decision-Making Constructs: Sử dụng ra quyết định xây dựng:
It provide the facility to execute a portion of a program only Nó cung cấp cơ sở để thực hiện
một phần của một chương trình duy nhất
once, based on a condition. một lần, dựa trên một điều kiện.
The two types of decision-making constructs in JavaScript Hai loại quyết định xây dựng
trong JavaScript
are: là:
if…else construct nếu ... khác xây dựng
switch…case construct chuyển đổi sang ... trường hợp xây dựng
UiUi
It Nó
ti C ti C
tt
tt
Using Iterative Constructs: Sử dụng cấu trúc lặp đi lặp lại:
The different types of iterative constructs are: Các loại khác nhau của các cấu trúc lặp đi lặp
lại là:
while construct trong khi xây dựng
do while construct làm trong khi xây dựng
do-while construct làm-trong khi xây dựng
for construct cho xây dựng
Ver. Ver. 1.0 1.0
Page 18 Trang 18
Introducing Functions and Events Giới thiệu Chức năng và sự kiện
Introducing Functions and Events Giới thiệu Chức năng và sự kiện
Functions perform specific tasks and can be used Chức năng thực hiện các nhiệm vụ cụ thể
và có thể được sử dụng
repetitively throughout the program. lập đi lập lại trong suốt chương trình.
Events are used to add dynamism to Web pages by making Sự kiện được sử dụng để thêm
tính năng động cho các trang web bằng cách làm
the Web pages respond to user actions such as mouse các trang web đáp ứng với hành động
của người dùng như chuột
clicks, mouse movements, or key presses. nhấp chuột, di chuyển chuột, hoặc bấm phím.
Some features of the functions are: Một số tính năng của các chức năng là:
Reusability Sử dụng lại
Modularity Mô đun
Overall programming simplicity Nhìn chung, chương trình đơn giản
Ver. Ver. 1.0 1.0
Page 19 Trang 19
Introducing Functions and Events (Contd.) Giới thiệu Chức năng và Sự kiện (Contd.)
Built-in Functions: Tích hợp chức năng:
Built-in functions are already coded to ease the programmer's Tích hợp chức năng đã được
mã hoá để dễ dàng lập trình của
task. nhiệm vụ.
Some built-in functions supported by JavaScript are: Một số được xây dựng trong các chức
năng hỗ trợ JavaScript là:
isNaN(): Helps determine if an argument is NaN (not a isNaN (): Giúp xác định nếu một cuộc
tranh cãi là NaN (không phải là một
number). số).
parseInt() : Parses the string argument and returns an integer. parseInt (): phân tích các tham
số chuỗi và trả về một số nguyên.
parseFloat() : Accepts a string argument and returns a floating parseFloat (): Chấp nhận một
đối số chuỗi và trả về một nổi
parseFloat() : Accepts a string argument and returns a floating parseFloat (): Chấp nhận một
đối số chuỗi và trả về một nổi
point number. điểm số.
eval() : Evaluates any JavaScript statement or expression eval (): Đánh giá những thông báo
về JavaScript hay biểu thức
stored as a string, which also includes string equivalents of lưu giữ như là một chuỗi, bao
gồm cả tương đương chuỗi
arithmetic expressions biểu thức số học
arithmetic expressions. biểu thức số học.
Ver. Ver. 1.0 1.0
Page 20 Trang 20
User-defined Functions: Người dùng định nghĩa chức năng:
You can also create customized functions in your program to Bạn cũng có thể tạo ra các chức
năng tùy chỉnh trong chương trình của bạn
enhance readability and efficiency. tăng cường khả năng đọc và hiệu quả.
To use functions effectively, you need to know: Để sử dụng chức năng hiệu quả, bạn cần biết:
How to declare a user-defined function. Làm thế nào để khai báo một hàm xác định người sử
dụng.
How to pass arguments. Làm thế nào để vượt qua các đối số.
How to return a value. Làm thế nào để trả về giá trị.
How to call a user defined function from the main program Làm thế nào để gọi một người sử
dụng chức năng xác định từ các chương trình chính
How to call a user-defined function from the main program. Làm thế nào để gọi một chức
năng xác định người sử dụng từ các chương trình chính.
Ver. Ver. 1.0 1.0
Page 21 Trang 21
Methods: Phương pháp:
JavaScript follows an object model where each object has its JavaScript sau một mô hình đối
tượng mà đối tượng từng có của nó
own methods. của phương pháp.
Methods are actions that an object can be made to perform. Phương pháp là những hành động
mà một đối tượng có thể được thực hiện để thực hiện.
The following two methods are commonly used in JavaScript: Các phương pháp sau đây hai
thường được sử dụng trong JavaScript:
alert() method cảnh báo () phương pháp
prompt() method prompt () phương pháp
Ver. Ver. 1.0 1.0
Page 22 Trang 22
alert() Method: cảnh báo () Phương pháp:
The alert() method is a method that JavaScript provides for Các cảnh báo () phương
pháp là một phương pháp mà JavaScript cung cấp cho
displaying messages to the user. hiển thị thông báo cho người dùng.
The dialog box contains an OK button. Hộp thoại có một nút OK.
The syntax of the alert() method is: Cú pháp của các cảnh báo () phương pháp là:
The syntax of the alert() method is: Cú pháp của các cảnh báo () phương pháp là:
alert("Message to the user"); alert ("Thông báo cho người dùng");
prompt() Method: prompt () Phương pháp:
You can use the prompt() method to create a dialog box with Bạn có thể sử dụng phương
pháp () nhắc để tạo ra một hộp thoại với
pp
p () p ()
gg
an appropriate message. một thông báo thích hợp.
The dialog box allows users to enter a single line entry and Hộp thoại cho phép người dùng
nhập vào một mục dòng và
contains two buttons, OK and Cancel. có hai nút bấm, OK và Cancel.
The syntax of the prompt() method is: Cú pháp của (phương pháp) nhắc là:
The syntax of the prompt() method is: Cú pháp của (phương pháp) nhắc là:
prompt("Message to the user"); prompt ("Thông báo cho người dùng");
Ver. Ver. 1.0 1.0
Page 23 Trang 23
Defining Program Behavior Xác định hành vi Chương trình
Program behavior refers to the output of a program when the Chương trình hành động liên
quan đến đầu ra của chương trình một khi
user interacts with the program. người dùng tương tác với chương trình.
In JavaScript, events are actions that occur as a result of user Trong JavaScript, các sự kiện là
những hành động đó xảy ra như là kết quả của người sử dụng
interaction with the Web pages or other browser-related tương tác với các trang web hoặc
trình duyệt khác có liên quan
activities. hoạt động.
The function, which is executed in response to some event, is Chức năng, được thực hiện để
đáp ứng với sự kiện một số, là
called an event handler được gọi là xử lý sự kiện
called an event handler. được gọi là xử lý sự kiện.
The event handler function resides in the JavaScript Các chức năng xử lý sự kiện nằm trong
JavaScript
interpreter of the Web browser. thông dịch viên của các trình duyệt Web.
Ver. Ver. 1.0 1.0
Page 24 Trang 24
JavaScript contains predefined event handlers. JavaScript có xử lý sự kiện được xác định
trước.
The following figure displays the event handling process. Hiển thị hình sau quá trình xử lý sự
kiện.
Performs an action Thực hiện một hành động
USER USER
BROWSER BROWSER
EVENT HANDLER Xử lý sự kiện
Generates an event Tạo ra một sự kiện
Browser displays Trình duyệt hiển thị
output sản lượng
Processes the event and Quy trình sự kiện và
sends output gửi đầu ra
Event Handling Process Quy trình xử lý sự kiện
gg
Ver. Ver. 1.0 1.0
Page 25 Trang 25
The following table lists the different events supported by Bảng sau đây liệt kê các sự kiện
khác nhau được hỗ trợ bởi
JavaScript and their description. JavaScript và mô tả của họ.
Event Sự kiện
pp
click click
Is generated when a user clicks on a form element or on a link Được tạo ra khi người dùng
nhấp vào một yếu tố hình hoặc vào một liên kết
change thay đổi
Is generated when a user changes the value of a form field Được tạo ra khi người dùng thay
đổi giá trị của một trường mẫu
focus tập trung
Is generated when a form object receives control Được tạo ra khi một đối tượng hình
thức kiểm soát nhận được
load tải
Is generated when a page is loaded into the browser Được tạo ra khi một trang được nạp vào
trình duyệt
mouseOver rê chuột
Is generated when a user moves the mouse pointer over a link, Được tạo ra khi người dùng di
chuyển con trỏ chuột lên liên kết,
area, or object khu vực, hoặc đối tượng
mouseOut mouseOut
Is generated when the mouse pointer leaves the link, area, or Được tạo ra khi con trỏ chuột
vào liên kết lá, diện tích, hoặc
object đối tượng
select chọn
Is generated when a user selects a form field Được tạo ra khi người dùng lựa chọn một
trường mẫu
blur mờ
Is generated when the control is removed from a form object Được tạo ra khi kiểm soát
được lấy ra từ một đối tượng hình thức
Ver. Ver. 1.0 1.0
Page 26 Trang 26
The following table lists the different form fields and the Bảng sau đây liệt kê các hình thức
lĩnh vực khác nhau và các
event handlers associated with them. xử lý sự kiện liên kết với chúng.
Object Đối tượng
Event Handlers Quản lý sự kiện
Button Button
onClick onClick
Reset Thiết lập lại
onClick onClick
Submit Gửi
onClick onClick
Radio Radio
onClick onClick
Radio Radio
onClick onClick
Checkbox Checkbox
onClick onClick
Link Liên kết
onClick, onMouseOver, and onMouseOut onClick, onmouseover, và onMouseOut
Form Mẫu
onSubmit and onReset onSubmit và onReset
Text Văn bản
onChange, onFocus, onBlur, and onSelect onChange, onFocus, onBlur, và onSelect
Ver. Ver. 1.0 1.0
Page 27 Trang 27
The following table lists the different form fields and the Bảng sau đây liệt kê các hình thức
lĩnh vực khác nhau và các
event handlers associated with them. xử lý sự kiện liên kết với chúng.
Object Đối tượng
Event Handlers Quản lý sự kiện
Textarea Textarea
onChange, onFocus, onBlur, and onSelect onChange, onFocus, onBlur, và onSelect
Select Chọn
onChange, onFocus, and onBlur onChange, onFocus, và onBlur
Image Hình ảnh
onAbort and onError onAbort và onError
Area Diện tích
onClick onMouseOver and onMouseOut onClick onmouseover và onMouseOut
Area Diện tích
onClick, onMouseOver, and onMouseOut onClick, onmouseover, và onMouseOut
Window Cửa sổ
onLoad, onUnLoad, and onError onload, onUnLoad, và onError
Ver. Ver. 1.0 1.0
Page 28 Trang 28
Demo: Implementing Functions and Events Demo: Thực hiện chức năng và sự kiện
Demo: Implementing Functions and Events Demo: Thực hiện chức năng và sự kiện
Creative Books Corporation is a leading bookstore in New Tổng công ty Sách Sáng tạo là
một nhà sách hàng đầu ở New
Jersey, USA. Jersey, Mỹ. The existing Web site of the company offers Các trang web hiện có
của công ty cung cấp
online shopping facility for books, magazines, journals, and mua sắm trực tuyến cơ sở cho
cuốn sách, tạp chí, tạp chí, và
CDs to customers Recently Bruce the CEO of the company Gần đây, đĩa CD cho khách hàng
Bruce Giám đốc điều hành của công ty
CDs to customers. CD cho khách hàng. Recently, Bruce, the CEO of the company Gần đây,
Bruce, Giám đốc điều hành của công ty
felt the need to include a calculation section on one of the cảm thấy cần phải bao gồm một
phần tính trên một trong những
Web pages of the Web site. Các trang web về những trang Web. This would allow the
customers to Điều này sẽ cho phép các khách hàng
calculate the total amount of their purchases before placing an tính toán tổng số tiền mua
hàng của họ trước khi đặt một
pp
pp
gg
order. trật tự. You have been asked to develop the code for Bạn đã được yêu cầu phát triển
mã cho
performing calculations on the Web site. thực hiện các tính toán trên trang Web.
Ver. Ver. 1.0 1.0
Page 29 Trang 29
Demo: Implementing Functions and Events (Contd.) Demo: Thực hiện chức năng và sự
kiện (Contd.)
Demo: Implementing Functions and Events (Contd.) Demo: Thực hiện chức năng và sự
kiện (Contd.)
following steps: các bước sau:
Create the user interface. Tạo giao diện người dùng.
Write the JavaScript code. Viết mã JavaScript.
Save the document. Lưu tài liệu.
Ver. Ver. 1.0 1.0
Page 30 Trang 30
Summary Tóm tắt
A script is a program or sequence of instructions that is kịch bản là một chương trình, trình tự
các hướng dẫn đó là
interpreted or implemented by another program instead of the giải thích hoặc thực hiện bởi
một chương trình khác thay vì
computer. máy tính.
There are number of scripting languages such as Perl, REXX Có nhiều ngôn ngữ kịch bản
như Perl, REXX
(on IBM mainframes), JavaScript, VBScript, and Tcl/Tk. (Trên máy tính lớn của IBM),
JavaScript, VBScript, và Tcl / Tk.
JavaScript is a scripting language used by the HTML authors JavaScript là một ngôn ngữ
kịch bản được sử dụng bởi các tác giả HTML
to dynamically script the behavior of objects such as a form or script để tự động hành vi của
các đối tượng như một hình thức hoặc
to dynamically script the behavior of objects, such as a form or script để tự động hành vi của
đối tượng, như hình thức một hoặc
a button and can be made to execute both on client as well as một nút và có thể được thực
hiện để thực hiện cả về khách hàng cũng như
server side. phía máy chủ.
JavaScript was developed by Netscape Communications JavaScript được phát triển bởi
Netscape Communications
pp
pp
yy
pp
Corporation. Tổng công ty.
Ver. Ver. 1.0 1.0
Page 31 Trang 31
JavaScript: JavaScript:
Is object-based Là dựa trên đối tượng
Is event-driven Là hướng sự kiện
Is platform-independent Là nền tảng độc lập
Enables rapid de elopment Cho phép nhanh chóng de elopment
Enables rapid development Cho phép nhanh chóng phát triển
Is easy to learn Là dễ học
The building blocks of a JavaScript program include variables, Các khối xây dựng của một
chương trình JavaScript bao gồm các biến,
operators, expressions, and functions. khai thác, các biểu thức, và chức năng.
operators, expressions, and functions. khai thác, các biểu thức, và chức năng.
JavaScript allows the use of semicolon to separate statements JavaScript cho phép sử dụng
dấu chấm phẩy để báo cáo riêng biệt
from each other. từ mỗi khác.
JavaScript uses two types of comment indicators. JavaScript sử dụng hai loại chỉ số bình
luận.
pp
yp yp
The // indicator delineates a comment on a single line of script. Các / / chỉ phác họa một bình
luận trên một dòng của kịch bản.
The /**/ comment indicator is used in multiple-line comments. Các / ** / chỉ bình luận được
sử dụng trong dòng ý kiến nhiều.
In JavaScript, you can either make use of double quotation Trong JavaScript, bạn có thể sử
dụng các ngoặc kép
Ver. Ver. 1.0 1.0
marks ("") or single quotation marks ('') to enclose a string of dấu ("") hoặc dấu ngoặc đơn ('')
để gửi kèm theo một chuỗi
characters. ký tự.
Page 32 Trang 32
JavaScript is a case-sensitive scripting language. JavaScript là một ngôn ngữ kịch bản nhạy
cảm hợp.
The JavaScript code integrated into the HTML file, is Các mã JavaScript tích hợp vào các tập
tin HTML, là
interpreted and executed by the browser. giải thích và thực hiện bởi trình duyệt.
The <SCRIPT> tag is used to inform the browser about the Các tag <script> được sử
dụng để thông báo cho trình duyệt về
ifi IFI
ti ti
f HTML d f HTML d
hh
JJ
S itit S itit
specific sections of HTML code where JavaScript exists. cụ thể các phần của mã HTML, nơi
JavaScript tồn tại.
Keywords are the predefined identifiers that form the Từ khoá là những định danh được xác
định trước đã hình thành
foundation of JavaScript. nền tảng của JavaScript.
JavaScript reserved words cannot be used for variable or JavaScript dành những lời không
thể được sử dụng để biến hoặc
JavaScript reserved words cannot be used for variable or JavaScript dành những lời không
thể được sử dụng để biến hoặc
function names. chức năng tên.
Variables store data of different types such as "xyz", 15, and Các biến lưu trữ dữ liệu của các
loại khác nhau như "xyz", 15, và
10.65. 10,65.
JavaScript supports string, number, and Boolean data types. JavaScript hỗ trợ chuỗi, số, và
các kiểu dữ liệu Boolean.
Depending upon the accessibility of the variable, it can be Tuỳ thuộc vào khả năng tiếp cận
của biến, nó có thể được
categorized into a local variable or a global variable. phân loại thành một biến địa phương
hoặc toàn cầu một biến.
Ver. Ver. 1.0 1.0
Page 33 Trang 33
Operators are used to perform computations on variables and Các nhà khai thác được sử dụng
để thực hiện các tính toán trên các biến và
constants. hằng số.
Operators can be arithmetic, string, bitwise, assignment, or Các nhà khai thác có thể được số
học, chuỗi, phép toán, chuyển nhượng, hoặc
relational operators. quan hệ nhà khai thác.
PP
ii
tt tt
ft ft
tt
Programming constructs are of two types: Lập trình xây dựng có hai loại:
Decision-making or Conditional constructs Ra quyết định hoặc có điều kiện xây dựng
Iterative or Looping constructs Lặp đi lặp lại hoặc xây dựng Looping
The decision making or conditional constructs are: Các quyết định hoặc xây dựng có điều
kiện là:
The decision-making or conditional constructs are: Việc ra quyết định hoặc có điều kiện xây
dựng là:
If...else construct Nếu ... khác xây dựng
switch...case construct chuyển đổi sang ... trường hợp xây dựng
The iterative constructs are: Các cấu trúc lặp đi lặp lại là:
The iterative constructs are: Các cấu trúc lặp đi lặp lại là:
while construct trong khi xây dựng
do...while construct làm ... trong khi xây dựng
for construct cho xây dựng
Ver. Ver. 1.0 1.0
Page 34 Trang 34
A function is a block of organized code that performs a single, chức năng là một khối mã tổ
chức đó thực hiện một single,
related action. liên quan đến hành động.
JavaScript supports two types of functions, built-in and JavaScript hỗ trợ hai loại chức năng,
được xây dựng trong và
user-defined functions. người dùng định nghĩa chức năng.
B ilt if B ILT nếu
ti ti
bb
dd
hh
i th i th
i ti i ti
Built-in functions can be used anywhere in the scripting Tích hợp chức năng có thể được sử
dụng bất cứ nơi nào trong các kịch bản
language. ngôn ngữ.
User-defined functions are created by the user to improve Xác định chức năng sử dụng được
tạo ra bởi người sử dụng để cải thiện
readability and efficiency dễ đọc và hiệu quả
readability and efficiency. dễ đọc và hiệu quả.
Use of functions makes the program scaleable. Sử dụng chức năng làm cho chương trình có
thể mở rộng.
Functions, which are associated with objects, are known as Chức năng, mà là liên kết với các
đối tượng, được gọi là
behaviors or methods of objects. hành vi hoặc các phương pháp của các đối tượng.
jj
Ver. Ver. 1.0 1.0
Page 35 Trang 35
Program behavior refers to the output of a program when the Chương trình hành động liên
quan đến đầu ra của chương trình một khi
user interacts with the program. người dùng tương tác với chương trình.
In JavaScript, events are actions that occur as a result of user Trong JavaScript, các sự kiện là
những hành động đó xảy ra như là kết quả của người sử dụng
interaction with the Web pages or other browser-related tương tác với các trang web hoặc
trình duyệt khác có liên quan
activities. hoạt động.
Some common types of events are: Một số loại phổ biến của các sự kiện là:
click click
change thay đổi
focus tập trung
load tải
mouseOver rê chuột
mouseOut mouseOut
select chọn
blur mờ
Ver. Ver. 1.0 1.0

IWCD_Session_06.pdf
Page 1 Trang 1
Identify the hierarchy of objects in JavaScript Xác định hệ thống cấp bậc của các đối tượng
trong JavaScript
Identify the various JavaScript objects Xác định các đối tượng JavaScript
Identify the various JavaScript language objects Xác định các đối tượng ngôn ngữ JavaScript
khác nhau
Ver. Ver. 1.0 1.0
Page 2 Trang 2
Introducing the JavaScript Object Model Giới thiệu các đối tượng JavaScript Model
Introducing the JavaScript Object Model Giới thiệu các đối tượng JavaScript Model
JavaScript is an object-based language that uses custom JavaScript là một ngôn ngữ dựa trên
đối tượng sử dụng tùy chỉnh
and built-in objects to create interactive Web pages. và xây dựng trong các đối tượng để tạo
ra các trang web tương tác.
The JavaScript objects enable you to manipulate the Các đối tượng JavaScript cho phép bạn
thao tác
components of a Web page. các thành phần của một trang Web.
Some of the objects used in JavaScript are: Một số các đối tượng sử dụng trong JavaScript là:
window object đối tượng cửa sổ
document object tài liệu đối tượng
jj
history object lịch sử đối tượng
location object vị trí đối tượng
navigator object hoa tiêu đối tượng
gg
jj
Ver. Ver. 1.0 1.0
Page 3 Trang 3
Introducing the JavaScript Object Model (Contd.) Giới thiệu các đối tượng JavaScript
Model (Contd.)
The window Object: Các đối tượng cửa sổ:
Model (Contd.)
The Các
window cửa sổ
object is one of the highest-level objects in the đối tượng là một trong những đối tượng cấp
cao nhất trong
JavaScript object hierarchy. JavaScript đối tượng phân cấp.
The Các
window cửa sổ
object represents the content area of the browser đối tượng đại diện cho khu vực nội dung của
trình duyệt
window that can be divided into multiple frames or cửa sổ có thể được chia thành các khung
hoặc
sub-regions. tiểu vùng.
Ver. Ver. 1.0 1.0
Page 4 Trang 4
Model (Contd.)
The following figure displays the window object hierarchy. Các con số sau đây sẽ hiển thị
cửa sổ hệ thống phân cấp đối tượng.
Model (Contd.)
window cửa sổ
hi t hi t
ll
ti ti
ff
dd
tt
history lịch sử
location vị trí
frame khung
document tài liệu
link liên kết
form hình thức
image (3.0) hình ảnh (3.0)
anchor neo
check box hộp kiểm tra
button nút
select chọn
radio radio
submit trình
reset thiết lập lại
submit trình
reset thiết lập lại
textarea textarea
text văn bản
hidden ẩn
password mật khẩu
Ver. Ver. 1.0 1.0
Page 5 Trang 5
Model (Contd.)
The following table lists some properties of the window Bảng sau đây liệt kê một số đặc tính
của cửa sổ
Model (Contd.)
object. đối tượng.
Properties Tài sản
defaultStatus defaultStatus
Is a string value containing the default status bar text. Là một giá trị chuỗi văn bản có chứa
các trạng thái thanh mặc định.
The status bar text is a string assigned by the user that Các văn bản trên thanh trạng thái là
một chuỗi phân công của người dùng
is displayed when the mouse pointer is moved over được hiển thị khi con trỏ chuột di chuyển
trên
the window. cửa sổ. By default, the status bar text is an empty Theo mặc định, các văn bản
trên thanh trạng thái là một sản phẩm nào
string. chuỗi.
frames[] khung []
Is a collection of frames in a window. Là tập hợp các khung hình trong một cửa sổ. You can
refer to Bạn có thể tham khảo
a particular frame in a window by specifying its frame một khung cụ thể trong một cửa sổ
bằng cách xác định khung của nó
number within the [ ] of the frames [ ] property. trong số] [của khung [] tài sản.
ll
th thứ
I Tôi
it nó
ll
ti ti
th thứ
bb
ff ff
length chiều dài
Is an integer value representing the number of frames Có một số nguyên đại diện cho số
lượng khung hình
in the parent window. trong cửa sổ cha mẹ.
name Tên
Is a string value containing the name of the window or Là một giá trị chuỗi chứa tên của cửa
sổ hoặc
the frame. khung.
Ver. Ver. 1.0 1.0
parent cha mẹ
Is a string value containing the name of the parent Là một giá trị chuỗi chứa tên của cha mẹ
window. cửa sổ.
Page 6 Trang 6
Model (Contd.)
The following table lists some properties of the window Bảng sau đây liệt kê một số đặc tính
của cửa sổ
Model (Contd.)
self tự
Is a string value containing the name of the current Là một giá trị chuỗi chứa tên của hiện tại
window. cửa sổ.
top đầu trang
Is a string value containing the name of the Là một giá trị chuỗi có chứa tên của
uppermost window. trên cùng cửa sổ. The uppermost window is the Cửa sổ trên cùng là
current active window overlapping all open hiện đang hoạt động chồng chéo tất cả các cửa
sổ mở
windows. cửa sổ.
window cửa sổ
Is an alternative name for the self or name Là một tên khác cho bản thân hoặc tên
property. tài sản.
status tình trạng
Is a string value and is used to set the text on the Là một giá trị chuỗi và được sử dụng để
thiết lập các văn bản trên
status bar of the window. thanh trạng thái của cửa sổ.
Ver. Ver. 1.0 1.0
Page 7 Trang 7
Model (Contd.)
Some of the widely used methods of the window object Một số phương pháp được sử dụng
rộng rãi của các đối tượng cửa sổ
Model (Contd.)
are: là:
open() open ()
method phương pháp
close() close ()
confirm() xác nhận ()
Ver. Ver. 1.0 1.0
Page 8 Trang 8
Model (Contd.)
open() Method: open () Phương pháp:
Model (Contd.)
Used to open a Web page in the current window or in a new Được sử dụng để mở một trang
Web trong cửa sổ hiện tại hoặc trong một mới
browser window. cửa sổ trình duyệt.
Syntax: Cú pháp:
open(“URL”,”Window Name”,”Attributes”); mở ("URL", "cửa sổ Name", "thuộc tính");
Where: Trong đó:
URL is the address of the Web page to be displayed. URL là địa chỉ của trang web được hiển
thị.
Window Name is the name of the window in which the Web page Tên cửa sổ là tên của cửa
sổ mà trong đó các trang Web
Window Name is the name of the window in which the Web page Tên cửa sổ là tên của cửa
sổ mà trong đó các trang Web
is to be displayed. sẽ được hiển thị.
Attributes is the list of properties that must be associated with Các thuộc tính là danh sách các
tài sản đó phải được liên kết với
the window in which the Web page is to be displayed. cửa sổ trong đó các trang web sẽ được
hiển thị.
Ver. Ver. 1.0 1.0
Page 9 Trang 9
Model (Contd.)
The following table lists the properties that can be specified Bảng sau liệt kê các thuộc tính
có thể được quy định
Model (Contd.)
in the Attributes argument of the open() method. trong đối số thuộc tính của
open () phương pháp.
toolbar Thanh công cụ
Creates the Standard toolbar with buttons such as Tạo thanh công cụ với các nút như:
Back and Forward. Back và Forward.
location vị trí
Creates the location entry field displaying the current Tạo ra các lĩnh vực nhập cảnh hiển thị
vị trí hiện tại
URL. URL.
directories thư mục
Creates the standard directory buttons, such as Tạo thư mục nút chuẩn, như
What's New and What's Cool that provide related Có gì mới và có gì Cool cung cấp liên
quan
information. thông tin. Directory buttons in a Web browser Nút Directory trong một trình
duyệt Web
access Web pages that contain information on how to truy cập các trang Web có chứa thông
tin về cách
bb
th W ld Wid W b thứ W W Wid b ld
browse the World Wide Web. duyệt World Wide Web.
Creates the status bar at the bottom of the browser Tạo thanh trạng thái phía dưới của trình
duyệt
window. cửa sổ.
menubar menubar
Creates the menu bar at the top of the window. Tạo thanh menu ở trên cùng của cửa sổ.
Ver. Ver. 1.0 1.0
Page 10 Trang 10
Model (Contd.)
The following table lists the properties that can be specified Bảng sau liệt kê các thuộc tính
có thể được quy định
Model (Contd.)
in the Attributes argument of the open() method. trong đối số thuộc tính của
open () phương pháp.
scrollbars thanh cuộn
Creates scroll bars, which can be used when the Web Tạo thanh cuộn, có thể được sử dụng
khi các Web
page grows beyond the size of the current window. Trang phát triển vượt quá kích thước của
cửa sổ hiện hành.
resizable thay đổi kích thước
Enables the resizing of the window by the user. Cho phép thay đổi kích thước của cửa sổ của
người dùng.
width chiều rộng
Specifies the window width in pixels. Chỉ định chiều rộng cửa sổ theo pixel.
height cao
Specifies the window height in pixels. Chỉ định chiều cao cửa sổ theo pixel.
top đầu trang
Specifies the y coordinate of the location where the Chỉ định y phối hợp các vị trí nơi
top đầu trang
Specifies the y coordinate of the location where the Chỉ định y phối hợp các vị trí nơi
window should open on the screen. cửa sổ sẽ mở ra trên màn hình.
left trái
Specifies the left x coordinate of the location where Chỉ định trái x phối hợp của vị trí nơi
the window should open on the screen. cửa sổ sẽ mở ra trên màn hình.
Ver. Ver. 1.0 1.0
Page 11 Trang 11
Model (Contd.)
close() Method: close () Phương pháp:
Model (Contd.)
Used to close the current window or a secondary window in Được sử dụng để đóng cửa sổ
hiện tại hoặc cửa sổ thứ cấp trong
the current window. cửa sổ hiện hành.
Syntax to close the current window: Cú pháp để đóng cửa sổ hiện hành:
close(); close ();
Syntax to close the secondary window of the current window: Cú pháp để đóng cửa sổ thứ
cấp của cửa sổ hiện hành:
<secondary_window_name>.close(); <secondary_window_name>). gần (;
Where: Trong đó:
<secondary_window_name> is the name of the secondary <secondary_window_name> là tên
của các trung
window. cửa sổ.
Ver. Ver. 1.0 1.0
Page 12 Trang 12
Model (Contd.)
confirm() Method : xác nhận () Phương pháp:
Model (Contd.)
Used to display a confirmation message before the execution Được sử dụng để hiển thị một
thông báo xác nhận trước khi thực hiện các
of certain activities performed in a Web browser window. các hoạt động nhất định thực hiện
trong một cửa sổ trình duyệt Web.
Syntax: Cú pháp:
val=confirm(“Message to be displayed:); val = xác nhận ("Tin nhắn sẽ được hiển thị:);
Ver. Ver. 1.0 1.0
Page 13 Trang 13
Model (Contd.)
document Object: tài liệu đối tượng:
Model (Contd.)
It provides the properties and methods to work with many Nó cung cấp các thuộc tính và
phương pháp để làm việc với nhiều
aspects of the current document, including information about các khía cạnh của các tài liệu
hiện hành, bao gồm cả thông tin về
anchors, forms, links, title, current location and URL, and the neo, hình thức, liên kết, tiêu đề,
hiện tại vị trí và URL, và
current colors hiện màu sắc
current colors. hiện màu sắc.
It does not have any events associated with it. Nó không có bất kỳ sự kiện liên kết với nó.
Ver. Ver. 1.0 1.0
Page 14 Trang 14
Model (Contd.)
The following table lists the properties of the document Bảng sau liệt kê các thuộc tính của
tài liệu
Model (Contd.)
alinkColor alinkColor
Is a string value representing the color for active links. Là một giá trị chuỗi đại diện cho màu
sắc cho các liên kết đang hoạt động.
anchors[] neo []
Is an array object containing references to all the elements Là mảng một đối tượng có chứa
tài liệu tham khảo cho tất cả các yếu tố
in an <A> tag. trong một tag <A>.
bgColor BGColor
Is a string value representing the background color of the Là một giá trị chuỗi đại diện cho
màu nền của
cookie cookie
Is a string value containing name=value pairs of data that Là một giá trị có chứa tên chuỗi
giá trị cặp = của dữ liệu
will persist in the memory of the client computer until the sẽ vẫn tồn tại trong bộ nhớ của
máy tính khách hàng cho đến khi
pp
yy
pp
Web browser is cleared, if no expiration date is present. trình duyệt Web được xóa bỏ, nếu
không có ngày hết hạn là hiện tại.
The data will also persist in the memory until the expiration Các dữ liệu sẽ vẫn tồn tại trong
bộ nhớ cho đến khi hết hạn
date is reached. ngày đạt được.
fgColor fgColor
Is a string value representing the text color of the Là một giá trị chuỗi đại diện cho màu sắc
văn bản của
Ver. Ver. 1.0 1.0
Page 15 Trang 15
Model (Contd.)
The following table lists the properties of the document Bảng sau liệt kê các thuộc tính của
tài liệu
Model (Contd.)
linkColor linkColor
Is a string value representing the color of the unvisited links Là một giá trị chuỗi đại diện
cho màu sắc của các liên kết unvisited
linkColor linkColor
Is a string value representing the color of the unvisited links. Là một giá trị chuỗi đại diện
cho màu sắc của các liên kết unvisited.
lastModified lastModified
Is a string value representing the date and time when the Là một giá trị chuỗi đại diện cho
ngày tháng và thời gian khi
document was last modified. tài liệu đổi lần cuối lúc.
links[] liên kết []
Is an array object containing references of all elements in the Là một mảng đối tượng có
chứa tài liệu tham khảo của tất cả các yếu tố trong
links[] liên kết []
Is an array object containing references of all elements in the Là một mảng đối tượng có
chứa tài liệu tham khảo của tất cả các yếu tố trong
<A> tag and the elements that use the <AREA> tag. <A> Tag và các yếu tố sử dụng thẻ
<AREA>.
location vị trí
Is a string value representing the current URL. Là một giá trị chuỗi đại diện cho các URL
hiện hành.
referrer giới thiệu
Is a string value representing the URL of the document from Là một giá trị chuỗi đại diện
cho các URL của các tài liệu từ
which the current document was accessed mà các tài liệu hiện tại đã được truy cập
which the current document was accessed. mà các tài liệu hiện tại đã được truy cập.
title Tiêu đề
Is a string value representing the text between the <TITLE> Là một giá trị chuỗi đại diện
cho văn bản giữa các <title>
and </TITLE> tags. và </ TITLE> thẻ.
vlinkColor vlinkColor
Is a string value representing the color of the visited links. Là một giá trị chuỗi đại diện cho
màu sắc của các liên kết truy cập.
Ver. Ver. 1.0 1.0
Page 16 Trang 16
Model (Contd.)
Some of the widely used methods of the document object Một số phương pháp được sử
dụng rộng rãi của các đối tượng tài liệu
Model (Contd.)
are: là:
write() Method: Enables the user to output the text on write () Phương pháp: Cho phép người
sử dụng để sản xuất các văn bản trên
the Web browser window. cửa sổ trình duyệt Web.
writeln() Method: Enables the user to output the text on writeln () Phương pháp: Cho phép
người sử dụng để sản xuất các văn bản trên
the Web browser window and also appends a new line cửa sổ trình duyệt web và cũng gắn
thêm một dòng mới
character at the end of the output. nhân vật ở phần cuối của đầu ra.
clear(): Clears the document window rõ ràng (): Xóa các cửa sổ tài liệu
clear(): Clears the document window. rõ ràng (): Xóa các cửa sổ tài liệu.
close(): Closes an output stream opened with the close (): Đóng một luồng đầu ra mở với
document.open() method. document.open () phương pháp.
open(): Opens a output stream to collect the output to be open (): Mở một luồng đầu ra để thu
thập kết xuất được
open(): Opens a output stream to collect the output to be open (): Mở một luồng đầu ra để thu
thập kết xuất được
displayed on the Web page from the write() or hiển thị trên trang web từ viết () hoặc
writeln() methods. writeln () phương pháp.
Slide 16 of 39 Slide 16 trong 39
Ver. Ver. 1.0 1.0
Page 17 Trang 17
Model (Contd.)
history Object: lịch sử đối tượng:
Model (Contd.)
It contains a list of all pages that have been visited in the Nó chứa một danh sách tất cả các
trang đã được truy cập trong
browser window. cửa sổ trình duyệt.
It has the following three methods: Nó có ba phương pháp sau đây:
back(): trở lại ():
To move to the previous page. Để di chuyển đến trang trước đó.
forward(): phía trước ():
To move to the next page. Để di chuyển đến trang tiếp theo.
go(x): đi (x):
To move back x pages. Để chuyển trở lại x trang.
Ver. Ver. 1.0 1.0
Page 18 Trang 18
Model (Contd.)
location Object: vị trí đối tượng:
Model (Contd.)
Is used to enable navigation to different URLs through Được sử dụng để cho phép chuyển
hướng đến URL khác nhau thông qua
The most frequently used property of the location object is the Việc thường xuyên sử dụng tài
sản hầu hết các đối tượng vị trí là
tt
HREF property. HREF tài sản.
The HREF property specifies the hypertext reference for the Các tài sản HREF chỉ định tham
chiếu siêu văn bản cho
current or desired URL. URL hiện tại hoặc mong muốn.
Ver. Ver. 1.0 1.0
Page 19 Trang 19
Model (Contd.)
Some of the properties of the location object are: Một số các thuộc tính của đối tượng vị
trí là:
Model (Contd.)
hash: Specifies the internal link anchor name. băm: Ghi rõ tên của Neo liên kết nội bộ.
host: Specifies the hostname:port portion of the URL. host: Chỉ định tên máy: cổng phần của
URL.
href: Specifies the partial or full path of a file or a Web site. title: Chỉ định hoặc toàn bộ phần
đường dẫn của một tập tin hoặc trang web một.
port: Specifies the port number. cảng: Ghi rõ số cổng.
Ver. Ver. 1.0 1.0
Page 20 Trang 20
Model (Contd.)
navigator Object: hoa tiêu đối tượng:
Model (Contd.)
Is an independent object that has its own set of properties and Là một đối tượng độc lập mà
đã thiết lập riêng của mình và tài sản
methods. phương pháp.
You can use the navigator object to determine the latest Bạn có thể sử dụng các đối tượng
tiêu để xác định mới nhất
features supported by a particular Web browser, such as tính năng hỗ trợ bởi một trình duyệt
web cụ thể, chẳng hạn như
browser version, user platform, and plug-ins. phiên bản trình duyệt, người sử dụng nền tảng,
và plug-ins.
It does not have any events associated with it. Nó không có bất kỳ sự kiện liên kết với nó.
Ver. Ver. 1.0 1.0
Page 21 Trang 21
Model (Contd.)
The following table lists the properties of the navigator Bảng sau liệt kê các thuộc tính
của hoa tiêu
Model (Contd.)
Property Bất động sản
appName APPNAME
Specifies the name of the Web browser. Ghi rõ tên của các trình duyệt Web.
appVersion appVersion
Specifies information about the Web browser version, browser Ghi rõ thông tin về phiên bản
trình duyệt web, trình duyệt
platform, and the country for which the Web browser is released. nền tảng, và đất nước mà
các trình duyệt Web được phát hành.
appCodeName appCodeName
Specifies the internal code name of the Web browser. Xác định tên mã nội bộ của các trình
duyệt Web. For Đối với
example, the internal code name returned for both, Microsoft Ví dụ, tên mã nội bộ trả lại cho
cả hai, Microsoft
Internet Explorer and Netscape browsers, is Mozilla. Internet Explorer và các trình duyệt
Netscape, là Mozilla.
Language Ngôn ngữ
Specifies an identifier that denotes the local language version of Chỉ định một định danh mà
biểu thị các phiên bản ngôn ngữ địa phương của
the program. chương trình. For example, language identifiers such as en and de Ví dụ,
ngôn ngữ nhận dạng như là en và de
signify the English and German languages, respectively. biểu và Đức ngôn ngữ tiếng Anh,
tương ứng.
mimeTypes[] mimeTypes []
Specifies the file format of the information that travels on the Web. Chỉ định định dạng file
của các thông tin mà đi trên Web.
text/html and image/gif are two examples of MIME types. / Html văn bản và hình ảnh gif / là
hai ví dụ về định dạng các loại.
Ver. Ver. 1.0 1.0
Page 22 Trang 22
Model (Contd.)
The following table lists the properties of the navigator Bảng sau liệt kê các thuộc tính
của hoa tiêu
Model (Contd.)
userAgent Tác nhân Người dùng
Sends the string containing information such as browser Gửi chuỗi chứa thông tin như trình
duyệt
version, code name, and platform from the client to the phiên bản, tên mã, và nền tảng từ
khách hàng đến
server. máy chủ. The server uses this string to identify the client. Các máy chủ sử dụng chuỗi
này để xác định các khách hàng.
plugins[] plugins []
Specifies an array of plug-in objects Shockwave is an Chỉ định một mảng các plug-in
Shockwave là một đối tượng
plugins[] plugins []
Specifies an array of plug in objects. Chỉ định một mảng các plug trong các đối tượng.
Shockwave is an Shockwave là một
example of a plug-in. ví dụ về một plug-in. However, not all browsers support Tuy nhiên,
không phải tất cả các trình duyệt hỗ trợ
this property. tài sản này.
platform nền tảng
Specifies the operating system of the Web browser. Xác định hệ điều hành của trình duyệt
Web.
Ver. Ver. 1.0 1.0
Page 23 Trang 23
Model (Contd.)
The methods associated with the navigator object are: Các phương pháp liên kết với các
đối tượng tiêu là:
Model (Contd.)
javaEnabled(): Returns a boolean value that specifies javaEnabled (): Trả về một giá trị
boolean chỉ định
whether JavaScript is enabled or disabled in the Web có JavaScript được kích hoạt hay vô
hiệu hóa trong trang web
RtRt
th W bb thứ W bb
ff
tt
preference(): Returns the Web browser preferences set ưu đãi (): trả về tuỳ chọn trình duyệt
web thiết lập
by the user, such as background color. bởi người sử dụng, chẳng hạn như màu nền.
taintEnabled(): Returns a boolean value that specifies taintEnabled (): Trả về một giá trị
boolean chỉ định
whether the security feature of the current Web browser is dù các tính năng bảo mật của trình
duyệt Web hiện nay là
whether the security feature of the current Web browser is dù các tính năng bảo mật của trình
duyệt Web hiện nay là
enabled or disabled. kích hoạt hay vô hiệu hóa.
Ver. Ver. 1.0 1.0
Page 24 Trang 24
Demo: Using Objects Demo: Sử dụng đối tượng
Demo: Using Objects Demo: Sử dụng đối tượng
Fun Seasons Corp. is a leading departmental store in Vui Seasons Corp là một cửa hàng hàng
đầu trong các phòng ban
Chicago. Chicago. The store provides online shopping facility to its cửa hàng này cung cấp
cơ sở mua sắm trực tuyến cho mình
customers across the United States. khách hàng trên khắp Hoa Kỳ. Harrison, the Web site
Harrison, các trang web
administrator of the departmental store wants to update the quản trị viên của các phòng ban
cửa hàng muốn cập nhật
administrator of the departmental store, wants to update the quản trị viên của các cửa hàng
của bộ, muốn cập nhật
interface of the Web site to make it more attractive. giao diện của trang Web để làm cho nó
hấp dẫn hơn. He wants Ngài muốn
to add a feature to the Web site so that each time a user loads thêm một tính năng cho trang
web để mỗi lần người dùng tải
the Web site, a pop-up window appears with the departmental các trang web, một cửa sổ pop-
up sẽ xuất hiện với các phòng ban
ppp ppp
pp Trang
pp
store name and the message “Online Shopping...Feel the lưu trữ tên và thông báo "Online
Shopping ... Cảm nhận
difference”. sự khác biệt ". In addition, Harrison needs to use JavaScript Ngoài ra, Harrison
nhu cầu sử dụng JavaScript
objects to include the preceding features. các đối tượng bao gồm các tính năng trước đó. Help
Harrison Trợ giúp Harrison
update the Web site cập nhật các trang web
update the Web site. cập nhật các trang web.
Ver. Ver. 1.0 1.0
Page 25 Trang 25
Demo: Using Objects (Contd.) Demo: Sử dụng đối tượng (Contd.)
Demo: Using Objects (Contd.) Demo: Sử dụng đối tượng (Contd.)
Design the user interface. Thiết kế giao diện người dùng.
Write the script. Viết kịch bản.
Ver. Ver. 1.0 1.0
Page 26 Trang 26
Introducing JavaScript Language Objects Giới thiệu JavaScript Ngôn ngữ đối tượng
Introducing JavaScript Language Objects Giới thiệu JavaScript Ngôn ngữ đối tượng
These objects are not related to the documents located in Những đối tượng này không liên
quan đến các tài liệu nằm ở
the current window and are known as language objects. cửa sổ hiện tại và được gọi là các đối
tượng ngôn ngữ.
Language objects are widely used for data processing in đối tượng ngôn ngữ được sử dụng
rộng rãi cho các dữ liệu chế biến
JavaScript supports the following built-in language objects: JavaScript hỗ trợ các đối tượng
sau đây được xây dựng trong ngôn ngữ:
String object Đối tượng String
Array object Mảng đối tượng
yjyj
Date object Ngày đối tượng
Math object Toán đối tượng
Ver. Ver. 1.0 1.0
Page 27 Trang 27
Introducing JavaScript Language Objects (Contd.) Giới thiệu ngôn ngữ JavaScript Đối
tượng (Contd.)
tượng (Contd.)
The String object is one of the highest-level language Các đối tượng String là một trong
những ngôn ngữ cấp cao nhất
objects in the JavaScript object hierarchy. các đối tượng trong hệ thống phân cấp đối tượng
JavaScript.
The following are some of the String object methods: Sau đây là một số trong những
phương thức đối tượng String:
charCodeAt() : Returns integer character code from a charCodeAt (): trả về số nguyên, ký tự
từ một
character. ký tự.
Concat() : Returns a concatenated string. Concat (): Trả về một chuỗi nối.
fromCharCode() : Returns the concatenated string value of fromCharCode (): Trả về giá trị
chuỗi nối của
code numbers supplied as parameters. mã số được cung cấp như các thông số.
lastIndexOf(search_String [,startIndex]) : lastIndexOf (SEARCH_STRING [, startIndex]):
Returns the index value of the last occurrence of the string by Trả về giá trị chỉ số của sự xuất
hiện cuối cùng của chuỗi bằng
starting the search backwards from the beginning of the index bắt đầu tìm kiếm ngược trở lại
từ đầu của chỉ số
starting the search backwards from the beginning of the index. bắt đầu tìm kiếm ngược trở lại
từ đầu của chỉ số.
replace() : Matches a specified regular expression with a thay thế (): quả các trận đấu một quy
định thường biểu hiện với một
string and replaces the match with a specified substring. chuỗi và thay thế phù hợp với một
chuỗi xác định.
Ver. Ver. 1.0 1.0
Page 28 Trang 28
tượng (Contd.)
tượng (Contd.)
search(): Returns an index value of the character within tìm kiếm (): Trả về một giá trị chỉ số
của nhân vật trong
string where the search_String begins. chuỗi nơi SEARCH_STRING bắt đầu.
slice(): Slices a section of a specified string and returns a slice (): Slices một phần của một
chuỗi quy định và trả về một
new string containing the sliced section. chuỗi mới có chứa các phần thái lát.
lit() R t lit () R t
fd li it d it fd li nó d nó
split(): Returns an array of delimited items. chia (): trả về một mảng của các giới hạn.
strike(): Surrounds the string with the HTML <STRIKE> đình công (): bao quanh các chuỗi
với các <STRIKE> HTML
tag. tag.
substring(): Returns the characters in a string as a substring (): Trả về ký tự trong một chuỗi
như là một
substring(): Returns the characters in a string as a substring (): Trả về ký tự trong một chuỗi
như là một
substring between two specified indices. chuỗi con giữa hai chỉ số quy định.
ToLowerCase(): Converts a string in lowercase. ToLowerCase (): Chuyển đổi một chuỗi ký
tự trong chữ thường.
ToUpperCase(): Converts a string in uppercase ToUpperCase (): Chuyển đổi một chuỗi ký tự
được viết hoa
ToUpperCase(): Converts a string in uppercase. ToUpperCase (): Chuyển đổi một chuỗi ký tự
được viết hoa.
Ver. Ver. 1.0 1.0
Page 29 Trang 29
tượng (Contd.)
tượng (Contd.)
Some of the widely used properties of the string object Một số tài sản được sử dụng rộng
rãi của các đối tượng chuỗi
are: là:
length property: The length property is used to chiều dài tài sản: Tài sản dài được sử dụng để
determine the length of a string in JavaScript. xác định độ dài của một chuỗi trong JavaScript.
prototype property: The prototype property is used to Nguyên mẫu tài sản: Tài sản nguyên
mẫu được sử dụng để
specify a particular property or method as a prototype. chỉ định một tài sản cụ thể hoặc các
phương pháp như là một nguyên mẫu.
Ver. Ver. 1.0 1.0
Page 30 Trang 30
tượng (Contd.)
tượng (Contd.)
Arrays are variables used to store a sequence of values. Mảng là các biến được sử dụng để
lưu trữ một chuỗi các giá trị.
Some methods associated with the Array object are: Một số phương pháp liên kết với các
đối tượng Array là:
concat() : Returns an array object as a combination of two concat (): trả về một đối tượng
mảng như là một sự kết hợp của hai
array objects. mảng các đối tượng.
join(separator_string) : Returns an array of string from tham gia (separator_string): trả về một
mảng các chuỗi từ
an array that is separated by a specified string separator, such một mảng mà được phân cách
bằng một tách chuỗi quy định, chẳng hạn
as comma. như dấu phẩy.
RtRt
th ltl thứ LTL
tf th tf thứ
pop() : Returns the last element of the array. pop (): Trả về phần tử cuối cùng của mảng.
push() : Pushes a value to the end of an array. push (): Pushes một giá trị đến hết mảng.
reverse() : Reverses the order of the elements in an array. reverse (): Đảo ngược thứ tự của
các phần tử trong mảng.
S lt th fi tl S lt thứ fi tl
tf th tf thứ
dd
it nó
shift() : Selects the first element of the array and removes it chuyển (): Chọn các yếu tố đầu
tiên của mảng và loại bỏ nó
from the array. từ mảng.
slice() : Returns a new array from the original array by slice (): trả về một mảng mới từ mảng
đầu bởi
replacing a portion of the original array with another array thay thế một phần của mảng ban
đầu với mảng khác
Ver. Ver. 1.0 1.0
replacing a portion of the original array with another array. thay thế một phần của mảng ban
đầu với mảng khác.
unshift() :Inserts a value in the beginning of an array. unshift (): Chèn một giá trị vào đầu của
một mảng.
Page 31 Trang 31
tượng (Contd.)
tượng (Contd.)
Some widely used properties of the Array object are: Một số được sử dụng rộng rãi tài sản
của đối tượng Array là:
Array object length Property: The length property of an Sở hữu chiều dài mảng đối
tượng: Các tài sản chiều dài của một
array object returns the number of elements in the array. mảng đối tượng trả về số phần tử
trong mảng.
Array object prototype Property: The prototype property of Mảng đối tượng nguyên
mẫu bất động sản: Các tài sản nguyên mẫu
the array object enables you to assign additional properties mảng đối tượng cho phép bạn gán
thuộc tính bổ sung
and methods similar to the string objects. và các đối tượng phương pháp tương tự như chuỗi.
Ver. Ver. 1.0 1.0
Page 32 Trang 32
tượng (Contd.)
tượng (Contd.)
The Date object supports a number of methods to handle Các đối tượng Ngày hỗ trợ một số
phương pháp để xử lý
date and time. ngày và thời gian. These include: Chúng bao gồm:
get() get ()
set() set ()
parse() and UTC() methods phân tích cú pháp () và UTC () phương pháp
to() để ()
getTime() getTime ()
getYear() getYear ()
getMonth() getMonth ()
getDate() getdate ()
getDay() getDay ()
getHours() getHours ()
getMinutes() getMinutes ()
Ver. Ver. 1.0 1.0
getSeconds() getSeconds ()
Page 33 Trang 33
tượng (Contd.)
tượng (Contd.)
Using the Math language object that consists of properties Sử dụng đối tượng ngôn ngữ
toán học mà bao gồm bất động sản
and methods, you can perform arithmetic and trigonometric và phương pháp, bạn có thể thực
hiện các phép toán số học và lượng giác
operations. hoạt động.
Some methods associated with Math object are: Một số phương pháp liên kết với Toán đối
tượng là:
Math.abs(value) Math.abs (giá trị)
Math.acos(value) Math.acos (giá trị)
Math.asin(value) Math.asin (giá trị)
Math.atan(value) Math.atan (giá trị)
Math.atan2(value1, value2) Math.atan2 (value1, value2)
Math.ceil(value) Math.ceil (giá trị)
Math.cos(value) Math.cos (giá trị)
Math.exp(value) Math.exp (giá trị)
Ver. Ver. 1.0 1.0
Page 34 Trang 34
tượng (Contd.)
tượng (Contd.)
The following table lists the properties of the Math object Bảng sau liệt kê các thuộc tính của
đối tượng Math
and their constant values. và liên tục của giá trị.
Value Giá trị
Math.E Math.E
Euler's constant Hằng số Euler
2.718281828459045 2.718281828459045
Math.LN2 Math.LN2
Natural logarithm of 2 Lôgarit tự nhiên của 2
0.6931471805599453 0.6931471805599453
Math.LN10 Math.LN10
Natural logarithm of 10 Lôgarit tự nhiên của 10
2.302585092994046 2.302585092994046
Math.LOG2E Math.LOG2E
Base 2 logarithm of Euler's Logarit cơ số 2 của Euler
constant không đổi
1.4426950408889634 1.4426950408889634
Math.LOG10E Math.LOG10E
Base 10 logarithm for complex Logarit cơ số 10 cho phức tạp
mathematical calculations toán học tính toán
0.4342944819032518 0.4342944819032518
Math.PI Math.PI
The PI constant Hằng PI
3.141592653589793 3.141592653589793
Math.SQRT1/ Math.SQRT1 /
22
The square root of 0.5 Các căn bậc hai là 0,5
0.7071067811865476 0.7071067811865476
Ver. Ver. 1.0 1.0
Math.SQRT2 Math.SQRT2
The square root of 2 Các căn bậc hai của 2
1.4142135623730951 1.4142135623730951
Page 35 Trang 35
Demo: Using JavaScript Language Objects Demo: Sử dụng các đối tượng ngôn ngữ
JavaScript
Demo: Using JavaScript Language Objects Demo: Sử dụng các đối tượng ngôn ngữ
JavaScript
RoundTheClock, Inc. is an event management company RoundTheClock, Inc là một công ty
quản lý sự kiện
based in North America. có trụ sở tại Bắc Mỹ. The company currently has a static Công ty
hiện đang có một tĩnh
Web site displaying generic information about the company. Trang web hiển thị thông tin
chung về công ty.
The company plans to organize a Rhythm and Blues concert Công ty có kế hoạch tổ chức
một buổi hòa nhạc Rhythm và Blues
The company plans to organize a Rhythm and Blues concert Công ty có kế hoạch tổ chức
một buổi hòa nhạc Rhythm và Blues
on the event of New Year's Eve. về các sự kiện của năm của đêm giao thừa. The senior
management of Việc quản lý cấp cao của
the company wants to modify its Web site so that each time công ty muốn thay đổi trang web
của mình để mỗi thời gian
the Web site is loaded, the home page displays the current các trang web được tải, trang chủ
sẽ hiển thị hiện tại
pg pg
py py
day, date, month, and year in the upper-left corner. ngày, ngày, tháng, năm ở góc trên bên
trái. Also, the Ngoài ra,
home page should provide information about the number of trang chủ phải cung cấp thông tin
về số lượng
days left for New Year 's Eve. ngày còn lại cho năm mới Eve. The visitors should be able Các
du khách có thể
book tickets for the concert through the Web site David book vé cho buổi biểu diễn thông qua
các trang web của David
book tickets for the concert through the Web site. book vé cho buổi biểu diễn thông qua các
trang web. David David
Simmons, a Web designer at RoundTheClock, Inc., has been Simmons, một nhà thiết kế web
tại RoundTheClock, Inc, đã được
assigned this task. được giao nhiệm vụ này. Help David achieve the desired outcome. Trợ
giúp David đạt được kết quả mong muốn.
Ver. Ver. 1.0 1.0
Page 36 Trang 36
Demo: Using JavaScript Language Objects (Contd.) Demo: Sử dụng các đối tượng ngôn
ngữ JavaScript (Contd.)
Demo: Using JavaScript Language Objects (Contd.) Demo: Sử dụng các đối tượng ngôn
ngữ JavaScript (Contd.)
Create the user interface. Tạo giao diện người dùng.
Write the script. Viết kịch bản.
Ver. Ver. 1.0 1.0
Page 37 Trang 37
Summary Tóm tắt
JavaScript has a hierarchical object model that describes the JavaScript có một mô hình đối
tượng phân cấp mô tả
various objects and their relationships. các đối tượng và các mối quan hệ của họ.
The window object has various methods and properties that Các đối tượng cửa sổ có
phương pháp khác nhau và thuộc tính
can be used to add different functionality to the window. có thể được sử dụng để thêm các
chức năng khác nhau để cửa sổ.
The document object provides the properties and methods to Các đối tượng tài liệu
cung cấp các thuộc tính và phương pháp
work with the current document. làm việc với các tài liệu hiện hành.
The hi t Các t hi
object contains a list of all pages that have đối tượng chứa một danh sách của tất cả các trang
có
The history object contains a list of all pages that have Các đối tượng lịch sử có chứa
một danh sách tất cả những trang có
been visited in the browser window. được truy cập trong cửa sổ trình duyệt.
The location object enables navigation to different URLs in Các đối tượng vị trí cho
phép chuyển hướng đến URL khác nhau trong
a script. một kịch bản.
a script. một kịch bản.
The navigator object allows you to determine the latest Các đối tượng tiêu cho phép
bạn xác định mới nhất
features supported by a particular browser such as browser tính năng hỗ trợ bởi một trình
duyệt cụ thể như trình duyệt
version, user platform, and plug-ins. phiên bản, người sử dụng nền tảng, và plug-ins.
Ver. Ver. 1.0 1.0
Page 38 Trang 38
JavaScript provides built-in objects called language objects to JavaScript cung cấp được xây
dựng trong các đối tượng được gọi là các đối tượng ngôn ngữ
perform data processing. thực hiện xử lý dữ liệu.
Language objects include: Ngôn ngữ đối tượng bao gồm:
String Object String Object
AA
Obj t Đối tượng t
Array Object Đối tượng Array
Date Object Ngày đối tượng
Math Object Toán Object
You can create the string object in JavaScript by assigning Bạn có thể tạo các đối tượng
chuỗi trong JavaScript bằng cách chỉ định
You can create the string object in JavaScript by assigning Bạn có thể tạo các đối tượng
chuỗi trong JavaScript bằng cách chỉ định
a string value to a variable or a property. một giá trị chuỗi đến một biến hoặc sở hữu một.
Some of the widely used properties of the string object are: Một số tài sản được sử dụng
rộng rãi của các đối tượng chuỗi là:
length property chiều dài tài sản
prototype property Nguyên mẫu tài sản
Arrays are variables used to store a sequence of values. Mảng là các biến được sử dụng để
lưu trữ một chuỗi các giá trị.
To create an array, a new array object is assigned to the Để tạo ra một mảng, một đối tượng
mảng mới được giao cho
Ver. Ver. 1.0 1.0
variable. biến.
Page 39 Trang 39
The JavaScript Date object allows you to extract parts of date Các JavaScript Ngày đối
tượng cho phép bạn trích xuất các bộ phận của ngày
and time. và thời gian.
The JavaScript Math object allows you to perform arithmetic Các đối tượng JavaScript
Math cho phép bạn thực hiện số học
and trigonometric operations. và lượng giác hoạt động.
Ver. Ver. 1.0 1.0

IWCD_Session_07.pdf
Page 1 Trang 1
Exception handling in JavaScript Xử lý ngoại lệ trong JavaScript
Ver. Ver. 1.0 1.0
Page 2 Trang 2
Exception Handling in JavaScript Xử lý ngoại lệ trong JavaScript
A code may contain bugs or errors, which may cause your Một mã có thể có lỗi hoặc sai sót,
có thể làm bạn
Exception Handling in JavaScript Xử lý ngoại lệ trong JavaScript
program to generate erroneous/undesired results (or no chương trình để tạo ra sai lầm / kết
quả không mong muốn (hoặc không có
results at all). kết quả ở tất cả).
The errors in JavaScript can be of the following two types: Các lỗi trong JavaScript có thể
được của các loại sau đây hai:
Syntax errors: Are detected by the Web browser when the lỗi cú pháp: Các phát hiện của các
trình duyệt Web khi
page is loaded in the Web browser. Trang được tải trong trình duyệt Web.
Runtime errors: Are detected by the Web browser at the time lỗi Thời gian: Các phát hiện của
các trình duyệt Web vào thời
fof program execution. fof thực hiện chương trình.
JavaScript provides various methods to handle errors JavaScript cung cấp các phương pháp
khác nhau để xử lý lỗi
including the following methods: bao gồm các phương pháp sau đây:
try...catch block cố gắng ... bắt khối
onerror event handler onerror xử lý sự kiện
Ver. Ver. 1.0 1.0
Page 3 Trang 3
Exception Handling in JavaScript (Contd.) Xử lý ngoại lệ trong JavaScript (Contd.)
You can handle errors that occur during script execution by Bạn có thể xử lý các lỗi xảy ra
trong khi thực hiện kịch bản của
enclosing your JavaScript code within a try…catch block. kèm theo mã JavaScript của bạn
trong vòng một ... bắt khối thử.
A try…catch block enables you to catch runtime errors A ... bắt chặn thử cho phép
bạn nắm bắt lỗi thời gian chạy
that may occur in a page. có thể xảy ra trong một trang.
When an error occurs during script execution, JavaScript Khi một lỗi xảy ra trong khi thực
hiện kịch bản, JavaScript
generates an instance of the error object. tạo ra một thể hiện của đối tượng lỗi.
The instance of the error object contains information Các cá thể của đối tượng chứa thông
tin lỗi
jj
related to the error that occurs. liên quan đến các lỗi xảy ra.
You can retrieve this information by accessing the following Bạn có thể lấy lại thông tin bằng
cách truy cập sau
properties of the error object: thuộc tính của đối tượng lỗi:
pp Trang
jj
Number: Specifies a 16-bit number that needs to be operated Số: Chỉ định một số 16-bit cần
được hoạt động
with 0xFFFF by using the binary operator, & to produce an với 0xFFFF bằng cách sử dụng
các toán tử nhị phân, và để sản xuất một
error code. mã lỗi.
Ver. Ver. 1.0 1.0
Description: Provides a description of the error. Mô tả: Cung cấp một mô tả về lỗi.
Page 4 Trang 4
The following table lists some error messages with their Bảng sau đây liệt kê một số thông
báo lỗi với họ
respective error numbers and description. tương ứng số lỗi và mô tả.
Error Message Thông báo Lỗi
Error Lỗi
Number Số
Undefined identifier Không xác định định danh
5009 5009
Occurs due to an uninitialized variable. Xuất hiện biến do chưa được sở khởi một. For
example, when a Ví dụ, khi một
Undefined identifier Không xác định định danh
5009 5009
Occurs due to an uninitialized variable. Xuất hiện biến do chưa được sở khởi một. For
example, when a Ví dụ, khi một
variable is not assigned a value or a local variable is been biến là không được chỉ định một
giá trị hay một biến địa phương là được
accessed by a different function. truy cập bằng một chức năng khác nhau.
Function expected Chức năng dự kiến
5002 5002
Occurs due to case mismatch in the name of the function Xảy ra trường hợp không phù hợp
do tại tên của hàm
being called. được gọi. For example, when a function being called is Ví dụ, khi một hàm
được gọi là
referenced by a different name. tham chiếu bởi một tên khác nhau.
referenced by a different name. tham chiếu bởi một tên khác nhau.
Expected = Dự kiến =
1011 1011
Occurs when a value is assigned using a different operator. Xảy ra khi một giá trị được chỉ
định sử dụng một nhà điều hành khác nhau.
For example, when the equality (==) operator is used in place Ví dụ, khi sự bình đẳng ==)
điều hành (được sử dụng thay
of the assignment (=) operator. chuyển nhượng (=) điều hành.
Expected } Dự kiến}
1009 1009
Occurs due to missing parenthesis. Xảy ra do thiếu dấu ngoặc đơn. For example, when a Ví
dụ, khi một
parenthesis may be missing somewhere in the function or ngoặc đơn có thể thiếu một nơi nào
đó trong hàm hoặc
parenthesis may be missing somewhere in the function or ngoặc đơn có thể thiếu một nơi nào
đó trong hàm hoặc
multiple if statements. nhiều khi báo cáo.
Wrong number of Sai số
arguments đối số
450 450
Occurs when wrong number of arguments is passed to the Xảy ra khi sai số đối số được
truyền cho
function. chức năng. For example, when an error will occur if a function Ví dụ, khi một lỗi sẽ
xảy ra nếu một hàm
that can accept one argument is passed two arguments in the có thể chấp nhận một đối số
được thông qua hai đối số trong
program code mã chương trình
Ver. Ver. 1.0 1.0
program code. chương trình mã.
Page 5 Trang 5
When the code in the try block generates an error, the same Khi các mã trong khối cố gắng
tạo ra một lỗi, giống
is caught by the catch block. bị bắt bởi khối catch.
You can handle errors that remain untrapped in try…catch Bạn có thể xử lý các lỗi mà vẫn
untrapped trong cố gắng ... bắt
blocks by using the onerror event handler. khối bằng cách sử dụng xử lý sự kiện
onerror.
The onerror event handler is associated with the window Việc xử lý sự kiện onerror
được liên kết với cửa sổ
The following code illustrates how to define a function Các mã sau minh họa làm thế nào để
định nghĩa một hàm
gg
handleErrors() as the onerror event handler. handleErrors () là xử lý sự kiện onerror.
<SCRIPT> <script>
onerror= handleErrors onerror = handleErrors
Ver. Ver. 1.0 1.0
Page 6 Trang 6
The following example that illustrates the use of the Ví dụ sau minh họa việc sử dụng
onerror event handler: onerror xử lý sự kiện:
<html> <head> <html> <head>
<script Language=JavaScript> <script Language=JavaScript>
onerror=errorMsg; onerror = errorMsg;
function errorMsg() chức năng errorMsg ()
{{
alert('An error occurred on the Page!'); alert ("Có lỗi xảy ra trên Trang! ');
}}
</script> </ Script>
The preceding code displays a customized error message to the Các mã trước đó hiển thị một
thông báo lỗi tùy biến với
user. người sử dụng. In addition to the customized error message a standard Ngoài các thông
báo lỗi tùy biến một tiêu chuẩn
error message is also displayed. thông báo lỗi cũng được hiển thị.
Ver. Ver. 1.0 1.0
Page 7 Trang 7
You can suppress the standard message by making the Bạn có thể ngăn chặn các tin nhắn tiêu
chuẩn bằng cách làm
errorMsg() function return the boolean value, true. errorMsg () chức năng trả về giá trị
boolean, đúng sự thật.
In the function that acts as the onerror event handler, you Trong các chức năng hoạt động như
xử lý sự kiện onerror, bạn
can display information related to the specific error that has có thể hiển thị thông tin liên quan
đến các lỗi cụ thể mà có
occurred. xảy ra.
Ver. Ver. 1.0 1.0
Page 8 Trang 8
You can improve the performance of JavaScript code by Bạn có thể cải thiện hiệu suất của
mã JavaScript của
avoiding too much use of document.write() method. tránh sử dụng quá nhiều
document.write () phương pháp.
This method is used for writing HTML content dynamically to Phương pháp này được dùng
để viết nội dung HTML động để
the document in a window or frame. các tài liệu trong một cửa sổ hoặc khung. Instead, you
can Thay vào đó, bạn có thể
tt
t th dttb di l t ngày l di dttb
dd
d th d th
it it i nó nó i
concatenate the data to be displayed and then write it using ghép các dữ liệu được hiển thị, và
sau đó viết nó bằng cách sử dụng
a single statement as shown in the following code sample: một tuyên bố duy nhất như trong
các mẫu mã sau đây:
<SCRIPT LANGUAGE="JavaScript"> <script LANGUAGE="JavaScript">
var output =”<B>”; var output = "<B>";
output += “ Welcome</B> “; sản lượng + = "Chào mừng bạn </ B>";
output += “<img src=a.gif height=40 width=40 sản lượng + = "<img src = a.gif chiều cao =
40 chiều rộng = 40
alt Flo er>” Flo alt er> "
alt=Flower>”; alt = Hoa> ";
output += “<input type=button value=click>”; sản lượng + = "<input type=button
value=click>";
document.write(output); </SCRIPT> document.write (đầu ra); </ SCRIPT>
The preceding code uses a call to the d Các mã trước sử dụng một cuộc gọi đến các d
tt
it method nó phương pháp
Ver. Ver. 1.0 1.0
The preceding code uses a call to the document.write method Các mã trước sử dụng một
cuộc gọi đến các phương pháp document.write
to display a concatenation of various strings on a Web page. để hiển thị một nối các chuỗi
khác nhau trên một trang Web.
Page 9 Trang 9
Caching of objects implies storing a repeatedly accessed Caching của các đối tượng ngụ ý lưu
trữ một lần truy cập
object inside a variable, and then using that variable in the đối tượng bên trong một biến, và
sau đó sử dụng biến trong
code, instead of making repeated references to the object. mã, thay vì lặp đi lặp lại để làm tài
liệu tham khảo đối tượng.
You can cache the objects such as images used in the script Bạn có thể cache các đối tượng
như hình ảnh được sử dụng trong kịch bản
fil i fil i
dt dt
dd
th thứ
ff
ff
it Th nó Th
file in order to speed up the performance of scripts. tập tin để tăng tốc độ hiệu suất của các
script. The Các
following code illustrates how you can repeatedly access mã sau minh họa làm thế nào bạn
liên tục có thể truy cập
the images collection in a Web page: bộ sưu tập hình ảnh trong một trang web:
<SCRIPT l <SCRIPT l
"J "J
S i t"> S i t ">
<SCRIPT language="JavaScript"> <script Language="JavaScript">
for (i=0;i<document.images.length;i++) cho (i = 0; document.images.length <i; i + +)
document.images[i].src="a.gif"; document.images [i] ". a.gif src =";
/SCRIPT / SCRIPT
Ver. Ver. 1.0 1.0
Page 10 Trang 10
The preceding code accesses the document.images Các mã truy cập trước
document.images
collection twice during each loop, first, to check whether the thu hai lần trong mỗi vòng lặp,
đầu tiên, để kiểm tra xem
number of images in the document object is less than the số hình ảnh trong các đối tượng tài
liệu sẽ thấp hơn
value of i in the i<document.images.length statement, giá trị của i trong <câu
document.images.length i,
and then to change the source of the images in the và sau đó thay đổi nguồn gốc của hình ảnh
trong
and then, to change the source of the images in the và sau đó, để thay đổi nguồn gốc của hình
ảnh trong
document.images[i ].src statement. document.images [i]. src tuyên bố. If there are 10 images
Nếu có 10 hình ảnh
on the Web page, the given code will call the images object 20 trên trang web, mã số sẽ gọi
những hình ảnh đối tượng 20
times. lần.
The following code illustrates how the images object can be Các mã sau minh họa cách
những hình ảnh đối tượng có thể được
cached by using a variable: lưu trữ bằng cách sử dụng một biến:
<SCRIPT language="JavaScript"> <script Language="JavaScript">
var myimages=document.images myimages var = document.images
var myimages document.images var myimages document.images
for (i=0;i<myimages.length;i++) cho (i = 0; myimages.length <i; i + +)
myimages[i].src="a.gif“; myimages [i] ". a.gif src =";
Ver. Ver. 1.0 1.0
Page 11 Trang 11
In the preceding code, instead of making repeated references Trong đoạn code trên, thay vì
làm tài liệu tham khảo lặp đi lặp lại
to the images object, references are made to the variable, để những hình ảnh đối tượng,
tài liệu tham khảo được thực hiện để biến,
myimages . myimages. This saves the visitors from waiting for all the Điều này tiết kiệm
những du khách từ chờ đợi cho tất cả các
images to be downloaded from the Web server. hình ảnh được tải về từ máy chủ Web.
Because of the Do
restricted number of references to the images object not only hạn chế số lượng các tài liệu
tham khảo để những hình ảnh không chỉ đối tượng
restricted number of references to the images object, not only hạn chế số lượng các tài liệu
tham khảo cho các hình ảnh đối tượng, không chỉ
the performance of the Web page is enhanced but the hiệu quả hoạt động của trang Web được
tăng cường nhưng
bandwidth of the users is also saved. băng thông của người sử dụng cũng được lưu lại.
Ver. Ver. 1.0 1.0
Page 12 Trang 12
Use backslash (\) to display special characters as literals. Sử dụng dấu gạch chéo ngược (\) để
hiển thị các ký tự đặc biệt như là các chữ.
When a backslash is encountered at the time of processing Khi bắt gặp một dấu gạch chéo
ngược tại thời điểm xử lý
a page, the Web browser interprets the next character as trang, các trình duyệt web thông dịch
các ký tự tiếp theo là
simple text instead of a special character. văn bản đơn giản thay vì một nhân vật đặc biệt. For
example, Ví dụ,
id th ti id th ti
“Th \ i "Th \ i
dt dt
t th t ngày
li ” li "
consider the string, “The \n is used to move to the new line”. xem xét các chuỗi, "The n \
được sử dụng để di chuyển đến các dòng mới".
In this string, \n holds a special meaning and when a Trong chuỗi này, \ n chứa một ý nghĩa
đặc biệt, khi một
browser encounters this character, it inserts a new line trình duyệt gặp nhân vật này, nó chèn
một dòng mới
instead of displaying the character on the screen Therefore thay vì hiển thị các ký tự trên màn
hình vậy
instead of displaying the character on the screen. thay vì hiển thị các ký tự trên màn hình.
Therefore, Do đó,
you will have to include a \ character in the string and write bạn sẽ phải bao gồm một ký tự \
trong chuỗi và viết
the string as “The \\n is used to move to the new line”. chuỗi như là "\ n \ được sử dụng để di
chuyển đến các dòng mới".
Inserting \ before \n directs the browser to ignore the special Chèn \ trước khi \ n chỉ đạo của
trình duyệt để bỏ qua đặc biệt
Inserting \ before \n directs the browser to ignore the special Chèn \ trước khi \ n chỉ đạo của
trình duyệt để bỏ qua đặc biệt
meaning and display the special character as normal text. ý nghĩa và hiển thị các ký tự đặc
biệt như văn bản bình thường.
The following example illustrates how to display special Ví dụ sau minh họa làm thế nào để
hiển thị đặc biệt
characters as literals: ký tự như các chữ:
Ver. Ver. 1.0 1.0
alert ("The \n is used to move to the new line") alert ("The n \ được sử dụng để di chuyển đến
các dòng mới")
Page 13 Trang 13
Some other character that can be displayed by preceding them Một số nhân vật khác có thể
được hiển thị bởi trước đó
with a \ character are listed in the following table. với một ký tự \ được liệt kê trong bảng sau.
Special Character Ký tự đặc biệt
Symbol Biểu tượng
single q ote q đơn ote
''
single quote b đơn
''
double quote b đôi
“"
ampersand dấu
& Và
backslash dấu gạch chéo ngược
\\
new line character dòng nhân vật mới
\n \ N
carriage return vận chuyển trở lại
\r \ R
tab tab
\t \ T
backspace backspace
\b \ B
Ver. Ver. 1.0 1.0
Page 14 Trang 14
Use the appname and appversion properties of the Sử dụng tài sản và appversion
APPNAME của
navigator object in your Web page to detect the visitors' hoa tiêu đối tượng trong trang web
của bạn để phát hiện các "khách
browser type and version and to inform them whether the loại trình duyệt và phiên bản và
thông báo cho họ hay không
content on their Web site can be rendered on their browsers nội dung trên trang web của họ
có thể được đưa ra trên trình duyệt của họ
t Th f ll i Th t e sẽ i
d ill tth d bệnh TTH
tdtt th tdtt thứ
or not. hay không. The following code illustrates how to detect the Các mã sau minh họa làm
thế nào để phát hiện
browser type and version: loại trình duyệt và phiên bản:
<html> <html>
<head> <head>
<script type="text/javascript"> <script type="text/javascript">
function browserDetection() chức năng browserDetection ()
{{
var brwsr=navigator.appName; var brwsr = navigator.appName;
var brwsr_ver=navigator.appVersion; var brwsr_ver = navigator.appVersion;
Ver. Ver. 1.0 1.0
brwsr_ver=parseFloat(brwsr_ver); brwsr_ver = parseFloat (brwsr_ver);
Page 15 Trang 15
if ((brwsr=="Netscape"||brwsr=="Microsoft if ((brwsr == "Netscape" | | brwsr == "Microsoft
Internet Explorer") && (brwsr_ver>=4)) Internet Explorer ") & & (brwsr_ver> = 4))
{{
alert("Your browser supports this page!"); alert ("trình duyệt của bạn hỗ trợ trang này!");
}}
else khác
{{
alert("Page cannot be displayed. Please alert ("Trang không thể được hiển thị. Xin
upgrade your browser"); nâng cấp trình duyệt của bạn ");
}}
}}
</head> </ Head>
ii
Ver. Ver. 1.0 1.0
<body onload="browserDetection()"> <body onload="browserDetection()">
</body> </html> </ Body> </ html>
Page 16 Trang 16
Does JavaScript support passing an array to a function? Không hỗ trợ JavaScript truyền một
mảng tới một hàm?
Yes, JavaScript supports passing an array to a function. Có, JavaScript hỗ trợ truyền một
mảng tới một hàm. All Tất cả
arguments passed to the function can be retrieved by using the đối số được truyền cho hàm có
thể được lấy bằng cách sử dụng
functionName.arguments collection. functionName.arguments bộ sưu tập. It is not necessary
to Nó không phải là cần thiết để
explicitly specify the argument list in the function declaration chỉ định rõ ràng danh sách đối
số trong phần khai báo hàm
explicitly specify the argument list in the function declaration. chỉ định rõ ràng danh sách đối
số trong phần khai báo hàm.
All the arguments passed with the function call are Tất cả các đối số được truyền với các
cuộc gọi chức năng là
automatically stored in the arguments collection. tự động được lưu trữ trong bộ sưu tập các
đối số. The following Các sau
example illustrates how to pass arrays to a function: Ví dụ minh họa làm thế nào để vượt qua
mảng đến một chức năng:
pp
pp
yy
<HTML> <HTML>
<HEAD> <HEAD>
<SCRIPT LANGUAGE=JAVASCRIPT> <script LANGUAGE=JAVASCRIPT>
function myfunction() chức năng myfunction ()
{{
var i; var i;
for(i=0;i<myfunction arguments length;i++) cho (i = 0; i chiều dài đối số myfunction <; i +
+)
Ver. Ver. 1.0 1.0
for(i 0;i<myfunction.arguments.length;i++) cho (i 0; i <myfunction.arguments.length; i + +)
Page 17 Trang 17
{ document.write(myfunction.arguments[i]); } {Document.write (myfunction.arguments
[i]);}
}}
var arr = new Array(3) var arr = new Array (3)
arr[0] = "a“ arr [0] = "a"
arr[1] = "b“ arr [1] = "b"
arr[2] = "c“ arr [2] = "c"
myfunction(arr); myfunction (arr);
</HEAD> </ HEAD>
<BODY></BODY></HTML> <BODY> </ BODY> </ HTML>
In the preceding example, the array variable need not be explicitly Trong ví dụ trên, các biến
mảng không cần phải rõ ràng
specified in the argument list of the function quy định trong danh sách đối số của hàm
specified in the argument list of the function. quy định trong danh sách đối số của hàm.
Ver. Ver. 1.0 1.0
Page 18 Trang 18
Is there a way to refer to the main window in the secondary Có một cách để tham khảo các
cửa sổ chính trong trung
window, which is opened by using the window.open cửa sổ, được mở bằng cách sử dụng
window.open
statement? tuyên bố?
Yes, the secondary window can refer to the main window using Vâng, các cửa sổ thứ cấp có
thể tham khảo các cửa sổ chính bằng cách sử dụng
th thứ
tf th tf thứ
id id
bj t Th bj t Th
the opener property of the window object. tài sản của đối tượng mở cửa sổ. The opener
Các mở
property provides scripts in the new window with valid bất động sản cung cấp kịch bản trong
cửa sổ mới với giá trị
references to the original window. tài liệu tham khảo cho các cửa sổ ban đầu. For example,
the original Ví dụ, bản gốc
window may contain some variable values or functions that a cửa sổ có thể chứa một số giá
trị biến hay chức năng mà một
window may contain some variable values or functions that a cửa sổ có thể chứa một số giá
trị biến hay chức năng mà một
new window may require. cửa sổ mới có thể yêu cầu. In such a situation, the new window
Trong tình huống như vậy, cửa sổ mới
can make use of the < windowobject >.opener or có thể sử dụng các
<windowobject>. opener hoặc
self.opener statements. self.opener báo cáo.
The following code illustrates the use of the opener property: Các mã sau minh họa việc sử
dụng tài sản mở:
<HTML><HEAD> <HTML> <HEAD>
<TITLE> Main Window</title> Cửa sổ chính <title> </ title>
<SCRIPT language "JavaScript“> <script Ngôn ngữ "JavaScript">
Ver. Ver. 1.0 1.0
<SCRIPT language="JavaScript“> <script Language="JavaScript">
var mysubwind var mysubwind
Page 19 Trang 19
function openWindow() chức năng openWindow ()
{{
if(!mysubwind || mysubwind.closed) if (|! mysubwind | mysubwind.closed)
{{
mysubwind=window.open("SubWindow.html","sub mysubwind = window.open
("SubWindow.html", "phụ
window") cửa sổ ")
}}
else khác
{{
mysubwind.focus() mysubwind.focus ()
}}
}}
</HEAD> </ HEAD>
Ver. Ver. 1.0 1.0
<BODY> <BODY>
<FORM> <form>
Page 20 Trang 20
Select your favorite color<br> Chọn <br> màu sắc ưa thích của bạn
<INPUT type="radio" name="mycolor" value="Pink" <INPUT type = "radio" name =
"mycolor" giá trị = "Pink"
CHECKED>Pink<BR> ĐÁNH DẤU> Pink <BR>
<INPUT type="radio" name="mycolor" value="blue"> <input Type="radio"
name="mycolor" value="blue">
Blue<BR> Blue <BR>
<INPUT type="radio" name="mycolor" <INPUT type = "radio" name = "mycolor"
value="Purple">Purple <BR> giá trị = "Purple"> Purple <BR>
<INPUT type="button" value="Open New Window" <INPUT type = "nút" giá trị = "Open
New Window"
onClick="openWindow()"> onClick = "openWindow ()">
onClick= openWindow() > onClick = openWindow ()>
</FORM> </ FORM>
</BODY> </ BODY>
</HTML> </ HTML>
Save the preceding code as MainWindow.html. Lưu mã trước khi MainWindow.html.
Now, write the following code in another file: Bây giờ, viết mã sau vào tập tin khác:
<HTML> <HTML>
Ver. Ver. 1.0 1.0
<HEAD> <HEAD>
<SCRIPT Language="JavaScript"> <script Language="JavaScript">
Page 21 Trang 21
function displayColor() chức năng displayColor ()
{{
var cc=self.opener.document.forms[0].mycolor var cc = self.opener.document.forms [0].
mycolor
for (var i=0; i<cc.length; i++) cho (i var = 0; i <cc.length; i + +)
{{
if (cc[i].checked) if (cc [i]. kiểm tra)
{{
self.document.write("Hello from Main Window") self.document.write ("Xin chào từ chính
cửa sổ")
self.document.bgColor=cc[i].value self.document.bgColor = cc [i]. giá trị
}}
}}
}}
</HEAD> </ HEAD>
<BODY onLoad="displayColor()"> <body OnLoad="displayColor()">
Ver. Ver. 1.0 1.0
<BODY onLoad= displayColor() > <body OnLoad= displayColor()>
</BODY> </HTML> </ BODY> </ HTML>
Page 22 Trang 22
Save the preceding code as SubWindow.html. Lưu mã trước khi SubWindow.html.
In the preceding code, the script in the SubWindow.html file Trong đoạn mã trên, các kịch
bản trong tập tin SubWindow.html
uses the opener property to retrieve the color selected by the sử dụng thuộc tính mở để lấy
màu được chọn bởi
user on the main window. người dùng trên cửa sổ chính. The following figure displays the
Hình dưới đây hiển thị
output of the preceding code đầu ra của mã trước
output of the preceding code. đầu ra của mã trước đó.
Ver. Ver. 1.0 1.0
Page 23 Trang 23
How can I display special characters enclosed within Làm thế nào tôi có thể hiển thị ký tự
đặc biệt kèm theo trong
JavaScript code, on a Web page? Mã JavaScript, trên một trang Web?
You can precede the special characters with a backslash (\) to Bạn có thể đặt trước các ký tự
đặc biệt với một dấu gạch chéo ngược (\) để
print it on the screen. in nó trên màn hình. The backslash can be used before any dấu gạch
chéo ngược có thể được sử dụng trước khi bất kỳ
ilh ilh
t if it t nếu nó
dtb DTB
itd ITD
th thứ
dt dt
special character if it needs to be printed on the screen and not ký tự đặc biệt nếu nó cần phải
được in trên màn hình và không
interpreted as a special character. hiểu như là một nhân vật đặc biệt. For example: Ví dụ:
<HTML> <HTML>
<HEAD> <HEAD>
<SCRIPT> <script>
</SCRIPT></HEAD> </ SCRIPT> </ HEAD>
<BODY> <BODY>
<script language = "JavaScript“> <script language = "JavaScript">
document.write ("\"Hello\""); document.write ("\" Xin chào \ "");
</BODY></HTML> </ BODY> </ HTML>
Ver. Ver. 1.0 1.0
Page 24 Trang 24
The preceding code uses the document.write method to write Các mã trước đó sử dụng các
phương pháp document.write để viết
“Hello” on the page. "Hello" trên trang. Each quotation mark, which is a special Mỗi dấu
ngoặc kép, đó là một đặc biệt
character, is preceded by a backslash. nhân vật, là trước bởi một dấu sổ ngược. This makes
the browser Điều này làm cho trình duyệt
interpret the quotation marks as literals instead of special giải thích các dấu ngoặc kép như
các chữ thay vì đặc biệt
characters. ký tự.
Ver. Ver. 1.0 1.0
Page 25 Trang 25
_____________ is a JavaScript object that contains a URL _____________ Là một đối tượng
JavaScript có chứa một URL
and encapsulates a text or image link contained in a và gói gọn một liên kết văn bản hoặc
hình ảnh chứa trong một
link liên kết
Ver. Ver. 1.0 1.0
Page 26 Trang 26
The ____________ property of the window object sets the Các tài sản ____________ của đối
tượng cửa sổ thiết lập
text on the status bar of the window. văn bản trên thanh trạng thái của cửa sổ.
Ver. Ver. 1.0 1.0
Page 27 Trang 27
__________ is a JavaScript function that returns a numeric __________ Là một hàm
JavaScript để trả về một số
value when given a string as argument. giá trị khi đưa ra một chuỗi như là đối số.
parseint parseint
Ver. Ver. 1.0 1.0
Page 28 Trang 28
The __________ object allows you to specify URLs in a Các đối tượng __________ cho
phép bạn chỉ định URL trong một
script. kịch bản.
location vị trí
Ver. Ver. 1.0 1.0
Page 29 Trang 29
The ______________ property of a function allows you to Các tài sản ______________ của
một hàm cho phép bạn
retrieve all the parameters passed to a function. lấy tất cả các tham số truyền cho hàm.
arguments đối số
Ver. Ver. 1.0 1.0
gg
Page 30 Trang 30
You want to check for the presence of “@” character in the Bạn muốn kiểm tra sự hiện diện
của @ "nhân vật" trong
value stored in the variable email_id. giá trị được lưu trữ trong biến email_id. Which of the
following Điều nào sau đây
methods of the String object can be used to validate the phương pháp của đối tượng String có
thể được sử dụng để xác thực
data? dữ liệu?
substring() substring ()
indexOf() indexOf ()
toString() toString ()
eval() eval ()
indexOf() indexOf ()
Ver. Ver. 1.0 1.0

IWCD_Session_09.pdf
Page 1 Trang 1
Validate forms Xác nhận các hình thức
Work with Frames Làm việc với các khung hình
Ver. Ver. 1.0 1.0
Page 2 Trang 2
Validating Forms Hình thức xác thực
Validating Forms Hình thức xác thực
A Web site may require users to enter data through forms. Một trang web có thể yêu cầu
người dùng nhập dữ liệu thông qua hình thức.
This form data needs to be validated to ensure that the user Dữ liệu này có hình thức cần phải
được xác nhận để đảm bảo rằng người sử dụng
inputs are verified before being sent to the server for đầu vào được xác nhận trước khi được
gửi đến máy chủ cho
processing. chế biến.
The following objects of JavaScript are used for working Các đối tượng sau đây của
JavaScript được sử dụng để làm việc
with Web forms: với các hình thức web:
form object hình thức đối tượng
button object nút đối tượng
checkbox object hộp đối tượng
text object đối tượng văn bản
textarea object textarea đối tượng
radio object đài phát thanh đối tượng
select object chọn đối tượng
Ver. Ver. 1.0 1.0
jj
Page 3 Trang 3
Validating Forms (Contd.) Các hình thức chứng thực (Contd.)
The form object acts as a container for several other Các đối tượng hình thức hoạt động
như một container cho một số khác
objects that collect information from the user. đối tượng thu thập thông tin từ người sử dụng.
A form object has the following properties: Một đối tượng hình thức đặc tính sau đây:
Name : Describes the name of the form. Tên: Mô tả tên của biểu mẫu.
Action :Specifies the URL of the server, which processes the Hành động: Chỉ định URL của
máy chủ, mà xử lý
information submitted by the form. thông tin được gửi bởi biểu mẫu.
Method : Describes the format in which the data will be sent to Phương pháp: Mô tả các định
dạng trong đó các dữ liệu sẽ được gửi tới
the server. các máy chủ. It can take either GET or POST as its value. Nó có thể mất hoặc GET
hoặc POST là giá trị của nó.
Elements : Contains all the elements, such as text boxes, Các yếu tố: Chứa tất cả các yếu tố,
chẳng hạn như hộp văn bản,
checkboxes in a form. hộp kiểm tra trong một biểu mẫu.
SS
f th f ngày
th dl thứ dl
itd ith th f ITD thứ i th f
bj t bj t
Some of the event handlers associated with the form object Một số các xử lý sự kiện liên kết
với các đối tượng hình thức
are: là:
onSubmit onSubmit
Ver. Ver. 1.0 1.0
onReset onReset
Page 4 Trang 4
The button object in JavaScript allows the user to submit Các đối tượng trong JavaScript
nút cho phép người dùng gửi
a form when the user clicks the button. một hình thức khi người dùng nhấp vào nút.
A button object has the following properties: Một đối tượng nút có các thuộc tính sau
đây:
Name : Specifies the name of the button object. Tên: Ghi rõ tên của các đối tượng nút.
Value : Specifies the label of the button object. Giá trị: Chỉ định các nhãn hiệu của đối tượng
nút.
Some of the event handlers associated with the button Một số các xử lý sự kiện kết hợp với
nút
object are: đối tượng là:
jj
onClick onClick
onMouseDown onMouseDown
OnMouseUp OnMouseUp
Ver. Ver. 1.0 1.0
Page 5 Trang 5
The checkbox object is used for attributes that can take Các đối tượng hộp kiểm được sử
dụng cho các thuộc tính có thể mất
multiple values at the same time. nhiều giá trị cùng một lúc.
The checkbox object in JavaScript consists of the following Các đối tượng hộp kiểm
trong JavaScript bao gồm những điều sau đây
properties: thuộc tính:
Name : Specifies the name of the checkbox object. Tên: Ghi rõ tên của đối tượng hộp kiểm.
Value : Specifies the text associated with the checkbox object. Giá trị: Chỉ định các văn bản
liên kết với các đối tượng hộp kiểm.
Checked : Specifies whether or not the checkbox is selected. Kiểm tra: Chỉ có hoặc không có
hộp kiểm đã được chọn.
The checkbox object supports the onClick event handler. Các đối tượng hộp kiểm hỗ
trợ xử lý sự kiện onClick.
The onClick event handler is used to execute a set of Việc xử lý sự kiện onClick được
sử dụng để thực hiện một bộ
statements when the user clicks a checkbox. báo cáo khi người dùng nhấp một hộp kiểm.
Ver. Ver. 1.0 1.0
Page 6 Trang 6
The text object is used for accepting/displaying line text Các đối tượng văn bản được sử
dụng để nhận / hiển thị dòng văn bản
entry. nhập cảnh.
The text object consists of the following properties: Các đối tượng văn bản bao gồm các
đặc tính sau đây:
Name : Specifies the name of the text object. Tên: Ghi rõ tên của các đối tượng văn bản.
Value : Specifies the text displayed by the text object. Giá trị: Chỉ định các văn bản được hiển
thị bởi các đối tượng văn bản.
The text object consists of the following methods: Các đối tượng văn bản bao gồm các
phương pháp sau đây:
blur (): Removes focus from a text field. blur (): Loại bỏ tập trung từ một trường văn bản.
() ()
focus (): Sets focus on a text field. tập trung (): Bộ tập trung vào một lĩnh vực văn bản.
select (): Selects a text field. chọn (): chọn một trường văn bản.
Some of the event handlers associated with the text Một số các xử lý sự kiện liên quan đến
văn bản
Some of the event handlers associated with the text Một số các xử lý sự kiện liên quan đến
văn bản
object are: đối tượng là:
onFocus onFocus
onChange onChange
Ver. Ver. 1.0 1.0
onChange onChange
onSelect onSelect
Page 7 Trang 7
The textarea object allows the user to create a field that Các đối tượng textarea cho
phép người dùng tạo một trường
can accept multiple lines of text. có thể chấp nhận nhiều dòng văn bản.
The textarea object has the following properties: Các đối tượng textarea đặc tính sau
đây:
Name : Specifies the name of the textarea object. Tên: Ghi rõ tên của các đối tượng textarea.
Value : Specifies the text displayed by the textarea object. Giá trị: Chỉ định các văn bản được
hiển thị bởi các đối tượng textarea.
The textarea object has similar methods and event Các đối tượng textarea có phương
pháp tương tự và sự kiện
handlers as that of the text object. xử lý như của các đối tượng văn bản.
jj
Ver. Ver. 1.0 1.0
Page 8 Trang 8
The radio object allows the user to accept a single value Các đối tượng đài phát
thanh cho phép người dùng chấp nhận một giá trị
from a set of alternatives. từ một tập hợp các lựa chọn thay thế.
Each radio button field in the group should be given the Mỗi nút radio lĩnh vực trong nhóm
nên được cho
same name. cùng tên.
The radio object has the following properties: Các đối tượng đài đã có các thuộc tính sau
đây:
Name Tên
Value Giá trị
Checked Kiểm tra
DefaultChecked DefaultChecked
Index Chỉ số
Length Chiều dài
Ver. Ver. 1.0 1.0
Page 9 Trang 9
The select object allows the user to select an option Các đối tượng lựa chọn cho phép
người dùng chọn một tùy chọn
available in a popup menu. có sẵn trong một trình đơn popup.
The select object has the following properties: Các đối tượng lựa chọn có các thuộc
tính sau đây:
Name Tên
Text Văn bản
defaultSelected defaultSelected
Selectedindex Selectedindex
Selected Chọn
Value Giá trị
Ver. Ver. 1.0 1.0
Page 10 Trang 10
Form Validation: Mẫu Xác Nhận:
JavaScript allows client-side validation logic to be applied to a JavaScript cho phép phía máy
khách xác nhận logic được áp dụng cho một
Web form. Web mẫu.
Client-side validation reduces the processing time of a script Phía máy khách xác nhận làm
giảm thời gian chế biến của một kịch bản
because the data does not have to be transferred to the bởi vì các dữ liệu không phải được
chuyển giao cho
server. máy chủ.
The following properties and methods of form objects are Các tính chất sau đây, phương
pháp của các đối tượng hình thức là
used to validate the data entered in the form: được sử dụng để xác nhận các dữ liệu nhập vào
biểu mẫu:
used to validate the data entered in the form: được sử dụng để xác nhận các dữ liệu nhập vào
biểu mẫu:
element phần tử
action hành động
submit() trình ()
Ver. Ver. 1.0 1.0
Page 11 Trang 11
Demo: Developing Interactive Forms Demo: Phát triển các hình thức tương tác
Demo: Developing Interactive Forms Demo: Phát triển các hình thức tương tác
Watch Perfect Inc. is an upcoming placement consultant firm in Xem Perfect Inc là một công
ty tư vấn sắp tới vị trí trong
New York, USA. New York, Mỹ. The company wants to provide a registration Công ty
muốn cung cấp một đăng ký
form on their Web site, where the candidates can login and mẫu trên trang web của họ, nơi
các ứng cử viên có thể đăng nhập và
provide their personal educational and professional details cung cấp giáo dục cá nhân và
chuyên nghiệp chi tiết của họ
provide their personal, educational, and professional details. cung cấp cho cá nhân, giáo dục,
và chuyên nghiệp chi tiết của họ.
The form should contain the following fields: Các hình thức nên có các lĩnh vực sau đây:
Login Details Thông tin chi tiết đăng nhập
User Name Tên người dùng
Password Mật khẩu
Re-enter Password Nhập lại mật khẩu
Ver. Ver. 1.0 1.0
Page 12 Trang 12
Demo: Developing Interactive Forms (Contd.) Demo: Phát triển các hình thức tương
tác (Contd.)
Personal Details Thông tin chi tiết cá nhân
tác (Contd.)
First Name Tên đầu tiên
Last Name Tên cuối cùng
E-mail E-mail
Gender Giới Tính
Phone Number Số điện thoại
Preferred Job Location Nơi làm việc ưa thích
The user should be able to select multiple job locations Người sử dụng có thể chọn vị trí công
việc nhiều
..
Professional Details Thông tin chi tiết chuyên nghiệp
Experience (in years) Kinh nghiệm (năm năm)
Job category Ngành nghề
Key Skills Kỹ năng chính
yy
The user should be able to select multiple job categories. Người sử dụng có thể chọn nhiều
loại công việc.
Educational Details Giáo dục Thông tin chi tiết
Degree Held Bằng cấp được tổ chức
Ver. Ver. 1.0 1.0
Page 13 Trang 13
tác (Contd.)
The form should also contain buttons to submit or reset the Hình thức cũng cần có các nút để
gửi hoặc đặt lại
ll
tt
di th di thứ
ii
fi ld Th f ll i Th ld fi e sẽ i
lid ti nắp ti
tác (Contd.)
values entered in the various fields. giá trị nhập vào trong các lĩnh vực khác nhau. The
following validations Sau đây xác nhận
need to be performed: cần phải được thực hiện:
The login name, password, first name, last name, preferred job Tên đăng nhập, mật khẩu, tên,
cuối cùng tên, ưa thích công việc
location, and degree held fields should not be left blank. vị trí, và trình độ tổ chức các lĩnh
vực không được để trống.
Th Th
ll
tt
di th di thứ
dd
dd
tt
d fi ld d fi ld
The value entered in the password and re-enter password fields Giá trị nhập vào mật khẩu và
nhập lại mật khẩu lĩnh vực
should be the same. nên được như nhau.
The value entered in the experience field is between 1 and 20 years. Giá trị nhập trong lĩnh
vực kinh nghiệm là từ 1 đến 20 năm.
The e-mail field must contain the @ symbol. Các lĩnh vực e-mail phải có các ký hiệu @.
Perform the necessary validations. Thực hiện các cần thiết xác nhận.
Ver. Ver. 1.0 1.0
Page 14 Trang 14
tác (Contd.)
tác (Contd.)
To solve the preceding problem, perform the following tasks: Để giải quyết vấn đề trên, thực
hiện các nhiệm vụ sau đây:
Create the interface of the Web form. Tạo giao diện của các mẫu web.
Ensure that no field is left blank. Đảm bảo rằng các trường không được để trống.
Ensure that the value entered in the password and re-enter Đảm bảo rằng giá trị nhập vào mật
khẩu và nhập lại
password fields are same. mật khẩu sẽ được như vậy.
Ensure that the value in the experience field is entered between Đảm bảo rằng giá trị trong
lĩnh vực kinh nghiệm được nhập từ
1 and 20 years. 1 và 20 năm.
yy
Ensure that the e-mail field contains the @ symbol. Đảm bảo rằng các lĩnh vực e-mail có
chứa các ký hiệu @.
Ver. Ver. 1.0 1.0
Page 15 Trang 15
Working with Frames in JavaScript Làm việc với các khung hình trong JavaScript
Working with Frames in JavaScript Làm việc với các khung hình trong JavaScript
Frames allow the user to divide a Web page into one or Các khung hình cho phép người dùng
chia một trang web vào một hoặc
more sub regions. tiểu nhiều khu vực.
Each sub region is a frame that has a name and a URL Mỗi vùng tiểu khung có một tên và
một URL
associated with it. liên kết với nó.
This frame can be loaded independently of other frames. Khung này có thể được tải độc lập
của khung hình khác.
A frame can change its size dynamically according to the Một khung hình có thể thay đổi
kích thước của nó tự động theo
change in size of the visible client area. thay đổi kích thước của khu vực khách hàng có thể
nhìn thấy.
gg
A frame can also allow or disallow the user to change its Một khung cũng có thể cho phép
hoặc không cho phép người dùng thay đổi của nó
size manually. kích thước bằng tay.
Ver. Ver. 1.0 1.0
Page 16 Trang 16
Working with Frames in JavaScript (Contd.) Làm việc với các khung hình trong
JavaScript (Contd.)
JavaScript (Contd.)
Referencing Frames: Khung tham khảo:
In JavaScript, the frames property of the window object is Trong JavaScript, các tài sản của
đối tượng khung cửa sổ
used to refer to different frames. dùng để chỉ các khung khác nhau.
The frames property of the window object is an array Các tài sản của đối tượng khung
cửa sổ là một mảng
containing entries for all child frames in the parent frameset. có chứa các mục cho tất cả các
khung hình trẻ em trong các frameset mẹ.
The length property indicates the total number of frames in Các tài sản dài cho thấy tổng
số khung trong
the frameset. các frameset.
Th f Th f
dd
tl tl
ldit th ldit thứ
tid TID
The frame document always loads into the current window Các tài liệu khung luôn tải vào
cửa sổ hiện hành
known as the parent window. được gọi là cửa sổ cha.
The parent window can consist of other frames known as child Các cửa sổ phụ huynh có thể
bao gồm các khung hình khác được gọi là trẻ em
frames. khung.
The parent and child frames are defined in a hierarchy that Các phụ huynh và con em khung
được định nghĩa trong một hệ thống mà
can go up to multiple levels. có thể đi lên nhiều cấp độ.
In JavaScript, the < FRAMESET > tag is used to create a frame Trong JavaScript, các
<FRAMESET> tag được sử dụng để tạo ra một khung
Ver. Ver. 1.0 1.0
pp
gg
document, which is the parent document. tài liệu, mà là tài liệu phụ huynh.
Page 17 Trang 17
JavaScript (Contd.)
JavaScript (Contd.)
All the <FRAMES> tags defined under the <FRAMESET> Tất cả các <FRAMES> thẻ được
xác định theo <FRAMESET>
tag are the child frames of the parent document. tag là những khung hình con của các tài liệu
phụ huynh.
The following figure displays a two-generation hierarchy Hình dưới đây hiển thị một-thế hệ
thứ bậc hai
consisting of a parent frame and its child frames. bao gồm một khung cha mẹ và con khung
của nó.
Ver. Ver. 1.0 1.0
Page 18 Trang 18
JavaScript (Contd.)
JavaScript (Contd.)
JavaScript supports the following three references to refer JavaScript hỗ trợ ba sau tài liệu
tham khảo để tham khảo
to frames in a two-generation hierarchy: để khung hình trong một thế hệ thứ bậc hai:
Parent-to-Child Cha mẹ sang con
Child-to-Parent Trẻ em-to-Phụ Huynh
Child-to-Child Trẻ em sang con
Ver. Ver. 1.0 1.0
Page 19 Trang 19
JavaScript (Contd.)
JavaScript (Contd.)
Referencing Windows: Tham chiếu Windows:
You can use JavaScript to open the Web page in a new Bạn có thể sử dụng JavaScript để mở
trang web trong một mới
window, known as the secondary window. cửa sổ, được gọi là cửa sổ thứ cấp.
The secondary window can be created as a result of a user Cửa sổ thứ cấp có thể được tạo ra
như là kết quả của một người dùng
event, such as button click. sự kiện, chẳng hạn như nhấn nút.
The following syntax is used to refer to the new window: Cú pháp sau được dùng để chỉ cửa
sổ mới:
newWindow = newWindow =
window open("filename" "windowName") cửa sổ mở ("tên tập tin" "windowName")
window.open( filename , windowName ) window.open (tên tập tin, windowName)
In the preceding syntax: Trong cú pháp trước đó:
The window.open() method returns a new window. Các window.open () phương
thức trả về một cửa sổ mới.
The variable newWindow is used to reference the newly created Các newWindow biến
được sử dụng để tham chiếu mới được tạo
yy
window. cửa sổ.
The file that is loaded into the new window is filename. Các tập tin được tải vào cửa sổ mới
là tên tập tin.
The argument windowName is a string that specifies the name of Các windowName đối số
là một chuỗi xác định tên của
the window to be used in the TARGET attribute of the <FORM> or cửa sổ để được sử dụng
trong các thuộc tính mục tiêu của <form> hay
Ver. Ver. 1.0 1.0
the window to be used in the TARGET attribute of the <FORM> or cửa sổ để được sử dụng
trong các thuộc tính mục tiêu của <form> hay
<A> tags. <A> Thẻ.
Page 20 Trang 20
Demo: Referencing Frames and Windows in a Web Page Demo: tham khảo các khung
hình và Windows trong một trang web
Demo: Referencing Frames and Windows in a Web Page Demo: tham khảo các khung
hình và Windows trong một trang web
Sandra is designing a Web site for StarMoon Technologies. Sandra đang thiết kế một trang
web cho StarMoon Technologies.
The Web site should be divided into two frames. Các trang web sẽ được phân chia thành hai
khung. The left Các trái
frame should contain the following hyperlinks on the khung chứa các siêu liên kết sau đây về
homepage: trang chủ:
Company Services Công ty Dịch vụ
Clients Khách hàng
Careers Tuyển dụng
Contact Us Liên hệ
On loading the home page, a pop-up window specifying the Ngày tải trang nhà, một cửa sổ
pop-up chỉ định
company's mission statement should appear. tuyên bố sứ mệnh của công ty sẽ xuất hiện. In
addition, the Ngoài ra,
company name and logo should be displayed in the right tên công ty và logo sẽ được hiển thị
ở bên phải
frame. khung.
Ver. Ver. 1.0 1.0
Page 21 Trang 21
Demo: Referencing Frames and Windows in a Web Page (Contd.) Demo: tham khảo
các khung hình và Windows trong một trang web (Contd.)
Sandra wants to ensure that when the user clicks a hyperlink Sandra muốn đảm bảo rằng khi
người dùng nhấp vào một liên kết
in the left frame, the information corresponding to the selected trong khung bên trái, các
thông tin tương ứng với các lựa chọn
link is displayed in the right frame following the company liên kết được hiển thị trong khung
bên phải sau công ty
name and logo. tên và logo. In addition, the pop-up window also changes Ngoài ra, cửa sổ
pop-up cũng thay đổi
its text based on the selected hyperlink văn bản của nó dựa vào liên kết chọn
its text based on the selected hyperlink. văn bản của nó dựa vào liên kết chọn.
Help Sandra to perform the preceding activity. Trợ giúp Sandra để thực hiện các hoạt động
trước đó.
Ver. Ver. 1.0 1.0
Page 22 Trang 22
Create the HTML page for index.html. Tạo trang HTML cho index.html.
Create the HTML page for linkspage.html. Tạo trang HTML cho linkspage.html.
Create the HTML pages for various hyperlinks. Tạo các trang HTML cho các siêu liên kết
khác nhau.
Ver. Ver. 1.0 1.0
Page 23 Trang 23
Summary Tóm tắt
The form object acts as a container of several other objects. Các đối tượng hình thức
hoạt động như một container của một số đối tượng khác.
The following JavaScript objects are used to work with forms Các đối tượng JavaScript sau
đây được sử dụng để làm việc với các hình thức
on a Web page: trên một trang web:
Form object Mẫu đối tượng
Button object Đối tượng Button
Checkbox object Checkbox đối tượng
Text object Đối tượng văn bản
Text object Đối tượng văn bản
Textarea object Textarea đối tượng
Radio object Đài phát thanh đối tượng
Select object Chọn đối tượng
jj
JavaScript is used to apply client-side validation logic to a Web JavaScript được sử dụng để
áp dụng logic bên xác nhận, khách hàng đến một Web
form. hình thức.
Frames allow the Web page developer to divide a Web page Các khung hình cho phép các
nhà phát triển trang web để phân chia một trang Web
Ver. Ver. 1.0 1.0
into one or more sub regions or windows. vào một hoặc nhiều phân vùng hoặc cửa sổ.
Page 24 Trang 24
Each sub region is a frame that has a name and a URL Mỗi vùng tiểu khung có một tên và
một URL
associated with it. liên kết với nó.
The frames property of the windows object is an array Các tài sản của đối tượng khung
cửa sổ là một mảng
containing entries for all child frames in the parent frameset. có chứa các mục cho tất cả các
khung hình trẻ em trong các frameset mẹ.
Th l Th l
th thứ
ti di t th ttl di t ti thứ ttl
bb
ff ff
ii
The length property indicates the total number of frames in Các tài sản dài cho thấy tổng
số khung trong
the frameset. các frameset.
The frame always loads into the current window known as the Khung luôn tải vào cửa sổ
hiện hành được gọi là
parent window cửa sổ cha mẹ
parent window. cửa sổ cha mẹ.
The parent and child frames are defined in a hierarchy that Các phụ huynh và con em khung
được định nghĩa trong một hệ thống mà
can go up to multiple levels. có thể đi lên nhiều cấp độ.
JavaScript allows the Web page developer to create new Javascript cho phép lập trang web để
tạo mới
pp
pg pg
pp
windows using the window.open() method. cửa sổ bằng cách sử dụng window.open
() phương pháp.
A secondary window can use the opener property of the Một cửa sổ thứ cấp có thể sử dụng
tài sản mở của
window object to reference back to the main window. cửa sổ đối tượng để tham chiếu trở lại
cửa sổ chính.
Ver. Ver. 1.0 1.0

IWCD_Session_10.pdf
Page 1 Trang 1
Map images Bản đồ hình ảnh
Create image rollovers Tạo hiệu ứng Rollover image
Create custom objects Tạo các đối tượng tùy
Identify complex custom objects Xác định các đối tượng tùy chỉnh phức tạp
Use cookies to secure Web pages Sử dụng cookie để đảm bảo các trang Web
Identify security issues in JavaScript Xác định các vấn đề an ninh trong JavaScript
yy
yy
pp
Ver. Ver. 1.0 1.0
Page 2 Trang 2
Working with Images in JavaScript Làm việc với các hình ảnh trong JavaScript
Working with Images in JavaScript Làm việc với các hình ảnh trong JavaScript
Images in a Web page can be manipulated during runtime, Hình ảnh trong một trang web có
thể được thao tác trong thời gian chạy,
by using a technique called image mapping. bằng cách sử dụng một kỹ thuật được gọi là lập
bản đồ hình ảnh.
Image mapping is the technique of dividing an image into Hình ảnh bản đồ là kỹ thuật phân
multiple areas and linking these areas to different nhiều khu vực và liên kết các khu vực này
để khác nhau
Image mapping can be done dynamically by using lập bản đồ ảnh có thể được thực hiện tự
động bằng cách sử dụng
Ver. Ver. 1.0 1.0
Page 3 Trang 3
Working with Images in JavaScript (Contd.) Làm việc với các hình ảnh trong
JavaScript (Contd.)
JavaScript (Contd.)
Mapping Images using JavaScript: Lập bản đồ hình ảnh bằng cách sử dụng JavaScript:
An image is mapped by using the <MAP> tag in HTML. Một hình ảnh được ánh xạ bằng
cách sử dụng các tag <MAP> trong HTML.
The following code creates an image map: Các mã sau đây tạo ra một bản đồ hình ảnh:
<HTML> <HTML>
<HEAD> <HEAD>
<TITLE>Image Maps</TITLE> <title> Image Maps </ TITLE>
</HEAD> </ HEAD>
<BODY> <BODY>
<P><MAP NAME="FPMap0"> <P> <MAP NAME="FPMap0">
<AREA HREF="page_1.html" SHAPE="rect" COORDS="1, <KHU HREF = "page_1.html"
SHAPE = "rect" coords = "1,
0, 152, 137"> 0, 152, 137 ">
<AREA HREF="page_2.html" SHAPE="rect" COORDS="1, <KHU HREF = "page_2.html"
SHAPE = "rect" coords = "1,
140, 152, 271"> 140, 152, 271 ">
</MAP><IMG BORDER="0" SRC="6.GIF" USEMAP="#FPMap0" </ MAP> <IMG biên
giới = "0" SRC = "6.GIF" USEMAP = "# FPMap0"
WIDTH="153" HEIGHT="272"></P> WIDTH = "153" HEIGHT = "272"> </ P>
Ver. Ver. 1.0 1.0
WIDTH 153 HEIGHT 272 ></P> Chiều rộng 153 272 HEIGHT> </ P>
</BODY> </ BODY>
</HTML> </ HTML>
Page 4 Trang 4
JavaScript (Contd.)
JavaScript (Contd.)
JavaScript can be used to write functions to handle events JavaScript có thể được sử dụng để
viết các chức năng để xử lý các sự kiện
associated with specific areas of an image. liên kết với các khu vực cụ thể của hình ảnh.
Such event handler functions are called in the various <AREA> Chức năng xử lý sự kiện như
vậy được gọi là trong nhiều <AREA>
tags. thẻ.
BB
iJiJ
S it S nó
hh
th thứ
ti ti
ff
By using JavaScript, you can change the properties of an Bằng cách sử dụng JavaScript, bạn
có thể thay đổi các thuộc tính của một
image, such as its height and width, when a specific area of hình ảnh, chẳng hạn như chiều
cao và chiều rộng của nó, khi một khu vực cụ thể của
the image is clicked. hình ảnh được nhấp vào.
Ver. Ver. 1.0 1.0
Page 5 Trang 5
JavaScript (Contd.)
JavaScript (Contd.)
Creating Image Rollovers: Tạo ảnh Rollovers:
Image rollovers are effects in which the appearance of an Hình ảnh lật được hiệu ứng trong
đó có sự xuất hiện của một
image changes when a mouse pointer is placed or moved hình ảnh thay đổi khi một con trỏ
chuột được đặt hoặc di chuyển
above it. ở trên nó.
Th Th
bj tf J bj tf J
S it S nó
bb
dt dt
ti ti
The Image object of JavaScript can be used to create image Các đối tượng hình ảnh của
JavaScript có thể được sử dụng để tạo ra hình ảnh
rollovers. rollovers.
To use the Image object, an instance of the Image object Để sử dụng các đối tượng hình
ảnh, một thể hiện của đối tượng ảnh
needs to be created cần phải được tạo
needs to be created. cần phải được tạo ra.
The syntax to create an instance of the Image object is: Cú pháp để tạo ra một thể hiện của
đối tượng ảnh là:
var Imagename= new Image([Width], [Height]); var Imagename = new Image ([rộng],
[Cao]);
Imagename: Is the name of the new instance of the Image Imagename: là tên của các đối
tượng mới của ảnh
objectDate object. objectDate đối tượng.
[Width]: Is the width of the image in pixels. [Rộng]: Có chiều rộng của ảnh theo pixel.
Ver. Ver. 1.0 1.0
[Height]: Is the height of the image in pixels. [Cao]: là chiều cao của hình ảnh trong ảnh.
Page 6 Trang 6
JavaScript (Contd.)
JavaScript (Contd.)
To attach an image with the Image object, the src attribute of the Để đính kèm một hình ảnh
với các đối tượng hình ảnh, các thuộc tính src của
Image object is used. Hình ảnh đối tượng được sử dụng.
The syntax for attaching an image to an instance of Image object Cú pháp để gắn một hình
ảnh cho một thể hiện của đối tượng ảnh
is: là:
I Tôi
”I "Tôi
URL” URL "
Imagename.src=”ImageURL” Imagename.src = "ImageURL"
Imagename: is an instance of the Image object. Imagename: là một thể hiện của đối tượng
ảnh.
ImageURL: is the URL of the image ImageURL: là URL của hình ảnh
ImageURL: is the URL of the image. ImageURL: là URL của hình ảnh.
JavaScript uses an array called document.images to store the JavaScript sử dụng một
mảng gọi là document.images để lưu trữ
embedded images in the HTML document. nhúng hình ảnh trong tài liệu HTML.
In JavaScript, an image rollover can be created by using two Trong JavaScript, một chuột lên
hình ảnh có thể được tạo ra bằng cách sử dụng hai
p , p,
gg
yy
gg
images of same width and height. hình ảnh của cùng một chiều rộng và chiều cao.
An image is replaced by another image when the mouse is rolled Một hình ảnh được thay thế
bằng hình ảnh khác khi con chuột được lăn
over the first image. qua hình ảnh đầu tiên.
Ver. Ver. 1.0 1.0
Page 7 Trang 7
Demo: Creating an Image Map Using JavaScript Demo: Tạo một bản đồ hình ảnh Sử
dụng JavaScript
Demo: Creating an Image Map Using JavaScript Demo: Tạo một bản đồ hình ảnh Sử
dụng JavaScript
MagnifyMaze is a leading advertising firm in Canada. MagnifyMaze là một công ty quảng
cáo hàng đầu tại Canada. Smith is Smith là
working as a senior graphic designer with MagnifyMaze. làm việc như một nhà thiết kế đồ
họa cao cấp với MagnifyMaze. To Để
improve the look and feel of the company's Web site, the cải thiện giao diện của trang Web
của công ty,
management decides to replace of its Web site's hyperlinks quản lý quyết định để thay thế các
trang web của các siêu liên kết của nó
management decides to replace of its Web site's hyperlinks quản lý quyết định để thay thế các
trang web của các siêu liên kết của nó
with hyperlinks created by applying image maps. với các siêu liên kết tạo ra bằng cách áp
dụng bản đồ hình ảnh. The Web Các Web
site should contain the following image hyperlinks: trang web chứa các siêu liên kết hình ảnh
sau đây:
About the Company Giới thiệu về Công ty
py py
Vision Tầm nhìn
Achievements Thành tích đạt được
Partners Đối tác
Contacts. Danh bạ.
Contd… Contd ...
Ver. Ver. 1.0 1.0
Page 8 Trang 8
Demo: Creating an Image Map Using JavaScript (Contd.) Demo: Tạo một bản đồ hình
ảnh Sử dụng JavaScript (Contd.)
The images used for the creation of these links must be Các hình ảnh được sử dụng cho việc
tạo ra những liên kết này phải được
pre-loaded every time the Web site is loaded. được nạp sẵn mỗi khi trang web được tải. In
addition, Ngoài ra,
Smith wants to ensure that when the user moves the mouse Smith muốn đảm bảo rằng khi
người dùng di chuyển chuột
over any of the images, the color of the image changes. hơn bất kỳ các hình ảnh, màu sắc của
những thay đổi hình ảnh. How Làm thế nào
can you help Smith to perform the preceding task? bạn có thể giúp Smith để thực hiện nhiệm
vụ trước?
can you help Smith to perform the preceding task? bạn có thể giúp Smith để thực hiện nhiệm
vụ trước?
Ver. Ver. 1.0 1.0
Page 9 Trang 9
Create the HTML page for index.html. Tạo trang HTML cho index.html.
Create the HTML page for linkspage.html. Tạo trang HTML cho linkspage.html.
Create the HTML pages for various hyperlinks. Tạo các trang HTML cho các siêu liên kết
khác nhau.
Ver. Ver. 1.0 1.0
Page 10 Trang 10
Introducing Custom JavaScript Objects Giới thiệu Custom JavaScript Đối tượng
Introducing Custom JavaScript Objects Giới thiệu Custom JavaScript Đối tượng
Custom objects are user-defined objects that consist of Tuỳ chỉnh các đối tượng được xác
định đối tượng người dùng là bao gồm
data and functions. dữ liệu và chức năng.
You can create and use custom objects to build a custom Bạn có thể tạo và sử dụng các đối
tượng tùy chỉnh để xây dựng một tuỳ chỉnh
JavaScript toolbox. JavaScript hộp công cụ.
To create custom objects, perform the following steps: Để tạo các đối tượng tùy chỉnh, thực
hiện các bước sau:
Declare the custom object Kê khai các đối tượng tùy
Instantiate the custom object Khởi tạo các đối tượng tùy
jj
Ver. Ver. 1.0 1.0
Page 11 Trang 11
Introducing Custom JavaScript Objects (Contd.) Giới thiệu Custom JavaScript Đối
tượng (Contd.)
tượng (Contd.)
Creating Object Methods: Phương pháp tạo đối tượng:
The methods associated with custom objects are called Các phương pháp liên kết với các đối
tượng tùy chỉnh được gọi là
custom object methods. đối tượng tùy chỉnh các phương pháp.
You need to add custom object methods after creating a Bạn cần thêm phương thức đối tượng
tùy chỉnh sau khi tạo
custom object. tùy đối tượng.
To add methods to custom objects: Để thêm các phương thức để các đối tượng tùy chỉnh:
Define and declare method functions. Xác định và công bố phương pháp chức năng. Method
functions are Phương pháp chức năng
functions of the custom object chức năng của các đối tượng tùy
functions of the custom object. chức năng của các đối tượng tùy chỉnh.
Associate this method function with the object function. Phương pháp kết hợp chức năng này
có chức năng đối tượng.
Ver. Ver. 1.0 1.0
Page 12 Trang 12
tượng (Contd.)
tượng (Contd.)
Defining and Declaring Method Functions: Chức năng xác định và Tuyên bố Phương pháp:
While adding a method to an object, you need to first define a Trong khi thêm một phương
pháp để đối tượng, bạn cần xác định đầu tiên
function for the method. chức năng cho phương pháp này. This is followed by the activity
Đây là hoạt động tiếp theo
performed by the method in the method function. thực hiện theo phương pháp trong hàm
phương pháp.
The syntax to declare a method function in JavaScript is: Cú pháp khai báo một phương pháp
chức năng trong JavaScript là:
//declaring method function / / Khai báo phương pháp chức năng
function functionname() chức năng functionname ()
{{
function definition chức năng định nghĩa
}}
In the preceding syntax, functionname() is the name of the Trong cú pháp trên,
functionname () là tên của
pp
gy GY
,,
() ()
method function. phương pháp chức năng.
Ver. Ver. 1.0 1.0
Page 13 Trang 13
tượng (Contd.)
tượng (Contd.)
Associating the Method Function with the Object Function: Phương pháp kết hợp các chức
năng với các chức năng đối tượng:
After defining and declaring a method function, you need to Sau khi xác định và tuyên bố
một phương pháp chức năng, bạn cần
associate it to the object function. kết hợp nó với chức năng đối tượng. For this, you need to
create Đối với điều này, bạn cần phải tạo
an instance of the custom object. một thể hiện của đối tượng tùy chỉnh.
The syntax for creating and instantiating the custom object is: Các cú pháp cho việc tạo và
instantiating đối tượng tùy chỉnh là:
function customobject(parameter) chức năng customobject (tham số)
{{
}}
var varname=new customobject(parametervalue); var varname = mới customobject
(parametervalue);
In the preceding syntax, customobject is the name of a Trong cú pháp trên,
customobject là tên của một
pp
gy GY
,,
jj
custom object. tùy đối tượng. A new instance varname , of the custom object Một
varname thể hiện mới, của đối tượng tùy chỉnh
is created. được tạo ra.
Ver. Ver. 1.0 1.0
Page 14 Trang 14
tượng (Contd.)
tượng (Contd.)
Complex Custom Objects: Phức tạp đối tượng tùy chọn:
Components are complex custom objects that can be used in Các thành phần được tùy chỉnh
các đối tượng phức tạp có thể được sử dụng trong
Components are created based on logic and do not have any Các thành phần được tạo ra dựa
trên logic và không có bất kỳ
visual appearance. hình ảnh xuất hiện.
Similar to JavaScript objects, the JavaScript components can Tương tự như các đối tượng
JavaScript, các thành phần JavaScript có thể
also have: cũng có:
Properties: Specify the data related to a component Bất động sản: Xác định các dữ liệu liên
quan đến thành phần
Properties: Specify the data related to a component Bất động sản: Xác định các dữ liệu liên
quan đến thành phần
Methods: Specify the function to be performed by a component at Phương pháp: Xác định
chức năng để được thực hiện bởi một thành phần ở
run time thời gian chạy
Events: Specify the instructions that a component conveys to the Sự kiện: Chỉ định các hướng
dẫn một thành phần truyền tải đến
application at run time ứng dụng trong thời gian chạy
Ver. Ver. 1.0 1.0
Page 15 Trang 15
tượng (Contd.)
tượng (Contd.)
JavaScript Beans (JSB): JavaScript Đậu (NHTMCP):
It is a component file created with an extension .jsb. Nó là một tập tin thành phần tạo ra với
phần mở rộng. NHTMCP.
It provides the means to combine the dynamic features of Nó cung cấp phương tiện để kết
hợp các tính năng năng động của
HTML with JavaScript. HTML với JavaScript.
JSBs provide methods to reuse the combination of HTML and Ngân hàng cổ phần cung cấp
phương pháp để tái sử dụng sự kết hợp của HTML và
The advantages of using JSBs are: Những lợi thế của ngân hàng cổ phần bằng cách sử dụng
là:
SS
JSBs provide reusability. NHTMCP cung cấp sử dụng lại.
JSBs add interactivity to Web pages. NHTMCP thêm các tương tác vào các trang Web.
JSBs reduce the download time for a Web page. NHTMCP giảm thời gian tải về một trang
web.
JSBs are platform independent Therefore Web pages created Vì vậy ngân hàng cổ phần là
nền tảng tạo ra các trang web độc lập
JSBs are platform independent. NHTMCP là nền tảng độc lập. Therefore, Web pages created
Vì vậy, các trang web tạo
using JSBs can be downloaded and viewed on any platform, NHTMCP sử dụng có thể được
tải về và xem trên nền tảng nào,
such as, UNIX, Macintosh, and Windows. chẳng hạn như, UNIX, Macintosh, và Windows.
Ver. Ver. 1.0 1.0
Page 16 Trang 16
tượng (Contd.)
tượng (Contd.)
Scriptlet: Scriptlet:
It is a powerful Web component that consists of standard Nó là một thành phần web mạnh mẽ
bao gồm các tiêu chuẩn
features of Internet Explorer. các tính năng của Internet Explorer.
It provides the benefits of component programming with Nó cung cấp những lợi ích của
chương trình thành phần với
Dynamic HTML and script. Dynamic HTML và script.
Using Scriptlets: Sử dụng Scriptlets:
Scriptlets must be added in an HTML document. Scriptlets phải được thêm vào trong một tài
liệu HTML. To create and Để tạo và
add scriptlets perform the following steps: thêm scriptlets thực hiện các bước sau:
add scriptlets, perform the following steps: thêm scriptlets, thực hiện các bước sau:
Create an HTML file to use as a scriptlet. Tạo một file HTML để sử dụng như scriptlet một.
Create a second HTML file or a parent page that will host the Tạo một tập tin HTML thứ hai
hoặc cha mẹ trang đó sẽ tổ chức
scriptlet. scriptlet.
Ver. Ver. 1.0 1.0
Page 17 Trang 17
tượng (Contd.)
tượng (Contd.)
The advantages of using scriptlets are: Những lợi thế của scriptlets sử dụng là:
Scriptlets exist on a separate file and therefore any error that Scriptlets tồn tại trên một tập tin
riêng biệt và do đó bất kỳ lỗi
occurs in a program does not affect the scriptlet. xảy ra trong một chương trình không ảnh
hưởng đến scriptlet. This makes Điều này làm cho
debugging of the program easy and less time consuming. gỡ rối của chương trình dễ dàng và
tốn ít thời gian hơn.
Scriptlets are create-once-use-anywhere programs. Scriptlets được tạo ra-một lần sử dụng
chương trình bất cứ nơi nào. A scriptlet Một scriptlet
Scriptlets are create once use anywhere programs. Scriptlets được tạo ra khi sử dụng bất cứ
nơi nào các chương trình. A scriptlet Một scriptlet
can be reused in many programs without making any có thể được tái sử dụng trong nhiều
chương trình mà không thực hiện bất kỳ
modifications to it. sửa đổi nó.
Scriptlets can be combined together and used in a program. Scriptlets có thể được kết hợp với
nhau và được sử dụng trong chương trình.
Scriptlets can be written in any scripting language such as Scriptlets có thể được viết bằng
ngôn ngữ kịch bản như:
Scriptlets can be written in any scripting language, such as Scriptlets có thể được viết bằng
ngôn ngữ kịch bản, chẳng hạn như
JavaScript or VBScript. JavaScript hoặc VBScript.
Scriptlet components are also used by commonly used Scriptlet thành phần cũng được sử
dụng bằng cách thường được sử dụng
programs, such as Microsoft Word. các chương trình, chẳng hạn như Microsoft Word.
Scriptlets are supported by multiple platforms, such as Windows, Scriptlets được hỗ trợ bởi
nhiều nền tảng, chẳng hạn như Windows,
Apple Macintosh, and UNIX. Apple Macintosh, và UNIX.
Ver. Ver. 1.0 1.0
Page 18 Trang 18
Demo: Creating Custom Objects Demo: Tạo đối tượng Custom
Demo: Creating Custom Objects Demo: Tạo đối tượng Custom
Fun&Fantasy Books Inc. is a leading publisher of books and Fun & Fantasy Sách Inc là một
nhà xuất bản hàng đầu của sách và
journals in Philadelphia, USA. các tạp chí ở Philadelphia, Mỹ. The company has decided to
Công ty này đã quyết định
add a new Web page to their Web site that provides review thêm một trang web mới vào
trang web của họ cung cấp xem xét lại
information about widely acclaimed books Dorothy is given hoan nghênh rộng rãi thông tin
sách về Dorothy được cho
information about widely acclaimed books. hoan nghênh rộng rãi thông tin về sách. Dorothy
is given Dorothy được cho
the task of developing the Web page. nhiệm vụ phát triển các trang Web. Dorothy wants to
ensure Dorothy muốn bảo đảm
that the Web page is divided into two frames and includes a rằng các trang Web được chia
thành hai khung và bao gồm một
Current Releases section, which contains the name of the Hiện chí phần, trong đó có tên của
books in a combo box. sách trong một hộp kết hợp. When the visitor selects a book entry Khi
khách truy cập chọn một mục sách
from the combo box, specific information related to the book, từ hộp kết hợp, thông tin cụ thể
liên quan tới cuốn sách,
such as author name, price, and publisher appears in the chẳng hạn như tên tác giả, giá cả, và
nhà xuất bản xuất hiện trong
second frame in a tabular format How can you help Dorothy thứ hai khung trong một định
dạng bảng như thế nào bạn có thể giúp Dorothy
second frame in a tabular format. thứ hai khung trong một định dạng bảng. How can you help
Dorothy Làm thế nào bạn có thể giúp Dorothy
to build the Web site using custom objects? xây dựng các trang web bằng cách sử dụng các
đối tượng tùy chỉnh?
Ver. Ver. 1.0 1.0
Page 19 Trang 19
Demo: Creating Custom Objects (Contd.) Demo: Tạo đối tượng Custom (Contd.)
Demo: Creating Custom Objects (Contd.) Demo: Tạo đối tượng Custom (Contd.)
Create the custom objects. Tạo các đối tượng tùy chỉnh.
Create the frame window. Tạo cửa sổ khung.
Ver. Ver. 1.0 1.0
Page 20 Trang 20
Implementing Security Using JavaScript Thực hiện bảo mật Sử dụng JavaScript
Implementing Security Using JavaScript Thực hiện bảo mật Sử dụng JavaScript
Security on the Internet can be implemented in various An ninh trên Internet có thể được thực
hiện khác nhau
ways, such as by using digital certificates, configuring Web cách, chẳng hạn như bằng cách
sử dụng giấy chứng nhận kỹ thuật số, cấu hình Web
browser settings, and encrypting the data to be transferred cài đặt trình duyệt, và mã hóa các
dữ liệu được chuyển giao
on the Internet. trên Internet.
Another way to implement security on the Internet is by Một cách khác để thực hiện an ninh
trên Internet là do
using cookies in JavaScript. sử dụng cookie trong JavaScript.
Cookies can be used to store the username, password, or Cookies có thể được sử dụng để lưu
trữ tên người dùng, mật khẩu, hoặc
other information related to the users on a Web site. các thông tin khác liên quan đến việc
người dùng trên một trang web.
Ver. Ver. 1.0 1.0
Page 21 Trang 21
Implementing Security Using JavaScript (Contd.) Thực hiện Sử dụng JavaScript
Security (Contd.)
Security (Contd.)
Introducing Cookies: Giới thiệu Cookies:
Cookies are messages sent by Web servers of the Web sites Cookie là những tin nhắn được
gửi bởi các máy chủ web của các trang web
visited by you, to your browser. viếng thăm của bạn, để trình duyệt của bạn.
A cookie file typically contains information about your previous Một tập tin cookie thường
chứa thông tin về trước đó của bạn
visits to the Web site, your credentials, or other information thăm các trang web, các thông
tin của bạn, hoặc các thông tin khác
that you volunteer, such as your desired home page, color rằng bạn tình nguyện, chẳng hạn
như trang chủ mong muốn của bạn, màu sắc
scheme, or other preferences. Đề án, hoặc các ưu đãi khác.
Cookies mostly allow Web site administrators to track your Cookies chủ yếu là cho phép
người quản trị trang web để theo dõi của bạn
Cookies mostly allow Web site administrators to track your Cookies chủ yếu là cho phép
người quản trị trang web để theo dõi của bạn
browsing patterns and activities on the site. xem mô hình và các hoạt động trên trang web.
Ver. Ver. 1.0 1.0
Page 22 Trang 22
Security (Contd.)
Security (Contd.)
Assigning, Testing, and Clearing Cookies: Phân công, kiểm tra, và Xoá Cookie:
To use cookies, you need to assign cookies, and update the Để sử dụng tập tin cookie, bạn
cần phải chỉ định các tập tin cookie, và cập nhật
information stored in the cookies. thông tin lưu trữ trong các cookies.
JavaScript provides you the document.cookie property to JavaScript cung cấp cho bạn
các tài sản document.cookie đến
assign cookies. Giao cookies.
The syntax to assign a cookie is: Cú pháp để chỉ định một cookie là:
document.cookie=”[name]=[values]; document.cookie = "[Tên] = [giá trị];
expires [date]; hết hạn [ngày];
expires=[date]; hết hạn = [ngày];
path=[pathname]; domain=[domainname]; secure” đường dẫn = [đường dẫn]; miền =
[domainname]; an toàn "
The preceding syntax consists of the following attributes: Cú pháp trước đó bao gồm các
thuộc tính sau:
name Tên
expires hết hạn
path con đường
domain miền
Ver. Ver. 1.0 1.0
secure an toàn
Page 23 Trang 23
Security (Contd.)
Security (Contd.)
You can define your own methods in JavaScript to perform Bạn có thể xác định phương pháp
của riêng bạn trong JavaScript để thực hiện
various actions associated with cookies, such as to retrieve các hành động liên kết với các tập
tin cookie, chẳng hạn như để lấy
the value of a cookie, set the attributes of a cookie, and delete giá trị của cookie, thiết lập các
thuộc tính của một cookie, và xóa
a cookie. một cookie.
Conventionally the following methods are declared to perform Thông thường các phương
pháp sau đây được công bố để thực hiện
Conventionally, the following methods are declared to perform Thông thường, các phương
pháp sau đây được công bố để thực hiện
the tasks of reading, creating, and deleting cookies: nhiệm vụ đọc, tạo và xoá cookie:
getCookie() : accepts the name of the cookie as a parameter getCookie (): chấp nhận tên của
cookie như một tham số
and returns the value of the cookie. và trả về giá trị của cookie đó.
setCookie() :creates or updates a cookie setCookie (): tạo ra hoặc cập nhật một cookie
deleteCookie() : deletes a cookie. deleteCookie (): xóa một cookie.
Ver. Ver. 1.0 1.0
Page 24 Trang 24
Demo: Storing and Retrieving Information Using Cookies Demo: Lưu trữ và truy lục
thông tin Sử dụng Cookies
Demo: Storing and Retrieving Information Using Cookies Demo: Lưu trữ và truy lục
thông tin Sử dụng Cookies
Penelope is developing a Web site for BeautyInFitness. Penelope đang phát triển một trang
web cho BeautyInFitness. The Các
company has recently started a fitness center that provides Công ty gần đây bắt đầu một trung
tâm thể dục cung cấp
herbal therapies and body rejuvenation programs. liệu pháp thảo dược và các chương trình trẻ
hóa cơ thể. Penelope is Penelope là
designing interactive Web pages for health and beauty thiết kế các trang Web tương tác cho
sức khỏe và sắc đẹp
designing interactive Web pages for health and beauty thiết kế các trang Web tương tác cho
sức khỏe và sắc đẹp
sections. phần. In addition to related information, each section Ngoài các thông tin liên quan,
mỗi phần
contains a sub-section for FAQs, which is used to send chứa một phần phụ cho câu hỏi
thường gặp, được sử dụng để gửi
visitors' queries to the company. du khách truy vấn cho công ty.
qq
py py
Penelope wants to track navigation history, every time a visitor Penelope muốn theo dõi lịch
sử chuyển hướng, mỗi lần một người truy cập
navigates from one Web page to another. điều hướng từ trang web với nhau. The information
that Các thông tin
the user entered in the previous page should be maintained người dùng nhập vào trang trước
đó nên được duy trì
h th i it h th i nó
tt
t th t t th t
HH
hl hl
when the visitor returns to that page. khi trở về khách truy cập đến trang đó. How can you
help Làm thế nào bạn có thể giúp
Penelope to incorporate the preceding requirement? Penelope để kết hợp các yêu cầu trước?
Ver. Ver. 1.0 1.0
Page 25 Trang 25
Demo: Storing and Retrieving Information Using Cookies (Contd.) Demo: Lưu trữ và
truy lục thông tin Sử dụng Cookies (Contd.)
Demo: Storing and Retrieving Information Using Cookies (Contd.) Demo: Lưu trữ và
truy lục thông tin Sử dụng Cookies (Contd.)
Create the homepage. Tạo trang chủ.
Create the Thanks page. Tạo trang Cảm ơn.
Ver. Ver. 1.0 1.0
Page 26 Trang 26
Summary Tóm tắt
Images in a Web page can be manipulated during runtime Hình ảnh trong một trang web có
thể được thao tác trong thời gian chạy
using JavaScript. sử dụng JavaScript.
Image mapping is the technique of dividing an image into Hình ảnh bản đồ là kỹ thuật phân
multiple areas and linking these areas to different documents. nhiều khu vực và liên kết các
khu vực này để các tài liệu khác nhau.
Image mapping can be done dynamically by using JavaScript. lập bản đồ ảnh có thể được
thực hiện tự động bằng cách sử dụng JavaScript.
Image rollover is the technique of changing images on a Web Hình ảnh tái đầu tư là kỹ thuật
thay đổi hình ảnh trên Web
dd
i ll i sẽ
bhi BHI
hh
page dynamically on user behavior, such as mouse Sửa động về hành vi người dùng, chẳng
hạn như chuột
movements over images. chuyển động qua hình ảnh.
Image rollovers can change the appearance of an image when Hình ảnh lật có thể thay đổi sự
xuất hiện của một hình ảnh khi
a mouse moves above it. một con chuột di chuyển trên nó.
a mouse moves above it. một con chuột di chuyển trên nó.
Custom objects are user-defined objects that consist of data Tuỳ chỉnh các đối tượng được
xác định đối tượng người dùng mà bao gồm các dữ liệu
and functions. và chức năng.
The methods associated with custom objects are called Các phương pháp liên kết với các đối
tượng tùy chỉnh được gọi là
Ver. Ver. 1.0 1.0
jj
custom object methods. đối tượng tùy chỉnh các phương pháp.
Page 27 Trang 27
A JavaScript Bean (JSB) is a component file, which combines Một Bean JavaScript
(NHTMCP) là một tập tin thành phần, kết hợp
the dynamic features of HTML with JavaScript. năng động tính năng của HTML với
JavaScript.
A scriptlet provides the benefits of component programming scriptlet A cung cấp những lợi
ích của lập trình phần
with Dynamic HTML and script. với Dynamic HTML và script.
C ki C ki
bb
dti DTI
ll
tt
it b nó b
th ti ti th ti ti
Cookies can be used to implement security by authenticating Cookies có thể được sử dụng để
thực hiện bảo mật bằng cách xác thực
the client on the Internet. các khách hàng trên Internet.
Cookies are small bits of information and are stored on the Cookie được kích thước nhỏ,
thông tin và được lưu trữ trên
hard disk of the client computer ổ đĩa cứng của máy tính khách hàng
hard disk of the client computer. ổ đĩa cứng của máy tính khách hàng.
JavaScript uses the document.cookie property to JavaScript sử dụng tài sản
document.cookie đến
manipulate cookies on client side. thao tác các tập tin cookie trên máy khách.
Ver. Ver. 1.0 1.0
Page 28 Trang 28
The attributes of a cookie are: Các thuộc tính của một cookie là:
name Tên
expires hết hạn
path con đường
dd
ii
domain miền
secure an toàn
JavaScript can be used to perform various actions on a cookie, JavaScript có thể được sử
dụng để thực hiện các hành động khác nhau trên cookie,
such as creating new cookies, retrieving values of, and chẳng hạn như tạo ra các cookie mới,
lấy giá trị của, và
such as creating new cookies, retrieving values of, and chẳng hạn như tạo ra các cookie mới,
lấy giá trị của, và
deleting already existing cookies. đã xóa cookies hiện có.
Ver. Ver. 1.0 1.0

IWCD_Session_11.pdf
Page 1 Trang 1
Using Regular Expressions in JavaScript Bằng cách sử dụng thường xuyên trong JavaScript
Ver. Ver. 1.0 1.0
Page 2 Trang 2
Using Regular Expressions in JavaScript Bằng cách sử dụng thường xuyên trong
JavaScript
Regular expressions are expressions that enable you to Biểu thức thường là những biểu hiện
cho phép bạn
Using Regular Expressions in JavaScript Bằng cách sử dụng thường xuyên trong
JavaScript
match patterns in JavaScript. phù hợp với mẫu trong JavaScript.
A regular expression Một biểu thức chính quy
can be define có thể được xác định
in two ways: theo hai cách:
Assigning a regular expression to a variable Phân công một biểu thức chính quy để biến
gg gg
gg
pp
Using the RegExp object Sử dụng đối tượng RegExp
Ver. Ver. 1.0 1.0
Page 3 Trang 3
Using Regular Expressions in JavaScript (Contd.) Bằng cách sử dụng thường xuyên
trong JavaScript (Contd.)
Assigning a regular expression to a variable: Phân công một biểu thức chính quy để biến một:
The syntax for assigning a regular expression to a variable is: Cú pháp cho chỉ định một biểu
thức chính quy để biến là:
var <var_name> = /<pattern>/ var <var_name> = / <pattern> /
<var_name> is the name of the variable that stores the regular <var_name> là tên của biến
mà các cửa hàng thường xuyên
expression. biểu hiện.
<pattern> is the text string that needs to be matched. <pattern> là chuỗi văn bản cần được
xuất hiện.
Ver. Ver. 1.0 1.0
Page 4 Trang 4
Modifiers: Modifiers:
are characters that indicate various options that can be used with a là ký tự chỉ ra tùy chọn
khác nhau có thể được sử dụng với một
pattern to make the pattern more specific. mô hình để làm cho các mô hình cụ thể hơn.
A global modifier ensures that all the occurrences of a pattern are Một sửa đổi toàn cầu đảm
bảo rằng tất cả các lần xuất hiện của một mô hình được
matched in the specified text string. xuất hiện trong chuỗi văn bản quy định.
matched in the specified text string. xuất hiện trong chuỗi văn bản quy định.
Using modifiers in a regular expression is optional. Sử dụng sửa đổi trong một biểu thức
chính quy là tùy chọn.
The following code uses modifiers: Các mã sau đây sử dụng sửa đổi:
var exjava = /java/gi; var exjava = / java / gi;
In the preceding code: Trong đoạn mã trên đây:
g specifies the regular expression is global g quy định các biểu thức thông thường là toàn cầu
i specifies the regular expression in not case sensitive. i quy định các biểu hiện thường xuyên
trong trường hợp không nhạy cảm.
Ver. Ver. 1.0 1.0
Page 5 Trang 5
Using the RegExp object: Sử dụng đối tượng RegExp:
RegExp is a global object and is used to create an instance of RegExp là một đối tượng toàn
cầu và được sử dụng để tạo ra một thể hiện của
an object with the help of the new keyword. một đối tượng với sự giúp đỡ của các từ khoá
mới.
The following code creates a regular expression by using the Các mã sau đây tạo ra một biểu
hiện thường xuyên bằng cách sử dụng
bj t bj t
RegExp object: RegExp đối tượng:
var reg = new RegExp(“java”); var reg = new RegExp ("java");
The following code use the g modifier to make the regular Các mã sau đây sử dụng các
modifier g để làm thường xuyên
expression global: biểu hiện toàn cầu:
expression global: biểu hiện toàn cầu:
var reg = new RegExp("java”,“g”); var reg = new RegExp ("java", "g");
Ver. Ver. 1.0 1.0
Page 6 Trang 6
The following table lists the some special characters used to Bảng sau đây liệt kê một số ký
tự đặc biệt được sử dụng để
define regular expressions. xác định các biểu thức thông thường.
Special Character Ký tự đặc biệt
Function Chức năng
\b \ B
Is used to denote a word boundary Được sử dụng để biểu thị một ranh giới từ
\b \ B
Is used to denote a word boundary. Được sử dụng để biểu thị một ranh giới từ.
\B \ B
Is used to denote any other word other than the word provided Được sử dụng để biểu thị bất
kỳ từ nào khác hơn là từ cung cấp
as the word boundary. như là ranh giới từ.
\d \ D
Is used to denote the occurrence of a single digit between [0-9]. Được sử dụng để biểu thị sự
xuất hiện của một chữ số duy nhất giữa [0-9].
\s \ S
Is used to denote a single white space character such as space Được sử dụng để biểu thị một
ký tự trắng không gian duy nhất như không gian
or tab. hoặc tab.
\S \ S
Is used to denote a single non-white space. Được sử dụng để biểu thị một không gian không
màu trắng duy nhất.
[ ] []
Is used to match any character specified within the block Được sử dụng để phù hợp với bất
kỳ ký tự quy định trong khối
[..] [..]
Is used to match any character specified within the block Được sử dụng để phù hợp với bất
kỳ ký tự quy định trong khối
brackets. dấu ngoặc đơn.
**
Is used to denote zero or more occurrences of the preceding Được sử dụng để biểu thị bằng
không hoặc nhiều lần xuất hiện của các trước
character in the string. ký tự trong chuỗi.
Ver. Ver. 1.0 1.0
Page 7 Trang 7
You can use methods of a string object or of a RegExp Bạn có thể sử dụng phương pháp
của một đối tượng chuỗi ký tự hoặc của một RegExp
object to perform several task such as: đối tượng để thực hiện một số nhiệm vụ như:
searching for the regular expression in a string tìm kiếm các biểu hiện thường xuyên trong
một chuỗi
replacing the occurrences of regular expression in a string with a thay thế xuất hiện của biểu
thức chính quy trong một chuỗi với một
given string cho chuỗi
splitting a string tách một chuỗi
Ver. Ver. 1.0 1.0
Page 8 Trang 8
The following table lists the some methods to implement Bảng sau đây liệt kê một số phương
pháp để thực hiện
regular expression. biểu thức chính quy.
Method Phương pháp
RegExp.exec RegExp.exec
Searches the regular expression in the string passed as parameter Tìm kiếm các biểu hiện
thường xuyên trong các chuỗi được truyền dưới dạng tham số
(string) (String)
gg
pp
gp gp
pp
and returns the text of the found value. và trả về các văn bản của các giá trị được tìm thấy. If
no match is found, it Nếu trận đấu không có được tìm thấy, nó
returns null. trả về null.
RegExp.test RegExp.test
(string) (String)
Searches the regular expression in the string passed as parameter Tìm kiếm các biểu hiện
thường xuyên trong các chuỗi được truyền dưới dạng tham số
and returns true if found, false if not found. và trả về đúng nếu tìm thấy, false nếu không tìm
thấy.
String.match String.match
(RegExp) (RegExp)
Matches the string with the regular expression. Phù hợp với chuỗi với các biểu hiện thường
xuyên. If the regular Nếu thường xuyên
expression specifies a g modifier, the method returns an array biểu hiện rõ một sửa đổi g,
phương thức trả về một mảng
containing the matches. có chứa các trận đấu. In the absence of g modifier, it returns just
Trong trường hợp không có g sửa đổi, nó chỉ trả về
the first match. trận đầu tiên. If no match is found, it returns null. Nếu trận đấu không có
được tìm thấy, nó trả về null.
String.search String.search
Matches the regular expression with the string and returns the Phù hợp với biểu hiện thường
xuyên với các chuỗi và trả về
(RegExp) (RegExp)
gg
pp
gg
index of the first character where a match is found. chỉ số của nhân vật đầu tiên mà kết hợp
được tìm thấy. If no match is Nếu không có trận đấu
found, it returns -1. tìm thấy, nó trả về -1.
String.replace String.replace
(RegExp,string) (RegExp, dây)
Replaces matches with the given string and returns the edited Thay thế phù hợp với các chuỗi
và trả về cho biên tập
string. chuỗi.
ii
li li
S lit th S sáng ngày
ii
ti ti
it nó
bti BTI
dt dt
Ver. Ver. 1.0 1.0
String.split String.split
(RegExp) (RegExp)
Splits the given string into substrings and returns an array Chia tách chuỗi thành các chuỗi
con được và trả về một mảng
containing the substrings. có chứa các chuỗi con. The splitting is done wherever a match is
chia tách này được thực hiện bất cứ nơi nào kết hợp được
found. được tìm thấy.
Page 9 Trang 9
Before submitting a form containing critical data, you can Trước khi gửi một hình thức có
chứa dữ liệu quan trọng, bạn có thể
invoke the confirm() method of the window object to gọi xác nhận () của đối tượng
cửa sổ
accept a confirmation from the user that the form should be chấp nhận một xác nhận từ người
sử dụng rằng hình thức nên được
submitted. gửi. If the user decides not to submit the form, the user Nếu người dùng quyết
định không nộp đơn, người sử dụng
l th l th
bii Bii
Th Th
ii
bb
can cancel the submission. có thể hủy bỏ việc nộp. The confirm() message box Việc xác
nhận () hộp tin nhắn
can also be used to display the information that the user cũng có thể được sử dụng để hiển thị
các thông tin mà người sử dụng
entered into the form to verify that it is correct. đã nhập vào mẫu để xác minh rằng nó là
chính xác.
Th Th
dfi DFI
ki ki
th thứ
fi () fi ()
th d th d
bb
itt ITT
The code for invoking the confirm() method can be written Mã cho gọi xác nhận ()
phương pháp có thể được viết
in the onSubmit event handler of the form. trong xử lý sự kiện onSubmit của biểu mẫu.
The onSubmit Các onSubmit
event handler needs to return a boolean value. xử lý sự kiện cần phải trả lại một giá trị
boolean. The Các
submission of the form will depend on the return value of the nộp đơn sẽ phụ thuộc vào giá
trị trả về của
submission of the form will depend on the return value of the nộp đơn sẽ phụ thuộc vào giá
trị trả về của
event handler. xử lý sự kiện.
Ver. Ver. 1.0 1.0
Page 10 Trang 10
The following example illustrates the use of the confirm() Ví dụ sau minh họa việc sử
dụng xác nhận ()
method while submitting a form: phương pháp khi gửi một hình thức:
<HTML> <HTML>
<HEAD> <HEAD>
<SCRIPT LANGUAGE=JAVASCRIPT> <script LANGUAGE=JAVASCRIPT>
function verify() chức năng xác minh ()
{{
var msg = "You have specified your name as " var msg = "Bạn đã xác định tên của bạn là"
msg += document.forms[0].fName.value + " " + msg + = document.forms [0]. fName.value +
"" +
document.forms[0].lName.value; document.forms [0] lName.value.
msg += ". Do you want to submit the form?"; msg + = ". Bạn muốn gửi biểu mẫu?";
var response = confirm(msg); var phản ứng = xác nhận (msg);
return (response); trở lại (phản ứng);
Ver. Ver. 1.0 1.0
}</SCRIPT > } </ SCRIPT>
Page 11 Trang 11
<BODY> <BODY>
<FORM <MẪU
ACTION="welcome.htm" Hoạt động = "welcome.htm"
onSubmit="return onSubmit = "trở lại
verify()"> xác minh () ">
First Name: <INPUT TYPE=TEXT NAME="fName" Tên: <INPUT TYPE = TEXT NAME
= "fName"
ii
30><BR> 30> <BR>
size=30><BR> kích thước = 30> <BR>
Last Name: <INPUT TYPE=TEXT NAME="lName" Họ: <INPUT TYPE = TEXT NAME =
"lName"
size=30><BR> kích thước = 30> <BR>
<INPUT TYPE=SUBMIT VALUE="Submit"> <input TYPE=SUBMIT VALUE="Submit">
<INPUT TYPE=SUBMIT VALUE= Submit > <input TYPE=SUBMIT VALUE= gửi>
</FORM> </ FORM>
</BODY> </ BODY>
</HTML> </ HTML>
Ver. Ver. 1.0 1.0
Page 12 Trang 12
Suppose, you have created a Web page, index.html that Giả sử, bạn đã tạo ra một trang web,
index.html mà
accepts the name of a user and opens another Web page, chấp nhận tên của người dùng và
mở ra một trang web khác,
welcome.html. welcome.html. You want that the welcome.html page should Bạn muốn các
trang welcome.html nên
display a welcome message containing the name of the user. hiển thị một thông điệp chào
mừng có chứa tên của người dùng.
TiTi
ll
t thi t thi
dtt DTT
f th if f thứ nếu
ti ti
To implement this, you need to transfer the information Để thực hiện điều này, bạn cần phải
truyền thông tin
entered by the user on the index.html page to the nhập bởi người dùng trên trang index.html
đến
welcome.html page. welcome.html trang.
TtTt
fif fif
ti ti
tt
db th db th
WbWb
To transfer information entered by the user on one Web page Để chuyển thông tin nhập vào
bởi người sử dụng trên một trang Web
to another Web page, you can use query strings. đến một trang web, bạn có thể sử dụng các
chuỗi truy vấn. A query Một truy vấn
string is the portion of the URL that contains data to be chuỗi là một phần của URL có chứa
dữ liệu được
passed to other Web pages and applications An example of truyền cho các trang web và các
ứng dụng khác ví dụ của
passed to other Web pages and applications. truyền cho các trang web và các ứng dụng khác.
An example of Một ví dụ về
a URL containing a query string is: một URL có chứa một chuỗi truy vấn là:
http://www.yourDomain.com/welcome.html?fName=Alice
http://www.yourDomain.com/welcome.html?fName=Alice
Ver. Ver. 1.0 1.0
Page 13 Trang 13
In the preceding URL, the portion of the URL that appears Trong URL trên, các phần của
URL xuất hiện
after the question mark ( ? ) is the query string. sau dấu hỏi (?) là các chuỗi truy vấn. The
query Các truy vấn
string in the preceding example specifies that the information chuỗi trong ví dụ trên đây chỉ là
thông tin
entered in the fName field of the source page is Alice. nhập trong lĩnh vực fName của trang
nguồn là Alice.
When the source page is submitted, the URL is used to open Khi trang nguồn được gửi, URL
được sử dụng để mở
the welcome.html page and query string present in the URL is trang welcome.html và hiện tại
chuỗi truy vấn trong URL là
used to pass the information entered by the user to the target được sử dụng để truyền thông
tin được nhập bởi người sử dụng để nhắm mục tiêu
page. trang.
Ver. Ver. 1.0 1.0
Page 14 Trang 14
The target page can retrieve the information in the query Các trang mục tiêu có thể lấy các
thông tin trong truy vấn
string by using the search property of the location object. chuỗi bằng cách sử dụng các tài sản
tìm kiếm vị trí của đối tượng. The Các
following code illustrates the use of query strings to transfer mã sau minh họa việc sử dụng
các chuỗi truy vấn để chuyển giao
data from the index.html Web page to the welcome.html Web dữ liệu từ trang web
index.html vào web welcome.html
page: Trang:
index.html index.html
<HTML> <HTML>
<HEAD> <HEAD>
<SCRIPT> <script>
function f1() hàm f1 ()
{{
var username=prompt("Enter your name"); var tên người dùng = prompt ("Nhập tên của
bạn");
location.href="welcome.html?" location.href = "welcome.html?" + username; + Tên người
dùng;
Ver. Ver. 1.0 1.0
}</SCRIPT></HEAD> } </ SCRIPT> </ HEAD>
Page 15 Trang 15
<BODY onLoad="f1()"> <body OnLoad="f1()">
welcome.html welcome.html
<HTML><HEAD> <HTML> <HEAD>
<SCRIPT> <script>
function getData() getdata ()
{{
var var
name=location.search.substring(1,location.searc Tên = location.search.substring (1,
location.searc
h.length); h.length);
dd
ii
(" l ("L
""
))
document.write ("Welcome " + name) document.write ("Welcome" + tên)
}}
</script></head> </ Script> </ head>
Ver. Ver. 1.0 1.0
<body onLoad="getData()"> <body onLoad="getData()">
</body></html> </ Body> </ html>
Page 16 Trang 16
When the index.html file is loaded in the browser, the user is Khi các file index.html được tải
trong trình duyệt, người sử dụng được
prompted to enter his/her first name. nhắc nhập họ tên đầu tiên của cô. This name is then Tên
này sau đó
passed to the welcome.html file by using a query string. truyền cho các tập tin welcome.html
bằng cách sử dụng chuỗi truy vấn. The Các
getData() function of the welcome.html file extracts the GetData () chức năng của chất chiết
xuất từ các tập tin welcome.html
ti ti
ft th ft thứ
ti ti
ki ki
i bl i b
d th d th
di l di l
string after the question mark in a variable and then displays chuỗi sau dấu hỏi trong một biến
và sau đó hiển thị
the Welcome message on the screen. thông báo Chào mừng các bạn trên màn hình.
Ver. Ver. 1.0 1.0
Page 17 Trang 17
Can I add favorites to my Web browser using JavaScript? Tôi có thể thêm vào trình duyệt
Web yêu thích của tôi bằng cách sử dụng JavaScript?
Yes, you can add favorites to your Web browser using Có, bạn có thể thêm vào mục yêu
thích để trình duyệt web của bạn bằng cách sử dụng
JavaScript. JavaScript. To do so, you need to invoke the Add Favorite Để làm như vậy, bạn
cần phải gọi yêu thích Thêm
dialog box by calling the hộp thoại bằng cách gọi
indo e ternal AddFa orite() method This method indo e khoẻ bà mẹ AddFa orite () phương
pháp Phương pháp này
window.external.AddFavorite() method. window.external.AddFavorite () phương pháp. This
method Phương pháp này
takes two parameters, the URL of the Web site and the có hai tham số, URL của trang Web
và
bookmark text. đánh dấu văn bản. The bookmark text is the text that appears for Các văn bản
đánh dấu là văn bản xuất hiện cho
the Web site in the favorite list. các trang web trong danh sách yêu thích. Only Internet
Explorer 4.0 and Chỉ có Internet Explorer 4.0 và
yy
pp
later versions support this method. phiên bản sau hỗ trợ phương pháp này.
The following code illustrates how you can enable addition of Các mã sau minh họa làm thế
nào bạn có thể kích hoạt thêm
favorites to a Web browser: yêu thích với một trình duyệt Web:
<HTML> <HTML>
<HEAD> <HEAD>
<TITLE>Home Page</TITLE> <title> Home Page </ TITLE>
<SCRIPT> <script>
Ver. Ver. 1.0 1.0
<SCRIPT> <script>
function addToFavorites() { chức năng addToFavorites () {
Page 18 Trang 18
url = document.forms[0].URL.value; url = document.forms [0] URL.value.
bookmark = document.forms[0].bookmark.value; đánh dấu = document.forms [0]
bookmark.value.
window.external.addFavorite(url, bookmark); window.external.addFavorite (url, đánh dấu);
}}
</HEAD> </ HEAD>
<BODY> <BODY>
<FORM> <form>
URL: <INPUT TYPE="text" name="URL"><BR> URL: <input type="text" name="URL">
<BR>
Bookmark: <INPUT TYPE="text" name="bookmark"><BR> Bookmark: <input type="text"
name="bookmark"> <BR>
<INPUT TYPE="button" VALUE="Add to Favorites" <INPUT TYPE = "nút" VALUE =
"Add to Favorites"
Cli k " ddT F Cli k "DDT F
it ()"> nó () ">
onClick="addToFavorites()"> onClick = "addToFavorites ()">
</FORM> </ FORM>
</BODY> </ BODY>
</HTML> </ HTML>
Ver. Ver. 1.0 1.0
//
Page 19 Trang 19
How do I create a select menu that links to different pages Làm thế nào để tạo ra một menu
chọn là các liên kết đến các trang khác nhau
depending upon user selection? tùy theo sự lựa chọn sử dụng?
To create a select menu that links to different pages depending Để tạo một menu lựa chọn
liên kết đến các trang khác nhau tùy thuộc
upon user selection: khi người dùng lựa chọn:
Set the value property of the options to store the names of Đặt giá trị tài sản của các
tùy chọn để lưu trữ tên của
HTML pages. Các trang HTML.
Trap the onChange event of the select object. Trap sự kiện onChange của đối tượng lựa
chọn.
Get the index of the selected item. Nhận được chỉ số của các sản phẩm được chọn.
Get the index of the selected item. Nhận được chỉ số của các sản phẩm được chọn.
Set the location property of the window object to the value of Thiết lập thuộc tính vị
trí của đối tượng cửa sổ với giá trị của
the selected item. các sản phẩm được chọn.
The following code creates a select menu that links to different Các mã sau đây tạo ra một
menu chọn là các liên kết đến khác nhau
Web pages: Các trang web:
<form><select <form> <chọn
onChange="if(this.selectedIndex!=0) = "OnChange nếu (this.selectedIndex! = 0)
self location=this options[this selectedIndex] val tự lựa chọn vị trí = này [này selectedIndex]
val
Ver. Ver. 1.0 1.0
self.location=this.options[this.selectedIndex].val self.location = this.options
[this.selectedIndex]. val
ue"> ue ">
Page 20 Trang 20
<option value="" selected>Select a page value="" <option selected> Chọn một trang
<option value="aboutus.htm">About Us <option value="aboutus.htm"> Giới thiệu
<option value="OurMission.htm">Our Mission Sứ mệnh của chúng tôi <option
value="OurMission.htm">
<option value="Products.htm">Products Sản phẩm <option value="Products.htm">
<option value="Careers htm">Careers <option value="Careers htm"> Tuyển dụng
<option value= Careers.htm >Careers <option value= Careers.htm> Tuyển dụng
</select> </ Select>
</form> </ Form>
You can use both absolute URLs, such as Bạn có thể sử dụng cả các URL tuyệt đối, chẳng
hạn như
You can use both absolute URLs, such as Bạn có thể sử dụng cả các URL tuyệt đối, chẳng
hạn như
http://www.mydomain.com/aboutus.html and the relative URLs,
http://www.mydomain.com/aboutus.html và các URL tương đối,
such as aboutus.html. chẳng hạn như aboutus.html.
Ver. Ver. 1.0 1.0
When you select any option from the drop-down menu, you are Khi bạn chọn bất kỳ tùy chọn
từ menu thả xuống, bạn sẽ được
directed to a new page. hướng đến một trang mới.
Page 21 Trang 21
Child windows use the _____________ object to refer to the cửa sổ trẻ em sử dụng đối tượng
_____________ để tham khảo
window from where they originated. cửa sổ từ nơi mà chúng có nguồn gốc.
parent cha mẹ
Ver. Ver. 1.0 1.0
Page 22 Trang 22
The _________ attribute of the form object is used to Các thuộc tính _________ của đối
tượng hình thức được sử dụng để
specify the name of the server-side file that contains the chỉ định tên của file phía máy chủ có
chứa
code that will process the data submitted by the form. mã số đó sẽ xử lý các dữ liệu được gửi
bởi biểu mẫu.
action hành động
Ver. Ver. 1.0 1.0
Page 23 Trang 23
__________ are used to store information on client-side. __________ Được sử dụng để lưu
trữ thông tin về phía máy khách.
Cookies Cookies
Ver. Ver. 1.0 1.0
Page 24 Trang 24
The ____________ tag can be used to divide a window into Các tag ____________ có thể
được sử dụng để phân chia một cửa sổ vào
several regions, each containing a distinct Web page. một số vùng, từng có một trang web
riêng biệt.
<FRAMESET> <FRAMESET>
Ver. Ver. 1.0 1.0
Page 25 Trang 25
The ________ property of the Image object can be used to Các tài sản ________ của đối
tượng hình ảnh có thể được sử dụng để
specify the URL of the image that needs to be loaded in the chỉ định URL của hình ảnh cần
được nạp trong
Image object. Hình ảnh đối tượng.
src src
Ver. Ver. 1.0 1.0

IWCD_Session_13.pdf
Page 1 Trang 1
Extensible Markup Language Extensible Markup Language
Rationale Lý do
Data interchange is essential to carry out business Trao đổi dữ liệu là điều cần thiết để thực
hiện kinh doanh
Rationale Lý do
transactions. giao dịch. However, organizations store data in disparate Tuy nhiên, các tổ chức
lưu trữ dữ liệu ở khác nhau
formats, which makes the process of data interchange định dạng, mà làm cho quá trình trao
đổi dữ liệu
complex and time-consuming. phức tạp và tốn thời gian.
Extensible Markup Language (XML) is a standard, simple Extensible Markup Language
(XML) là một tiêu chuẩn, đơn giản
way of storing the data in a format that can be exchanged cách lưu trữ dữ liệu trong một định
dạng có thể được trao đổi
across multiple systems across an enterprise. trên nhiều hệ thống trên một doanh nghiệp.
Providing an Cung cấp một
ii ht it XML ill b ii ht nó XML bệnh b
fit tdt phù hợp với TDT
it i nó i
tdd TDD
insight into XML will benefit students as it is a standard hiểu biết về XML sẽ có lợi cho học
sinh vì nó là một tiêu chuẩn
technology to describe and define documents. công nghệ để mô tả và xác định tài liệu.
The course is applicable to students who want to create Khóa học được áp dụng đối với học
sinh, những người muốn tạo
ll f sẽ f
d XML d d XML d
t Thi Thi t
itd ITD
well-formed XML documents. cũng như hình thành các tài liệu XML. This course introduces
Khóa học này giới thiệu
students to the fundamentals of XML and enable them to học sinh các nguyên tắc cơ bản của
XML và cho phép họ
effectively use XML as a markup language to develop Web hiệu quả sử dụng XML là một
ngôn ngữ đánh dấu để phát triển Web
applications ứng dụng
Ver. Ver. 1.0 1.0
applications. ứng dụng.
Page 2 Trang 2
Identify the need for XML as a standard data interchange Xác định sự cần thiết cho XML như
là một trao đổi dữ liệu chuẩn
format định dạng
Identify the structure of XML documents Xác định cấu trúc của tài liệu XML
Ver. Ver. 1.0 1.0
Page 3 Trang 3
Getting Started with XML Bắt đầu với XML
Traditionally, preprinted formats were used to exchange , In sẵn các định dạng truyền thống
đã được sử dụng để trao đổi
Getting Started with XML Bắt đầu với XML
information between businesses. thông tin giữa các doanh nghiệp.
Need for a more effective way of communicating and Cần một cách hiệu quả hơn và giao tiếp
processing business data led to the emergence of Electronic dữ liệu doanh nghiệp chế biến đã
dẫn đến sự xuất hiện của điện tử
Data Interchange (EDI). Trao đổi dữ liệu (EDI).
EDI refers to the process of exchanging documents in a EDI đề cập đến quá trình trao đổi tài
liệu trong một
standard format between two computer systems. tiêu chuẩn định dạng giữa hai hệ thống máy
tính.
EDI has the following limitations: EDI có những hạn chế sau đây:
Rigid transaction set Cứng nhắc thiết lập giao dịch
Fixed business rules Cố định nguyên tắc kinh doanh
High costs Chi phí cao
Slow pace of standards evolution Làm chậm tốc độ của các tiêu chuẩn tiến hóa
Ver. Ver. 1.0 1.0
Page 4 Trang 4
Introducing XML Giới thiệu về XML
XML is a text-based markup language that enables storage XML là một ngôn ngữ đánh dấu
dựa trên văn bản cho phép lưu trữ
Introducing XML Giới thiệu về XML
of data in a structured format. của dữ liệu trong một định dạng cấu trúc.
XML is a cross-platform, hardware and software XML là một nền tảng, phần cứng và phần
mềm
independent markup language that enables structured data độc lập ngôn ngữ đánh dấu cho
phép dữ liệu có cấu trúc
transfer between heterogeneous systems. chuyển giao giữa các hệ thống không đồng nhất.
XML is used as a common data interchange format in a XML được sử dụng như là một định
dạng trao đổi dữ liệu phổ biến trong một
number of applications. số ứng dụng.
Let us understand the usage of XML with the help of the Hãy để chúng tôi hiểu việc sử dụng
XML với sự giúp đỡ của
diagram. sơ đồ.
Ver. Ver. 1.0 1.0
Page 5 Trang 5
Introducing XML (Contd.) Giới thiệu XML (Contd.)
bb
ii
..
Mobile Application Ứng dụng di động
Web Services Dịch vụ Web
Windows Application Windows Application
Mobile Application Ứng dụng di động
Web Application Web Application
XML XML
SQL Server SQL Server
DB2 DB2
Oracle Oracle
Access Truy cập
Data Sources Nguồn dữ liệu
Ver. Ver. 1.0 1.0
Data Sources Nguồn dữ liệu
Page 6 Trang 6
Web Architecture Using XML Kiến trúc Sử dụng XML Web
In a traditional Web architecture, a client sends a request to Trong một kiến trúc Web truyền
thống, khách hàng gửi một yêu cầu
the server in a pre-defined format and receives the response các máy chủ trong một định dạng
được xác định trước và nhận được câu trả lời
accordingly. phù hợp.
The advantage of using XML in the Web architecture is that the Lợi thế của việc sử dụng
XML trong kiến trúc Web là
structure of the request can be obtained from the server at run cấu trúc của các yêu cầu có thể
được lấy từ máy chủ ở chạy
time. thời gian.
XML can encode non-relational data as well as relational data XML có thể mã hóa-quan hệ
dữ liệu không cũng như các dữ liệu quan hệ
XML can encode non-relational data as well as relational data XML có thể mã hóa-quan hệ
dữ liệu không cũng như các dữ liệu quan hệ
structure. cấu trúc.
Ver. Ver. 1.0 1.0
Page 7 Trang 7
Web Architecture Using XML (Contd.) Web sử dụng XML Kiến trúc (Contd.)
The following figure depicts the XML Web architecture. Hình dưới đây mô tả kiến trúc XML
Web.
Ver. Ver. 1.0 1.0
Page 8 Trang 8
Difference Between SGML, HTML, and XML Sự khác biệt giữa SGML, HTML, và XML
Standard Generalized Markup Language (SGML) allows Standard Generalized Markup
Language (SGML) cho phép
documents to describe their grammar by specifying the tag set tài liệu để mô tả ngữ pháp của
mình bằng cách xác định thiết lập tag
used in the document and the structural relationship that these được sử dụng trong tài liệu và
kết cấu mà các mối quan hệ
tags represent thẻ đại diện
tags represent. thẻ đại diện.
Hypertext Markup Language (HTML) is used for data Hypertext Markup Language (HTML)
được sử dụng cho dữ liệu
presentation. trình bày.
XML is used for data description and definition XML được sử dụng cho dữ liệu mô tả và
định nghĩa
XML is used for data description and definition. XML được sử dụng cho dữ liệu mô tả và
định nghĩa.
Ver. Ver. 1.0 1.0
Page 9 Trang 9
Difference Between SGML, HTML, and XML (Contd.) Sự khác biệt giữa, HTML, và XML
SGML (Contd.)
SGML SGML
HTML HTML
XML XML
Extensibility Mở rộng
YY
YY
YY
yy
Structure Cơ cấu tổ chức
Yes Có
Yes Có
Yes Có
Yes Có
No Không có
Yes Có
Validation Xác Nhận
Browser Browser
DD
dd
Low Thấp
High Cao
Low Thấp
Yes Có
No Không có
Yes Có
Dependency Phụ thuộc
Cost/Benefit Chi phí / lợi ích
Poor Người nghèo
Good Good
Medium Trung bình
Ver. Ver. 1.0 1.0
Page 10 Trang 10
Advantages of XML Ưu điểm của XML
Some of the advantages of XML are: Một số trong những lợi thế của XML là:
Domain-specific vocabulary Domain-cụ thể từ vựng
Data interchange Trao đổi dữ liệu
Smart searches Tìm kiếm thông minh
Granular updates Hạt cập nhật
User-selected view of data Người sử dụng lựa chọn xem dữ liệu
Message transformation Thông báo chuyển đổi
Ver. Ver. 1.0 1.0
Page 11 Trang 11
In HTML, only the predefined tags can be Trong HTML, chỉ có thẻ có thể được xác định
trước
used. được sử dụng.
I XML Tôi XML
tt
tt
bb
dd
In XML, you can create new tags based Trong XML, bạn có thể tạo ra các thẻ mới dựa
on the requirements of the application. vào yêu cầu của ứng dụng.
Various languages such as MathML and Nhiều ngôn ngữ như MathML và
WML have been derived from XML. WML đã được bắt nguồn từ XML.
Ver. Ver. 1.0 1.0
Page 12 Trang 12
XML produces files that are XML sản xuất các tập tin được
unambiguous easy to generate rõ ràng dễ dàng để tạo ra
unambiguous, easy to generate, rõ ràng, dễ tạo ra,
and easy to read. và dễ đọc.
XML provides a structure to XML cung cấp một cấu trúc để
store data in textual format, lưu trữ dữ liệu ở định dạng văn bản,
which can then be used as a mà sau đó có thể được sử dụng như một
which can then be used as a mà sau đó có thể được sử dụng như một
standard format or protocol for tiêu chuẩn định dạng hoặc giao thức cho
data interchange. trao đổi dữ liệu.
Ver. Ver. 1.0 1.0
Page 13 Trang 13
The flexibility to create user-defined Sự linh hoạt để tạo người dùng định nghĩa
tags in XML enables creation of thẻ trong XML cho phép tạo ra các
smart search engines. công cụ tìm kiếm thông minh.
You can differentiate whether you Bạn có thể phân biệt cho dù bạn
want do to search based on a text or muốn làm để tìm kiếm dựa trên một văn bản hay
on a tag, which enables the browser trên một thẻ, cho phép trình duyệt
to perform a focused search and để thực hiện tìm kiếm tập trung và
return precise information that trả về thông tin chính xác mà
matches the search query. phù hợp với truy vấn tìm kiếm.
matches the search query. phù hợp với truy vấn tìm kiếm.
Ver. Ver. 1.0 1.0
Page 14 Trang 14
Document updates in HTML Tài liệu cập nhật trong HTML
are slow as the entire chậm như toàn bộ
document needs to be tài liệu cần phải được
refreshed from the server làm mới từ máy chủ
refreshed from the server. làm mới từ máy chủ.
Document updates in XML are Tài liệu cập nhật trong XML
faster as only the changed nhanh hơn là chỉ có thay đổi
content needs to be nội dung cần phải được
downloaded. tải về.
Ver. Ver. 1.0 1.0
Page 15 Trang 15
In HTML, you need to create Trong HTML, bạn cần phải tạo
separate HTML pages to riêng các trang HTML để
display the same information hiển thị các thông tin tương tự
in different formats while XML trong các định dạng khác nhau, trong khi XML
concentrates on data and not tập trung vào dữ liệu và không
on its presentation. về trình bày của mình.
HTML does not allow HTML không cho phép
conditional formatting of a có điều kiện định dạng của một
document while in XML tài liệu trong khi ở XML
conditional formatting is định dạng có điều kiện là
possible có thể
Ver. Ver. 1.0 1.0
possible. có thể.
Page 16 Trang 16
In XML a message can be stored in Trong một thông điệp XML có thể được lưu trữ trong
In XML, a message can be stored in Trong XML, một tin nhắn có thể được lưu trữ trong
the form of a document, object data, dưới dạng một tài liệu, dữ liệu đối tượng,
or data from a database. hoặc dữ liệu từ cơ sở dữ liệu.
XML design provides flexibility while XML cung cấp sự linh hoạt trong khi thiết kế
storing data as it does not impose lưu trữ dữ liệu như là nó không áp đặt
storing data as it does not impose lưu trữ dữ liệu như là nó không áp đặt
any restriction on the field size and bất kỳ hạn chế về quy mô và lĩnh vực
the order in which the data is stored. thứ tự mà các dữ liệu được lưu trữ.
Ver. Ver. 1.0 1.0
Page 17 Trang 17
Future of XML Tương lai của XML
The future uses of XML can be summarized as: Việc sử dụng tương lai của XML có thể được
tóm tắt như:
XML will be widely used in e-commerce. XML sẽ được sử dụng rộng rãi trong thương mại
điện tử.
XML will have a huge core market in the form of Business to XML sẽ có một thị trường
chính rất lớn trong các hình thức kinh doanh để
BiBi
(B2B) (B2B)
Business (B2B). Doanh nghiệp (B2B).
XML will be used for mobile devices due to its ability to easily XML sẽ được sử dụng cho
các thiết bị di động do khả năng dễ dàng
convert into the appropriate format for any device. chuyển đổi sang định dạng thích hợp cho
thiết bị nào.
XML will be used to solve communication problems in EDI and XML sẽ được dùng để giải
quyết vấn đề truyền thông trong EDI và
pp
Enterprise Application Integration (EAI) as it provides Tích hợp ứng dụng doanh nghiệp
(EAI) vì nó cung cấp
interoperability between disparate applications. khả năng tương tác giữa các ứng dụng khác
nhau.
Ver. Ver. 1.0 1.0
Page 18 Trang 18
Introducing W3C W3C giới thiệu
W3C is responsible for the development of Web W3C chịu trách nhiệm về sự phát triển của
Web
Introducing W3C W3C giới thiệu
specifications that describe communication protocols and thông số kỹ thuật để mô tả giao
thức truyền thông và
technologies for the Web. công nghệ Web.
Due to the flexibility for customization in XML, W3C has laid Do tính linh hoạt để tuỳ biến
trong XML, W3C đã đặt
down these rules that need to be followed by all XML xuống những quy tắc này cần được
theo sau bởi tất cả các XML
vendors: các nhà cung cấp:
XML must be directly usable over the Internet. XML phải được trực tiếp sử dụng được trên
Internet.
XML must support a wide variety of applications. XML phải hỗ trợ một loạt các ứng dụng.
XML must be compatible with SGML. XML phải phù hợp với SGML.
XML should have absolute minimum number of optional XML nên có số tuyệt đối tối thiểu
bắt buộc
features, ideally zero. tính năng, lý tưởng là số không.
XML documents must be human legible and clear. Các tài liệu XML phải được con người dễ
đọc và rõ ràng.
XML design must be formal and concise. XML thiết kế phải được chính thức và súc tích.
Ver. Ver. 1.0 1.0
XML documents must adhere to a set of constraints called full Các tài liệu XML phải tuân
thủ một tập các ràng buộc gọi là đầy đủ
normalization. bình thường.
Page 19 Trang 19
Identifying the Structure of XML Documents Xác định cấu trúc văn bản XML
An XML application is considered well designed if it is Một ứng dụng XML được xem là
thiết kế tốt nếu nó được
Identifying the Structure of XML Documents Xác định cấu trúc văn bản XML
robust and scalable. mạnh mẽ và khả năng mở rộng.
To design a robust and scalable XML application, the Để thiết kế một ứng dụng có thể mở
rộng XML và mạnh mẽ, các
following steps need to be performed: bước sau đây cần phải được thực hiện:
1. 1. Create an information model. Tạo ra một mô hình thông tin.
2. 2. Identify the required components of the XML document. Xác định các yêu cầu thành
phần của các tài liệu XML.
3. 3. Create the XML document. Tạo các tài liệu XML.
Ver. Ver. 1.0 1.0
Page 20 Trang 20
Information Modeling Mô hình hóa thông tin
An information model is a description of the information Một mô hình thông tin là một mô tả
của thông tin
Information Modeling Mô hình hóa thông tin
used in an organization. được sử dụng trong một tổ chức.
Information modeling helps identify: Thông tin mô hình hóa giúp xác định:
Objects involved in an application Đối tượng tham gia trong một ứng dụng
jj
pp Trang
Properties of the objects Tài sản của các đối tượng
Relationships among objects Mối quan hệ giữa các đối tượng
XML provides the following additional capabilities to XML cung cấp các khả năng bổ sung
như sau
XML provides the following additional capabilities to XML cung cấp các khả năng bổ sung
như sau
information modeling: thông tin xây dựng mô hình:
Heterogeneity Tính không đồng nhất
Extensibility Mở rộng
Each record can contain different data Mỗi bản ghi có thể chứa dữ liệu khác nhau
fields. lĩnh vực.
New data types can be added dữ liệu mới có thể được thêm các loại
yy
Flexibility Tính linh hoạt
whenever required. bất cứ khi nào cần thiết.
Data fields can vary in size and Trường dữ liệu có thể khác nhau về kích thước và
configuration between instances. cấu hình giữa các trường.
Ver. Ver. 1.0 1.0
Page 21 Trang 21
Information Modeling (Contd.) Mô hình hóa thông tin (Contd.)
Types of information models that can be created for an XML Các loại mô hình thông tin có
thể được tạo ra cho một XML
Information Modeling (Contd.) Mô hình hóa thông tin (Contd.)
application are: ứng dụng là:
Static model : Helps define all the objects in an application and Mô hình tĩnh: Giúp xác
định tất cả các đối tượng trong một ứng dụng và
the relationships among them. các mối quan hệ giữa họ.
Dynamic model : Helps to determine the information flow of an Năng động, mô hình: Giúp
xác định lưu lượng thông tin của một
application in the form of messages. ứng dụng trong các hình thức tin nhắn.
Ver. Ver. 1.0 1.0
Page 22 Trang 22
Components of an XML Document Các thành phần của một tài liệu XML
The various components of an XML document used for Các thành phần khác nhau của một
tài liệu XML được sử dụng cho
Components of an XML Document Các thành phần của một tài liệu XML
representing data in a hierarchical order are: đại diện cho dữ liệu theo một trật tự thứ bậc là:
Processing Instruction (PI) Hướng dẫn chế biến (PI)
Tags Tags
Elements Các yếu tố
Content Nội dung
Attributes Thuộc tính
Entities Các đối tượng
Comments Bình luận
Ver. Ver. 1.0 1.0
Page 23 Trang 23
Components of an XML Document (Contd.) Các thành phần của một tài liệu XML
(Contd.)
<?xml version=â€œ1.0â€ encoding=â€œUTF-8â€ ?> <Mã hóa? Xml version = â € œ1.0â € =
â € œUTF-8A €?>
(Contd.)
<STOREDATA> <STOREDATA>
 <- STOREDATA là yếu tố gốc ->
<STORE STOREID=â€œS101â€ > <STORE STOREID=â€œS101â€>
<PRODUCTNAME>Toys</PRODUCTNAME> <PRODUCTNAME> Đồ chơi </
ProductName>
Provides information on how Cung cấp thông tin về cách
the XML file should be các tập tin XML được
processed. xử lý.
ProductName>
<QUANTITY>100</QUANTITY> <QUANTITY> 100 </ SỐ LƯỢNG>
<DISPLAY>The price of this toy <DISPLAY> Giá của đồ chơi này
is < 200 </DISPLAY> là <200 </> DISPLAY
</STORE> </ STORE>
</STOREDATA> </ STOREDATA>
Ver. Ver. 1.0 1.0
Page 24 Trang 24
(Contd.)
(Contd.)
< STOREDATA > <STOREDATA>
ProductName>
Tags Tags
Is a means of identifying Là một phương tiện xác định
data. dữ liệu. Tags consist of start tag Tags bao gồm thẻ bắt đầu
ProductName>
</STORE> </ STORE>
and end tag. và kết thúc tag.
</STORE> </ STORE>
Ver. Ver. 1.0 1.0
Page 25 Trang 25
(Contd.)
(Contd.)
ProductName>
Root Element Root Element
Contains all other elements Chứa tất cả các yếu tố khác
in the document. trong tài liệu.
ProductName>
</STORE> </ STORE>
Ver. Ver. 1.0 1.0
Page 26 Trang 26
(Contd.)
(Contd.)
ProductName>
Are statements used to Được báo cáo sử dụng để
li th XML li thứ XML
dd
ProductName>
</STORE> </ STORE>
explain the XML code. giải thích các mã XML.
</STORE> </ STORE>
Ver. Ver. 1.0 1.0
Page 27 Trang 27
(Contd.)
(Contd.)
< STORE STOREID=â€œS101â€ > <STORE STOREID = â € € œS101â>
ProductName>
Child Elements Các yếu tố trẻ em
A th bi Một lần thứ hai
it nó
dt dt
ProductName>
</STORE> </ STORE>
Are the basic units used to Là đơn vị cơ bản được sử dụng để
identify and describe data in xác định và mô tả dữ liệu
XML. XML.
</STORE> </ STORE>
Ver. Ver. 1.0 1.0
Page 28 Trang 28
(Contd.)
(Contd.)
<STORE STOREID =â€œS101â€ > <STORE STOREID =â€œS101â€>
ProductName>
ProductName>
</STORE> </ STORE>
Provide additional Cung cấp bổ sung
information about the thông tin về
elements for which they are yếu tố mà họ có
declared. tuyên bố.
</STORE> </ STORE>
Ver. Ver. 1.0 1.0
Page 29 Trang 29
(Contd.)
(Contd.)
<PRODUCTNAME> Toys </PRODUCTNAME> <PRODUCTNAME> Đồ chơi </
ProductName>
Content Nội dung
<PRODUCTNAME> Toys </PRODUCTNAME> <PRODUCTNAME> Đồ chơi </
ProductName>
</STORE> </ STORE>
Content Nội dung
Refers to the information Đề cập đến thông tin
represented by the elements đại diện bởi các yếu tố
of an XML document. của một tài liệu XML. An An
element can contain: phần tử có thể chứa:
</STORE> </ STORE>
element can contain: phần tử có thể chứa:
â€¢ Character or data content â € ¢ Ký tự hoặc nội dung dữ liệu
â€¢ Element content â € ¢ Element nội dung
â€¢ Combination or mixed â € ¢ Kết hợp hoặc hỗn hợp
content nội dung
Ver. Ver. 1.0 1.0
Page 30 Trang 30
(Contd.)
(Contd.)
ProductName>
ProductName>
is &lt ; 200 </DISPLAY> là <, 200 </ DISPLAY>
</STORE> </ STORE>
Is a set of information that Là một tập hợp các thông tin
can be used by specifying a có thể được sử dụng bằng cách chỉ định
</STORE> </ STORE>
can be used by specifying a có thể được sử dụng bằng cách chỉ định
single name. tên duy nhất.
Ver. Ver. 1.0 1.0
Page 31 Trang 31
Identifying the Rules for Creating XML Documents Xác định các điều lệ về Tạo tài liệu
XML
The rules that govern the creation of a well-formed XML Các quy tắc chi phối việc tạo ra
một-hình thành cũng XML
Identifying the Rules for Creating XML Documents Xác định các điều lệ về Tạo tài liệu
XML
document: tài liệu:
Every start tag must have an end tag. Mỗi thẻ bắt đầu phải có một thẻ kết thúc.
Empty tags must be closed using a forward slash (/). thẻ rỗng phải được đóng bằng dấu gạch
chéo (/).
All attribute values must be given in double quotation marks. Tất cả các giá trị thuộc tính
phải được đưa ra trong dấu ngoặc kép.
Tags must have proper nesting. Các thẻ phải có hợp làm tổ.
XML tags are case sensitive. XML tags là trường hợp nhạy cảm.
Ver. Ver. 1.0 1.0
Page 32 Trang 32
Demo: Creating an XML Document Demo: Tạo một tài liệu XML
Demo: Creating an XML Document Demo: Tạo một tài liệu XML
CyberShoppe, Inc. sells toys and books in the United States. CyberShoppe, Inc bán đồ chơi
và sách tại Hoa Kỳ. It Nó
has three branches in different parts of the country. có ba chi nhánh ở các phần khác nhau của
đất nước. Currently, Hiện nay,
the three branches maintain data on their local computer ba ngành duy trì dữ liệu trên máy
tính địa phương của họ
systems The IT manager at CyberShoppe has identified that a các hệ thống CNTT quản lý tại
CyberShoppe đã xác định rằng một
systems. hệ thống. The IT manager at CyberShoppe has identified that a Các nhà quản lý IT
tại CyberShoppe đã xác định rằng một
centralized data repository on the products sold through its kho dữ liệu tập trung vào các sản
phẩm được bán thông qua của nó
e-commerce site is required. -Trang web thương mại điện tử là bắt buộc. The data from all
branches must Các dữ liệu từ tất cả các ngành phải
be collated and housed in a centralized location. được đối chiếu và đặt trong một địa điểm
trung tâm. This data Dữ liệu này
must be made available to the Accounts and Sales sections at phải được làm sẵn có cho các
tài khoản và bán hàng phần tại
the individual branches, regardless of the hardware and các cá nhân, ngành, không phụ thuộc
vào phần cứng và
software platforms being used at the branches. các nền tảng phần mềm đang được sử dụng tại
các chi nhánh.
I dditi Tôi dditi
th thứ
ll
ll
ii
t th dt t ngày dt
In addition, the sales personnel require access to the data Ngoài ra, các nhân viên bán hàng
yêu cầu truy cập dữ liệu
using palmtops and cellular phones. sử dụng palmtops và điện thoại di động. The product
details of Các sản phẩm chi tiết
CyberShoppe consist of the product name, a brief description, CyberShoppe bao gồm tên sản
phẩm, một mô tả ngắn gọn,
the price, and the available quantity on hand. giá, và có số lượng trên tay. A product ID Một
ID sản phẩm
Ver. Ver. 1.0 1.0
pp
,,
qq
yy
pp
uniquely identifies each product. xác định duy nhất mỗi sản phẩm.
Page 33 Trang 33
Practice Questions Câu hỏi thực hành
Consider the following statement: Xem xét báo cáo sau đây:
<?xml version="1.0" encoding= "UTF-8"?> <?? Xml version = "1.0" encoding = "UTF-8">
Which component of an XML document does the preceding Những thành phần của một tài
liệu XML nào trước
statement represent? tuyên bố đại diện?
pp
a. a. Element Element
b. b. Content Nội dung
c. c. Entity Thực thể
c. c. Entity Thực thể
d. d. Processing Instruction Hướng dẫn chế biến
d. d. Processing Instruction Hướng dẫn chế biến
Ver. Ver. 1.0 1.0
Page 34 Trang 34
Bob is the EDP head of an organization that manufactures Bob là người đứng đầu EDP của
một tổ chức sản xuất
and sells hardware parts. và bán các bộ phận phần cứng. The organization has presence in Tổ
chức này đã hiện diện tại
all the major cities of the United States. tất cả các thành phố lớn của Hoa Kỳ. At present, all
Hiện nay, tất cả
branch offices maintain their data locally. văn phòng chi nhánh duy trì dữ liệu của họ tại địa
phương. Bob wants to Bob muốn
t li th t li th
it nó
fdti hi fdti hi
i ti i ti
DtDt
centralize the repository of data in his organization. tập trung các kho lưu trữ dữ liệu trong tổ
chức của mình. Data Dữ liệu
from all the branch offices needs to be collated and stored in từ tất cả các văn phòng chi
nhánh cần phải được đối chiếu và lưu trữ
a centralized location. một địa điểm trung tâm. Data pertaining to a branch should be Dữ liệu
liên quan đến chi nhánh phải được
available only to that branch office However the head office chỉ với văn phòng chi nhánh Tuy
nhiên, trụ sở chính
available only to that branch office. chỉ với văn phòng chi nhánh. However, the head office
Tuy nhiên, trụ sở chính
should be able to access all the data. sẽ có thể truy cập tất cả dữ liệu.
Ver. Ver. 1.0 1.0
Page 35 Trang 35
Practice Questions (Contd.) Câu hỏi thực hành (Contd.)
In addition, Bob also wants that the sales personnel should Ngoài ra, Bob cũng mong muốn
rằng các nhân viên bán hàng nên
be able to access sales data from mobile devices, such as có thể truy cập dữ liệu bán hàng từ
các thiết bị di động, như
palmtops and mobile phones. palmtops và điện thoại di động. This sales information should
Thông tin này bán hàng nên
have a brief description of the product, the price, and the có một mô tả ngắn gọn của sản
phẩm, giá cả, và
il bl i il b i
tt
UiUi
hi hf th f ll i hi hf thứ e sẽ i
kk
available inventory. có sẵn hàng tồn kho. Using which of the following markup Sử dụng mà
các đánh dấu sau
languages can Bob achieve the preceding goals? ngôn ngữ Bob có thể đạt được các mục tiêu
trên?
a. a. HTML HTML
b XML b XML
b. b. XML XML
c. c. SGML SGML
d. d. EDI EDI
b. b. XML XML
Ver. Ver. 1.0 1.0
Page 36 Trang 36
Which of the following statement is NOT true about Nào trong các câu sau đây là không
đúng về
information modeling? mô hình thông tin?
a. a. Information Modeling is used to understand the structure and Thông tin mô hình hóa
được sử dụng để hiểu rõ cấu trúc và
meaning of information that will be stored in XML documents. ý nghĩa của thông tin sẽ được
lưu trữ trong các tài liệu XML.
b. b. Information Modeling helps you identify the objects involved in Mô hình hóa các thông
tin giúp bạn xác định các đối tượng tham gia
an application, the properties of the objects, and the một ứng dụng, các thuộc tính của đối
tượng, và
relationships among them. mối quan hệ giữa họ.
c In an Information Model each record can contain different data c Trong một mô hình thông
tin mỗi bản ghi có thể chứa dữ liệu khác nhau
c. c. In an Information Model, each record can contain different data Trong một mô hình
thông tin, mỗi bản ghi có thể chứa dữ liệu khác nhau
fields. lĩnh vực.
d. d. An information model imposes restrictions on data. Một mô hình thông tin áp đặt các
hạn chế về dữ liệu.
d. d. An information model imposes restrictions on data. Một mô hình thông tin áp đặt các
hạn chế về dữ liệu.
Ver. Ver. 1.0 1.0
Page 37 Trang 37
Which one of the following statements is true about XML? Mà một trong những câu sau đây
là đúng về XML?
a. a. XML is a text-based markup language that provides predefined XML là một ngôn ngữ
đánh dấu dựa trên văn bản mà cung cấp được xác định trước
tags to store data. thẻ để lưu trữ dữ liệu.
b. b. XML is a platform-neutral data interchange format. XML là một định dạng trao đổi dữ
liệu nền tảng trung lập.
c. c. XML requires VAN for data interchange. XML đòi hỏi VAN cho trao đổi dữ liệu.
d. d. XML allows you to specify data formatting instructions. XML cho phép bạn chỉ định
định dạng dữ liệu hướng dẫn.
b. b. XML is a platform-neutral data interchange format. XML là một định dạng trao đổi dữ
liệu nền tảng trung lập.
Ver. Ver. 1.0 1.0
Page 38 Trang 38
Which one of the following is a disadvantage of traditional Mà một trong những điều sau đây
là một bất lợi của truyền thống
EDI? EDI?
a. a. It provides fixed transaction sets. Nó cung cấp bộ giao dịch cố định.
b. b. It increases the communication lag time between an agency Nó làm tăng độ trễ thời gian
giao tiếp giữa một cơ quan
and a customer. và một khách hàng.
c. c. It increases data entry errors. Nó làm tăng các lỗi nhập dữ liệu.
d. d. It increases the time taken to process orders. Nó làm tăng thời gian thực hiện quá trình
để các đơn đặt hàng.
a. a. It provides fixed transaction sets. Nó cung cấp bộ giao dịch cố định.
Ver. Ver. 1.0 1.0
Page 39 Trang 39
Summary Tóm tắt
Summary Tóm tắt
EDI refers to the process of exchanging documents in a EDI đề cập đến quá trình trao đổi tài
liệu trong một
standard format between two computer systems. tiêu chuẩn định dạng giữa hai hệ thống máy
tính.
XML is a text-based markup language that enables you to XML là một ngôn ngữ đánh dấu
dựa trên văn bản cho phép bạn
store data in a structured format by using meaningful tags. lưu trữ dữ liệu trong một định
dạng cấu trúc bằng cách sử dụng thẻ có ý nghĩa.
Using XML in Web architecture enables loose coupling Sử dụng XML trong web kiến trúc
cho phép ghép nối lỏng lẻo
between the server application and the client application. giữa các ứng dụng máy chủ và
khách hàng ứng dụng.
XML h th f ll i XML h thứ e sẽ i
dd
tt
XML has the following advantages: XML có những ưu điểm sau:
Ver. Ver. 1.0 1.0
Page 40 Trang 40
In future, XML will be widely used in: Trong tương lai, XML sẽ được sử dụng rộng rãi
trong:
E-commerce Thương mại điện tử
B2B services Các dịch vụ B2B
Mobile services Dịch vụ điện thoại di động
EDI and EAI EDI và EAI
EDI and EAI EDI và EAI
XML was defined by W3C to ensure that structured data is XML được định nghĩa bởi W3C
để đảm bảo rằng cấu trúc dữ liệu
uniform and independent of vendors and applications. thống nhất và độc lập của các nhà cung
cấp và các ứng dụng.
In XML an information model is used to understand the Trong XML một mô hình thông tin
được sử dụng để hiểu rõ
In XML, an information model is used to understand the Trong XML, một mô hình thông tin
được sử dụng để hiểu rõ
structure and meaning of information that will be stored in XML cấu trúc và ý nghĩa của
thông tin sẽ được lưu trữ trong XML
You can create static, dynamic, or a combination of both these Bạn có thể tạo, năng động,
hoặc một sự kết hợp tĩnh của cả hai
yy
information models for an XML application. mô hình thông tin cho một ứng dụng XML.
A static information model helps you define all the objects in an Một mô hình tĩnh thông tin
giúp bạn xác định tất cả các đối tượng trong một
application and the relationships among them. ứng dụng và các mối quan hệ giữa họ.
Ver. Ver. 1.0 1.0
Page 41 Trang 41
In a dynamic model, data flow diagrams and process diagrams Trong một mô hình năng
động, dữ liệu và biểu đồ sơ đồ dòng chảy quá trình
are used to determine the flow of information. được sử dụng để xác định dòng chảy của thông
tin.
An XML document consists of: Một tài liệu XML bao gồm:
Tags Tags
Content Nội dung
Ver. Ver. 1.0 1.0
IWCD_Session_14.pdf
Page 1 Trang 1
Create an XML schema Tạo một lược đồ XML
Declare attributes in an XML schema Khai báo thuộc tính trong một lược đồ XML
Identify the need for XML namespaces Xác định sự cần thiết cho các không gian tên XML
Ver. Ver. 1.0 1.0
Page 2 Trang 2
Introducing XML Schema Giới thiệu về XML Schema
An XML schema defines the list of elements and attributes Một lược đồ XML định nghĩa
danh sách các phần tử và thuộc tính
Introducing XML Schema Giới thiệu về XML Schema
that can be used in an XML document. có thể được sử dụng trong một tài liệu XML.
An XML schema specifies the order in which the elements Một lược đồ XML xác định thứ tự
mà các phần tử
appear in the XML document, and their data types. xuất hiện trong tài liệu XML, và các loại
dữ liệu của họ.
Microsoft has developed the XML Schema Definition (XSD) Microsoft đã phát triển các
XML Schema Definition (XSD)
language to define the schema of an XML document. ngôn ngữ để xác định các lược đồ của
một tài liệu XML.
Ver. Ver. 1.0 1.0
Page 3 Trang 3
Advantages of XML Schema Created Using XSDs Ưu điểm của lược đồ XML Tạo Sử
dụng XSD
Some of the advantages of creating an XML schema by Một số trong những lợi thế của việc
tạo ra một lược đồ XML do
Advantages of XML Schema Created Using XSDs Ưu điểm của lược đồ XML Tạo Sử
dụng XSD
using XSD are: sử dụng XSD là:
XSD provides control over the type of data that can be XSD kiểm soát cung cấp loại dữ liệu
có thể được
assigned to elements and attributes. giao cho các phần tử và thuộc tính.
XSD enables you to create your own data types. XSD cho phép bạn tạo các kiểu dữ liệu của
riêng bạn.
XSD enables you to specify restrictions on data. XSD cho phép bạn chỉ định hạn chế về dữ
liệu.
The syntax for defining an XSD is the same as the syntax used Cú pháp để xác định một XSD
cũng giống như cú pháp được sử dụng
f XML d f XML d
tt
for XML documents. cho các tài liệu XML.
XML schema content models can be used to validate mixed lược đồ XML mô hình nội dung
có thể được sử dụng để xác nhận hỗn hợp
content. nội dung.
XML schema is extensible Lược đồ XML có thể mở rộng
XML schema is extensible. Lược đồ XML được mở rộng.
XML schema is self documenting. Lược đồ XML là tự tài liệu.
Ver. Ver. 1.0 1.0
Page 4 Trang 4
Support for XML Schemas in Various Parsers Hỗ trợ cho XML Schemas trong parser
khác nhau
Parsers that provide support for XML schemas are: Phân tích cú pháp cung cấp hỗ trợ cho các
lược đồ XML là:
Support for XML Schemas in Various Parsers Hỗ trợ cho XML Schemas trong parser
khác nhau
IBM XML4J : Validates XML documents against several types IBM XML4J: Validates tài
liệu XML với một số loại
of XML schemas. các lược đồ XML.
MSXML 6.0 : Enables loading of XML data from anonymous or MSXML 6.0: Cho phép tải
dữ liệu XML từ vô danh hoặc
untrusted sources in a secured manner. nguồn không tin cậy một cách bảo đảm.
Ver. Ver. 1.0 1.0
Page 5 Trang 5
Data Types in XML Schemas Các loại dữ liệu trong XML Schemas
In an XML schema created using XSD, every element must Trong một lược đồ XML được
tạo ra bằng cách sử dụng XSD, mỗi phần tử phải
Data Types in XML Schemas Các loại dữ liệu trong XML Schemas
be associated with a data type. được liên kết với một kiểu dữ liệu.
XSD provides the following list of predefined data types: XSD cung cấp danh sách sau đây
của các dữ liệu được xác định trước loại:
Primitive Nguyên thủy
Derived Có nguồn gốc
Atomic Nguyên tử
List Danh sách
Union Liên minh
Ver. Ver. 1.0 1.0
Page 6 Trang 6
Data Types in XML Schemas (Contd.) Các loại dữ liệu trong XML Schemas (Contd.)
In HTML, only the predefined tags can be Trong HTML, chỉ có thẻ có thể được xác định
trước
dd
Atomic Nguyên tử
List Danh sách
used. được sử dụng.
Do not contain elements or attributes. Không chứa các yếu tố hoặc các thuộc tính.
Contain only values. Chỉ có giá trị.
Union Liên minh
Ver. Ver. 1.0 1.0
Page 7 Trang 7
Atomic Nguyên tử
List Danh sách
Are defined by using other data types Được định nghĩa bằng cách sử dụng các loại dữ liệu
khác
called base types. gọi là các loại cơ sở.
Can be built-in or user-defined. Có thể được xây dựng trong hoặc người dùng định nghĩa.
Union Liên minh
Ver. Ver. 1.0 1.0
Page 8 Trang 8
Atomic Nguyên tử
List Danh sách
Cannot be broken down into smaller Không thể được chia thành nhỏ hơn
units. đơn vị.
Union Liên minh
Can be primitive or derived. Có thể nguyên thủy hoặc có nguồn gốc.
Ver. Ver. 1.0 1.0
Page 9 Trang 9
Atomic Nguyên tử
List Danh sách
Are derived data types that contain a set Có nguồn gốc các loại dữ liệu có chứa một tập hợp
Union Liên minh
yp yp
of values of atomic data types. các giá trị của dữ liệu nguyên tử loại.
Elements referring to a list data type can Các yếu tố đề cập đến một kiểu dữ liệu danh sách có
thể
contain a value only from that defined chứa một giá trị duy nhất từ đó xác định
set. thiết lập.
Ver. Ver. 1.0 1.0
Page 10 Trang 10
Atomic Nguyên tử
List Danh sách
Union Liên minh
Are derived from the atomic and list data Có nguồn gốc từ và danh sách dữ liệu nguyên tử
types. các loại.
Ver. Ver. 1.0 1.0
Page 11 Trang 11
Elements in XML Schemas Phần tử trong XML Schemas
There are two types of elements, simple and complex that Có hai loại yếu tố, đơn giản và
phức tạp
Elements in XML Schemas Phần tử trong XML Schemas
can be defined in a schema. có thể được định nghĩa trong một lược đồ.
Simple Element Phần tử đơn giản
A simple element does not contain any child elements or Một yếu tố đơn giản, không chứa
bất kỳ phần tử con hoặc
pp
yy
attributes. thuộc tính.
It contains only values, such as numbers, strings, and dates. Nó chứa giá trị duy nhất, chẳng
hạn như số, chuỗi, và ngày tháng.
You can specify restrictions on elements by defining a new Bạn có thể chỉ hạn chế về yếu tố
bằng cách định nghĩa một mới
simple data type from an existing data type using facet values. đơn giản kiểu dữ liệu từ một
kiểu dữ liệu hiện có bằng cách sử dụng các giá trị mặt.
You can also associate an element with a simple data type. Bạn cũng có thể kết hợp một phần
tử với một kiểu dữ liệu đơn giản.
Let us look at the syntax for declaring a simple element. Chúng ta hãy nhìn vào cú pháp khai
báo một yếu tố đơn giản.
Ver. Ver. 1.0 1.0
Page 12 Trang 12
Elements in XML Schemas (Contd.) Các yếu tố trong sơ đồ XML (Contd.)
<xsd:element name = <Xsd: name = phần tử
“ l "L
tt
""
The name attribute specifies the name of Các tên thuộc tính xác định tên của
the element declared các yếu tố tuyên bố
“element-name" "Phần tử-name"
type="data type " type = "dữ liệu nhập"
min0ccurs ="nonNegativeInteger" min0ccurs = "nonNegativeInteger"
max0ccurs ="nonNegativeInteger| max0ccurs = "nonNegativeInteger |
bb
d d"/> d d "/>
the element declared. các yếu tố đã kê khai.
The type attribute specifies the data Các thuộc tính xác định loại dữ liệu
type of the element declared. loại của phần tử tuyên bố.
minOccurs specifies the minimum minOccurs xác định tối thiểu
bb
f ti f ti
th thứ
ll
tt
unbounded"/> không bị chặn "/>
number of times the element can occur. số lần các phần tử có thể xảy ra.
maxOccurs specifies the maximum maxOccurs xác định tối đa
number of times the element can appear. số lần các phần tử có thể xuất hiện.
Ver. Ver. 1.0 1.0
Page 13 Trang 13
Complex Element Phần tử phức tạp
A complex element contains other elements, attributes, and Một yếu tố phức tạp có chứa các
nguyên tố khác, thuộc tính, và
mixed content. nội dung hỗn hợp.
To declare a complex element, you need to first define a Để khai báo một phần tử phức tạp,
bạn cần xác định đầu tiên
complex data type. kiểu dữ liệu phức tạp.
After defining the complex data type, you can declare a Sau khi xác định các kiểu dữ liệu
phức tạp, bạn có thể tuyên bố một
complex element by associating this data type with the yếu tố phức tạp bằng cách kết hợp
kiểu dữ liệu này với
element. yếu tố.
Let us look at the syntax for declaring a complex element. Chúng ta hãy nhìn vào cú pháp
khai báo một phần tử phức tạp.
Ver. Ver. 1.0 1.0
Page 14 Trang 14
<xsd: complexType name ="data <Xsd: complexType name = "dữ liệu
tt
"> ">
The complexType element is used to Các phần tử được sử dụng để complexType
type name"> nhập tên ">
Content model declaration Nội dung kê khai mô hình
</xsd:complexType> </ Xsd: complexType>
declare a new complex data type. khai báo một kiểu dữ liệu phức tạp mới.
The name attribute specifies the name of Các tên thuộc tính xác định tên của
the new complex data type. các kiểu dữ liệu phức tạp mới.
The Content model declaration Mô hình nội dung kê khai
Co te t ode dec a at o Co te t thơ ca ngợi một lúc o Tháng mười hai
contains the declaration for the elements chứa các khai báo cho các phần tử
and attributes that make up the content và các thuộc tính tạo nên nội dung
of the complex type. của các loại phức tạp.
Ver. Ver. 1.0 1.0
Page 15 Trang 15
Demo: Creating an XML Schema Demo: Tạo một lược đồ XML
Demo: Creating an XML Schema Demo: Tạo một lược đồ XML
CyberShoppe, a toy and book store in the United States, sends CyberShoppe, một món đồ
chơi và các cửa hàng sách ở Hoa Kỳ, gửi
its product information from the head office to the branch thông tin sản phẩm của mình từ
đầu đến văn phòng chi nhánh
offices. văn phòng. The product details must be stored in a consistent Các chi tiết sản phẩm
phải được lưu trữ trong một quán
format Restrictions must be placed on the type of data that Giới hạn định dạng phải được đặt
vào loại dữ liệu
format. định dạng. Restrictions must be placed on the type of data that Hạn chế phải được đặt
vào loại dữ liệu
can be saved in the data store, in order to ensure uniformity có thể được lưu trong kho lưu trữ
dữ liệu, để bảo đảm tính thống nhất
and consistency of information. và nhất quán của thông tin.
The product details include the product name, a brief Các chi tiết sản phẩm bao gồm tên sản
phẩm, một ngắn
The product details include the product name, a brief Các chi tiết sản phẩm bao gồm tên sản
phẩm, một ngắn
description, product price, and the available quantity on hand. mô tả, giá sản phẩm, và có số
lượng trên tay.
The price of the product must always be greater than zero. Giá của sản phẩm luôn luôn phải
lớn hơn số không.
Ver. Ver. 1.0 1.0
Page 16 Trang 16
Declaring Attributes in a Schema Tuyên bố thuộc tính trong một lược đồ
Attributes in an XML schema are declared in the same way Thuộc tính trong một lược đồ
XML được khai báo trong cùng một cách
Declaring Attributes in a Schema Tuyên bố thuộc tính trong một lược đồ
as elements. là yếu tố.
Declaring attributes in an XML schema facilitates the Tuyên bố thuộc tính trong một lược đồ
XML tạo điều kiện
assimilation of information for an XML document. đồng hóa của các thông tin cho một tài
liệu XML.
Attribute declarations can be defined in two ways: khai báo thuộc tính có thể được định nghĩa
theo hai cách:
Simple type definitions : Facilitates local validation of the Đơn giản kiểu định nghĩa: Tạo
điều kiện địa phương xác nhận của
attribute information. thông tin thuộc tính.
Global attribute declarations : Enables reuse of attributes. Khai báo thuộc tính toàn cầu:
Cho phép tái sử dụng các thuộc tính.
Ver. Ver. 1.0 1.0
Page 17 Trang 17
Attribute Element Thuộc tính Element
In XSD, an attribute for a user-defined element is declared Trong XSD, một thuộc tính cho
một yếu tố xác định người sử dụng được khai báo
Attribute Element Thuộc tính Element
using the attribute element. sử dụng các phần tử thuộc tính.
The syntax for declaring an attribute in XSD is: Cú pháp khai báo một thuộc tính trong XSD
là:
<attribute name="attributename" <Tên thuộc tính = "attributename"
ref="attributename" ref = "attributename"
type="datatypename" use="value" value="value"> type = "datatypename" sử dụng = "giá trị"
giá trị = "giá trị">
</attribute> </ Thuộc tính>
The attribute element contains attributes that are used Các phần tử thuộc tính chứa
các thuộc tính được sử dụng
to further qualify and restrict the scope and usage of the tiếp tục hội đủ điều kiện và hạn chế
phạm vi và cách sử dụng của
user-defined attribute. người dùng định nghĩa thuộc tính.
Ver. Ver. 1.0 1.0
Page 18 Trang 18
Attribute Element (Contd.) Thuộc tính Element (Contd.)
The attribute element consists of the following attributes: Các phần tử thuộc tính
bao gồm các thuộc tính sau:
name Tên
ref ref
type loại
use sử dụng
Ver. Ver. 1.0 1.0
Page 19 Trang 19
name Tên
ref ref
type loại
Is used to specify the name of a Được sử dụng để xác định tên của một
user-defined attribute. người dùng định nghĩa thuộc tính.
Must be used when the schema element Phải được sử dụng khi các yếu tố đồ
is the parent element of the attribute là yếu tố phụ huynh của thuộc tính
use sử dụng
Colon (:) should not be included in the Dấu hai chấm (:) không được bao gồm trong
value of the name attribute. giá trị của thuộc tính tên.
Ver. Ver. 1.0 1.0
Page 20 Trang 20
name Tên
ref ref
type loại
Is used to refer to a user-defined attribute Được sử dụng để chỉ một định nghĩa thuộc tính
người dùng
declared either in the same or in any tuyên bố hoặc trong cùng một hoặc trong bất kỳ
other XSD document. XSD tài liệu khác.
use sử dụng
Ver. Ver. 1.0 1.0
Page 21 Trang 21
name Tên
ref ref
type loại
Takes a value that specifies the data type Có một giá trị xác định kiểu dữ liệu
of the user defined attribute của người sử dụng thuộc tính xác định
use sử dụng
of the user-defined attribute. của định nghĩa thuộc tính của người dùng.
Ver. Ver. 1.0 1.0
Page 22 Trang 22
name Tên
ref ref
type loại
use sử dụng
Specifies the way in which an attribute Ghi rõ cách thức mà một thuộc tính
can be used in an XML document. có thể được sử dụng trong một tài liệu XML.
Values that can be assigned to the use Các giá trị có thể được giao để sử dụng
attribute are optional , default , thuộc tính là tùy chọn, mặc định,
pp
required , and fixed . yêu cầu, và cố định.
Ver. Ver. 1.0 1.0
Page 23 Trang 23
Global Attributes Các thuộc tính toàn cầu
Global attributes are declared outside all element thuộc tính toàn cầu được khai báo bên ngoài
tất cả các phần tử
Global Attributes Các thuộc tính toàn cầu
declarations. tờ khai.
Global attributes facilitate attribute reusability. Tạo thuận lợi cho sử dụng lại các thuộc tính
toàn cầu thuộc tính.
Global attributes can be associated with simple and thuộc tính toàn cầu có thể được liên kết
với đơn giản và
pp
complex data types. các loại dữ liệu phức tạp.
Global attributes have the schema element as the parent Thuộc tính toàn cầu có phần giản đồ
như cha mẹ
Ver. Ver. 1.0 1.0
Page 24 Trang 24
Restricting Attributes Values Hạn chế giá trị thuộc tính
In order to restrict values that can be assigned to an Để hạn chế giá trị có thể được giao cho
một
Restricting Attributes Values Hạn chế giá trị thuộc tính
attribute: thuộc tính:
Declare the attribute and associate it with a user-defined Kê khai các thuộc tính và liên kết nó
với một người dùng định nghĩa
simple data type. kiểu dữ liệu đơn giản.
Create a simple data type by using the XSD simpleType Tạo một kiểu dữ liệu đơn giản
bằng cách sử dụng simpleType XSD
Use the XSD restriction element within the simpleType Sử dụng các yếu tố hạn
chế trong simpleType các XSD
element to restrict the values that can be assigned to the yếu tố để hạn chế các giá trị có thể
được giao cho
element to restrict the values that can be assigned to the yếu tố để hạn chế các giá trị có thể
được giao cho
elements or attributes that use the simple data type. các yếu tố hoặc các thuộc tính có sử dụng
kiểu dữ liệu đơn giản.
Ver. Ver. 1.0 1.0
Page 25 Trang 25
Demo: Declaring Attributes in an XML Schema Demo: Khai báo các thuộc tính trong
một lược đồ XML
Demo: Declaring Attributes in an XML Schema Demo: Khai báo các thuộc tính trong
một lược đồ XML
The Marketing Manager at CyberShoppe sends its product Quản lý Marketing tại
CyberShoppe gửi sản phẩm của mình
information from its head office to the branch offices. thông tin từ trụ sở chính đến các văn
phòng chi nhánh. The Các
branch offices update this file and send it back to the head chi nhánh văn phòng cập nhật các
tập tin này và gửi nó trở lại vào đầu
office on a routine basis The product details must be stored in văn phòng trên cơ sở thường
xuyên Các chi tiết sản phẩm phải được lưu trữ trong
office on a routine basis. văn phòng trên cơ sở thường xuyên. The product details must be
stored in Các chi tiết sản phẩm phải được lưu trữ trong
a consistent format at all branches. một định dạng phù hợp ở tất cả các ngành. Restrictions
must be Hạn chế phải được
placed on the type of data that can be saved in the data store, đặt vào loại dữ liệu có thể được
lưu trong kho lưu trữ dữ liệu,
to ensure uniformity and consistency of information. để đảm bảo tính thống nhất và nhất quán
của thông tin.
yy
yy
CyberShoppe sells two categories of products, books and toys. CyberShoppe bán hai loại sản
phẩm, sách và đồ chơi.
Product details include the product name, a brief description, Chi tiết sản phẩm bao gồm tên
sản phẩm, một mô tả ngắn gọn,
product price, and the available quantity on hand. sản phẩm giá, và có số lượng trên tay. The
product Các sản phẩm
ii
tl tl
bb
t th t ngày
I Tôi
dditi t th dditi t ngày
price must always be greater than zero. giá cả luôn luôn phải lớn hơn số không. In addition to
these Ngoài các
details, the data store needs to store the category and product chi tiết, các nhu cầu lưu trữ dữ
liệu để lưu trữ các loại, sản phẩm
ID. ID.
Ver. Ver. 1.0 1.0
Page 26 Trang 26
Introducing XML Namespaces Giới thiệu XML tên miền không gian
In XML, a namespace is a virtual space that is assigned or Trong XML, một không gian tên
là một không gian ảo đó là được giao,
Introducing XML Namespaces Giới thiệu XML tên miền không gian
recognized by a Uniform Resource Identifier (URI). công nhận bởi một nguồn thống nhất
Identifier (URI).
A namespace is a string that uniquely identifies the không gian tên là một chuỗi nhận diện
duy nhất
elements and attributes from different schemas. các yếu tố và các thuộc tính từ các lược đồ
khác nhau.
A namespace is a unique identifier used to resolve conflicts tên miền không gian là một định
danh duy nhất được sử dụng để giải quyết xung đột
between elements that have the same names. giữa các yếu tố đó có cùng tên.
The following guidelines ensure the uniqueness of a URI: Các hướng dẫn sau đây bảo đảm
tính độc đáo của một URI:
gg gg
qq
Using a URI that is controlled by the developer. Sử dụng một URI được kiểm soát bởi nhà
phát triển.
Using a relative URI. Sử dụng URI tương đối.
Ver. Ver. 1.0 1.0
Page 27 Trang 27
Declaring Namespaces Khai báo tên miền không gian
A namespace can be declared in an XSD document by không gian tên có thể được tuyên bố
trong một tài liệu XSD của
Declaring Namespaces Khai báo tên miền không gian
using the xmlns keyword. sử dụng các từ khoá xmlns.
The general form of the xmlns keyword is: Hình thức chung của các từ khoá xmlns là:
xmlns : prefix ="URI" xmlns: prefix = "URI"
xmlns is the name of the attribute. xmlns là tên của thuộc tính.
pp
There are two types of namespace declarations: Có hai loại khai báo tên miền không gian:
Default Declaration : Declares a default namespace for a Default Tuyên bố: khai báo một
không gian tên mặc định cho một
prefix is an optional namespace. tiền tố là một không gian tên tùy chọn.
Default Declaration : Declares a default namespace for a Default Tuyên bố: khai báo một
không gian tên mặc định cho một
document without specifying the prefix for a default tài liệu mà không có quy định cụ thể các
tiền tố để mặc định
namespace. không gian tên.
Explicit Declaration : Enables xmlns keyword to associate a Tuyên bố rõ ràng: Cho phép
xmlns từ khóa để kết hợp
prefix with a namespace. tiền tố với một không gian tên.
Ver. Ver. 1.0 1.0
Page 28 Trang 28
Harry is creating an XML schema using XSD. Harry là tạo ra một lược đồ XML bằng cách
sử dụng XSD. To associate Để liên kết
each element, he is using a data type that specifies the type mỗi yếu tố, ông đang sử dụng một
loại dữ liệu mà quy định các loại
of content that an element can hold. nội dung có một yếu tố có thể giữ. Harry wants to use
Harry muốn sử dụng
such data types that are defined using base data types. dữ liệu như các loại được xác định
bằng cách sử dụng cơ sở dữ liệu các loại.
BB
dtt DTT
ith b thứ i b
i iti i ITI
diddt diddt
Base data types can either be primitive or derived data Cơ sở các kiểu dữ liệu có thể được
hoặc lấy dữ liệu nguyên thủy
types. các loại. Which of the following data types should Harry use to Mà các loại dữ liệu sau
đây Harry sẽ sử dụng để
accomplish this task? hoàn thành nhiệm vụ này?
P i iti P i ITI
a. a. Primitive Nguyên thủy
b. b. Union Liên minh
c. c. List Danh sách
d D id d D id
d. d. Derived Có nguồn gốc
d. d. Derived Có nguồn gốc
Ver. Ver. 1.0 1.0
Page 29 Trang 29
Which one of the following code snippets can be considered Mà một trong những đoạn mã
sau đây có thể được xem xét
well-formed? cũng như hình thành?
a. <EMPLOYEE empid=e001> a. <EMPLOYEE empid=e001>
<EMPNAME> Alice Peterson</EMPNAME> Alice <EMPNAME> Peterson </
EMPNAME>
<BASICPAY> $2000 </BASICPAY> <BASICPAY> $ 2000 </ BASICPAY>
<BASICPAY> $2000 </BASICPAY> <BASICPAY> $ 2000 </ BASICPAY>
</EMPLOYEE> </ NHÂN VIÊN>
b. <EMPLOYEE empid=“e001”> b. <EMPLOYEE empid="e001">
<EMPNAME> Alice Peterson<BASICPAY> $2000 Alice <EMPNAME> Peterson
<BASICPAY> $ 2000
<BASICPAY> $ 2000
</EMPNAME> </ EMPNAME>
</BASICPAY> </ BASICPAY>
c. <EMPLOYEE empid=“e001”> c. <EMPLOYEE empid="e001">
<BASICPAY> $ 2000
</BASICPAY></EMPNAME> </ BASICPAY> </ EMPNAME>
Ver. Ver. 1.0 1.0
Page 30 Trang 30
d. <EMPLOYEE empid=“e001”> d. <EMPLOYEE empid="e001">
<BASICPAY> $ 2000
</employee> </ Nhân viên>
c. <EMPLOYEE empid=“e001”> c. <EMPLOYEE empid="e001">
<BASICPAY> $ 2000
Ver. Ver. 1.0 1.0
Page 31 Trang 31
You have been assigned the task of developing an XML Bạn đã được giao nhiệm vụ phát
triển một XML
schema file for a new Web application in an organization. file lược đồ cho một ứng dụng web
mới trong một tổ chức.
The application aims to deliver financial news to its Ứng dụng này nhằm mục đích cung cấp
tin tức tài chính của mình
subscribers. thuê bao. Financial news comprises the date, the name Tin tài chính bao gồm
ngày tháng, tên
f th f ngày
i ti i ti
d th d th
ti ti
t fi t fi
ilif ilif
ti ti
of the organization, and the pertinent financial information. của tổ chức, và các thông tin tài
chính thích hợp.
What should you use to represent the financial news in the Những gì bạn nên sử dụng để đại
diện cho những tin tức tài chính trong
XML schema? Lược đồ XML?
CC
lt lt
ll
tt
a. a. Complex type element Loại phần tử phức tạp
b. b. Simple type element Đơn giản loại phần tử
c. c. Element Element
d Att ib t d ATT IB t
d. d. Attribute Thuộc tính
Ver. Ver. 1.0 1.0
Page 32 Trang 32
Joe wants to specify a user-defined attribute in an XML Joe muốn chỉ định một định nghĩa
thuộc tính của người dùng trong một XML
schema. lược đồ. He wants to use the use attribute in the XML Anh ta muốn sử dụng thuộc
tính sử dụng trong XML
schema, but does not want to set the value for the attribute lược đồ, nhưng không muốn thiết
lập giá trị cho thuộc tính
in his XML document. trong tài liệu XML của mình. Which of the following values of the
Nào trong các giá trị sau đây của
tt ib th ld J tt IB thứ ld J
i hi XML h i hi h XML
??
use attribute should Joe use in his XML schema? sử dụng thuộc tính Joe nên sử dụng trong
các lược đồ XML của mình?
a. optional a. tùy chọn
b. default b. mặc định
c. required c. yêu cầu
d. fixed d. cố định
a. optional a. tùy chọn
Ver. Ver. 1.0 1.0
Page 33 Trang 33
You have created a global attribute named color. Bạn đã tạo ra một tên thuộc tính màu sắc
toàn cầu. Which of Nào
the following attributes of the xsd:attribute element will sau thuộc tính của xsd: phần
tử thuộc tính sẽ
you use to access color? bạn sử dụng để truy cập vào màu sắc?
a. use a. sử dụng
b. name b. Tên
c. ref c. ref
d. type d. loại
c. ref c. ref
Ver. Ver. 1.0 1.0
Page 34 Trang 34
Summary Tóm tắt
Summary Tóm tắt
An XML schema can be used to specify the list of elements Một lược đồ XML có thể được
dùng để xác định danh sách các yếu tố
and the order in which these elements must appear in the XML và thứ tự mà các yếu tố này
phải xuất hiện trong XML
The XSD language is used to describe the structure of the Ngôn ngữ XSD được sử dụng để
mô tả cấu trúc của
elements in a schema. các yếu tố trong một lược đồ.
The data types supported by an XML schema can be Các loại dữ liệu hỗ trợ bởi một lược đồ
XML có thể được
categorized as follows: phân loại như sau:
categorized as follows: phân loại như sau:
Atomic Nguyên tử
List Danh sách
The simpleType XSD element allows you to create Các phần tử XSD simpleType cho
phép bạn tạo
user-defined simple data types. người dùng định nghĩa kiểu dữ liệu đơn giản.
Ver. Ver. 1.0 1.0
The complexType XSD element allows you to create complex Các phần tử XSD
complexType cho phép bạn tạo phức tạp
data types. Các kiểu dữ liệu.
Page 35 Trang 35
The restriction element can be used to specify constraints Các yếu tố hạn chế có thể
được dùng để xác định các ràng buộc
on the values that can be stored in elements and attributes. trên các giá trị có thể được lưu trữ
trong các phần tử và thuộc tính.
The attribute element is used to declare an attribute in an Các phần tử thuộc tính
được sử dụng để khai báo một thuộc tính trong một
XSD document. XSD tài liệu.
Th Th
tt ib t tt IB t
ll
th th f ll i Ngày thứ e sẽ i
tt ib t tt IB t
The attribute element has the following attributes: Các phần tử thuộc tính có các
thuộc tính sau:
name : Specifies the name of the user-defined attribute. Tên: Ghi rõ tên của các định nghĩa
thuộc tính của người dùng.
ref : Contains a reference to a global attribute. ref: Có chứa một tham chiếu đến một thuộc
tính toàn cầu.
use : Specifies whether the use of the user-defined attribute is sử dụng: Chỉ định xem việc sử
dụng của người dùng được xác định thuộc tính là
use : Specifies whether the use of the user defined attribute is sử dụng: Chỉ định liệu việc sử
dụng các quy định thuộc tính người dùng
mandatory or optional. bắt buộc hoặc tùy chọn. In addition, it allows you to specify the Ngoài
ra, nó cho phép bạn chỉ định
default value for an attribute. giá trị mặc định cho một thuộc tính.
type : Specifies the data type of the attribute. Loại: Chỉ định kiểu dữ liệu của thuộc tính.
ll
SS
ifi th df lt IFI thứ df lt
fi dl fi dl
ff
d fi d d fi d
value : Specifies the default or fixed value for a user-defined giá trị: Chỉ định các giá trị mặc
định hoặc cố định cho một người dùng định nghĩa
attribute. thuộc tính.
The use attribute of the attribute element can take optional , Các thuộc tính sử dụng
các phần tử thuộc tính có thể tùy chọn,
default , fixed , or required as its value. Mặc định, cố định, hoặc yêu cầu như giá trị của nó.
Ver. Ver. 1.0 1.0
,,
,,
qq
Page 36 Trang 36
A global attribute is used to declare an attribute that is not Một thuộc tính toàn cầu được sử
dụng để khai báo một thuộc tính đó không phải là
associated with any element and can be reused within a liên kết với phần tử bất kỳ và có thể
được tái sử dụng trong vòng một
schema. lược đồ.
A namespace is used to avoid naming conflicts between Một không gian tên được sử dụng để
tránh xung đột tên giữa
elements having the same name các yếu tố có cùng tên
elements having the same name. các yếu tố có cùng tên.
A namespace is declared using the xmlns keyword. Một không gian tên được khai báo sử
dụng từ khóa xmlns.
Ver. Ver. 1.0 1.0

IWCD_Session_15.pdf
Page 1 Trang 1
Installing Windows XP Professional Using Attended Installation Cài đặt Windows XP
Professional sử dụng cài đặt tham dự
Implement CDATA sections in an XML document Thực hiện CDATA phần trong một tài
liệu XML
Use the xml:lang attribute Sử dụng xml: lang thuộc tính
Validate an XML document Xác nhận một tài liệu XML
Use Target namespaces Mục tiêu sử dụng không gian tên
Ver. Ver. 1.0 1.0
Page 2 Trang 2
CDATA Sections in an XML Document CDATA phần trong một tài liệu XML
CDATA Sections in an XML Document CDATA phần trong một tài liệu XML
Inform the parser that the information contained in this Thông báo phân tích rằng những
thông tin chứa trong này
section must be recognized as text and not as XML markup. phần phải được công nhận là văn
bản và không phải là ngôn ngữ đánh dấu XML.
A CDATA section should not include the string, ]]> , as its Một phần CDATA không nên
bao gồm chuỗi,]]>, như là của nó
text because this string is used to indicate the end of a văn bản bởi vì chuỗi này được dùng để
chỉ kết thúc
CDATA section. CDATA phần.
The following example depicts the usage of a CDATA Ví dụ sau đây mô tả việc sử dụng một
CDATA
section: phần:
<![CDATA[ The “]]>” string is used to indicate <CDATA [[The chuỗi "]]>" được sử dụng để
cho biết
end of CDATA section]]> cuối CDATA phần]]>
XML does not support nested CDATA sections. XML không hỗ trợ phần lồng nhau CDATA.
Are useful for writing XML code as text within an XML Là hữu ích để viết mã XML dưới
dạng văn bản trong vòng một XML
Ver. Ver. 1.0 1.0
Page 3 Trang 3
The xml:lang Attribute Các xml: lang thuộc tính
The xml:lang Attribute Các xml: lang thuộc tính
Used to specify the language of the text in a particular Được sử dụng để xác định ngôn ngữ
của văn bản trong một cụ thể
The following example depicts the usage of xml:lang Ví dụ sau đây mô tả việc sử dụng
xml: lang
<Message xml:lang="en">Hello</Message> <Message Xml:lang="en"> Hello </ tin nhắn>
<Message xml:lang="fr">Bonjour</Message> <Message Xml:lang="fr"> Bonjour </ tin
nhắn>
Value is applied to all the child elements of the element in Giá trị được áp dụng cho tất cả các
phần tử con của phần tử trong
pp Trang
which it is used, unless it is overridden with another instance mà nó được sử dụng, trừ khi nó
bị ghi đè với trường hợp khác
of xml:lang . của xml: lang.
Ver. Ver. 1.0 1.0
Page 4 Trang 4
Validating an XML Document Chứng thực một tài liệu XML
Validating an XML Document Chứng thực một tài liệu XML
A valid XML document respects the syntax rules and also Một tài liệu XML hợp lệ tôn trọng
các quy tắc cú pháp và cũng có
conforms to a structure as described in the schema. phù hợp với một cấu trúc như được mô tả
trong lược đồ.
Parsers are used to validate the structure of an XML Phân tích cú pháp được sử dụng để xác
nhận cấu trúc của một XML
Parsers are of two types: Phân tích cú pháp có hai loại:
Non-Validating Parsers: It builds a tree structure from tags used in Non-Validating parser: Nó
xây dựng một cấu trúc cây từ các thẻ được sử dụng trong
an XML document and returns an error only when there is a một tài liệu XML và trả về một
lỗi chỉ khi có một
problem with the syntax vấn đề với cú pháp
problem with the syntax. vấn đề với cú pháp.
Validating Parsers: It builds a tree, and compares the structure of Validating parser: Nó xây
dựng một cây, và so sánh cấu trúc của
an XML document with the structure specified in the associated một tài liệu XML với cấu
trúc quy định tại các liên kết
XML schema. Lược đồ XML.
Ver. Ver. 1.0 1.0
Page 5 Trang 5
Target Namespace Mục tiêu Không gian tên
Target Namespace Mục tiêu Không gian tên
Is a name space created by using the elements and Là một không gian tên được tạo ra bằng
cách sử dụng các yếu tố và
attributes defined in http://www.w3.org/2001/XMLSchema thuộc tính được định nghĩa trong
http://www.w3.org/2001/XMLSchema
namespace. không gian tên.
Defines new elements and attributes. Định nghĩa mới các phần tử và thuộc tính.
Are declared by using the targetNamespace attribute of Được khai báo bằng cách sử
dụng các thuộc tính của targetNamespace
the schema element. các yếu tố lược đồ.
The following code snippet depicts the usage of Các đoạn mã sau đây mô tả việc sử dụng
gg
pp Trang
pp
gg
targetNamespace attribute: targetNamespace thuộc tính:
<schema xmlns=”http://www.w3.org/2001/XMLSchema” <Lược đồ xmlns =
"http://www.w3.org/2001/XMLSchema"
targetNamespace=www.ecomatcybershoppe.com/ targetNamespace =
www.ecomatcybershoppe.com/
purchase> mua>
Ver. Ver. 1.0 1.0
Page 6 Trang 6
Use UCC camel case for naming XML elements. Sử dụng lạc đà UCC trường hợp để đặt tên
các phần tử XML. The UCC Các UCC
camel case uses a small letter for the initial character of the lạc đà trường hợp sử dụng một lá
thư nhỏ cho các ký tự ban đầu của
XML element name and capitalizes the first character of Phần tử XML tên và tận dụng các ký
tự đầu tiên của
every subsequent word. mỗi từ tiếp theo. UCC camel case does not use UCC lạc đà trường
hợp không sử dụng
hh hh
bt bt
diff khác
tt
di th di thứ
ff
spaces or hyphens between different words in the name of không gian hoặc các dấu gạch nối
giữa các từ khác nhau trong tên của
an XML element. một phần tử XML. An example is xmlTutorialBook. Một ví dụ là
xmlTutorialBook. You can Bạn có thể
use UCC camel case in XML elements to ensure that the UCC trường hợp sử dụng lạc đà
trong các phần tử XML để đảm bảo rằng
names adhere to XML standards and are more readable tên tuân thủ tiêu chuẩn XML và dễ
đọc hơn
names adhere to XML standards and are more readable. tên tuân thủ tiêu chuẩn XML và dễ
đọc hơn.
Do not use XML namespaces in XML extensions, such as Không sử dụng các không gian tên
XML trong phần mở rộng XML, chẳng hạn như
M thML M thML
d V i ML Thi ib d V i ML Thị IB
hf hf
il f e il
MathML and VoiceML. MathML và VoiceML. This is because each family of Điều này là vì
mỗi gia đình
extensions should be distinguishable from XML core phần mở rộng cần được phân biệt với
XML lõi
components and other extensions. thành phần và phần mở rộng khác. This distinction ensures
Sự phân biệt này đảm bảo
that there is no naming conflict among various XML rằng không có xung đột giữa các tên
khác nhau XML
Ver. Ver. 1.0 1.0
that there is no naming conflict among various XML rằng không có xung đột giữa các tên
khác nhau XML
extensions. mở rộng.
Page 7 Trang 7
Always assign values to attributes. Luôn luôn gán giá trị cho các thuộc tính. Unlike HTML,
you Không giống như HTML, bạn
should not leave an attribute in XML without a value nên không để lại một thuộc tính trong
XML mà không có giá trị
assigned to it. được giao. Leaving an attribute without assigning a value Để lại một thuộc tính
mà không cần gán một giá trị
to it violates the rules of XML. để nó vi phạm các quy tắc của XML.
Avoid converting local type attributes to global type Tránh chuyển đổi loại hình địa phương
thuộc tính để loại toàn cầu
attributes unless it is imperative. thuộc tính, trừ khi nó là bắt buộc. This is because local type
Điều này là do địa phương loại
attributes impart a better abstraction to your design. truyền đạt một thuộc tính trừu tượng tốt
hơn để thiết kế của bạn.
However, you need to globalize the data type attributes that Tuy nhiên, bạn cần phải toàn cầu
hoá các thuộc tính kiểu dữ liệu
are needed by multiple elements. là cần thiết bởi nhiều yếu tố. In addition, you need to Ngoài
ra, bạn cần
lb li t lb li t
tt ib t th tt tt IB t th tt
bb
tt
tt ib tf tt IB tf
globalize type attributes that act as base type attributes for toàn cầu hoá các thuộc tính kiểu
đó hoạt động như kiểu cơ sở thuộc tính
other derived type attributes. khác có nguồn gốc loại thuộc tính.
Ver. Ver. 1.0 1.0
Page 8 Trang 8
Who invented XML? Ai phát minh ra XML?
The XML development effort started in 1996 led by Jon Bosak Các nỗ lực phát triển XML
bắt đầu vào năm 1996 dẫn đầu bởi Jon Bosak
of Sun Microsystems. của Microsystems CN Bosak organized a diverse group of Bosak tổ
chức một nhóm đa dạng của
markup language experts, from industry to academia, to ngôn ngữ đánh dấu các chuyên gia,
từ các ngành công nghiệp cho các học viện, để
develop a language that could be used to meet the challenges phát triển một ngôn ngữ mà có
thể được sử dụng để đáp ứng những thách thức
develop a language that could be used to meet the challenges phát triển một ngôn ngữ mà có
thể được sử dụng để đáp ứng những thách thức
of large-scale electronic publishing. xuất bản điện tử có quy mô lớn. In February 1998, XML
1.0 Trong tháng hai năm 1998, XML 1.0
specification became a recommendation by W3C. đặc điểm kỹ thuật đã trở thành một khuyến
cáo của W3C. Today, the Ngày nay,
XML Core Working Group at W3C is responsible for XML Core Nhóm làm việc tại W3C có
trách nhiệm
gg
pp
pp
developing and maintaining specifications for XML. phát triển và duy trì kỹ thuật cho XML.
Will XML replace HTML? XML sẽ thay thế HTML?
pp
XML is not designed to replace HTML. XML không được thiết kế để thay thế cho HTML.
While the purpose of Trong khi mục đích của
HTML is to present data, XML is designed to store data. HTML là trình bày dữ liệu, XML
được thiết kế để lưu trữ dữ liệu.
Ver. Ver. 1.0 1.0
Page 9 Trang 9
What are the applications for which XML can be used? sử dụng có gì là những ứng dụng mà
XML có thể?
XML is set to play an important role as a data interchange XML được thiết lập để đóng một
vai trò quan trọng như là một trao đổi dữ liệu
format in electronic business applications such as e-commerce định dạng trong các ứng dụng
kinh doanh điện tử như thương mại điện tử
and also in application integration. và cũng trong ứng dụng tích hợp. Another use of XML is
for Một sử dụng của XML là
managing structured data including information from quản lý dữ liệu có cấu trúc bao gồm
thông tin từ
managing structured data, including information from quản lý dữ liệu có cấu trúc, bao gồm
thông tin từ
databases. cơ sở dữ liệu. On the client side, XML can be used to create Về phía khách hàng,
XML có thể được sử dụng để tạo
customized views to display data. sổ tùy chỉnh để hiển thị dữ liệu.
Which browser can be used to view an XML document? Những trình duyệt có thể được sử
dụng để xem một tài liệu XML?
Any browser that supports XML can be used to view an XML Bất kỳ trình duyệt hỗ trợ XML
có thể được sử dụng để xem một XML
document Some examples of browsers that support XML are Tài liệu Một số ví dụ của các
trình duyệt có hỗ trợ XML
document. tài liệu. Some examples of browsers that support XML are Một số ví dụ của các
trình duyệt có hỗ trợ XML
Microsoft Internet Explorer 5.0, Netscape 6, Opera 7, and Microsoft Internet Explorer 5.0,
Netscape 6, Opera 7, và
Mozilla Firfox 1.0.2. Mozilla Firfox 1.0.2. Higher versions of the browsers Cao hơn các
phiên bản của trình duyệt
mentioned here can also be used to view an XML document. đề cập ở đây cũng có thể được
sử dụng để xem một tài liệu XML.
Ver. Ver. 1.0 1.0
Page 10 Trang 10
Why is XML called a case-sensitive language? Tại sao XML là một ngôn ngữ trường hợp
nhạy cảm?
XML is called a case-sensitive language because of the XML được gọi là một ngôn ngữ
trường hợp nhạy cảm vì
following reasons: lý do sau đây:
Element names in XML are case sensitive. Phần tử XML có tên trong trường hợp nhạy cảm.
For example, the Ví dụ,
element <I phần tử <tôi
> is different from the element <i > Là khác nhau từ các phần tử <i
>>
element, <Image> is different from the element, <image> . yếu tố, <image> là khác nhau
từ các phần tử, <image>.
Therefore, if the opening tag of an element is written as <Image> Do đó, nếu các tag mở của
một phần tử được viết như <image>
and the closing tag is written as </image> , an error will be và các thẻ đóng được viết là </
image>, một lỗi sẽ được
thrown. ném.
Attribute names in XML are also case sensitive. Tên thuộc tính trong XML cũng được trường
hợp nhạy cảm. For example, Ví dụ,
<Image Width=“20in” Width=”10in”> will result in an <Image Width="20in"
Width="10in"> sẽ gây ra một
error, while <Image Width=”20in” width=“10in”> will not. lỗi, trong khi <Image
Width="20in" width="10in"> sẽ không.
This is because, in the first example, the two attributes are exactly Điều này là bởi vì, trong ví
dụ đầu tiên, hai thuộc tính được chính xác
the same and will be considered as duplicates. như nhau và sẽ được coi là bản sao. In the
second Trong lần thứ hai
example, although the names of the attributes are the same, their Ví dụ, mặc dù tên của các
thuộc tính giống nhau, họ
capitalization is different. vốn là khác nhau. Therefore, they will be considered as two Vì vậy,
họ sẽ được xem xét như là hai
different attributes. các thuộc tính khác nhau.
Ver. Ver. 1.0 1.0
Page 11 Trang 11
Bob is the EDP head of an organization that manufactures Bob là người đứng đầu EDP của
một tổ chức sản xuất
and sells hardware parts. và bán các bộ phận phần cứng. The organization has presence in Tổ
chức này đã hiện diện tại
all the major cities of the United States. tất cả các thành phố lớn của Hoa Kỳ. At present, all
Hiện nay, tất cả
branch offices maintain their data locally. văn phòng chi nhánh duy trì dữ liệu của họ tại địa
phương. Bob wants to Bob muốn
t li th t li th
it nó
f th dti hi f thứ DTI hi
i ti i ti
DtDt
centralize the repository of the data in his organization. tập trung các kho lưu trữ của dữ liệu
trong tổ chức của ông. Data Dữ liệu
from all the branch offices needs to be collated and stored in từ tất cả các văn phòng chi
nhánh cần phải được đối chiếu và lưu trữ
a centralized location. một địa điểm trung tâm. Data pertaining to a branch should be Dữ liệu
liên quan đến chi nhánh phải được
available only to that branch office However the head office chỉ với văn phòng chi nhánh Tuy
nhiên, trụ sở chính
available only to that branch office. chỉ với văn phòng chi nhánh. However, the head office
Tuy nhiên, trụ sở chính
should be able to access all the data. sẽ có thể truy cập tất cả dữ liệu. In addition, Bob also
Ngoài ra, Bob cũng
wants that the sales personnel should be able to access muốn rằng các nhân viên bán hàng sẽ
có thể truy cập
sales data from mobile devices such as palmtops and bán hàng dữ liệu từ các thiết bị di động
như palmtops và
sales data from mobile devices, such as palmtops and bán hàng dữ liệu từ các thiết bị di động,
như palmtops và
mobile phones. điện thoại di động. This sales information should have a brief Thông tin này
có doanh số bán hàng cần phải có một tóm tắt
description of the product, the price, and the available Mô tả về sản phẩm, giá cả, và sẵn
inventory. hàng tồn kho.
Ver. Ver. 1.0 1.0
yy
Page 12 Trang 12
Using which of the following markup languages can Bob Sử dụng mà các ngôn ngữ đánh dấu
sau đây có thể Bob
achieve the preceding goals? đạt được các mục tiêu trên?
HTML HTML
XML XML
SGML SGML
VML VML
SGML SGML
Ver. Ver. 1.0 1.0
Page 13 Trang 13
Harry is creating an XML schema using XSD. Harry là tạo ra một lược đồ XML bằng cách
sử dụng XSD. He wants to Anh ta muốn
use a data type that can store integers in the range 1 to 100 sử dụng một kiểu dữ liệu có thể
lưu trữ các số nguyên trong khoảng 1-100
only. chỉ. Which of the following data types should Harry use to Mà các loại dữ liệu sau đây
Harry sẽ sử dụng để
accomplish this task? hoàn thành nhiệm vụ này?
Union Liên minh
List Danh sách
Ver. Ver. 1.0 1.0
Page 14 Trang 14
You have been assigned the task of developing an XML Bạn đã được giao nhiệm vụ phát
triển một XML
schema file for a new Web application in an organization. file lược đồ cho một ứng dụng web
mới trong một tổ chức.
The application aims to deliver financial news to its Ứng dụng này nhằm mục đích cung cấp
tin tức tài chính của mình
subscribers. thuê bao. Financial news comprises of the date, the Tin tài chính bao gồm ngày,
các
f th f ngày
i ti i ti
d th fi d thứ fi
ilif ilif
ti ti
name of the organization, and the financial information. Tên của tổ chức, và tài chính thông
tin.
What should you use to represent the financial news in the Những gì bạn nên sử dụng để đại
diện cho những tin tức tài chính trong
XML schema? Lược đồ XML?
CC
lt lt
ll
tt
Complex type element Loại phần tử phức tạp
Simple type element Đơn giản loại phần tử
Element Element
Att ib t Att IB t
Attribute Thuộc tính
Ver. Ver. 1.0 1.0
Page 15 Trang 15
Joe wants to define an attribute, discount, in an XML Joe muốn xác định một thuộc tính,
giảm giá, trong một XML
schema. lược đồ. The XML document may or may not specify a Các tài liệu XML có thể
hoặc không thể xác định một
value for this attribute. giá trị cho thuộc tính này. If the XML document does not Nếu các tài
liệu XML không
specify a value for the attribute, the value of the discount chỉ định một giá trị cho thuộc tính,
giá trị của chiết khấu
tt ib th ld btk tt IB ld btk th
10% Whi hf th f ll i 10% Whi hf thứ e sẽ i
attribute should be taken as 10%. thuộc tính cần được thực hiện là 10%. Which of the
following Điều nào sau đây
values of the use attribute should Joe specify for the giá trị của các thuộc tính sử dụng Joe
nên xác định cho
discount attribute? giảm giá thuộc tính?
ti ti
ll
optional tùy chọn
default mặc định
required yêu cầu
fi d fi d
fixed cố định
Ver. Ver. 1.0 1.0
default mặc định
Page 16 Trang 16
A user wants to declare a user-defined attribute, Người dùng muốn tuyên bố một định nghĩa
thuộc tính người dùng,
prodPrice , of the string type. prodPrice, của các loại dây. The value for the Giá trị cho
prodPrice attribute must be provided in the XML prodPrice thuộc tính phải được cung cấp
trong XML
document. tài liệu. Which of the following options correctly declares Nào trong các lựa chọn
sau tuyên bố một cách chính xác
th thứ
ii
tt ib t ? tt IB t?
the prodPrice attribute? thuộc tính prodPrice?
<xsd:attribute name="prodPrice" <Xsd: thuộc tính name = "prodPrice"
datatype="xsd:string" use="required“> datatype = "xsd: string" sử dụng = "yêu cầu">
< d tt ib t <D tt IB t
""
dP i " dP i "
type="xsd:string" use="required“> type = "xsd: string" sử dụng = "yêu cầu">
type="xsd:string" ref="required“> type = "xsd: string" ref = "yêu cầu">
type xsd:string ref required > kiểu xsd: string ref yêu cầu>
datatype="xsd:string" ref="required"> datatype = "xsd: string" ref = "yêu cầu">
Ver. Ver. 1.0 1.0
type="xsd:string" use="required"> type = "xsd: string" sử dụng = "yêu cầu">
IWCD_Session_17.pdf
Page 1 Trang 1
Reuse XML schema components Tái sử dụng lược đồ XML thành phần
Create groups of elements and attributes in an XML schema Tạo nhóm các phần tử và thuộc
tính trong một lược đồ XML
Ver. Ver. 1.0 1.0
Page 2 Trang 2
Reusing Components of a Schema Tái sử dụng các thành phần của một lược đồ
Schemas support a high degree of reusability among other Các lược đồ hỗ trợ ở mức cao có
thể dùng lại giữa các khác
Reusing Components of a Schema Tái sử dụng các thành phần của một lược đồ
schemas. các lược đồ.
Reusability among other schemas is achieved by using the Sử dụng lại giữa các lược đồ khác
được thực hiện bằng cách sử dụng
include or import elements. bao gồm các yếu tố nhập khẩu.
Ver. Ver. 1.0 1.0
Page 3 Trang 3
The include Element Bao gồm phần tử
The include element is used to include or refer to an Bao gồm yếu tố được sử dụng để bao
gồm hoặc đề cập đến một
The include Element Bao gồm phần tử
external schema that is located at a definite address. lược đồ bên ngoài mà nằm ở một địa chỉ
xác định.
The syntax for using the include element is: Cú pháp sử dụng bao gồm các yếu tố là:
Specifies the element ID. Chỉ định ID phần tử.
<include id ="ID" <Bao gồm id = "ID"
The include element can have multiple occurrences in an Bao gồm yếu tố có thể đã xuất
hiện nhiều trong một
Specifies the physical location of Chỉ định vị trí địa lý của
the schema file. file lược đồ.
schemaLocation ="filename schemaLocation = "filename
"/> "/>
The include element can have multiple occurrences in an Bao gồm yếu tố có thể đã xuất
hiện nhiều trong một
XSD document. XSD tài liệu.
The schema element is the parent element of the include Các yếu tố lược đồ là yếu tố phụ
huynh của bao gồm
The restriction on the usage of this element is that the Các hạn chế về việc sử dụng của
nguyên tố này là
containing and contained schema files must belong to the và có chứa các file lược đồ phải
thuộc
same target namespace cùng một mục tiêu không gian tên
Ver. Ver. 1.0 1.0
same target namespace. cùng một mục tiêu không gian tên.
Page 4 Trang 4
The import Element Việc nhập khẩu Element
The import element performs the same function as the Các phần tử nhập khẩu thực hiện
chức năng tương tự như
The import Element Việc nhập khẩu Element
include element. bao gồm các yếu tố.
The import element access components from multiple Các phần tử nhập khẩu truy cập
các thành phần từ nhiều
schemas that may belong to different target namespaces. các lược đồ có thể thuộc về không
gian tên mục tiêu khác nhau.
The syntax for using the import element is: Cú pháp sử dụng các yếu tố nhập khẩu là:
<import id ="ID" <Nhập id = "ID"
namespace ="namespace" namespace = "tên miền không gian"
Specifies the unique element ID. Chỉ định ID phần tử duy nhất.
Specifies a namespace URI to which the Chỉ định một URI không gian tên mà
pp
pp
schemaLocation ="filena schemaLocation = "filena
me"/> tôi "/>
imported schema belongs. lược đồ nhập khẩu thuộc.
Is identical to the value used by the Trùng với giá trị được sử dụng bởi
include element. bao gồm các yếu tố.
Ver. Ver. 1.0 1.0
Page 5 Trang 5
Demo: Reusing XML Schema Components Demo: Dùng lại thành phần XML Schema
Demo: Reusing XML Schema Components Demo: Dùng lại thành phần XML Schema
The various products at CyberShoppe are purchased from Các sản phẩm khác nhau tại
CyberShoppe được mua từ
their suppliers through their branch offices. các nhà cung cấp của họ thông qua các văn phòng
chi nhánh của họ. The purchase order Các đơn đặt hàng
details are sent to the head office to generate reports. chi tiết sẽ được gửi đến trụ sở chính để
tạo ra các báo cáo. To Để
ensure that the data can be accessed across all hardware and đảm bảo rằng các dữ liệu có thể
được truy cập qua tất cả phần cứng và
ensure that the data can be accessed across all hardware and đảm bảo rằng các dữ liệu có thể
được truy cập qua tất cả phần cứng và
software used at the head office, the branch offices send data phần mềm được sử dụng tại trụ
sở chính, các văn phòng chi nhánh gửi dữ liệu
in an XML format. trong một định dạng XML. On receiving this data, the head office needs
Khi nhận được dữ liệu này, trụ sở nhu cầu
to verify that all branches have specified the required để xác minh rằng tất cả các ngành có
quy định các yêu cầu
yy
pp
qq
information in a consistent format. thông tin trong một định dạng phù hợp.
The purchase order details sent by the branch offices include Việc mua các chi tiết để gửi qua
các văn phòng chi nhánh bao gồm
the product ID, order ID, date of the purchase order, name and ID sản phẩm, trình tự, ID,
ngày đặt hàng, tên, và
dd đ
f th f ngày
li li
tit ngựa con
dd
dd
di di
it nó
address of the supplier, quantity ordered, and price per unit. địa chỉ của nhà cung cấp, số
lượng đặt hàng, và giá mỗi đơn vị.
Ver. Ver. 1.0 1.0
Page 6 Trang 6
Demo: Reusing XML Schema Components (Contd.) Demo: Dùng lược đồ XML thành
phần (Contd.)
Problem Statement (Contd.): Vấn đề bản Tuyên Bố (Contd.):
Demo: Reusing XML Schema Components (Contd.) Demo: Dùng lược đồ XML thành
phần (Contd.)
The product ID and order ID are used in a number of Các sản phẩm ID và ID để được sử
dụng trong một số
documents. tài liệu. The product ID begins with P, followed by three Các sản phẩm ID bắt
đầu với P, tiếp theo ba
digits. chữ số. Similarly, the order ID begins with O, followed by three Tương tự, các ID để
bắt đầu với O, tiếp theo ba
digits These restrictions must be specified at a centralized chữ số Những hạn chế này phải
được quy định tại một trung
digits. chữ số. These restrictions must be specified at a centralized Những hạn chế này phải
được quy định tại một trung
location such that they can be applied across multiple vị trí như vậy mà họ có thể được áp
dụng trên nhiều
Ver. Ver. 1.0 1.0
Page 7 Trang 7
Creating Grouped Elements and Attributes Các yếu tố tạo theo nhóm và thuộc tính
An XML schema defines the following in an XML document: Một lược đồ XML định nghĩa
như sau trong một tài liệu XML:
Creating Grouped Elements and Attributes Các yếu tố tạo theo nhóm và thuộc tính
Child elements Yếu tố con
Order of the child elements Trình tự các phần tử con
Number of child elements Số lượng các phần tử con
State of the element, whether it is empty or includes text Nhà nước của phần tử, cho dù đó có
sản phẩm nào hoặc bao gồm các văn bản
py py
Data types for the elements and attributes Các kiểu dữ liệu cho các phần tử và thuộc tính
Default and fixed values for the elements and attributes Và các giá trị mặc định cố định cho
các phần tử và thuộc tính
Ver. Ver. 1.0 1.0
Page 8 Trang 8
Creating Grouped Elements and Attributes (Contd.) Tạo Nhóm các yếu tố và thuộc tính
(Contd.)
An XML schema combines related elements and attributes Một lược đồ XML kết hợp các
yếu tố liên quan và các thuộc tính
Creating Grouped Elements and Attributes (Contd.) Tạo Nhóm các yếu tố và thuộc tính
(Contd.)
into groups. thành các nhóm.
Creating grouped elements and attributes facilitates the Tạo ra yếu tố được nhóm và các
thuộc tính tạo điều kiện
Create a reusable group of elements and attributes. Tạo một nhóm sử dụng lại các phần tử và
các thuộc tính.
Select a single element from a group. Chọn một yếu tố duy nhất từ một nhóm.
Specify the sequence of elements. Xác định trình tự của các nguyên tố.
XSD provides the following elements to group user-defined XSD cung cấp các yếu tố sau
đây cho nhóm người dùng định nghĩa
elements and attributes: các yếu tố và các thuộc tính:
sequence trình tự
group nhóm
choice sự lựa chọn
all tất cả
Ver. Ver. 1.0 1.0
attributeGroup attributeGroup
Page 9 Trang 9
The sequence Element Trình tự tử
The sequence element ensures that the elements declared Các yếu tố tự đảm bảo rằng các
yếu tố kê khai
i hi h i hi h
ii
dli DLI
f hi l e hi l
The sequence Element Trình tự tử
within the opening and closing tags of this element appear trong thẻ mở và đóng của nguyên
tố này xuất hiện
in a specific order. theo một thứ tự cụ thể. The following code snippet shows the Các đoạn
mã sau đây cho thấy
usage of the sequence element: sử dụng các yếu tố tự:
<xsd:sequence> <xsd:sequence>
<xsd:element name="FIRSTNAME" <Xsd: yếu tố name = "FIRSTNAME"
type="xsd:string"/> type = "xsd: string" />
<xsd:element name="LASTNAME" <Xsd: yếu tố name = "LastName"
<xsd:element name="DESIG" <Xsd: yếu tố name = "desig"
<xsd:element name="DEPARTMENT" <Xsd: yếu tố name = "cục"
<xsd:element name= DEPARTMENT <Xsd: phần tên = cục
</xsd:sequence> </ Xsd: trình tự>
Ver. Ver. 1.0 1.0
Page 10 Trang 10
The group Element Các nhóm phần tử
A set of elements can be grouped together by a common Một tập hợp các yếu tố có thể được
nhóm lại với nhau bởi một phổ biến
The group Element Các nhóm phần tử
name in an XML schema, and incorporated into a complex tên trong một lược đồ XML, và
kết hợp thành một phức tạp
data type. kiểu dữ liệu.
The syntax for declaring a group element is: Cú pháp khai báo một phần tử của nhóm là:
<group <Nhóm
maxOccurs ="nonNegativeInteg maxOccurs = "nonNegativeInteg
er | unbounded“ er | không bị chặn "
minOccurs ="nonNegativeInteg minOccurs = "nonNegativeInteg
Specifies the maximum number Chỉ định số lượng tối đa
of times a group can occur in lần một nhóm có thể xảy ra trong
the XML document. các tài liệu XML.
minOccurs = nonNegativeInteg minOccurs = nonNegativeInteg
er" name ="NCName" er "name =" NCName "
ref ="QName"> </group> ref = "QName"> </ nhóm>
Specifies the minimum number Chỉ định số lượng tối thiểu
of times a group can occur in lần một nhóm có thể xảy ra trong
the XML document. các tài liệu XML.
Assigns a name for the group Gán tên cho nhóm
Refers to a group in a complex Đề cập đến một nhóm trong một phức tạp
type element loại phần tử
Ver. Ver. 1.0 1.0
Page 11 Trang 11
The choice Element Việc lựa chọn phần tử
In XSD, a single option can be selected from multiple Trong XSD, một lựa chọn duy nhất có
thể được chọn từ nhiều
The choice Element Việc lựa chọn phần tử
options using the choice element. lựa chọn sử dụng các yếu tố lựa chọn.
The choice element allows only one of the elements Các phần tử chỉ cho phép lựa chọn
một trong những yếu tố
contained in the group to be present within the parent có trong nhóm có mặt trong phụ huynh
The syntax for declaring a choice element is: Cú pháp khai báo một phần tử lựa chọn là:
<choice id="ID" <Lựa chọn id = "ID"
maxOccurs="nonNegativeInteger|unbounded" maxOccurs = "nonNegativeInteger | không bị
chặn"
minOccurs="nonNegativeInteger"> minOccurs = "nonNegativeInteger">
</choice> </ Lựa chọn>
Ver. Ver. 1.0 1.0
Page 12 Trang 12
The all Element Các phần tử chủ
The all element uses the child elements in any order. Các phần tử chủ sử dụng các yếu tố
con để bất kỳ.
The all Element Các phần tử chủ
The syntax for using the all element is: Cú pháp để sử dụng tất cả các phần tử là:
<all maxOccurs="positiveInteger" minOccurs="0|1"> <all maxOccurs="positiveInteger"
minOccurs="0|1">
</all> </ Tất cả>
Ver. Ver. 1.0 1.0
Page 13 Trang 13
The attributeGroup Element Các attributeGroup Element
The attributeGroup element enables grouping of Các phần tử attributeGroup cho
phép nhóm các
The attributeGroup Element Các attributeGroup Element
attributes that can be reused with different elements. thuộc tính có thể được tái sử dụng với
các yếu tố khác nhau.
The syntax for declaring attributeGroup element is: Cú pháp khai báo phần tử
attributeGroup là:
<attributeGroup> <attributeGroup>
pp
attribute1 attribute1
attribute2 attribute2
::
</attributeGroup> </ AttributeGroup>
Ver. Ver. 1.0 1.0
Page 14 Trang 14
Demo: Grouping Elements and Attributes in an XML Schema Demo: Phân nhóm các
phần tử và thuộc tính trong một lược đồ XML
Demo: Grouping Elements and Attributes in an XML Schema Demo: Phân nhóm các
phần tử và thuộc tính trong một lược đồ XML
The customer details of CyberShoppe need to be stored in a Các chi tiết khách hàng của
CyberShoppe cần phải được lưu trữ trong một
central repository. trung tâm kho. To enable this, the computerized data needs Để kích hoạt
tính năng này, các dữ liệu trên máy vi tính nhu cầu
to be collated from the branch offices and maintained at a được đối chiếu với các văn phòng
chi nhánh và duy trì ở
central location This data has to be made available to various vị trí trung tâm dữ liệu này đã
được tạo sẵn cho nhiều
central location. vị trí trung tâm. This data has to be made available to various dữ liệu này đã
được tạo sẵn cho nhiều
sections, such as the Accounts and the Sales sections of phần, chẳng hạn như các tài khoản và
bộ phận bán hàng của
various branches, irrespective of the hardware and software ngành khác nhau, không phân
biệt của phần cứng và phần mềm
platforms used. các nền tảng sử dụng. After collating the customer data, the head Sau khi đối
chiếu các dữ liệu khách hàng, người đứng đầu
pp
gg
office needs to verify that the complete information has been văn phòng cần phải xác minh
rằng các thông tin đầy đủ đã được
made available and is stored in a consistent format. đã có sẵn và được lưu trữ trong một định
dạng phù hợp.
Customer data includes the customer ID, first name, last name, Dữ liệu khách hàng bao gồm
các ID khách hàng, tên đầu tiên, cuối cùng tên,
dd
ttif ttif
ti ti
hh
th thứ
dd đ
dh dh
and contact information, such as the address and phone và liên hệ thông tin như địa chỉ và
điện thoại
number. số. A customer may provide residential or official contact Một khách hàng có thể
cung cấp hoặc liên hệ với dân cư chính thức
information. thông tin.
Ver. Ver. 1.0 1.0
Page 15 Trang 15
Which element enables the incorporation of data into a Những yếu tố cho phép thành lập
công ty dữ liệu vào một
complex data type? kiểu dữ liệu phức tạp?
a. sequence a. chuỗi
b. group b. nhóm
c. all c. tất cả
d. attributeGroup d. attributeGroup
b. group b. nhóm
Ver. Ver. 1.0 1.0
Page 16 Trang 16
Consider the following statements: Xem xét các báo cáo sau đây:
Statement A: You can group a set of elements by a common Tuyên bố A: Bạn có thể nhóm
một tập hợp các yếu tố của một phổ biến
name and incorporate it into a complex data type by using Tên và kết hợp nó vào một loại dữ
liệu phức tạp bằng cách sử dụng
the group element. các phần tử của nhóm.
Statement B: You can reuse a group of elements declared Báo cáo B: Bạn có thể tái sử dụng
một nhóm các yếu tố kê khai
earlier by using the ref attribute of the group element. trước đó bằng cách sử dụng các thuộc
tính ref của nguyên tố nhóm.
Ver. Ver. 1.0 1.0
Page 17 Trang 17
Which of the following is correct about the preceding Điều nào sau đây là đúng về trước
statements? báo cáo?
a. a. Statement A is True, and Statement B is False. Tuyên bố là thật, và bản Tuyên Bố B là
sai.
b. b. Statement A is False, and Statement B is True. Báo cáo là sai, và bản Tuyên Bố B là
True.
c. c. Both, Statement A and Statement B, are True. Cả hai bản Tuyên Bố, A và báo cáo B, là
True.
d. d. Both, Statement A and Statement B, are False. Cả hai bản Tuyên Bố, A và báo cáo B, là
sai.
True.
Ver. Ver. 1.0 1.0
Page 18 Trang 18
Statement A: The xsd:choice element allows only one of Tuyên bố A: Các xsd: phần tử
chỉ cho phép lựa chọn một trong
the elements contained in the group to be present within the các yếu tố có trong nhóm có mặt
trong
parent element. yếu tố phụ huynh.
Statement B: You can set the value of the maxOccurs Báo cáo B: Bạn có thể thiết lập giá trị
của maxOccurs
attribute of the xsd:choice element to specify the thuộc tính của xsd: yếu tố lựa chọn
để xác định
maximum number of times the group can occur within the tối đa số lần các nhóm có thể xảy
ra trong
parent element. yếu tố phụ huynh.
Ver. Ver. 1.0 1.0
Page 19 Trang 19
sai.
True.
True.
sai.
True.
Ver. Ver. 1.0 1.0
Page 20 Trang 20
You want to create an attribute named baseprice with a Bạn muốn tạo ra một thuộc tính
baseprice đặt tên với một
default value of 200, for the product element. giá trị mặc định là 200, cho các phần tử sản
phẩm. The attribute Các thuộc tính
should accept integer values. nên chấp nhận giá trị nguyên. Which of the following Điều nào
sau đây
statements will you use to declare the attribute? báo cáo bạn sẽ sử dụng để khai báo các thuộc
tính?
a. <xsd:attribute name=“baseprice” default= 200 a. <xsd: thuộc
tính name = "baseprice" mặc định = 200
type=“xsd:integer”> type = "xsd: số nguyên">
b. <xsd:attribute name=“baseprice”; b. xsd <: tên thuộc tính =
"baseprice";
type=“xsd:integer”; use=“default” value=“200”> type = "xsd: số nguyên"; sử dụng = "mặc
định" giá trị = "200">
type= xsd:integer ; use= default value= 200 > type = xsd: số nguyên, sử dụng = giá trị mặc
định = 200>
c. <xsd:attribute name=“baseprice” default= “200” c. <xsd: thuộc
tính name = "baseprice" default = "200"
type=“xsd:integer”> type = "xsd: số nguyên">
d <xsd:attribute element= “product” name= d <xsd: thuộc tính
nguyên tố = "sản phẩm" name =
d. <xsd:attribute element d. <xsd: thuộc tính nguyên tố
product name tên sản phẩm
“baseprice” default=“200” type= “xsd:integer”> "Baseprice" default = "200" type = "xsd: số
nguyên">
Ver. Ver. 1.0 1.0
c. <xsd:attribute name=”baseprice” default=”200” c. <xsd: thuộc
tính name = "baseprice" default = "200"
type=”xsd:integer”> type = "xsd: số nguyên">
Page 21 Trang 21
Which of the following statements is true about global Mệnh đề nào sau đây là đúng sự thật
về toàn cầu
attributes? thuộc tính?
a. a. Global attributes are declared within the content model of an thuộc tính toàn cầu được
khai báo trong mô hình nội dung của một
b. b. While declaring a global attribute, you must specify whether Trong khi khai báo một
thuộc tính toàn cầu, bạn phải xác định xem
the attribute is optional or mandatory by using the use thuộc tính sẽ là tùy chọn hay bắt buộc
bằng cách sử dụng việc sử dụng
c The xsd:complexType element is the parent element for c Các xsd: yếu tố
complexType là yếu tố phụ huynh cho
c. c. The xsd:complexType element is the parent element for Các xsd: yếu tố
complexType là yếu tố phụ huynh cho
global attributes. thuộc tính toàn cầu.
d. d. After declaring a global attribute, you can reuse it anywhere Sau khi khai báo một thuộc
tính toàn cầu, bạn có thể tái sử dụng nó ở bất cứ đâu
within the schema. trong lược đồ.
d. d. After declaring a global attribute, you can reuse it anywhere Sau khi khai báo một thuộc
tính toàn cầu, bạn có thể tái sử dụng nó ở bất cứ đâu
within the schema trong lược đồ
Ver. Ver. 1.0 1.0
within the schema. trong lược đồ.
Page 22 Trang 22
Summary Tóm tắt
Summary Tóm tắt
You can refer to one schema from another by using the Bạn có thể tham khảo một lược đồ từ
khác bằng cách sử dụng
include or import elements. bao gồm các yếu tố nhập khẩu.
The include element is used to refer to a schema in which bao gồm các yếu tố này
được dùng để chỉ một lược đồ trong đó
the target namespace is the same as that of the containing không gian tên mục tiêu là như
nhau như là của chứa
schema document. Tài liệu lược đồ.
The import element is used to refer to a schema in which the Các phần tử nhập khẩu
được sử dụng để chỉ một lược đồ trong đó
target namespace is different from that of the containing mục tiêu là tên miền không gian
khác với có chứa
target namespace is different from that of the containing mục tiêu là tên miền không gian
khác với có chứa
You can group elements and attributes using the following Bạn có thể nhóm các phần tử và
các thuộc tính bằng cách sử dụng sau đây
elements: các yếu tố:
sequence : Allows you to create a group of elements and specify trình tự: Cho phép bạn tạo ra
một nhóm các phần tử và chỉ định
that all the elements within the group should appear in the same rằng tất cả các yếu tố trong
nhóm sẽ xuất hiện trong cùng một
sequence in which they are declared. trình tự mà chúng được khai báo.
Ver. Ver. 1.0 1.0
Page 23 Trang 23
group : Allows you to group a set of elements and use a common nhóm: Cho phép bạn nhóm
một tập hợp các yếu tố và sử dụng chung
tt
ft th ft thứ
ll
t Thi Thi t
bi bi
td td
name to refer to these elements. Tên để chỉ các yếu tố này. This group can be incorporated
Nhóm này có thể được kết hợp
into a complex data type. thành một kiểu dữ liệu phức tạp.
choice : Allows you to specify that only one of the specified set of sự lựa chọn: Cho phép bạn
xác định rằng chỉ có một trong những bộ quy định của
elements can be used at a time. các yếu tố có thể được sử dụng tại một thời điểm.
all : Allows you to create a group of elements that can be used in tất cả: Cho phép bạn tạo
một nhóm các phần tử có thể được sử dụng trong
any sequence within the parent element. bất kỳ thứ tự trong phần tử mẹ.
attributeGroup : Allows you to create a group of attributes that attributeGroup: Cho phép bạn
tạo ra một nhóm các thuộc tính
can be reused in different elements có thể được tái sử dụng trong các yếu tố khác nhau
can be reused in different elements. có thể được tái sử dụng trong các yếu tố khác nhau.
Ver. Ver. 1.0 1.0

IWCD_Session_18.pdf
Page 1 Trang 1
Transform an XML document through a Cascading Style Sheet Chuyển đổi một tài liệu XML
thông qua một Cascading Style Sheet
Transform an XML document through Extensible Style Sheet Chuyển đổi một tài liệu XML
thông qua mở rộng Style Sheet
Language Ngôn ngữ
Ver. Ver. 1.0 1.0
Page 2 Trang 2
Introducing Cascading Style Sheet Giới thiệu Cascading Style Sheet
A CSS is a text file containing one or more rules or Một CSS là một tập tin văn bản có chứa
một hay nhiều quy tắc hay
Introducing Cascading Style Sheet Giới thiệu Cascading Style Sheet
definitions for the style characteristics of a particular định nghĩa cho các đặc điểm phong
cách của một cụ thể
It controls how tags are formatted in XML and HTML Nó kiểm soát cách các thẻ được định
dạng trong XML và HTML
The CSS file can be included in XML documents with the Các file CSS có thể được bao gồm
trong các tài liệu XML với
same data structure. cùng một cấu trúc dữ liệu.
Ver. Ver. 1.0 1.0
Page 3 Trang 3
Creating CSS Tạo CSS
The syntax for coding a CSS is: Các cú pháp cho mã hóa một CSS là:
Creating CSS Tạo CSS
ll
tt
specifies the quy định cụ thể
elementname { elementname {
property1: value; property1: giá trị;
property2: value; property2: giá trị;
elementname specifies the elementname xác định
name of the element. Tên của nguyên tố này.
}}
Ver. Ver. 1.0 1.0
Page 4 Trang 4
Creating CSS (Contd.) Tạo CSS (Contd.)
t 1 and t 1 và
t2t2
property1 : value; property1: giá trị;
property2 : value; property2: giá trị;
property1 and property2 property1 và property2
specify the property names, ghi rõ tên tài sản,
such as font-family, font-size, như gia đình-font, cỡ font-,
and color và màu sắc
}}
Ver. Ver. 1.0 1.0
Page 5 Trang 5
ll
specifies the property xác định tài sản
property1: value ; property1: giá trị;
property2: value ; property2: giá trị;
value specifies the property xác định giá trị tài sản
values for a property name. giá trị cho một tên sở hữu.
}}
FF
lt di l Nó di l
th fil titl i titl i th fil
dd
For example, to display the film title in red, you can Ví dụ, để hiển thị tiêu đề phim trong
màu đỏ, bạn có thể
type the following code in a CSS file: gõ đoạn mã sau vào một file CSS:
FILM {COLOR: RED} PHIM {COLOR: RED}
Ver. Ver. 1.0 1.0
Page 6 Trang 6
Applying CSS Áp dụng CSS
A CSS can be applied to an XML Một CSS có thể được áp dụng cho một XML
Applying CSS Áp dụng CSS
document using the following tài liệu sử dụng sau đây
syntax: cú pháp:
<? xml:stylesheet <? Xml kiểu
Instructs the browser that the Chỉ thị các trình duyệt mà
XML document uses a Sử dụng một tài liệu XML
stylesheet stylesheet
type="text/css" href="path- type = "text / css" href = "đường dẫn
name"?> Tên "?>
stylesheet. stylesheet.
Ver. Ver. 1.0 1.0
Page 7 Trang 7
Applying CSS (Contd.) Áp dụng CSS (Contd.)
syntax: cú pháp:
<?xml:stylesheet <? Xml kiểu
Specifies the type of Chỉ định kiểu của
formatting that is being used. định dạng đang được sử dụng.
type ="text/css" href="path- type = "text / css" href = "đường dẫn
name"?> Tên "?>
Ver. Ver. 1.0 1.0
Page 8 Trang 8
syntax: cú pháp:
<?xml:stylesheet <? Xml kiểu
Specifies the name of the Ghi rõ tên của
CSS file used to format the File CSS được sử dụng để định dạng
XML document Tài liệu XML
type="text/css" href ="path- type = "text / css" href = "đường dẫn
name"?> Tên "?>
XML document. Tài liệu XML.
Ver. Ver. 1.0 1.0
Page 9 Trang 9
Demo: Creating a CSS Demo: Tạo một CSS
Demo: Creating a CSS Demo: Tạo một CSS
Jim, the XML developer at CyberShoppe, has been asked to Jim, các nhà phát triển XML tại
CyberShoppe, đã được yêu cầu
display the product details for Cybershoppe in a browser in the hiển thị chi tiết sản phẩm cho
Cybershoppe trong trình duyệt của một trong
following format: theo định dạng sau:
Th Th
ii
it d nó d
i ti i ti
dd
tit ngựa con
hdf HDF
hh
The price per unit, description, and quantity on hand for each Giá cho mỗi đơn vị, mô tả, và
số lượng trên tay cho mỗi
product should be displayed in teal, with a font size of 10 pts. sản phẩm sẽ được hiển thị
trong teal, với kích thước phông chữ là 10 điểm.
The product name should be displayed in red, with a font size of Tên sản phẩm sẽ được hiển
thị bằng màu đỏ, với một kích thước font của
20 pts. 20 điểm. It should be displayed in bold. Nó sẽ được hiển thị bằng chữ đậm.
All details should be displayed in the Arial font. Mọi chi tiết sẽ được hiển thị trong font Arial.
Ver. Ver. 1.0 1.0
Page 10 Trang 10
Introducing XSL Giới thiệu XSL
CSS does not support the reorder, sort, and display of CSS không hỗ trợ sắp xếp lại, sắp xếp,
và hiển thị
Introducing XSL Giới thiệu XSL
elements based on a condition. các yếu tố dựa trên một điều kiện.
For such advanced formatting, XML supports Extensible Đối với các định dạng tiên tiến như
vậy, XML hỗ trợ mở rộng
Style Sheet Language (XSL). Style Sheet Language (XSL).
XSL has two parts: XSL có hai phần:
XSL Transformations (XSLT) XSL Transformations (XSLT)
XML Path (XPath) XML Path (XPath)
((
))
XSL: XSL:
Contains instructions on how an XML document should be Có hướng dẫn về cách một tài
liệu XML phải được
transformed into an HTML or an XHTML document. chuyển thành một tài liệu HTML hoặc
XHTML một.
Uses XPath expressions to extract specific data from an XML Sử dụng các biểu thức XPath
để trích xuất dữ liệu cụ thể từ một XML
The XSLT processor transforms the XML document into an Bộ vi xử lý XSLT chuyển các tài
liệu XML thành một
Ver. Ver. 1.0 1.0
pp
HTML or XHTML or into another XML document. HTML hoặc XHTML hoặc vào một tài
liệu XML.
Page 11 Trang 11
Analyzing the Working of the XSLT Processor Phân tích làm việc của bộ xử lý XSLT
The XSLT processor applies the transformation information Bộ vi xử lý XSLT áp dụng các
thông tin chuyển đổi
Analyzing the Working of the XSLT Processor Phân tích làm việc của bộ xử lý XSLT
to the source document and builds the result tree as shown với tài liệu nguồn và xây dựng các
cây kết quả như được hiển thị
in the following figure. trong hình sau.
MSXML Parser MSXML Parser
XSLT t XSLT t
SS
lh lh
XSLT tree XSLT cây
XSLT XSLT
processor xử lý
Result tree Kết quả cây
XSLT style sheet XSLT style sheet
processor xử lý
Source tree Nguồn cây
XML document Tài liệu XML
Ver. Ver. 1.0 1.0
Page 12 Trang 12
Formatting Data Using XSLT Định dạng dữ liệu Sử dụng XSLT
XSLT provides the following elements to select and format XSLT cung cấp các yếu tố sau
đây để lựa chọn và định dạng
Formatting Data Using XSLT Định dạng dữ liệu Sử dụng XSLT
data: dữ liệu:
value-of giá trị của
for-each cho-mỗi
sort sắp xếp
text văn bản
Ver. Ver. 1.0 1.0
Page 13 Trang 13
Formatting Data Using XSLT (Contd.) Định dạng dữ liệu Sử dụng XSLT (Contd.)
data: dữ liệu:
Instructs the browser that the document is a style Chỉ thị các trình duyệt tài liệu đó là một
phong cách
sheet file. Bảng tập tin.
Is the root element for all XSLT style sheets. Là yếu tố gốc cho tất cả các phong cách trang
XSLT.
for-each cho-mỗi
sort sắp xếp
text văn bản
Is written as: Được viết như sau:
<xsl:stylesheet <Xsl: stylesheet
xmlns:xsl= xmlns: xsl =
"http://www.w3.org/1999/XSL/Transform" "Http://www.w3.org/1999/XSL/Transform"
version="1.0"> version = "1.0">
Ver. Ver. 1.0 1.0
Page 14 Trang 14
data: dữ liệu:
Displays the value of the specified element or Hiển thị giá trị của các yếu tố quy định hoặc
for-each cho-mỗi
sort sắp xếp
text văn bản
Follows the syntax: Tuân theo cú pháp:
<xsl:value-of <Xsl: giá trị của
select="elementname/attributename"/> chọn = "elementname / attributename" />
Ver. Ver. 1.0 1.0
Page 15 Trang 15
data: dữ liệu:
for-each cho-mỗi
sort sắp xếp
text văn bản
Instructs the XSLT processor to process the Chỉ thị các bộ vi xử lý XSLT để xử lý
information for each instance of the specified pattern. thông tin cho mỗi cá thể của mẫu quy
định.
<xsl:for-each select="pattern"> <xsl:for-each select="pattern">
pp
[action to be performed] [Hành động được thực hiện]
</xsl:for-each> </ Xsl: cho-mỗi>
Ver. Ver. 1.0 1.0
Page 16 Trang 16
data: dữ liệu:
for-each cho-mỗi
sort sắp xếp
text văn bản
Sorts data based on the values assigned to elements and Phân loại dữ liệu dựa trên các giá trị
được gán cho các phần tử và
F ll F sẽ
hh
<xsl:sort select="expression" <Xsl: sắp xếp chọn = "biểu thức"
order="ascending | descending" Để = "tăng dần | giảm dần"
case-order="upper-first | lower-first“ trường hợp thứ tự = "phía trên đầu | đầu tiên dưới"
data-type="text | number | qname"/> dữ liệu-type = "text | số | QName" />
yp yp
||
|q|Q
Ver. Ver. 1.0 1.0
Page 17 Trang 17
data: dữ liệu:
for-each cho-mỗi
sort sắp xếp
text văn bản
Generates constant text in the output and displays Tạo ra văn bản không đổi trong kết xuất và
hiển thị
Generates constant text in the output and displays Tạo ra văn bản không đổi trong kết xuất và
hiển thị
labels. nhãn.
<xsl:text> Text to be displayed as <xsl:text> văn bản được hiển thị như
label </xsl:text> nhãn </ xsl: văn bản>
Ver. Ver. 1.0 1.0
Page 18 Trang 18
Formatting Data Using XSL Formatting Objects Sử dụng định dạng dữ liệu định dạng
các đối tượng XSL
XSL Formatting Objects (XSL-FO): XSL Formatting Objects (XSL-FO):
Formatting Data Using XSL Formatting Objects Sử dụng định dạng dữ liệu định dạng
các đối tượng XSL
Is an XML-based language that formats XML documents into Là một ngôn ngữ dựa trên
XML mà các định dạng tài liệu XML thành
pages, paragraphs, and lists. trang, đoạn văn, và danh sách.
Provides various objects and properties that define the Cung cấp các đối tượng khác nhau và
các thuộc tính xác định
formatting of XML objects. định dạng của đối tượng XML.
Provides a basic document structure that contains the Cung cấp một cấu trúc tài liệu cơ bản
có chứa
formatting objects and properties. định dạng đối tượng và tài sản.
Ver. Ver. 1.0 1.0
Page 19 Trang 19
Formatting Data Using XSL Formatting Objects (Contd.) Sử dụng định dạng dữ liệu
định dạng các đối tượng XSL (Contd.)
The following code snippet depicts the structure of an XML Các đoạn mã sau đây mô tả cấu
trúc của một XML
Is <?xml version="1.0" encoding="ISO-8859-1"?> Là <? Xml version = "1.0" encoding =
"ISO-8859-1?>
<fo:root <Cho: root
xmlns:fo="http://www.w3.org/1999/XSL/Format"> xmlns: cho =
http://www.w3.org/1999/XSL/Format ">"
<fo:layout-master-set> <fo:layout-master-set>
<fo:simple-page-master master-name="A4"> <fo:simple-page-master master-name="A4">
 <- Trang mẫu tại đây ->
</fo:simple-page-master> </ Cho: đơn giản-trang-master>
</fo:layout-master-set> </ Cho: bố trí tổng thể thiết lập>
<fo:page-sequence master-reference="A4"> <fo:page-sequence master-reference="A4">
 <- Trang nội dung tại đây ->
</fo:page-sequence> </ Cho: trang-chuỗi>
Ver. Ver. 1.0 1.0
</fo:root> </ Cho: root>
Page 20 Trang 20
The XSL-FO objects provides a logical layout to an XML Các đối tượng XSL-FO cung cấp
một cách bố trí hợp lý để một XML
The content of an XML document can be split into pages. Nội dung của một tài liệu XML có
thể được chia thành các trang.
These pages are divided into following four areas: Những trang này được chia thành bốn lĩnh
vực sau đây:
pg pg
gg
Regions : Are the topmost areas in the page. Khu vực: Có phải các khu vực trên cùng trong
trang.
Block areas : Are the block level elements. Block các khu vực: Có phải các yếu tố cấp khối.
Line areas : Contain the text within the block areas. Line lĩnh vực: phần văn bản trong phạm
vi khối.
Line areas : Contain the text within the block areas. Line lĩnh vực: phần văn bản trong phạm
vi khối.
Inline areas : Are part of line areas. Inline khu vực: Có phải một phần của khu vực đường.
Ver. Ver. 1.0 1.0
Page 21 Trang 21
The XSL-FO properties specifies the type of formatting that The-FO tính XSL xác định loại
định dạng mà
can be specified on the XSL-FO objects. có thể được xác định trên các đối tượng XSL-FO.
Consider the following code-snippet: Xem xét các đoạn mã sau đây:
< fo:simple-page-master master-name="right"> <Cho: đơn giản-trang-
master master-name = "right">
pp
pg pg
gg
<fo:region-body margin-left="5in" <Cho:-cơ thể khu vực margin-left =
"5in"
margin-right="2in" /> lề bên phải = "2in" />
</fo:simple-page-master> </ Cho: đơn giản-trang-master>
This element defines a template Nguyên tố này định nghĩa một mẫu
</fo:simple page master> </ Cho: đơn giản, trang chủ>
with the name right. với quyền tên.
This specifies that the left margin Điều này xác định rằng lề trái
of the template is set to 5 inches. các mẫu được thiết lập đến 5 inch.
This specifies that the right margin Điều này xác định rằng các lề phải
of the template is set to 2 inches. các mẫu được thiết lập là 2 inch.
Ver. Ver. 1.0 1.0
Page 22 Trang 22
Creating XSLT Template Rules Tạo mẫu quy XSLT
A template rule: Một nguyên tắc mẫu:
Creating XSLT Template Rules Tạo mẫu quy XSLT
Describes how an XML element and its contents are converted Mô tả cách một phần tử XML
và nội dung của nó được chuyển đổi
into a specific format for displaying in the browser. thành một định dạng cụ thể cho hiển thị
trong trình duyệt.
Consists of two parts: Bao gồm hai phần:
A pattern that identifies an XML element in an XML document. Một mô hình nhận dạng một
phần tử XML trong một tài liệu XML.
An action or processing code that details the transformation and Một hành động hoặc mã xử
lý những chi tiết sự chuyển đổi và
rendering of the resulting element. rendering của yếu tố kết quả.
XSLT uses two main elements for creating template rules: XSLT sử dụng hai yếu tố chính để
tạo ra các quy tắc mẫu:
template mẫu
apply-templates áp dụng các tiêu bản
Ver. Ver. 1.0 1.0
Page 23 Trang 23
Creating XSLT Template Rules (Contd.) Tạo mẫu quy XSLT (Contd.)
template mẫu
Defines a template for the desired Định nghĩa một khuôn mẫu cho các mong muốn
output. đầu ra.
ll
ll
h"h"
""
<xsl:template match="pattern"> <xsl:template match="pattern">
[action to be taken] [Hành động được thực hiện]
</xsl:template> </ Xsl: template>
Ver. Ver. 1.0 1.0
Page 24 Trang 24
template mẫu
Instructs the XSLT processor to find an Chỉ thị các bộ vi xử lý XSLT để tìm một
appropriate template and perform the specified mẫu thích hợp và thực hiện các quy định
tasks on selected elements. nhiệm vụ trên các phần tử được lựa chọn.
<xsl:apply-templates <Xsl: áp dụng tiêu bản
[select="pattern"]> [Lựa chọn = "mô hình"]>
Ver. Ver. 1.0 1.0
Page 25 Trang 25
Demo: Creating an XSLT Style Sheet to Format Data Demo: Tạo một bảng Style XSLT
để định dạng dữ liệu
Demo: Creating an XSLT Style Sheet to Format Data Demo: Tạo một bảng Style XSLT
để định dạng dữ liệu
CyberShoppe needs to display product details, such as CyberShoppe nhu cầu để hiển thị chi
tiết sản phẩm, chẳng hạn như
product ID, name, and price per unit. sản phẩm ID, tên, và giá mỗi đơn vị. The following
figure Hình dưới đây
depicts a sample output. mô tả một đầu ra mẫu.
The details about the products should be displayed in red. Các chi tiết về các sản phẩm sẽ
được hiển thị bằng màu đỏ.
Ver. Ver. 1.0 1.0
Page 26 Trang 26
The various departments of a university store data in Các phòng ban khác nhau của một
trường đại học trong lưu trữ dữ liệu
different formats. các định dạng khác nhau. The IT department of the university Các bộ phận
CNTT của trường đại học
decides to use XML as the data interchange format to quyết định sử dụng XML như là định
dạng trao đổi dữ liệu
transmit the data between the departments. truyền dữ liệu giữa các phòng ban. Which of the
Điều nào
f ll i e sẽ i
ld b th bt ld b th bt
ht ht
li h th tk li h th tk
following would be the best approach to accomplish the task sau đây sẽ là cách tiếp cận tốt
nhất để hoàn thành nhiệm vụ
using XML? sử dụng XML?
a. a. Devise a common information model and enforce its use by all Đưa ra một mô hình phổ
biến thông tin và thực thi sử dụng bởi tất cả các
the departments that need to exchange data các bộ phận cần phải trao đổi dữ liệu
the departments that need to exchange data. các bộ phận cần phải trao đổi dữ liệu.
b. b. Implement a conversion application that can handle the data Thực hiện một ứng dụng
chuyển đổi có thể xử lý dữ liệu
received from other departments. nhận được từ các phòng ban khác.
Ver. Ver. 1.0 1.0
Page 27 Trang 27
c. c. Use an XSLT style sheet to convert the incoming or outgoing Sử dụng một bảng mẫu
XSLT để chuyển đổi đến hoặc đi
XML document into the format used within the departments. XML tài liệu vào các định dạng
được sử dụng trong các phòng ban.
d. d. Modify the XML schema to use the same content model in all Sửa đổi lược đồ XML để
sử dụng mô hình cùng một nội dung trong tất cả các
departments. các phòng ban.
c. c. Use an XSLT style sheet to convert the incoming or outgoing Sử dụng một bảng mẫu
XSLT để chuyển đổi đến hoặc đi
XML document into the format used within the departments XML tài liệu sang định dạng
được sử dụng trong các phòng ban
Ver. Ver. 1.0 1.0
XML document into the format used within the departments. XML tài liệu vào các định dạng
được sử dụng trong các phòng ban.
Page 28 Trang 28
Which of the following code snippets can be used in an XML Nào trong các đoạn mã sau đây
có thể được sử dụng trong một XML
document named Test.xml to associate it with a style tài liệu có tên Test.xml để liên kết
nó với một phong cách
sheet named Test.css ? bảng tên Test.css?
a. <?xml-stylesheet href="Test.css" a. <? xml-stylesheet href =
"Test.css"
//
type="text/css"?> type = "text / css"?>
b. <?xml-stylesheet href="Test.xsl" b. <? xml-stylesheet href =
"Test.xsl"
c <? c <? ltlhthf "T t ltlhthf "T t
""
c. <?xmlstylesheet href="Test.css" c. <? xmlstylesheet href =
"Test.css"
type="text/xsl"?> type = "text / xsl"?>
d. <xml-stylesheet href="Test.css" d. <xml-stylesheet href =
"Test.css"
type="text/css"/> type = "text / css" />
type text/css / các loại văn bản / css /
a. <?xml-stylesheet href=”Test.css” a. <? xml-stylesheet href =
"Test.css"
Ver. Ver. 1.0 1.0
type=”text/css”?> type = "text / css"?>
Page 29 Trang 29
Statement A: CSS can be used to reorder, add, delete, or Tuyên bố A: CSS có thể được sử
dụng để sắp xếp lại, thêm, xóa, hoặc
perform other operations on elements. thực hiện các hoạt động khác về các yếu tố.
Statement B: CSS uses less memory when compared to Báo cáo B: sử dụng CSS ít bộ nhớ
khi so sánh với
yy
pp
XSLT. XSLT.
sai.
True.
True.
True.
sai.
Ver. Ver. 1.0 1.0
True.
Page 30 Trang 30
Which element must contain one or more when elements? Những yếu tố phải có một hoặc
nhiều khi các yếu tố?
a. xsl:if a. xsl: nếu
b. xsl:for-each b. xsl: cho-mỗi
c. xsl:sort c. xsl: sắp xếp
d. xsl:choose d. xsl: chọn
d. xsl:choose d. xsl: chọn
Ver. Ver. 1.0 1.0
Page 31 Trang 31
Statement A: XSLT is a superset of the CSS functionality. Tuyên bố A: XSLT là một tập cha
của các chức năng CSS.
Statement B: XSLT is an application of XML. Báo cáo B: XSLT là một ứng dụng của XML.
sai.
b Statement A is False and Statement B is True b cáo là sai và báo cáo B là True
True.
True.
sai.
True.
Ver. Ver. 1.0 1.0
Page 32 Trang 32
Summary Tóm tắt
Summary Tóm tắt
Rendering is the process of formatting and presenting the data Ra là quá trình định dạng và
trình bày các dữ liệu
in an XML document in different formats. trong một tài liệu XML định dạng khác nhau.
A style sheet is a document that contains the formatting rules Một tấm phong cách là một tài
liệu có chứa các quy tắc định dạng
for one or several XML documents. cho một hoặc một số tài liệu XML. The two types of
style Hai loại phong cách
sheets that can be used with XML documents are: tấm có thể được sử dụng với các tài liệu
XML là:
CSS CSS
XSL XSL
CSS is used to define the style or appearance of an XML CSS được sử dụng để xác định kiểu
hoặc xuất hiện của một XML
XSL is made up of XSLT and XPath. XSL được tạo thành XSLT và XPath.
XSL is made up of XSLT and XPath. XSL được tạo thành XSLT và XPath.
XSLT is used to display selective elements or attributes, sort XSLT được sử dụng để hiển thị
các yếu tố chọn lọc hoặc các thuộc tính, sắp xếp
data on one or more elements, and process the data based on dữ liệu trên một hoặc nhiều
nguyên tố, và xử lý dữ liệu dựa trên
conditions. điều kiện.
Ver. Ver. 1.0 1.0
Page 33 Trang 33
The XSLT processor applies the transformation information Bộ vi xử lý XSLT áp dụng các
thông tin chuyển đổi
contained in the XSLT style sheet and builds a resultant tree chứa trong bảng mẫu XSLT và
xây dựng một cây kết quả
structure, which is then rendered to various targets. cơ cấu, sau đó được đưa cho các mục tiêu
khác nhau.
XSLT elements, such as template , apply-templates , XSLT yếu tố, chẳng hạn như
mẫu, áp dụng các tiêu bản,
sort for-each and value-of are used to extract and sắp xếp cho-mỗi người và giá trị của được
sử dụng để trích xuất và
sort , for-each , and value-of are used to extract and sắp xếp, cho-mỗi, và giá trị của được sử
dụng để trích xuất và
format data. định dạng dữ liệu.
XSL-FO provides formatting objects to break XML documents XSL-FO cung cấp định dạng
các đối tượng để phá vỡ các tài liệu XML
into pages, paragraphs, and lists. vào các trang, đoạn văn, và danh sách. The associated
properties of Các liên kết tài sản của
pg , p pg, p
gp , gp,
pp Trang
the formatting objects allow you to format the XML documents. các đối tượng định dạng cho
phép bạn định dạng các tài liệu XML.
A template rule describes how an XML element and its Một nguyên tắc mẫu mô tả cách một
phần tử XML và của
contents are converted into a format that can be displayed in nội dung được chuyển đổi thành
một dạng có thể được hiển thị trong
th b th b
the browser. trình duyệt.
Ver. Ver. 1.0 1.0

IWCD_Session_19.pdf
Page 1 Trang 1
Use the <xsl:include> element Sử dụng các yếu tố <xsl:include>
Use various XSLT functions Sử dụng chức năng khác nhau XSLT
Categorize different types of CSS style sheets Phân loại các loại khác nhau của phong cách
trang tính CSS
Use the class attribute Sử dụng các thuộc tính lớp
Ver. Ver. 1.0 1.0
Page 2 Trang 2
The <xsl:include> Element Các phần tử <xsl:include>
The <xsl:include> Element Các phần tử <xsl:include>
Enables you to treat style sheets as modular units Cho phép bạn để điều trị phong cách trang
là đơn vị mô-đun
Used to include another style sheet in the current style Được sử dụng để bao gồm một bảng
mẫu trong phong cách hiện tại
sheet bảng
Is the child element of the <xsl:stylesheet> element or Là các phần tử con của phần tử
<xsl:stylesheet> hay
yy
the <xsl:transform> element các yếu tố <xsl:transform>
The following code snippet illustrates the use of the Đoạn mã sau minh họa việc sử dụng
<xsl:include> element <xsl:include> phần tử
::
<xsl:stylesheet version “1.0” <Xsl: stylesheet phiên bản "1.0"
xmlns:xsl=”http://www.w3.org/1999/xsl/Transfor xmlns: xsl =
"http://www.w3.org/1999/xsl/Transfor
m”> m ">
//
<xsl:include href=”other_stylesheet.xsl”/> <xsl:include href="other_stylesheet.xsl"/>
</xsl:stylesheet> </ Xsl: stylesheet>
Ver. Ver. 1.0 1.0
Page 3 Trang 3
XSLT Functions Chức năng XSLT
XSLT Functions Chức năng XSLT
XSLT provides more than 100 inbuilt functions XSLT cung cấp hơn 100 chức năng sẵn có
The following table lists the various functions provided by Bảng sau đây liệt kê các chức
năng khác nhau được cung cấp bởi
XSLT: XSLT:
Method Name Tên phương pháp
Example Ví dụ
et od ae et od ae
esc pt o esc pt o
ape ape
current() hiện tại ()
Used to return the Được sử dụng để trả lại
reference of the tham chiếu của
current node. hiện tại nút.
<xsl:value-of select="current()"/> <xsl:value-of select="current()"/>
ff
tt
b () b ()
U dt U dt
tt
< ll <Sẽ
flt 'f mang số hiệu Flt 'f
tt
format-number() định dạng-số ()
Used to convert a Được sử dụng để chuyển đổi một
number to a string. số vào chuỗi.
<xsl:value-of select='format- <Xsl: giá trị của chọn = 'định dạng-
number(500100, "###,###.00")' /> số (500.100, "###,###. 00 ") '/>
System-property() Hệ thống tài sản ()
Used to return the Được sử dụng để trả lại
value of the system giá trị của hệ thống
property specified by tài sản theo quy định của
the parameter. các tham số.
<xsl:value-of select="system- <Xsl: giá trị của chọn = "hệ thống
property('xsl:version')" /> sở hữu ('xsl: phiên bản') "/>
<br /> <br />
<xsl:value-of select="system- <Xsl: giá trị của chọn = "hệ thống
property('xsl:vendor')" /> sở hữu ('xsl: nhà cung cấp') "/>
Ver. Ver. 1.0 1.0
<br /> <br />
Page 4 Trang 4
XSLT Functions (Contd.) XSLT chức năng (Contd.)
XSLT (Contd.): XSLT (Contd.):
Example Ví dụ
Key() Key ()
Used to return a Được sử dụng để trả lại
node-set using the node-thiết lập bằng cách sử dụng
index specified by an Chỉ số quy định của một
<xsl:key> element. <xsl:key> yếu tố.
<xsl:key name="studentList" <Xsl: chính tên = "studentList"
match="Student" use="Score" /> phù hợp = "sinh viên" sử dụng = "Điểm" />
..
..
< lt <Lt
lt lt
th "/"> th "/">
<xsl:template match="/"> <xsl:template match="/">
<xsl:for-each select="key('studentList', <Xsl: cho-mỗi chọn = "chìa khóa ('studentList,
'100')"> <p>Title: <xsl:value-of '100 ') "> <p> Tiêu đề: <xsl: giá trị của
select="Rollno"/> <br/> Artist: <xsl:value- chọn = "Rollno" /> Nghệ sĩ <br/>: <xsl: giá trị
of select="Name"/> <br/> của tên "chọn =" /> <br/>
PiPi
ll sẽ
flt "S mang số hiệu Flt "S
"/ / "/ /
Price: <xsl:value-of select="Score"/></p> Giá: <xsl:value-of select="Score"/> </ p>
</xsl:for-each></xsl:template> </ Xsl: cho mỗi-> </ xsl: template>
Ver. Ver. 1.0 1.0
Page 5 Trang 5
XSLT (Contd.): XSLT (Contd.):
Example Ví dụ
Key() Key ()
The preceding code displays the Roll Number, Các mã trước đó hiển thị các số Roll,
Key() Key ()
The preceding code displays the Roll Number, Các mã trước đó hiển thị các số Roll,
Name, and Score of all students with score 100, Tên, và Hệ số của tất cả học sinh với số điểm
100,
where the XML file has the following structure: mà tập tin XML có cấu trúc sau đây:
<StudentDetails> <StudentDetails>
<Student> <Student>
<Rollno>1</Rollno> <Rollno> 1 </ Rollno>
<Name> Tom </Name> <name> Tom </ Name>
<Score>100</Score> <Score> 100 </ Hệ số>
</Student> </ Sinh viên>
<Student> <Student>
<Name> Jack </Name> <name> Jack </ Name>
<Score>90</Score> <Score> 90 </ Hệ số>
</Student> </ Sinh viên>
Ver. Ver. 1.0 1.0
..
..
</StudentDetails> </ StudentDetails>
Page 6 Trang 6
Types of CSS Style Sheets Các loại Style Sheets CSS
Types of CSS Style Sheets Các loại Style Sheets CSS
Can be used for formatting both HTML and XML documents Có thể được sử dụng cho cả hai
định dạng tài liệu HTML và XML
Can be one of the following types: Có thể một trong các loại sau đây:
Inline: Inline:
Can be used only for the HTML element in which it appears Có thể được sử dụng chỉ cho các
phần tử HTML, trong đó nó xuất hiện
Cannot be reused for other elements, even within the same Không thể được tái sử dụng cho
các phần tử khác, thậm chí trong cùng một
document tài liệu
Can only be used in HTML and not in XML Chỉ có thể được sử dụng trong HTML và không
có trong XML
The following example illustrates its use: Ví dụ sau minh họa sử dụng của nó:
The following example illustrates its use: Ví dụ sau minh họa sử dụng của nó:
<p style="color: red; margin-left: 10px"> <p style="color: red; margin-left: 10px">
This is a sample paragraph Đây là một đoạn văn mẫu
</p> </ P>
Embedded: Nhúng:
Is embedded within an XML document Được nhúng vào trong một tài liệu XML
Cannot be used for other XML documents Có thể không được sử dụng cho các tài liệu XML
Ver. Ver. 1.0 1.0
Page 7 Trang 7
Types of CSS Style Sheets (Contd.) Các loại Style Sheets CSS (Contd.)
Embedded (Contd.): Nhúng (Contd.):
The following code uses an embedded CSS stylesheet: Các mã sau đây sử dụng một kiểu
CSS nhúng:
<?xml-stylesheet href="#style" type="text/css"?> <? Xml-stylesheet href = "# phong cách"
type = "text / css"?>
<article> <article>
<extras id="style"> <extras id="style">
yy
headline { display: block } tiêu đề {display: block}
headline { color: red } tiêu đề {color: red}
content { display: block } {nội dung hiển thị: block}
content { color: blue } nội dung {color: blue}
extras { display: none } extras {display: none}
</extras> </ Extras>
<headline>This is the headline of the <headline> Đây là tiêu đề của
article</headline> Bài viết </ tiêu đề>
<content>This is the content of the <content> Đây là nội dung của
article</content> Bài viết </ nội dung>
</article> </ Bài>
Ver. Ver. 1.0 1.0
Page 8 Trang 8
External: Bên ngoài:
Is external to the XML document Là ngoài các tài liệu XML
Formatting instructions are saved in an external file that can be hướng dẫn các định dạng
được lưu trong một tập tin bên ngoài có thể được
imported in any number of XML documents nhập khẩu trong bất kỳ số lượng các tài liệu
XML
The following code uses an external CSS stylesheet: Các mã sau đây sử dụng một kiểu CSS
bên ngoài:
The following code uses an external CSS stylesheet: Các mã sau đây sử dụng một kiểu CSS
bên ngoài:
<?xml-stylesheet href="my-style.css" type="text/css"?> <Loại? Xml-stylesheet title = của tôi
"-style.css" = "text / css"?>
<article> <article>
<headline>this is the headline of the <headline> đây là tiêu đề của
article</headline> Bài viết </ tiêu đề>
<content>this is the content of the <content> đây là nội dung của
article</content> Bài viết </ nội dung>
</article> </ Bài>
The my style css file contains the following text: Các file css phong cách của tôi có chứa các
văn bản sau đây:
The my-style.css file contains the following text: Các tập tin style.css của tôi có chứa các văn
bản sau đây:
headline { display: block } tiêu đề {display: block}
headline { color: red } tiêu đề {color: red}
content { display: block } {nội dung hiển thị: block}
Ver. Ver. 1.0 1.0
Page 9 Trang 9
Class Attribute Class Attribute
Class Attribute Class Attribute
Used to apply different CSS styles to the same type of Được sử dụng để áp dụng CSS phong
cách khác nhau cho cùng một loại
elements yếu tố
The following code snippet depicts the usage of the class Các đoạn mã sau đây mô tả việc
sử dụng của lớp
<heading class="red">This heading is <heading class="red"> nhóm này là
red.</heading> màu đỏ. </ nhóm>
<heading class="green">This heading is <heading class="green"> nhóm này là
//
ii
green.</heading> màu xanh lá cây. </ nhóm>
Ver. Ver. 1.0 1.0
Page 10 Trang 10
External style sheets should be preferred over embedded phong cách trang tính bên ngoài nên
được ưa thích hơn nhúng
style sheets because they provide better management of phong cách trang bởi vì họ cung cấp
cho quản lý tốt hơn
code and more control over rendering. mã và kiểm soát nhiều hơn vẽ. External style sheets
Phong cách bên ngoài tấm
enable you to keep the formatting instructions separate from cho phép bạn để giữ cho các
hướng dẫn định dạng riêng biệt
th thứ
tt th tt th
bb
ii
f th k f thứ k
ff
the content, thereby serving one of the key purposes of nội dung, từ đó phục vụ một trong
những mục đích chính của
using style sheets. sử dụng phong cách trang. The following benefits are available Những lợi
ích sau đây có sẵn
when you use external style sheets: khi bạn sử dụng phong cách trang tính bên ngoài:
EtEt
ltlht ltlht
bl Thi li it th b Thị li nó lần thứ
df df
External style sheets are reusable. Bên ngoài phong cách trang được sử dụng lại. This
eliminates the need for Điều này giúp loại bỏ sự cần thiết phải
creating separate style sheets for documents that require the tạo ra phong cách trang riêng biệt
cho các tài liệu có yêu cầu
same formatting. cùng định dạng.
External style sheets allow consistent rendering of XML Bên ngoài phong cách trang cho
phép dựng hình phù hợp của XML
External style sheets allow consistent rendering of XML Bên ngoài phong cách trang cho
phép dựng hình phù hợp của XML
documents. tài liệu. An external style sheet can be created and Một tấm phong cách bên ngoài
có thể được tạo ra và
associated with XML documents to render any number of XML liên kết với các tài liệu XML
để làm cho bất kỳ số lượng XML
documents in a particular format. tài liệu trong một định dạng cụ thể. This is not easily
achievable Đây không phải là dễ dàng đạt được
th thứ
hi li hi li
b dd dtlht b đ dtlht
Ver. Ver. 1.0 1.0
through inline or embedded style sheets. thông qua nội tuyến hoặc nhúng style sheets.
Page 11 Trang 11
Unlike inline and embedded style sheets, the formatting of Không giống như phong cách
nhúng lá và nội tuyến, các định dạng của
XML documents can be easily updated by updating the các tài liệu XML có thể dễ dàng cập
nhật bằng cách cập nhật
corresponding external style sheet. tương ứng với phong cách trang tính bên ngoài.
External style sheets enable you to keep the XML documents Bên ngoài phong cách trang
cho phép bạn giữ các tài liệu XML
light As a result the XML documents download faster than ánh sáng Kết quả là các tài liệu
XML tải về nhanh hơn
light. ánh sáng. As a result, the XML documents download faster than Kết quả là, các tài liệu
XML tải về nhanh hơn
when used with inline or embedded style sheets. khi được sử dụng với nội tuyến hoặc nhúng
style sheets.
Ver. Ver. 1.0 1.0
Page 12 Trang 12
You should ensure that the value of the class attribute in the Bạn cần đảm bảo rằng giá trị của
các thuộc tính lớp trong
XML document exactly matches the string that appears after Tài liệu XML phù hợp chính
xác chuỗi xuất hiện sau khi
the period in the corresponding class selector. thời gian trong lớp chọn tương ứng. Otherwise,
Nếu không,
the style rule will not apply to the element. các quy tắc phong cách sẽ không áp dụng cho
phần tử.
You can either create a complex data type, or a group to Bạn có thể tạo ra một kiểu dữ liệu
phức tạp, hoặc một nhóm để
define a group of elements that can be referred to at xác định một nhóm các phần tử có thể
được gọi ở
multiple places in an XML schema. nhiều nơi trong một lược đồ XML. Groups are preferred
Nhóm được ưa thích
over complex data types because they are easier to so với các loại dữ liệu phức tạp bởi vì
chúng dễ
implement than complex data types. thực hiện hơn so với các loại dữ liệu phức tạp. Complex
data types các loại dữ liệu phức tạp
h ld b h ld b
dh dh
dt dt
if tt ib t nếu t IB tt
Thi i Thị i
should be used when you need to specify attributes. nên được sử dụng khi bạn cần xác định
các thuộc tính. This is Đây là
because, groups allow you to specify only elements and not bởi vì, nhóm cho phép bạn xác
định yếu tố duy nhất và không
Ver. Ver. 1.0 1.0
Page 13 Trang 13
You should use an XML editor to create XML documents. Bạn nên sử dụng một trình biên
tập XML để tạo ra các tài liệu XML.
An XML editor helps in creating an error free and well- Một biên tập viên XML giúp trong
việc tạo ra một lỗi miễn phí và tốt
formed XML document. hình thành tài liệu XML. It can also be used to validate the Nó cũng
có thể được sử dụng để xác thực
XML document against a schema. Tài liệu XML với một lược đồ. Some examples of XML
Một số ví dụ về XML
dit dit
XMLS XMLS
St l St di St St di l
dXdX
editors are XMLSpy, Stylus Studio, and, oXygen. biên tập viên được XMLSpy, Stylus
Studio, và, oxy.
Ver. Ver. 1.0 1.0
Page 14 Trang 14
How is an XML source document connected to an XSL style Làm thế nào là một nguồn tài
liệu XML kết nối với một phong cách XSL
sheet? bảng?
You can connect an XSLT style sheet with an XML source Bạn có thể kết nối một bảng mẫu
XSLT với một nguồn XML
document by declaring a processing instruction in the XML tài liệu bằng cách tuyên bố một
lệnh xử lý trong XML
dd
t Th Th t
iit ti IIT ti
dtb DTB
ll
dd
document. tài liệu. The processing instruction needs to be placed Các lệnh xử lý cần được đặt
before the root element and after the XML version declaration trước khi các phần tử gốc và
sau khi tuyên bố phiên bản XML
to connect an XML document to its style sheet. để kết nối một tài liệu XML để trang phong
cách của mình. The following Các sau
code snippet connects the sample.xsl file with an XML đoạn mã kết nối các file sample.xsl
với một XML
pp Trang
pp
<?xml version="1.0"?> <?? Xml version = "1.0">
<?xml:stylesheet type="text/xsl" <? Xml kiểu type = "text / xsl"
href="sample.xsl"?> href = "sample.xsl"?>
<root> <root>
... ...
</root> </ Root>
Ver. Ver. 1.0 1.0
</root> </ Root>
Page 15 Trang 15
Can both CSS and XSLT be used together in an XML Có thể cả CSS và XSLT được sử dụng
cùng nhau trong một XML
document? tài liệu?
Yes. Có. You can use XSLT to transform XML data into structures, Bạn có thể sử dụng
XSLT để chuyển đổi dữ liệu XML vào các cấu trúc,
such as lists and tables, and then apply CSS to the result to chẳng hạn như các danh sách và
bảng biểu, và sau đó áp dụng CSS để các kết quả
tlh TLH
th thứ
tt tt
i th i th
lti W b LTI W b
control how these structures appear in the resulting Web page. kiểm soát các cấu trúc này
xuất hiện trong trang Web kết quả.
Do all XML parsers support XSLT? Do tất cả các phân tích cú pháp XML hỗ trợ XSLT?
No, all XML parsers do not support XSLT. Không, tất cả các phân tích cú pháp XML không
hỗ trợ XSLT. For example, Ví dụ,
Apache Xerces, a Java-based parser does not support XSLT. Apache Xerces, một phân tích
cú pháp dựa trên Java không hỗ trợ XSLT.
If a user wants to perform XSL transformations by using Nếu người dùng muốn thực hiện các
phép biến đổi XSL bằng cách sử dụng
Apache Xerces the user needs to use the XALAN parser Apache Xerces người dùng cần sử
dụng các phân tích cú pháp Xalan
Apache Xerces, the user needs to use the XALAN parser. Apache Xerces, người dùng cần sử
dụng các phân tích cú pháp Xalan.
XALAN is an XSLT parser for transforming XML documents Xalan là một phân tích cú
pháp XSLT để chuyển đổi các tài liệu XML
into HTML, text, or other XML document types. vào HTML, văn bản, hoặc tài liệu XML loại
khác. Microsoft's Của Microsoft
MSXML parser provides an edge in this regard, as it supports MSXML phân tích cú pháp
cung cấp một lợi thế trong vấn đề này, vì nó hỗ trợ
Ver. Ver. 1.0 1.0
XSLT and does not require additional XSLT parsers for XSL XSLT và không yêu cầu phân
tích cú pháp bổ sung cho XSL XSLT
transformations. biến đổi.
Page 16 Trang 16
Why is the xsl:apply-templates element used? Tại sao xsl: áp dụng, các
mẫu nguyên tố được sử dụng?
The xsl:apply-templates element is used in templates- xsl The: áp dụng,
các mẫu nguyên tố được sử dụng trong các mẫu-
based formatting. dựa trên định dạng. This element directs the XSLT processor to Nguyên tố
này chỉ đạo các bộ vi xử lý XSLT để
find and apply the appropriate xsl:template . tìm kiếm và áp dụng thích hợp xsl:
template.
Ver. Ver. 1.0 1.0
Page 17 Trang 17
Which of the following code snippets can be used in an XML Nào trong các đoạn mã sau đây
có thể được sử dụng trong một XML
document named Test.xml to associate it with a style sheet tài liệu có tên Test.xml để liên kết
nó với một trang phong cách
named Test.css? tên Test.css?
<?xml-stylesheet href="Test.css" <? Xml-stylesheet href = "Test.css"
//
<?xml-stylesheet href="Test.xsl" <? Xml-stylesheet href = "Test.xsl"
<? <? ltlhthf "T t ltlhthf "T t
""
<?xmlstylesheet href="Test.css" <? Xmlstylesheet href = "Test.css"
type="text/xsl"?> type = "text / xsl"?>
<xml-stylesheet href="Test.css" <Xml-stylesheet href = "Test.css"
type="text/css"/> type = "text / css" />
type text/css /> các loại văn bản / css />
<?xml-stylesheet href="Test.css" <? Xml-stylesheet href = "Test.css"
Ver. Ver. 1.0 1.0
type= text/css ?> type = text / css?>
Page 18 Trang 18
A user is creating a schema for an XML document. Một người sử dụng là tạo ra một lược đồ
cho một tài liệu XML. The user Người sử dụng
wants to refer an external schema, which is stored in the muốn tham khảo một lược đồ bên
ngoài, mà được lưu trữ trong
product.xsd file. product.xsd file. The target namespace of both the external Các mục tiêu của
cả hai miền không gian bên ngoài
schema and the current schema is the same. lược đồ và các sơ đồ hiện tại là như nhau. Which
of Nào
f ll i e sẽ i
dd
ii
th ld th ngày thứ ld
tt
ft thi ft thi
following code snippets should the user use to refer to this đoạn mã sau đây nên việc sử dụng
người dùng để tham khảo
schema? lược đồ?
<include Location= "product.xsd"/> <include Location= "product.xsd"/>
ii
ii
//
<include schemaLocation= "product.xsd"/> <include schemaLocation= "product.xsd"/>
<import schemaLocation= "product.xsd"/> <import schemaLocation= "product.xsd"/>
<import Location=" product.xsd"/> <import Location=" product.xsd"/>
<include schemaLocation= "product.xsd"/> <include schemaLocation= "product.xsd"/>
Ver. Ver. 1.0 1.0
Page 19 Trang 19
cho một tài liệu XML. In the Trong
hh
th thứ
ttild th dl ttild thứ dl
ti ti
f th f ngày
schema, the user wants to include the declaration for the lược đồ, người dùng muốn bao gồm
việc khai báo cho
employee element and its three child elements: name, nhân viên và các yếu tố của yếu tố con
ba: tên,
designation, and salary. chỉ định, và tiền lương. The user wants that the child Người sử dụng
muốn có con
elements of employee may appear in any sequence in the các yếu tố của nhân viên có thể xuất
hiện theo thứ tự bất kỳ trong
elements of employee may appear in any sequence in the các yếu tố của nhân viên có thể xuất
hiện theo thứ tự bất kỳ trong
XML document. Tài liệu XML. Which of the following code snippets should Nào trong các
đoạn mã sau đây nên
the user use to declare the employee element? người dùng sử dụng để khai báo các yếu tố
nhân viên?
<xsd:complexType name="employee"> <xsd:complexType name="employee">
<xsd:complexType name employee > <xsd:complexType tên nhân viên>
<xsd:sequence> <xsd:sequence>
<xsd:element name="name" type="xsd:string"/> <xsd:element name="name"
type="xsd:string"/>
<xsd:element name="designation" <Xsd: yếu tố name = "chỉ định"
<xsd:element name designation <Xsd: tên phần tử chỉ định
<xsd:element name="salary" <Xsd: yếu tố name = "lương"
Ver. Ver. 1.0 1.0
</xsd:sequence> </ Xsd: trình tự>
Page 20 Trang 20
pp
yp yp
py py
<xsd:group> <xsd:group>
<xsd:element name="name" <Xsd: yếu tố name = "name"
</xsd:group> </ Xsd: nhóm>
Ver. Ver. 1.0 1.0
Page 21 Trang 21
pp
yp yp
py py
<xsd:choice> <xsd:choice>
</xsd:choice> </ Xsd: sự lựa chọn>
Ver. Ver. 1.0 1.0
Page 22 Trang 22
pp
yp yp
py py
<xsd:all> <xsd:all>
</xsd:all> </ Xsd: tất cả>
Ver. Ver. 1.0 1.0
Page 23 Trang 23
<xsd:group> <xsd:group>
tt
" dti "/ "DTI" /
</xsd:group> </ Xsd: nhóm>
</xsd:complexType </ Xsd: complexType
>>
</xsd:complexType </ Xsd: complexType
>>
Ver. Ver. 1.0 1.0
Page 24 Trang 24
cho một tài liệu XML. In the Trong
schema, the user wants to create a group of attributes that lược đồ, người dùng muốn tạo ra
một nhóm các thuộc tính
can be reused with different elements. có thể được tái sử dụng với các yếu tố khác nhau.
Which of the Điều nào
following XSD elements should the user use for this sau XSD yếu tố nên việc sử dụng người
dùng cho việc này
??
purpose? mục đích?
group nhóm
attribute thuộc tính
choice sự lựa chọn
Ver. Ver. 1.0 1.0

IWCD_Session_21.pdf
Page 1 Trang 1
Perform conditional formatting Thực hiện định dạng có điều kiện
Use XPath pattern Sử dụng mô hình XPath
Present data in different formats Hiện tại dữ liệu trong các định dạng khác nhau
Ver. Ver. 1.0 1.0
Page 2 Trang 2
Performing Conditional Formatting Thực hiện định dạng có điều kiện
Conditional formatting refers to the formatting of data based Định dạng có điều kiện đề cập
đến các định dạng của dữ liệu dựa
Performing Conditional Formatting Thực hiện định dạng có điều kiện
on a specific condition. trên một điều kiện cụ thể.
The two elements used for conditional formatting are: Hai yếu tố được sử dụng để định dạng
có điều kiện là:
if nếu
choose chọn
Ver. Ver. 1.0 1.0
Page 3 Trang 3
Performing Conditional Formatting (Contd.) Định dạng có điều kiện thực hiện (Contd.)
on a specific condition. trên một điều kiện cụ thể.
if nếu
Provides an if-then construct Cung cấp một nếu-sau đó xây dựng
choose chọn
Provides an if then construct. Cung cấp một, nếu sau đó xây dựng.
<xsl:if test="condition"> <xsl:if test="condition">
[actions to be performed if the hành động [để được thực hiện nếu
condition is true] điều kiện là đúng]
</xsl:if> </ Xsl: if>
Ver. Ver. 1.0 1.0
Page 4 Trang 4
on a specified condition. trên một điều kiện quy định.
if nếu
choose chọn
Enables you to choose from two or more Cho phép bạn lựa chọn hai hoặc nhiều hơn
possible courses of action by testing multiple có thể các khóa học của hành động bằng cách
kiểm tra nhiều
conditions. điều kiện.
<xsl:choose> <xsl:choose>
</xsl:when> </ Xsl: khi>
::
::
<xsl:otherwise> <xsl:otherwise>
</xsl:otherwise> </ Xsl: nếu không>
Ver. Ver. 1.0 1.0
</xsl:choose> </ Xsl: chọn>
Page 5 Trang 5
Identifying Comparison and Boolean Operators Xác định các toán tử so sánh và
Boolean
Used with the if and choose elements to narrow down the Được sử dụng với nếu và
chọn các yếu tố để thu hẹp
Identifying Comparison and Boolean Operators Xác định các toán tử so sánh và
Boolean
formatting criteria. định dạng tiêu chuẩn.
The following table lists various comparison and Boolean Bảng sau liệt kê so sánh khác nhau
và Boolean
operators. nhà khai thác.
Operator Điều Hành
Meaning Ý nghĩa
Example Ví dụ
Equal to Bằng
==
PRICE[. GIÁ [. = 20] = 20]
PRODUCTNAME[. ProductName [. = 'Mini Bus'] '= Mini' Bus]
!= ! =
< <
> >
Not equal to Không bằng
Less than Ít hơn
Greater than Lớn hơn
PRICE[. GIÁ [. != 20] 20! =]
PRODUCTNAME[. ProductName [. != 'Barbie Doll'] ] Doll! '= Barbie "
PRICE[. GIÁ [. < 20] <20]
PRICE[. GIÁ [. > 20] > 20]
and và
<= <=
>= > =
or hoặc
Less than or equal to Nhỏ hơn hoặc bằng
Logical AND Hợp lý và
Logical OR Logical OR
Greater than or equal to Lớn hơn hoặc bằng
PRICE[. GIÁ [. <= 20] <= 20]
PRICE[. GIÁ [. >= 20] > = 20]
PRICE[. GIÁ [. &gt 20 and . > 20 và. < 30] <30]
PRICE[ = 20 or GIÁ [= 20 hoặc
= 45] = 45]
Ver. Ver. 1.0 1.0
or hoặc
not không
Logical OR Logical OR
Negation operator Phủ định điều hành
PRICE[. GIÁ [. 20 or . 20 hay. 45] 45]
PRICE[not(. = 30)] GIÁ [không (30. =)]
Page 6 Trang 6
Using XPath Sử dụng XPath
XPath: XPath:
Using XPath Sử dụng XPath
Is used to search and retrieve information from an XML file. Được sử dụng để tìm kiếm và
lấy thông tin từ một file XML.
Treats an XML document as a tree of interrelated branches Xử lý một tài liệu XML như một
cây của các ngành liên quan đến nhau
and nodes, as shown in the following figure. và các nút, như trong hình sau.
PRODUCTDATA PRODUCTDATA
PRODUCT SẢN PHẨM
CATEGORY SẢN PHẨM
PRODUCTNAME ProductName
DESCRIPTION Mô tả
PRICE GIÁ
QOH QOH
PRODID=“P001” PRODID = "P001"
CATEGORY SẢN PHẨM
=“TOY” = "TOY"
Mini Bus Mini Bus
This toy is for đồ chơi này dành cho
children aged trẻ em từ
54 54
75 75
Ver. Ver. 1.0 1.0
Mini Bus Mini Bus
children aged trẻ em từ
4 and above 4 và ở trên
Page 7 Trang 7
Describing XPath Expressions Mô tả biểu thức XPath
XPath expressions can be used to retrieve data based on các biểu thức XPath có thể được sử
dụng để lấy dữ liệu dựa trên
Describing XPath Expressions Mô tả biểu thức XPath
specific conditions. cụ thể điều kiện.
XPath expressions identify the nodes in an XML document các biểu thức XPath xác định các
nút trong một tài liệu XML
based on their names and values. dựa trên giá trị của họ, tên,.
The following table lists the operators that can be used to Bảng sau đây liệt kê các nhà khai
thác có thể được sử dụng để
create XPath expressions. tạo ra các biểu thức XPath.
Operator/Special Điều Hành / đặc biệt
Ch Ch
tt
Example Ví dụ
Character Ký tự
//
/PRODUCTDATA / PRODUCTDATA
Selects the immediate child elements of Chọn con yếu tố trực tiếp của
PRODUCTDATA . PRODUCTDATA. If this operator occurs at the start Nếu nhà khai thác
này xảy ra lúc bắt đầu
of the pattern, it indicates that the child elements của mẫu, nó chỉ ra rằng yếu tố con
should be selected from the root node. cần được lựa chọn từ nút gốc.
// / /
//PRODUCTNAME / / ProductName
Searches for the specified element at any node Tìm kiếm các yếu tố quy định tại các nút bất
kỳ
level. cấp.
..
.PRODUCTNAME . ProductName
Indicates the current context. Chỉ ra bối cảnh hiện nay.
.. ..
../PRODUCTNAME .. / ProductName
Selects the PRODUCTNAME element, which exists Chọn các phần tử ProductName, mà
tồn tại
Ver. Ver. 1.0 1.0
within the parent of the current element. trong các phụ huynh của các phần tử hiện hành.
**
**
Selects all elements. Chọn tất cả các yếu tố.
Page 8 Trang 8
Describing XPath Expressions (Contd.) Mô tả biểu thức XPath (Contd.)
Describing XPath Expressions (Contd.) Mô tả biểu thức XPath (Contd.)
OO
t /S t / S
il il
EE
ll
DD
i ti i ti
Operator/Special Điều Hành / đặc biệt
Character Ký tự
Example Ví dụ
@@
@PRODUCTID @ ProductID
Used as a prefix for the attribute. Được sử dụng như là một tiền tố cho các thuộc tính.
@* @ *
@* @ *
Selects all attributes. Chọn tất cả các thuộc tính.
::
::
Separates the namespace prefix from the element Tách biệt tiền tố không gian tên từ phần tử
or attribute name. hoặc tên thuộc tính.
( ) ()
(PRICE*QUANTITY) (GIÁ * SỐ LƯỢNG)
Used to group operations. Được sử dụng để hoạt động nhóm.
[ ] []
[@PRODUCTID='P001 [@ ProductID = 'P001
'] ']
Applies a filter pattern. Áp dụng một mô hình lọc.
]]
++
num1 + num2 num1 + num2
Returns the sum of two numbers. Trả về tổng của hai số.
--
num1 - num2 num1 - num2
Returns the difference of two numbers. Trả về sự khác biệt của hai con số.
**
num1 * num2 num1 * num2
Returns the product of two numbers. Trả về các sản phẩm của hai con số.
div div
num1 div num2 num1 div num2
Returns the quotient of two numbers. Trả về thương số của hai số.
mod mod
num1 mod num2 num1 mod num2
Returns the modulus, that is, the remainder of Trả về các môđun, đó là, phần còn lại của
integer division. chia số nguyên.
Ver. Ver. 1.0 1.0
Page 9 Trang 9
Describing XPath Functions Mô tả chức năng XPath
XPath functions can be used to calculate and present data chức năng XPath có thể được sử
dụng để tính toán và trình bày dữ liệu
Describing XPath Functions Mô tả chức năng XPath
as a report. như là một báo cáo.
The various categories of functions in XPath are: Các chuyên mục khác nhau của các chức
năng trong XPath là:
string : Used to perform string operations. chuỗi: Dùng để thực hiện các hoạt động chuỗi.
node-set : Used to manipulate node-sets or to return node-thiết lập: Được sử dụng để điều
khiển nút-bộ hoặc để trở về
information about them. thông tin về họ.
Boolean : Used to evaluate an expression and return true or Boolean: Được sử dụng để đánh
giá một biểu thức và trả về true hoặc
false. sai.
numeric : Used for numeric calculations. số: Được sử dụng để tính toán số.
Ver. Ver. 1.0 1.0
Page 10 Trang 10
Demo: Using XPath Patterns in XSLT Style Sheets Demo: Sử dụng mẫu XPath trong
Style Sheets XSLT
Demo: Using XPath Patterns in XSLT Style Sheets Demo: Sử dụng mẫu XPath trong
Style Sheets XSLT
The executive at CyberShoppe needs to display the Việc điều hành tại CyberShoppe nhu cầu
để hiển thị
product-wise order report. sản phẩm khôn ngoan để báo cáo. The product and order data is
stored Các sản phẩm và trật tự dữ liệu được lưu trữ
in an XML document. trong một tài liệu XML. This data includes product details, such dữ
liệu này bao gồm chi tiết sản phẩm, chẳng hạn
as product ID name and price per unit For each product the như tên ID sản phẩm và giá trên
một đơn vị Đối với mỗi sản phẩm
as product ID, name, and price per unit. làm sản phẩm ID, tên, và giá mỗi đơn vị. For each
product, the Đối với mỗi sản phẩm,
details about all the orders placed against that product are also chi tiết về tất cả các đơn đặt
hàng đối với sản phẩm cũng
stored in the document. được lưu trữ trong tài liệu. The order details include the order Các chi
tiết lệnh bao gồm lệnh
number, shipping address, total quantity ordered and the order số lượng, vận chuyển địa chỉ,
tổng số lượng đặt hàng và đơn đặt hàng
pp g Trang g
qq
yy
value. giá trị. The total sales value for each product also needs to be Tổng doanh thu giá trị
cho mỗi sản phẩm cũng cần phải được
displayed. hiển thị.
Ver. Ver. 1.0 1.0
Page 11 Trang 11
Demo: Using XPath Patterns in XSLT Style Sheets (Contd.) Demo: Sử dụng mẫu XPath
trong Style Sheets XSLT (Contd.)
The following figure illustrates the data display format. Hình dưới đây minh họa các định
dạng hiển thị dữ liệu.
Ver. Ver. 1.0 1.0
Page 12 Trang 12
The following figure displays the structure of the corresponding Các con số sau đây sẽ hiển
thị cấu trúc của tương ứng
SUMMARY Tóm tắt
SUMMARY Tóm tắt
PRODUCT SẢN PHẨM
ORDER TỰ
SHIPPING SHIPPING
ADDRESS Địa chỉ
QUANTITY SỐ LƯỢNG
Ver. Ver. 1.0 1.0
Page 13 Trang 13
Demo: Creating a Style Sheet Using an XSLT Editor Demo: Tạo một Style Sheet Sử
dụng một biên tập XSLT
Demo: Creating a Style Sheet Using an XSLT Editor Demo: Tạo một Style Sheet Sử
dụng một biên tập XSLT
The employee information of an organization is stored in the Các thông tin nhân viên của một
tổ chức được lưu giữ trong
file employee.xml . employee.xml file. The data stored in this file is as follows: Các
dữ liệu được lưu trữ trong tập tin này như sau:
<EMPDETAILS> <EMPDETAILS>
<EMP EMPID="E001"> <EMP EMPID="E001">
<ENAME>Karen</ENAME> <ENAME> Karen </ ENAME>
<DESG>MANAGER</DESG> MANAGER <DESG> </ DESG>
<DEPT>SALES</DEPT> <DEPT> BÁN </ PHÒNG>
<SALARY>250</SALARY> <SALARY> 250 </ LƯƠNG>
</EMP> </ EMP>
<ENAME>George</ENAME> <ENAME> George </ ENAME>
<DESG>Executive</DESG> <DESG> Điều hành </ DESG>
//
Ver. Ver. 1.0 1.0
<DEPT>ACCOUNTS</DEPT> <DEPT> TÀI KHOẢN </ PHÒNG>
Page 14 Trang 14
Demo: Creating a Style Sheet Using an XSLT Editor (Contd.) Demo: Tạo một Style
Sheet Sử dụng một biên tập XSLT (Contd.)
</EMP> </ EMP>
<ENAME>Steve</ENAME> <ENAME> Steve </ ENAME>
//
<DESG>Manager</DESG> Quản lý <DESG> </ DESG>
<DEPT>FINANCE</DEPT> <DEPT> TÀI CHÍNH </ PHÒNG>
</EMP> </ EMP>
<ENAME>Ricky</ENAME> <ENAME> Ricky </ ENAME>
<DESG>Clerk</DESG> Lục <DESG> </ DESG>
<DEPT>SALES</DEPT> <DEPT> BÁN </ PHÒNG>
</EMP> </ EMP>
Ver. Ver. 1.0 1.0
Page 15 Trang 15
<ENAME>Richard</ENAME> <ENAME> Richard </ ENAME>
<DESG>Divisional Manager</DESG> <DESG> Manager phân chia </ DESG>
//
<DEPT>MARKETING</DEPT> <DEPT> MARKETING </ PHÒNG>
</EMP> </ EMP>
</EMPDETAILS> </ EMPDETAILS>
Display the name, designation, and department of the Hiển thị tên, chỉ định, và bộ phận của
employees earning higher than $250 in green and the rest in nhân viên thu nhập cao hơn $
250 trong màu xanh lá cây và phần còn lại trong
red. màu đỏ. You need to display the details as a bulleted list. Bạn cần phải hiển thị các chi
tiết như là một danh sách gạch đầu dòng. Create Tạo
the style sheet using an XSLT editor. bảng mẫu bằng cách sử dụng một trình biên tập XSLT.
Ver. Ver. 1.0 1.0
Page 16 Trang 16
Displaying Data in a Tabular Format Hiển thị dữ liệu trong một định dạng dạng bảng
The features of HTML and XSLT can be combined to format Các tính năng của HTML và
XSLT có thể được kết hợp để định dạng
Displaying Data in a Tabular Format Hiển thị dữ liệu trong một định dạng dạng bảng
the data from an XML document for appropriate display. các dữ liệu từ một tài liệu XML để
hiển thị phù hợp.
The HTML code can be embedded in an XSLT document to Những mã HTML có thể được
nhúng trong một tài liệu XSLT để
display the data. hiển thị dữ liệu.
Ver. Ver. 1.0 1.0
Page 17 Trang 17
Displaying Data in a Tabular Format (Contd.) Hiển thị dữ liệu trong một định dạng
dạng bảng (Contd.)
Displaying Data in a Tabular Format (Contd.) Hiển thị dữ liệu trong một định dạng
dạng bảng (Contd.)
The following table lists the HTML elements that are Bảng sau liệt kê các phần tử HTML
được
HTML Tag Tag HTML
required to display data in a tabular format. cần thiết để hiển thị dữ liệu trong một định dạng
bảng.
TABLE BẢNG
Acts as a container for all other tags used to specify the appearance of data in a Hoạt động
như một container cho tất cả các thẻ khác được dùng để xác định sự xuất hiện của dữ liệu
trong một
table. bảng. It has attributes, such as border, background color, cellpadding, Nó có các thuộc
tính, chẳng hạn như biên giới, màu nền, cellpadding,
cellspacing, and width that enable you to specify the appearance of the table. cellspacing, và
chiều rộng cho phép bạn xác định sự xuất hiện của bảng.
THEAD Thead
Used to specify headings for a table. Được sử dụng để xác định tiêu đề cho một bảng.
TBODY TBODY
Used as a parent for the TR and TD elements. Được sử dụng như là một phụ huynh cho TD
và các yếu tố TR.
TR TR
Used to represent a row in a table. Được sử dụng để đại diện cho một hàng trong một bảng.
This tag acts as a container for the TH and Thẻ này hoạt động như một container cho TH và
TD elements. TD yếu tố.
TH TH
Used to add column headings. Được sử dụng thêm các tiêu đề cột.
Ver. Ver. 1.0 1.0
TD TD
Used to specify the data to be displayed in columns. Được sử dụng để xác định dữ liệu được
hiển thị trong cột.
Page 18 Trang 18
Demo: Displaying Data in a Table Demo: Hiển thị dữ liệu trong bảng một
Demo: Displaying Data in a Table Demo: Hiển thị dữ liệu trong bảng một
The details about the books that are available for sale at Các chi tiết về những cuốn sách mà
có sẵn để bán ở
CyberShoppe are stored in an XML document. CyberShoppe được lưu trữ trong một tài liệu
XML. The book Các cuốn sách
details, such as book ID, title, rate, author first name, and chi tiết, chẳng hạn như ID sách,
tiêu đề, tỷ lệ, tên tác giả đầu tiên, và
author last name should be displayed in a table The first and tên tác giả cuối cùng sẽ được
hiển thị trong một bảng đầu tiên và
author last name should be displayed in a table. tên tác giả cuối cùng sẽ được hiển thị trong
một bảng. The first and Việc đầu tiên và
last names of the author should be displayed in a single cuối cùng tên của tác giả sẽ được hiển
thị trong một đơn
column, AUTHOR(S). cột, TÁC GIẢ (S). If a book has multiple authors, their Nếu một cuốn
sách có nhiều tác giả, của họ
names should be displayed as comma-separated values. tên sẽ được hiển thị như là các giá trị
cách nhau bằng dấu phẩy. The Các
py py
pp
following figure shows a sample output. sau con số cho thấy một đầu ra mẫu.
Ver. Ver. 1.0 1.0
Page 19 Trang 19
Exercises Các bài tập
The list of products sold at CyberShoppe needs to be Danh sách các sản phẩm bán tại
CyberShoppe cần phải được
displayed. hiển thị. These products need to be categorized based on Những sản phẩm này cần
phải được phân loại dựa trên
their prices, with products priced higher than $50 displayed in giá của họ, với các sản phẩm
giá cao hơn $ 50 hiển thị trong
red and the rest in green The product name description price màu đỏ và phần còn lại trong tên
sản phẩm giá mô tả màu xanh lá cây
red and the rest in green. màu đỏ và phần còn lại màu xanh lá cây. The product name,
description, price, Tên sản phẩm, mô tả, giá cả,
and quantity on hand of each product should be displayed, as và số lượng trong tay của mỗi
sản phẩm sẽ được hiển thị, như
shown in the following figure. thể hiện trong hình sau.
Ver. Ver. 1.0 1.0
The product.xml file will be provided to you. Các tập tin product.xml sẽ được cung
cấp cho bạn.
Page 20 Trang 20
You need to display the details of all employees whose Bạn cần phải hiển thị các chi tiết của
tất cả các nhân viên có
salary is equal to $1200. lương bằng $ 1200. The salary of an employee is Tiền lương của
một nhân viên
represented using the SALARY element in an XML đại diện bằng cách sử dụng các yếu tố
LƯƠNG trong một XML
document. tài liệu. Which of the following statements will you use to Mệnh đề nào sau đây
bạn sẽ sử dụng để
filt th filt thứ
ll
dtb DTB
dd
th thứ
ifi d it i ? IFI d nó i?
filter the employee data based on the specified criterion? lọc các dữ liệu nhân viên dựa trên
các tiêu chuẩn quy định?
a. <xsl:if test=“SALARY[. a. <xsl: nếu kiểm tra = "LƯƠNG [. =
1200]”> = 1200] ">
b. <xsl:if test=“SALARY[. b. <xsl: nếu kiểm tra = "LƯƠNG [. =
'1200'] /> = '1200 '] />
c. <xsl:if select=“SALARY[. c. <xsl: nếu chọn = "LƯƠNG [. =
'1200']”> = '1200 '] ">
d. <xsl:if match=“SALARY[. d. <xsl: nếu phù hợp = "LƯƠNG [. =
1200]”> = 1200] ">
a. <xsl:if test=”SALARY[. a. <xsl: nếu kiểm tra = "LƯƠNG [. =
1200]”> = 1200] ">
Ver. Ver. 1.0 1.0
Page 21 Trang 21
What will the following XPath expression return? trở lại biểu hiện gì sẽ sau XPath?
starts-with(“Hello World”, “world”) bắt đầu-với ("Hello World", "thế giới")
a. a. 0 0
b. b. True True
c. c. False Sai
d. d. 7 7
c. c. False Sai
Ver. Ver. 1.0 1.0
Page 22 Trang 22
What will the following XPath expression return? trở lại biểu hiện gì sẽ sau XPath?
sum(100 + 200) tổng hợp (100 + 200)
a. a. 300 300
b. b. NaN NaN
c. c. The expression will result in an error. Các biểu thức sẽ dẫn đến lỗi.
d. d. Null Null
c. c. The expression will result in an error. Các biểu thức sẽ dẫn đến lỗi.
Ver. Ver. 1.0 1.0
Page 23 Trang 23
Statement A: XPath treats an XML document as a tree of Tuyên bố A: XPath xử lý một tài
liệu XML như một cây
inter-related branches and nodes. liên ngành liên quan và các nút.
Statement B: A node can be of any type, such as an Báo cáo B: Một nút có thể được các loại
bất kỳ, chẳng hạn như một
y yp , y yp,
element, attribute, processing instruction (PI), comment, phần tử, thuộc tính, xử lý lệnh (PI),
bình luận,
text, or namespace. văn bản, hoặc tên miền không gian.
gg
pp
gg
sai.
True.
,,
True.
sai.
Ver. Ver. 1.0 1.0
True.
Page 24 Trang 24
Which one of the following statements will you use to Mà một trong những câu sau đây bạn
sẽ sử dụng để
display the value of an attribute named partno ? hiển thị giá trị của một thuộc tính partno
tên?
a. <xsl:text select=“partno”/> a. <xsl:text select="partno"/>
b. <xsl:value-of select= “@partno” /> b. <xsl:value-of select=
"@partno" />
c. <xsl:value-of select= “partno” /> c. <xsl:value-of select=
"partno" />
d. <xsl:value-of select= “@partno” > d. <xsl:value-of select=
"@partno">
b. <xsl:value-of select= “@partno” /> b. <xsl:value-of select=
"@partno" />
Ver. Ver. 1.0 1.0
Page 25 Trang 25
Summary Tóm tắt
Summary Tóm tắt
The if and choose elements in XSLT allow you to format data Nếu và chọn các yếu tố trong
XSLT cho phép bạn định dạng dữ liệu
based on a condition. dựa trên một điều kiện.
The if element provides a simple if-then construct. Các phần tử nếu cung cấp một đơn giản
nếu-sau đó xây dựng. It has a Nó có một
single test attribute, which specifies the criteria for performing kiểm tra thuộc tính duy nhất,
xác định các tiêu chí để thực hiện
an action. một hành động.
The choose element selects one element from a number of Các yếu tố chọn lựa chọn một
phần tử từ một số
possible alternatives It consists of a number of when có thể lựa chọn thay thế Nó bao gồm
một số khi
possible alternatives. có thể lựa chọn thay thế. It consists of a number of when Nó bao gồm
một số khi
elements, followed by an optional otherwise element. thành phần, tiếp theo là một yếu tố
khác tùy chọn.
The XPath language is used to search and retrieve information Ngôn ngữ XPath được sử
dụng để tìm kiếm và lấy thông tin
from an XML document. từ một tài liệu XML.
The primary purpose of XPath is to address parts of an XML Mục đích chính của XPath là
địa chỉ các phần của một XML
document, and manipulate strings, numbers, and Boolean tài liệu, và thao tác chuỗi, số, và
Boolean
values. giá trị.
Ver. Ver. 1.0 1.0
Page 26 Trang 26
XPath expressions can match specific patterns, retrieve XPath biểu thức có thể kết hợp các
mô hình cụ thể, lấy
results, and perform additional operations relative to the kết quả, và thực hiện các hoạt động
bổ sung liên quan đến
context of the returned nodes. bối cảnh của các nút quay trở lại.
XPath provides the following types of functions: XPath cung cấp các loại sau đây của các
chức năng:
ti : Used for basic string operations such as finding the ti: Được sử dụng cho các hoạt động
chuỗi cơ bản như tìm kiếm
string : Used for basic string operations, such as finding the chuỗi: Được sử dụng cho các
hoạt động chuỗi cơ bản, chẳng hạn như việc tìm kiếm
length of a string or changing a string from uppercase to chiều dài của chuỗi hoặc thay đổi
một chuỗi từ chữ hoa để
lowercase. chữ thường.
node-set : Used to manipulate node sets or return information node-thiết lập: Được sử dụng
để thao tác các bộ nút hoặc thông tin trở lại
about node sets. về nút bộ.
Boolean : Used to return either true or false based on the Boolean: Sử dụng để trả về hoặc là
đúng hoặc sai dựa trên
argument passed to it. đối số truyền cho nó.
numeric : Used to perform calculations on numeric values. số: Sử dụng để thực hiện các tính
toán về giá trị số.
pp
The HTML code in an XSLT style sheet is used to display data Các mã HTML trong một
bảng mẫu XSLT được sử dụng để hiển thị dữ liệu
in different formats. trong các định dạng khác nhau.
The import element is used to import one XSLT style sheet to Các phần tử nhập khẩu được
sử dụng để nhập khẩu một XSLT style sheet để
Ver. Ver. 1.0 1.0
another XSLT style sheet. một phong cách trang XSLT.

IWCD_Session_22.pdf
Page 1 Trang 1
Identify the XML Document Object Model Xác định các tài liệu XML Object Model
Validate an XML document against an XML schema using the Xác nhận một tài liệu XML
với một lược đồ XML bằng cách sử dụng
Document Object Model Document Object Model
Apply a Style Sheet to an XML document Áp dụng một Style Sheet cho một tài liệu XML
Ver. Ver. 1.0 1.0
Page 2 Trang 2
Identifying the XML Document Object Model Xác định mô hình Đối tượng Tài liệu
XML
DOM defines the logical structure of documents. DOM xác định cấu trúc hợp lý của tài liệu.
Identifying the XML Document Object Model Xác định mô hình Đối tượng Tài liệu
XML
DOM provides an Application Programming Interface (API) DOM cung cấp một giao diện
lập trình ứng dụng (API)
for dynamically accessing and manipulating a document. cho tự động truy cập và thao tác các
tài liệu.
The DOM objects have associated methods and properties Các đối tượng DOM có liên quan
đến phương pháp và tài sản
jj
pp Trang
to access and manipulate a document. để truy cập và thao tác một tài liệu.
A DOM-enabled parser is required to use the features A-kích hoạt bộ phân tích DOM được
yêu cầu phải sử dụng các tính năng
provided by DOM. cung cấp bởi DOM.
pp
yy
A DOM-enabled parser: Một DOM cho phép phân tích cú pháp:
Parses an XML document to ascertain its validity. Phân tích một tài liệu XML để xác định
tính hợp lệ của nó.
Creates an in-memory representation of the XML document as Tạo ra một đại diện trong bộ
nhớ của các tài liệu XML như
Creates an in memory representation of the XML document as Tạo ra một trong các đại diện
bộ nhớ của các tài liệu XML như
a tree structure. một cấu trúc cây.
Ver. Ver. 1.0 1.0
Page 3 Trang 3
Implementation of DOM in MSXML Parser Thực hiện các DOM trong MSXML Parser
MSXML parser: MSXML phân tích cú pháp:
Implementation of DOM in MSXML Parser Thực hiện các DOM trong MSXML Parser
Is the Microsoft implementation of DOM. Là việc thực hiện Microsoft của DOM.
Provides fundamental as well as added interfaces to access Cung cấp cơ bản cũng như thêm
vào giao diện để truy cập
The following figure represents how a DOM tree is used by Hình dưới đây thể hiện như thế
nào một cây DOM được sử dụng bởi
applications to access data. ứng dụng để truy cập dữ liệu.
XML XML
Document Tài liệu
MSXML Library Thư viện MSXML
Parsed Phân tích cú pháp
DOM Tree DOM Tree
Root Root
Application Ứng dụng
Parser Phân tích cú pháp
Child Trẻ em
Child Trẻ em
Child Trẻ em
Text Văn bản
Text Văn bản
Ver. Ver. 1.0 1.0
Page 4 Trang 4
XML DOM Objects and Methods XML DOM Đối tượng và phương pháp
Following are the key DOM objects: Sau đây là các đối tượng DOM khoá:
XML DOM Objects and Methods XML DOM Đối tượng và phương pháp
Element Element
Node Node
NodeList NodeList
Attr Attr
Text Văn bản
CDataSection CDataSection
ParseError ParseError
Ver. Ver. 1.0 1.0
Page 5 Trang 5
XML DOM Objects and Methods (Contd.) XML DOM Đối tượng và phương pháp
(Contd.)
(Contd.)
Element Element
Node Node
It is the top-level object that implements all the Đây là đối tượng cấp hàng đầu mà thực hiện
tất cả các
basic DOM methods. DOM phương pháp cơ bản.
It also has methods that support XSLT. Nó cũng có phương pháp hỗ trợ XSLT.
It has methods that can be used to navigate, Nó có phương pháp có thể được sử dụng để điều
hướng,
NodeList NodeList
Attr Attr
Text Văn bản
It has methods that can be used to navigate, Nó có phương pháp có thể được sử dụng để điều
hướng,
query, and modify the content and structure of truy vấn, và sửa đổi các nội dung và cấu trúc
của
an XML document. một tài liệu XML.
Some of the methods provided by this object Một số phương pháp cung cấp bởi các đối tượng
này
are createElement() , createAttribute() , được createElement (),
createAttribute (),
dd
createComment() , and createTextNode() . createComment (), và createTextNode ().
Some of the properties provided by this object that Một số tính chất cung cấp bởi đối tượng
này
help in manipulating the information contained in giúp đỡ trong việc điều khiển các thông tin
có trong
the object are async , childNodes , firstChild , đối tượng được async,
childNodes, firstChild,
documentElement xml and readyState documentElement xml và readyState
documentElement , xml , and readyState . documentElement, xml, và readyState.
Ver. Ver. 1.0 1.0
Page 6 Trang 6
(Contd.)
(Contd.)
Element Element
Node Node
It represents all the element nodes in an XML Nó thể hiện tất cả các nút phần tử trong XML
The attributes associated with the elements are Các thuộc tính liên quan với các yếu tố được
NodeList NodeList
Attr Attr
Text Văn bản
The attributes associated with the elements are Các thuộc tính liên quan với các yếu tố được
considered to be the properties of the elements coi là tài sản của các phần tử
rather than their child elements. chứ không phải là thành phần con của họ.
Some of the methods of this object are Một số phương pháp của đối tượng này
also inherited from the Node object. cũng kế thừa từ đối tượng Node.
jj
Some of the methods provided by this object are Một số phương pháp cung cấp bởi các đối
tượng này
getAttribute() , getAttribute (),
getElementsByTagName() , getElementsByTagName (),
normalize() , and removeAttributeNS() . bình thường hóa (), và removeAttributeNS ().
Ver. Ver. 1.0 1.0
Page 7 Trang 7
(Contd.)
(Contd.)
Element Element
Node Node
It represents a single node in the XML document Nó thể hiện một nút duy nhất trong tài liệu
XML
NodeList NodeList
Attr Attr
Text Văn bản
tree structure. cấu trúc cây.
It provides methods to work with child elements. Nó cung cấp phương pháp để làm việc với
các phần tử con.
Some of the methods of this object are Một số phương pháp của đối tượng này
appendChild(newChild) , appendChild (newChild),
insertBefore(newNode,refNode) , insertBefore (newNode, refNode),
and removeChild(nodeName) . và removeChild (nodename).
Ver. Ver. 1.0 1.0
Page 8 Trang 8
(Contd.)
(Contd.)
Element Element
Node Node
NodeList NodeList
Attr Attr
Text Văn bản
It provides a list of nodes present in an XML Nó cung cấp một danh sách các nút xuất hiện
trong một XML
document for manipulation. tài liệu cho thao tác.
This object enables you to iterate through a đối tượng này cho phép bạn chuyển đổi thông qua
một
collection of nodes. bộ sưu tập các nút.
Some of the method of this object are item() Một số phương pháp của đối tượng này là
mục ()
and nextNode() . và nextNode ().
Ver. Ver. 1.0 1.0
Page 9 Trang 9
(Contd.)
(Contd.)
Element Element
Node Node
NodeList NodeList
Attr Attr
Text Văn bản
It represents an attribute of the Element object. Nó thể hiện một thuộc tính của đối tượng
Element.
It is also a Node and inherits various attributes Nó cũng là một Node và kế thừa các thuộc
tính khác nhau
and methods of N d object và phương pháp của đối tượng d N
and methods of Node object. và phương pháp của đối tượng Node.
An attribute is not considered by the DOM to be Một thuộc tính không được coi là của DOM
được
a child node of an element, but rather a property. một nút con của một phần tử, mà là một tài
sản.
Ver. Ver. 1.0 1.0
Page 10 Trang 10
(Contd.)
(Contd.)
Element Element
Node Node
NodeList NodeList
Attr Attr
Text Văn bản
It represents the text inside an XML element in Nó đại diện cho văn bản bên trong một phần
tử XML
the node tree cây nút
the node tree. cây nút.
The splitText() method is associated with Các splitText () phương pháp có liên
quan
this object. đối tượng này.
Ver. Ver. 1.0 1.0
Page 11 Trang 11
(Contd.)
(Contd.)
Element Element
Node Node
NodeList NodeList
Attr Attr
Text Văn bản
It represents the CDATA sections in the node Nó đại diện cho các phần CDATA tại nút
tree. cây.
This node is used to escape the parts of text nút này dùng để thoát khỏi các phần của văn bản
that normally would be recognized as markup. bình thường được công nhận là đánh dấu.
Ver. Ver. 1.0 1.0
Page 12 Trang 12
(Contd.)
(Contd.)
Element Element
Node Node
NodeList NodeList
Attr Attr
Text Văn bản
It returns information about the most recent Nó trả về thông tin về việc gần đây nhất
parse error. phân tích lỗi.
It provides properties to retrieve information Nó cung cấp tài sản để lấy thông tin
It provides properties to retrieve information, Nó cung cấp tài sản để lấy thông tin,
such as the error code, the error text, and the chẳng hạn như các mã lỗi, lỗi văn bản, và
line that caused the error. dòng gây ra lỗi.
Some of the properties of this object are Một số các thuộc tính của đối tượng này
errorCode , reason , line , and srcText . errorCode, lý do, đường thẳng, và srcText.
Ver. Ver. 1.0 1.0
Page 13 Trang 13
XML DOM Objects in Scripts XML DOM đối tượng trong kịch bản
The DOM objects can be used within scripting languages Các đối tượng DOM có thể được sử
dụng trong ngôn ngữ kịch bản
XML DOM Objects in Scripts XML DOM đối tượng trong kịch bản
such as JavaScript and VBScript. chẳng hạn như JavaScript và VBScript.
Using DOM objects in scripts allow dynamically applying a Sử dụng DOM các đối tượng
trong các kịch bản cho phép tự động áp dụng
style sheet to an XML document. phong cách trang thành một tài liệu XML.
The code for using DOM objects for accessing an XML Các mã số cho các đối tượng sử dụng
DOM để truy cập một XML
document needs to be used as an HTML page. tài liệu cần được sử dụng như một trang
HTML.
Ver. Ver. 1.0 1.0
Page 14 Trang 14
Validating an XML Document Against an XML Schema Using DOM Chứng thực một
tài liệu XML chống một lược đồ XML sử dụng DOM
DOM: DOM:
Validating an XML Document Against an XML Schema Using DOM Chứng thực một
tài liệu XML chống một lược đồ XML sử dụng DOM
Used to validate XML documents against XML schemas. Được sử dụng để xác nhận các tài
liệu XML với các lược đồ XML.
Ensures proper grammar and proper formation of the XML Đảm bảo đúng ngữ pháp và hình
thành phù hợp của XML
DOMDocument object: DOMDocument đối tượng:
Main object in a DOM. Đối tượng chính trong một DOM.
Represents the top node in every document tree. Đại diện các nút hàng đầu tại mỗi cây tài
liệu.
Used to load an XML document, parse it, and validate it. Được sử dụng để tải một tài liệu
XML, phân tích nó, và xác nhận nó.
XMLSchemaCache object: XMLSchemaCache đối tượng:
Loads the schema document associated with the XML Tải các tài liệu liên quan với lược đồ
XML
Ver. Ver. 1.0 1.0
Page 15 Trang 15
Accessing an XML Document by Using the XMLSchemaCache Object Truy cập một tài
liệu XML bằng cách sử dụng các đối tượng XMLSchemaCache
Used to hold a collection of schema documents that Được sử dụng để giữ một bộ sưu tập các
văn bản lược đồ đó
Accessing an XML Document by Using the XMLSchemaCache Object Truy cập một tài
liệu XML bằng cách sử dụng các đối tượng XMLSchemaCache
specifies the rules to which XML documents must conform. quy định cụ thể các quy tắc mà
các tài liệu XML phải phù hợp.
Following table describes some methods provided by the Bảng sau đây mô tả một số phương
pháp cung cấp bởi
XMLSchemaCache object. XMLSchemaCache đối tượng.
Method Phương pháp
add(namespaceURI, thêm (namespaceURI,
variable) biến)
This method adds a new schema to the collection and also Phương pháp này cho biết thêm
một lược đồ mới vào bộ sưu tập và cũng
associates the specified namespaceURI with the schema. liên kết các namespaceURI
quy định với các lược đồ.
addCollection(XMLSch addCollection (XMLSch
emaCollection emaCollection
object) đối tượng)
This method adds schemas from other schema collections. Phương pháp này cho biết thêm
các lược đồ từ bộ sưu tập lược đồ khác.
It also ensures that the namespaceURIs of the different Nó cũng đảm bảo rằng các
namespaceURIs của khác nhau
schemas do not clash. các lược đồ không đụng độ.
get(namespaceURI) get (namespaceURI)
This method returns a node that contains the <schema> Phương thức này trả về một nút có
chứa các <schema>
namespaceURI(index namespaceURI (chỉ số
number) số)
This method returns the namespace that is associated with Phương thức này trả về tên miền
không gian đó là liên kết với
the schema at the specified index number. các lược đồ tại số chỉ mục được chỉ định.
remove(namespaceURI) loại bỏ (namespaceURI)
This method removes a schema from a collection. Phương pháp này loại bỏ một lược đồ từ
bộ sưu tập một.
Ver. Ver. 1.0 1.0
Page 16 Trang 16
Validating an XML Document Against the Schema Chứng thực một tài liệu XML
Schema Chống lại
To write a script that validates an XML document against Để viết một kịch bản xác nhận một
tài liệu XML với
Validating an XML Document Against the Schema Chứng thực một tài liệu XML
Schema Chống lại
the schema, you need to follow the given tasks: các lược đồ, bạn cần phải thực hiện theo các
nhiệm vụ được giao:
1. 1. Create the user interface to accept the name of the XML Tạo giao diện người dùng để
chấp nhận tên của XML
document and the XML schema. tài liệu và các lược đồ XML.
2. 2. Write the code to load the XML document. Viết mã để tải các tài liệu XML.
3. 3. Write the code to add the XML schema in the Viết mã để thêm vào các lược đồ XML
trong
XMLSchemaCache object. XMLSchemaCache đối tượng.
4 W it th 4 W nó lần thứ
dt dt
lid t th XML d t nắp thứ XML d
tt
it th nó lần thứ
4. 4. Write the code to validate the XML document against the Viết mã để xác thực các tài
liệu XML chống lại
Ver. Ver. 1.0 1.0
Page 17 Trang 17
Demo: Validating an XML Document Demo: Validating một tài liệu XML
Demo: Validating an XML Document Demo: Validating một tài liệu XML
The head office of CyberShoppe receives data in the form of Trụ sở chính của CyberShoppe
nhận dữ liệu ở dạng
XML documents from its branches. Các tài liệu XML từ các chi nhánh của nó. In order to
ensure the Để đảm bảo
consistency of data sent by the branches, the head office nhất quán của dữ liệu được gửi bởi
các chi nhánh, trụ sở chính
maintains the definitions for the structures of documents in duy trì các định nghĩa cho các cấu
trúc của tài liệu
maintains the definitions for the structures of documents in duy trì các định nghĩa cho các cấu
trúc của tài liệu
schemas. các lược đồ. After receiving data from the branches, the head Sau khi nhận được dữ
liệu từ các ngành, đầu
office needs to verify that the data conforms to the schema of văn phòng cần phải xác minh
rằng các dữ liệu phù hợp với các lược đồ của
the respective document. các tài liệu tương ứng. For this, the head office needs to Đối với
điều này, trụ sở chính cần
pp
write a script that validates the data stored in an XML viết một kịch bản xác nhận các dữ liệu
được lưu trữ trong một XML
document against a schema. tài liệu chống lại một lược đồ. You will initially do the testing
for Bạn ban đầu sẽ làm các xét nghiệm
the product.xml file. các tập tin product.xml.
Ver. Ver. 1.0 1.0
Page 18 Trang 18
Applying a Style Sheet to an XML Document Áp dụng một Style Sheet cho một tài liệu
XML
Style sheet object that passes into the transformNode Phong cách trang tính đối tượng mà
đi vào transformNode các
Applying a Style Sheet to an XML Document Áp dụng một Style Sheet cho một tài liệu
XML
method needs to be recompiled every time the method is Phương pháp cần phải được biên
dịch lại mỗi khi phương pháp này là
called. gọi là.
Compiling a style sheet means setting all its template rules Lập một bảng mẫu có nghĩa là
thiết lập các quy tắc mẫu của mình
in an executable state. trong một nhà nước thực thi.
Using the XSLTemplate object and the XSLProcessor Sử dụng đối tượng
XSLTemplate và XSLProcessor
object to perform transformation facilitates the following: đối tượng để thực hiện chuyển đổi
tạo điều kiện sau đây:
Reduction of overheads Giảm chi phí chung
Increase in the performance of an XSLT application Tăng hiệu suất của một ứng dụng XSLT
Ver. Ver. 1.0 1.0
Page 19 Trang 19
The XSLTemplate Object Các đối tượng XSLTemplate
Is a DOM object that is used to access an XSLT style sheet. Là một đối tượng DOM được sử
dụng để truy cập một trang phong cách XSLT.
The XSLTemplate Object Các đối tượng XSLTemplate
Used to hold a cached style sheet that can then be Được sử dụng để tổ chức một bảng mẫu
lưu trữ để sau đó có thể được
dynamically associated with an XML document. động liên kết với một tài liệu XML.
Before a style sheet document can be applied to an XML Trước khi một tài liệu bảng mẫu có
thể được áp dụng cho một XML
yy
pp Trang
document, it is converted into a tree structure by the parser. tài liệu, nó được chuyển thành
một cấu trúc cây bằng phân tích cú pháp.
XSLT tree structure is loaded into the memory of the XSLT cấu trúc cây được nạp vào bộ
nhớ của
computer and used to process the XML document. máy tính và sử dụng để xử lý tài liệu
XML.
pp
pp
Ver. Ver. 1.0 1.0
Page 20 Trang 20
The XSLProcessor Object (Contd.) Các đối tượng XSLProcessor (Contd.)
Used to apply a style sheet to an XML document and then Được sử dụng để áp dụng một
bảng mẫu cho một tài liệu XML và sau đó
The XSLProcessor Object (Contd.) Các đối tượng XSLProcessor (Contd.)
process that document. quá trình tài liệu đó.
Applies the given XSLT document to a specific XML Áp dụng các tài liệu XSLT cho một
XML cụ thể
Transforms an XML document by using the XSLT style Chuyển đổi một tài liệu XML bằng
cách sử dụng phong cách XSLT
sheet. bảng.
JavaScript code to create an XSLProcessor object is as Mã JavaScript để tạo một đối
tượng XSLProcessor như
pp
jj
follows: sau:
var xslprocobj= xsltobj.createProcessor(); var xslprocobj = xsltobj.createProcessor ();
Ver. Ver. 1.0 1.0
Page 21 Trang 21
Demo: Applying a Style Sheet to an XML Document During Run Time Demo: Áp dụng
một Style Sheet cho một tài liệu XML Trong Thời Run
Demo: Applying a Style Sheet to an XML Document During Run Time Demo: Áp dụng
một Style Sheet cho một tài liệu XML Trong Thời Run
CyberShoppe sells its products through an e-commerce Web CyberShoppe bán sản phẩm của
mình thông qua một trang web thương mại điện tử
site. trang web. Product details, such as product name, description, price, Sản phẩm chi tiết,
chẳng hạn như tên sản phẩm, mô tả, giá cả,
and quantity, need to be displayed. và số lượng, cần phải được hiển thị.
A customer can choose to view the product details either as a Một khách hàng có thể chọn để
xem chi tiết sản phẩm hoặc như một
table or as a bulleted list. bảng hoặc là một danh sách gạch đầu dòng.
Ver. Ver. 1.0 1.0
Page 22 Trang 22
The following XML document, customer.xml contains Các tài liệu XML sau,
customer.xml chứa
customer details: khách hàng chi tiết:
<CUSTOMER> <Customer>
<CUSTOMERNAME>Harold Johnson</CUSTOMERNAME> <CUSTOMERNAME>
Harold Johnson </ CUSTOMERNAME>
<ADDRESS>56, Regent Road</ADDRESS> 56 <ADDRESS>, Regent đường </
ADDRESS>
<CITY>London</CITY> <CITY> London </ TP>
//
<COUNTRY>UK</COUNTRY> <COUNTRY> Anh </ COUNTRY>
<PHONE>444-425-2355</PHONE> <PHONE> 444-425-2355 </ PHONE>
</CUSTOMER> </ KHÁCH HÀNG>
Create a Web page that accepts the name of the XML file in a Tạo một trang web mà chấp
nhận tên của tập tin XML trong một
pg pg
pp
text box. hộp văn bản. When you click the Submit hyperlink, a JavaScript Khi bạn nhấp vào
Gửi liên kết, một JavaScript
code should load the XML document and extract the mã nên tải các tài liệu XML và giải nén
CUSTOMERNAME element. CUSTOMERNAME yếu tố. The address and phone number
Các địa chỉ và số điện thoại
should be changed to 94 McFarlane Avenue and 412 233 nên được thay đổi tới 94 McFarlane
Avenue và 412 233
Ver. Ver. 1.0 1.0
should be changed to 94, McFarlane Avenue and 412-233- nên được thay đổi để 94,
McFarlane Avenue và 412-233 -
2344, respectively, by using XML DOM objects. 2344, tương ứng, bằng cách sử dụng XML
DOM đối tượng.
Page 23 Trang 23
Which of the following methods of the DOMDocument object Mà trong những phương pháp
sau đây của đối tượng DOMDocument
will you use to create an element node that has a sẽ bạn sử dụng để tạo ra một nút phần tử có
một
namespace prefix associated with it? namespace prefix liên kết với nó?
a. createElement() a. createElement ()
b. createTextNode() b. createTextNode ()
c. createNode() c. createNode ()
d. createAttribute() d. createAttribute ()
c. createNode() c. createNode ()
Ver. Ver. 1.0 1.0
Page 24 Trang 24
You have written a script to load an XML document and Bạn đã viết một kịch bản để tải một
tài liệu XML và
validate it against a schema. xác nhận nó với một lược đồ. Which of the following Điều nào
sau đây
properties of the DOMDocument object will you use to thuộc tính của đối tượng
DOMDocument bạn sẽ sử dụng để
ensure that the script waits till the XML document is loaded đảm bảo rằng kịch bản chờ đợi
cho đến khi tài liệu XML được tải
bf bf
ti ti
th thứ
tf th tf thứ
d ? d?
before executing the rest of the code? trước khi thực hiện phần còn lại của mã này?
a. async a. async
b. readyState b. readyState
c. documentElement c. documentElement
d. xml d. xml
a. async a. async
Ver. Ver. 1.0 1.0
Page 25 Trang 25
Which of the following properties of the IXMLDOMNode Những tài sản sau đây của
IXMLDOMNode
object will you use to return the text associated with a node? đối tượng mà bạn sẽ sử dụng để
trả lại văn bản liên kết với một nút?
a. nodeName a. nodename
b. xml b. xml
c. nodeType c. nodeType
d. nodeValue d. nodeValue
d. nodeValue d. nodeValue
Ver. Ver. 1.0 1.0
Page 26 Trang 26
Which of the following properties of the Những tài sản sau đây của
IXMLDOMParseError object will you use to retrieve the IXMLDOMParseError đối tượng
mà bạn sẽ sử dụng để lấy
string containing the line that caused an error while parsing chuỗi có chứa các dòng gây ra lỗi
khi phân tích cú pháp
an XML document? một tài liệu XML?
a. srcText a. srcText
b. linePos b. linePos
c. reason c lý do
d. line d. dòng
a. srcText a. srcText
Ver. Ver. 1.0 1.0
Page 27 Trang 27
Which one of the following is an object that represents the Mà một trong những điều sau đây
là một đối tượng đại diện cho
complete XML document map? hoàn thành bản đồ tài liệu XML?
a. IXMLDOMNode a. IXMLDOMNode
b. DOMDocument b. DOMDocument
c. IXMLDOMNodeList c. IXMLDOMNodeList
d. IXMLDOMParseError d. IXMLDOMParseError
b. DOMDocument b. DOMDocument
Ver. Ver. 1.0 1.0
Page 28 Trang 28
Summary Tóm tắt
Summary Tóm tắt
The XMLSchemaCache object is used to associate an XML Các đối tượng
XMLSchemaCache được sử dụng để liên kết một XML
document with an XSD document. tài liệu với một tài liệu XSD.
The XMLSchemaCache object is used to hold a collection of Các đối tượng
XMLSchemaCache được sử dụng để giữ một bộ sưu tập của
schema documents that specifies the rules to which XML lược đồ các tài liệu có quy định cụ
thể các quy tắc mà XML
documents must conform. tài liệu phải phù hợp.
The XSLTemplate object is used to access an XSLT style Các đối tượng XSLTemplate
được sử dụng để truy cập một phong cách XSLT
sheet. bảng.
The XSLProcessor object is used to apply style sheets on a Các đối tượng
XSLProcessor được sử dụng để áp dụng phong cách trang trên
given XML document. cho tài liệu XML.
The XSLProcessor object is created using the Các đối tượng XSLProcessor được tạo
bằng
The XSLProcessor object is created using the Các đối tượng XSLProcessor được tạo
bằng
createProcessor() method. createProcessor () phương pháp.
The XSLProcessor object is associated with an XML Các đối tượng XSLProcessor có
liên quan đến XML
document by using the input property of the XSLProcessor tài liệu bằng cách sử dụng các
tài sản đầu vào của XSLProcessor
Ver. Ver. 1.0 1.0
Page 29 Trang 29
The XSLProcessor object provides the transform() Các đối tượng XSLProcessor
cung cấp các chuyển đổi ()
method to transform an XML document according to the phương pháp để chuyển đổi một tài
liệu XML theo
information provided in an XSLT style sheet. thông tin trong một bảng mẫu XSLT.
DOM is an application-programming interface that allows an DOM là một-giao diện lập trình
ứng dụng cho phép một
application to access the contents of an XML document ứng dụng truy cập các nội dung của
một tài liệu XML
application to access the contents of an XML document. ứng dụng truy cập các nội dung của
một tài liệu XML.
DOM objects allow you to access and manipulate XML DOM đối tượng cho phép bạn truy
cập và thao tác XML
The MSXML parser loads an XML document and creates a Các phân tích cú pháp MSXML
tải một tài liệu XML và tạo ra một
The MSXML parser loads an XML document and creates a Các phân tích cú pháp MSXML
tải một tài liệu XML và tạo ra một
tree structure that represents the various components of the cơ cấu cây đại diện cho các thành
phần khác nhau của
The basic building block of the tree structure is a node. Các khối xây dựng cơ bản của cấu
trúc cây là một nút. A node Một nút
is a container that holds information about the elements, là một container chứa thông tin về
các yếu tố,
attributes, and content stored in an XML document. thuộc tính, và nội dung lưu trữ trong một
tài liệu XML.
Ver. Ver. 1.0 1.0
Page 30 Trang 30
Some DOM objects that are used to manipulate data in a Một số đối tượng DOM được sử
dụng để thao tác dữ liệu trong một
document are: tài liệu là:
Element Element
Node Node
NodeList NodeList
Attr Attr
Text Văn bản
The Document object is the top-level object in the XML DOM. Các đối tượng tài liệu
là đối tượng cấp hàng đầu trong DOM XML.
This object provides various properties and methods that help Đối tượng này cung cấp tính
khác nhau và các phương pháp có thể trợ giúp
you to navigate, query, and modify the content and structure of bạn để điều hướng, truy vấn,
và sửa đổi các nội dung và cấu trúc của
XML documents. Các tài liệu XML.
The Element object represents all the element nodes in a Các đối tượng phần tử đại diện
cho tất cả các nút phần tử trong một
Ver. Ver. 1.0 1.0
The Element object represents all the element nodes in a Các đối tượng phần tử đại diện
cho tất cả các nút phần tử trong một
Page 31 Trang 31
The Node object represents a node in the XML document Các đối tượng Node đại diện cho
một nút trong tài liệu XML
structure. cấu trúc. This object provides methods to work with the child Đối tượng này cung
cấp phương pháp để làm việc với trẻ em
elements. yếu tố.
The NodeList object allows you to iterate through a collection Các đối tượng NodeList
cho phép bạn chuyển đổi thông qua một bộ sưu tập
of nodes các nút
of nodes. các nút.
The Attr object represents an attribute of an Element object. Các đối tượng attr đại
diện cho một thuộc tính của một đối tượng Element.
The Text object represents the text inside an XML element in Các đối tượng văn bản đại
diện cho văn bản bên trong một phần tử XML
the node tree cây nút
the node tree. cây nút.
The ParseError object returns information about the most Các đối tượng ParseError
trả về thông tin về nhiều nhất
recent parse error. gần đây phân tích lỗi.
Ver. Ver. 1.0 1.0

IWCD_Session_23.pdf
Page 1 Trang 1
Categorize the types of DOM nodes Phân loại các loại của các nút DOM
Identify the SAX API Xác định các API SAX
Identify differences between the XPath and DOM data models Xác định sự khác biệt giữa các
XPath và DOM mô hình dữ liệu
Ver. Ver. 1.0 1.0
Page 2 Trang 2
Types of DOM Nodes Các loại Các nút DOM
Types of DOM Nodes Các loại Các nút DOM
Document Object Model (DOM) specifies that everything in Document Object Model
(DOM) quy định rằng mọi thứ trong
an XML document is represented by a node. một tài liệu XML được đại diện bởi một node.
The XML parser creates a DOM tree for the XML document Các phân tích cú pháp XML tạo
ra một cây DOM cho tài liệu XML
after parsing it. sau khi phân tích nó.
In the DOM tree, every node type is represented by a Trong cây DOM, mỗi loại nút được
biểu diễn bằng một
named constant and a corresponding numeric constant. tên liên tục và một số tương ứng
không đổi.
Some of the commonly used node types are: Một số nút các loại được sử dụng phổ biến là:
yy
yp yp
Element Element
Attr Attr
Text Văn bản
Comment Bình luận
Ver. Ver. 1.0 1.0
Page 3 Trang 3
Types of DOM Nodes (Contd.) Các loại các nút DOM (Contd.)
The following code depicts the usage of the DOM nodes: Các mã sau đây mô tả việc sử dụng
các nút DOM:
<html> <html>
<head> <head>
function loadXMLDoc(dname) chức năng loadXMLDoc (dname)
{ var xmlDoc; {Var xmlDoc;
// Code for Internet Explorer / / Code cho Internet Explorer
if (window.ActiveXObject) if (window.ActiveXObject)
{ xmlDoc=new ActiveXObject("Microsoft.XMLDOM"); {XmlDoc = new ActiveXObject
("Microsoft.XMLDOM");
}}
xmlDoc.async=false; xmlDoc.async = false;
xmlDoc.load(dname); xmlDoc.load (dname);
return(xmlDoc); trở lại (xmlDoc);
Ver. Ver. 1.0 1.0
}}
Page 4 Trang 4
The following code depicts the usage of the DOM nodes: Các mã sau đây mô tả việc sử dụng
các nút DOM:
(Contd.) (Contd.)
</head> </ Head>
<body> <body>
xmlDoc=loadXMLDoc("Book.xml"); xmlDoc = loadXMLDoc ("Book.xml");
var x=xmlDoc.documentElement; var x = xmlDoc.documentElement;
var y = x.childNodes; var y = x.childNodes;
for (i=0;i<y.length;i++) cho (i = 0; y.length <i; i + +)
{ document.write("Nodename: " + y[i].nodeName); {Document.write ("TÊN_NÚT ghi:" + y
[i] nodename.);
document.write(" (nodetype: " + y[i].nodeType + document.write ("(nodetype:" + y [i] +.
nodeType
")<br />");} ") <br />");}
Ver. Ver. 1.0 1.0
</body> </html> </ Body> </ html>
Page 5 Trang 5
The SAX API Các API SAX
The SAX API Các API SAX
Simple API for XML (SAX) is a public domain software API đơn giản cho XML (SAX) là
một phần mềm tên miền công cộng
pp
((
))
pp
created by the members of the XML-DEV mailing list. được tạo ra bởi các thành viên trong
danh sách gửi thư DEV-XML.
The SAX API is used to process XML documents. Các API SAX được sử dụng để trình các
tài liệu XML.
The software that implements SAX to process the XML Các phần mềm mà thực hiện SAX để
xử lý XML
The software that implements SAX to process the XML Các phần mềm mà thực hiện SAX để
xử lý XML
documents is called a SAX parser. tài liệu được gọi là phân tích cú pháp SAX.
A SAX parser is an event-driven parser that reads the Một phân tích SAX là hướng phân tích
sự kiện mà đọc
syntax constructs of the XML document serially from the các cấu trúc cú pháp của các tài
liệu XML tuần tự từ
syntax constructs of the XML document serially from the các cấu trúc cú pháp của các tài
liệu XML tuần tự từ
beginning to the end. đầu đến cuối.
A SAX parser does not load the entire XML document in the Một phân tích SAX không tải
các tài liệu XML trong toàn bộ
memory but only a context of the XML document during bộ nhớ nhưng chỉ có một bối cảnh
của các tài liệu XML trong
memory but only a context of the XML document during bộ nhớ nhưng chỉ có một bối cảnh
của các tài liệu XML trong
processing. chế biến.
Ver. Ver. 1.0 1.0
Page 6 Trang 6
The SAX API (Contd.) Các API SAX (Contd.)
Comparing DOM and SAX: So sánh DOM và SAX:
pp
gg
DOM DOM
SAX SAX
DOM defines various methods and DOM xác định các phương pháp khác nhau và
ti th t th ti t
bb
dt dt
SAX defines various event listeners that SAX định nghĩa lắng nghe sự kiện khác nhau
tif th SAX tif thứ SAX
ff
tt
hh
properties that can be used to process tài sản có thể được dùng để xử lý
any element of XML document present in Hiện nay bất kỳ yếu tố của tài liệu XML
the DOM tree. cây DOM.
notify the SAX parser of events, such as thông báo cho bộ phân tích SAX của các sự kiện,
chẳng hạn như
start of a document, end of a document, bắt đầu của một tài liệu, kết thúc một tài liệu,
start of a tag, and end of a tag. bắt đầu của một thẻ, và kết thúc của tag một.
While traversing an XML document by Trong khi đi qua một tài liệu XML bằng
using DOM, it is possible to navigate back bằng cách sử dụng DOM, có thể để di chuyển trở
lại
In SAX, information can be accessed in Trong SAX, thông tin có thể được truy cập vào
the sequential order only. thứ tự liên tiếp chỉ.
to an upper node in the tree. đến một nút trên trong cây.
DOM consumes more memory than SAX DOM tiêu tốn nhiều bộ nhớ hơn SAX
because it builds an object tree bởi vì nó xây dựng một cây đối tượng
representation of an XML document in the đại diện của một tài liệu XML trong
SAX consumes lesser memory and is SAX tiêu thụ bộ nhớ thấp hơn và là
preferred for parsing large XML ưa thích để phân tích cú pháp XML lớn
memory. bộ nhớ.
Ver. Ver. 1.0 1.0
Page 7 Trang 7
Implementing SAX: Thực hiện SAX:
pp
gg
SAX uses classes and interfaces defined in the SAX API to SAX sử dụng các lớp và giao
diện được định nghĩa trong API SAX để
process an XML document in the form of a stream of data. quá trình một tài liệu XML dưới
dạng một dòng dữ liệu.
The SAX API also defines various event listeners that notify Các API SAX cũng xác định
lắng nghe sự kiện khác nhau mà thông báo
the SAX parser of various events. các phân tích SAX của các sự kiện khác nhau.
The SAX parser notifies your SAX application each time it Bộ phân tích SAX SAX của bạn
thông báo cho mỗi ứng dụng thời gian
recognizes any syntax constructs in the XML document that is công nhận bất kỳ cấu trúc cú
pháp trong tài liệu XML đó là
being parsed được phân tích cú pháp
being parsed. được phân tích cú pháp.
The notification is done by means of callback methods, such Việc thông báo được thực hiện
bằng phương tiện của các phương pháp gọi lại, chẳng hạn
as startDocument() , characters() , or như startDocument (), các ký
tự (), hoặc
endDocument() . endDocument (). These methods are defined by handler Những phương
pháp này được xác định bởi bộ xử lý
() ()
yy
interfaces, such as ContentHandler and ErrorHandler . giao diện, chẳng hạn như
ContentHandler và ErrorHandler.
A handler interface defines the methods for specific events. Một giao diện xử lý định nghĩa
các phương thức cho các sự kiện cụ thể.
You need to implement the handler interfaces in the SAX Bạn cần phải thực hiện các giao
diện điều khiển trong SAX
Ver. Ver. 1.0 1.0
application and override the callback methods to receive the ứng dụng và ghi đè lên các
phương thức gọi lại để nhận
notification of parsing events. thông báo phân tích các sự kiện.
Page 8 Trang 8
The following code snippet depicts SAX implementation: Các đoạn mã sau đây mô tả SAX
thực hiện:
 <- Phân tích cú pháp gọi startElement ()
phương pháp ->
<Address> <Address>
 phương pháp ->
<name> Tony </name> <name> Tony </ name>
pháp,
<street> 172,Churchill</street> 172 <street>, Churchill </ phố>
pháp,
<! <!
parser invokes startElement() method, phân tích cú pháp gọi startElement () phương pháp,
<phone-number>01-8282882</phone-number> <phone-number> 01-8282882 </ điện thoại
số>
<! <!
ii
kk
dEl del
t() t ()
th d > th d>
Ver. Ver. 1.0 1.0
 <- Phân tích cú pháp gọi endElement () phương
pháp ->
</Address> </ Địa chỉ>
Page 9 Trang 9
Common SAX Parsers: Parser SAX thường:
Parsers are computer programs or components of a program Phân tích cú pháp là chương
trình máy tính hoặc các thành phần của một chương trình
that analyze the input structure with respect to a given format. rằng phân tích cơ cấu đầu vào
đối với một định dạng nhất định.
Programmers do not need to write low-level code to read and Các lập trình viên không cần
phải viết mã cấp thấp để đọc và
process the XML document text when using parsers. quá trình các văn bản tài liệu XML khi
sử dụng phân tích cú pháp.
In SAX parsing, the parser reads the XML document and Trong SAX phân tích cú pháp, phân
tích cú pháp đọc tài liệu XML và
reports the data found to a handler interface. báo cáo các dữ liệu được tìm thấy với một giao
diện điều khiển.
Some of the common SAX parsers that s pport SAX2 are Một số các bộ phân tích SAX phổ
biến mà s SAX2 pport được
Some of the common SAX parsers that support SAX2 are: Một số các bộ phân tích SAX phổ
biến mà SAX2 hỗ trợ là:
Xerces Xerces
MSXML 6.0 MSXML 6.0
JAXP JAXP
Ver. Ver. 1.0 1.0
Page 10 Trang 10
Difference Between the XPath and DOM Data Models Sự khác biệt giữa các XPath và
DOM Mô hình dữ liệu
Difference Between the XPath and DOM Data Models Sự khác biệt giữa các XPath và
DOM Mô hình dữ liệu
The following table lists differences between the XPath and Bảng sau liệt kê khác biệt giữa
các XPath và
the DOM data models: các dữ liệu DOM các mô hình:
XPath Data Model Mô hình dữ liệu XPath
DOM Data Model Mô hình dữ liệu DOM
XPath Data Model Mô hình dữ liệu XPath
DOM Data Model Mô hình dữ liệu DOM
The value of an element or the root node Giá trị của một phần tử hoặc root node
is the concatenation of the text nodes of là sự ghép nối của các nút văn bản của
all its children. tất cả các trẻ em. For example, XPATH value Ví dụ, giá trị XPATH
of <root> Hello </root> is the của Hello <root> </ root> là
The value of an element or root node will Giá trị của một hoặc root node sẽ phần tử
be null. được null.
of <root> Hello </root> is the của Hello <root> </ root> là
string Hello and the XPATH value of Xin chào và XPATH chuỗi giá trị
<root> Hello <name> John Xin chào John <root> <name>
</name> </root> is the string </ Name> </ root> là chuỗi
HelloJohn . HelloJohn.
Does not have separate nodes for CDATA Không có nút riêng cho CDATA
Has a separate node for CDATA sections Có một nút riêng biệt cho phần CDATA
Does not have separate nodes for CDATA Không có nút riêng cho CDATA
sections. phần.
Has a separate node for CDATA sections. Có một nút riêng biệt cho phần CDATA.
Only attributes, elements, processing Chỉ có các thuộc tính, các yếu tố, chế biến
instructions, and namespace nodes have hướng dẫn, và các nút có tên miền không gian
names XPATH does not use pseudo- tên XPATH không sử dụng giả
Use pseudo-names for text and comment. Sử dụng tên giả cho văn bản và nhận xét.
Ver. Ver. 1.0 1.0
names. tên. XPATH does not use pseudo XPATH không sử dụng giả
names such as #text and #comment for tên tuổi như văn bản # và bình luận # cho
text and comment. văn bản và nhận xét.
Page 11 Trang 11
You should not use DOM for document traversal. Bạn không nên sử dụng DOM cho traversal
tài liệu. Instead, Thay vào đó,
use XPath to find nodes or traverse the document, if sử dụng XPath để tìm các nút hoặc tài
liệu đi qua, nếu
possible. có thể. This is because DOM consumes a significant Điều này là do tiêu thụ đáng kể
DOM
amount of system memory and will slow down the số lượng bộ nhớ hệ thống và sẽ làm chậm
li ti li ti
application. ứng dụng.
You should use a DOM-based parser in the following Bạn nên sử dụng phân tích cú pháp dựa
trên DOM trong những điều sau đây
situations: tình huống:
When the size of the XML document is small. Khi kích thước của các tài liệu XML là nhỏ.
This is because Điều này là do
the DOM parser constructs a DOM tree in the memory. các phân tích DOM xây dựng một
cây DOM trong bộ nhớ.
When an entire document is to be processed. Khi toàn bộ tài liệu sẽ được xử lý.
Wh Wh
tt tt
ti l ti l
ll
ti ti
XML XML
When you want to access a particular element in an XML Khi bạn muốn truy cập một yếu tố
cụ thể trong một XML
Ver. Ver. 1.0 1.0
Page 12 Trang 12
When you load an XML document by using DOM, the file is Khi bạn tải một tài liệu XML
bằng cách sử dụng DOM, tập tin được
loaded asynchronously by default. tải không đồng bộ theo mặc định. In this case, you need to
Trong trường hợp này, bạn cần
examine the ReadyState property of the XML document kiểm tra tài sản readyState
của các tài liệu XML
to ensure that the document is ready. để đảm bảo rằng tài liệu đã sẵn sàng. To avoid this, you
can Để tránh điều này, bạn có thể
t th t ngày
tf th XML d tf thứ XML d
tt tt
I Tôi
set the async property of the XML document to false . thiết lập thuộc tính async của
các tài liệu XML để sai. In Trong
this case, the parser will not return the control to your code trường hợp này, các phân tích cú
pháp sẽ không trở lại sự kiểm soát để mã của bạn
until the document is completely loaded and ready for cho đến khi tài liệu được tải xong và
sẵn sàng cho
manipulation The use of the async property to disable Thao tác sử dụng của tài sản async
để vô hiệu hóa
manipulation. thao tác. The use of the async property to disable Việc sử dụng tài sản
async để vô hiệu hóa
asynchoronous loading is shown in the following example: tải asynchoronous được thể hiện
trong ví dụ sau đây:
var xmlDoc; var xmlDoc;
if (window.ActiveXObject) if (window.ActiveXObject)
{ xmlDoc=new ActiveXObject("Microsoft.XMLDOM");} {XmlDoc = new ActiveXObject
("Microsoft.XMLDOM");}
xmlDoc async=false; xmlDoc async = false;
Ver. Ver. 1.0 1.0
xmlDoc.async=false; xmlDoc.async = false;
xmlDoc.load(“sample.xml”); xmlDoc.load ("sample.xml");
Page 13 Trang 13
Why doesn't the DOM specify anything on memory Tại sao không chỉ định bất cứ điều gì
DOM vào bộ nhớ
management? quản lý?
The DOM specification does not define any methods related to Các đặc tả DOM không xác
định bất kỳ phương pháp liên quan đến
memory management, such as releasing an object. quản lý bộ nhớ, chẳng hạn như phát hành
một đối tượng. This is Đây là
bb
DOM i DOM i
il il
id id
dt API dt API
because DOM is a programming language-independent API, bởi vì DOM là một ngôn ngữ
lập trình API độc lập,
whereas memory management is language-specific. trong khi quản lý bộ nhớ là ngôn ngữ cụ
thể.
HH
dd
XML fit ith DOM? XML DOM phù hợp với thứ i?
How does XML fit with DOM? Làm thế nào để phù hợp với DOM XML?
DOM provides an abstract API for constructing, accessing, and DOM cung cấp một API trừu
tượng để xây dựng, truy cập, và
manipulating XML and HTML documents. thao tác các tài liệu XML và HTML. The binding
of DOM Các ràng buộc của DOM
to a particular programming languages provides a concrete một ngôn ngữ lập trình cụ thể
cung cấp một cụ thể
to a particular programming languages provides a concrete một ngôn ngữ lập trình cụ thể
cung cấp một cụ thể
API. API. Microsoft and other vendors provide APIs that let you use Microsoft và nhà cung
cấp khác cung cấp các API cho phép bạn sử dụng
the DOM to query and manipulate XML documents in memory. DOM để truy vấn và thao tác
các tài liệu XML trong bộ nhớ.
Ver. Ver. 1.0 1.0
Page 14 Trang 14
What are the languages that can be used for DOM DOM cho gì là ngôn ngữ có thể được sử
dụng
programming? lập trình?
DOM programming can be done in any programming or lập trình DOM có thể được thực
hiện trong chương trình bất kỳ hoặc
scripting language which can access DOM. ngôn ngữ kịch bản mà có thể truy cập DOM.
JavaScript and JavaScript và
VBS it VBS nó
th thứ
ll
dl dl
f DOM f DOM
VBScript are the commonly used language for DOM VBScript là ngôn ngữ được sử dụng
phổ biến cho DOM
programming. lập trình. In addition, C# and Java also provides API that Ngoài ra, C # và Java
cũng cung cấp API
can be used for DOM programming. có thể được sử dụng cho DOM lập trình.
Does the DOM require an XML file to be well formed? DOM không có đòi hỏi một tập tin
XML cũng được hình thành?
Yes, DOM requires an XML file to be well formed. Có, DOM yêu cầu một file XML cũng
được hình thành. In case XML Trong trường hợp XML
is not well formed the XML processor that builds the DOM tree cũng không phải là hình
thành các bộ xử lý XML mà xây dựng cây DOM
is not well formed the XML processor that builds the DOM tree cũng không phải là hình
thành các bộ xử lý XML mà xây dựng cây DOM
will stop with a fatal error. sẽ dừng lại với một lỗi nghiêm trọng.
Ver. Ver. 1.0 1.0
Page 15 Trang 15
How can I use parseError object to display errors that Làm thế nào tôi có thể sử dụng đối
tượng parseError để hiển thị lỗi
may occur when I try to load an XML document which is not có thể xảy ra khi tôi cố gắng tải
một tài liệu XML mà không phải là
well formed? cũng được hình thành?
You can use different properties of parseError object to Bạn có thể sử dụng tài sản khác
của đối tượng parseError đến
display errors that may occur when you try to load an XML hiển thị các lỗi có thể xảy ra khi
bạn cố gắng tải một XML
document. tài liệu. The following code snippet tries to load a non well- Đoạn mã sau sẽ cố
gắng để tải một không tốt
formed XML file and displays error messages by using various hình thành tập tin XML và
thông báo lỗi hiển thị bằng cách sử dụng khác nhau
properties of parseObject: tài sản của parseObject:
properties of parseObject: tài sản của parseObject:
var xmlDoc=new ActiveXObject("Microsoft.XMLDOM"); var = new ActiveXObject
xmlDoc ("Microsoft.XMLDOM");
xmlDoc.async="false"; xmlDoc.async = "false";
xmlDoc.load("test.xml"); xmlDoc.load ("test.xml");
document.write("Error code: " + document.write ("Mã lỗi:" +
xmlDoc.parseError.errorCode); xmlDoc.parseError.errorCode);
document.write("<br />Error reason: " + document.write ("/> <br Lỗi lý do:" +
xmlDoc.parseError.reason); xmlDoc.parseError.reason);
Ver. Ver. 1.0 1.0
oc pa se oc se pa
oo
easo ); easo);
document.write("<br />Error line: " + document.write ("/> <br Lỗi dòng:" +
xmlDoc.parseError.line); xmlDoc.parseError.line);
Page 16 Trang 16
A user has defined a string variable named, date that Một người sử dụng đã xác định một biến
chuỗi có tên, ngày tháng đó
contains date information in the DD/MM/YYYY format. chứa thông tin cập nhật trong / DD
MM định dạng YYYY /. Now Trả giá
user wants to extract the month information from the date người sử dụng muốn trích xuất các
thông tin tháng kể từ ngày
variable and wants to store this information in another string biến và muốn lưu trữ các thông
tin này trong chuỗi khác
dd
th Whi hf th f ll i Whi thứ hf e sẽ i th
ti ti
ifi th IFI thứ
named, month. tên, tháng. Which of the following options specifies the Nào trong các lựa
chọn sau quy định cụ thể
correct code to perform this operation? đúng mã để thực hiện hoạt động này?
month = substring(date,4,2); tháng = chuỗi con (ngày, 4,2);
ii
3232
month = substring-before(date,'/'); tháng = chuỗi con, trước khi (ngày ,'/');
month = substring-after(date,'/'); tháng = chuỗi con sau (ngày ,'/');
month tháng
substring(date 4 2); chuỗi con (ngày 4 2);
Ver. Ver. 1.0 1.0
Page 17 Trang 17
A user has defined a variable named price that contains Một người sử dụng đã xác định một
mức giá được đặt tên biến có chứa
price information of a product. Thông tin giá của sản phẩm. Now the user wants to find Bây
giờ người dùng muốn tìm
out the largest integer which is less than or equal to the ra các số nguyên lớn nhất mà nhỏ hơn
hoặc bằng
price variable. giá biến. Which of the following functions should the Mà trong những chức
năng sau đây nên các
tdt TDT
ii
thi thi
l ? l?
user use to determine this value? người dùng sử dụng để xác định giá trị này?
sum() tổng hợp ()
floor() tầng ()
ceiling() trần nhà ()
round() tròn ()
floor() tầng ()
Ver. Ver. 1.0 1.0
floor() tầng ()
Page 18 Trang 18
A user is accessing an XML document, test.xml, by using Một người dùng là truy cập vào
một tài liệu XML, test.xml, bằng cách sử dụng
XML DOM. XML DOM. The user writes the following code to load the Người sử dụng viết
mã sau để tải
test.xml file: test.xml file:
var xmlDoc=new ActiveXObject("Microsoft.XMLDOM"); var = new ActiveXObject
xmlDoc ("Microsoft.XMLDOM");
xmlDoc.async="false"; xmlDoc.async = "false";
xmlDoc.load("test.xml"); xmlDoc.load ("test.xml");
Now, the user wants to retrieve the reference of the root Bây giờ, người dùng muốn lấy các
tài liệu tham khảo của các gốc
,,
element of the XML document and wants to store the phần tử của các tài liệu XML và muốn
lưu trữ
reference in a variable. tham chiếu trong một biến. Which of the following lines of code Nào
trong các dòng mã sau đây
should the user append to the preceding code snippet to nên người sử dụng phụ thêm vào các
đoạn mã trên để
retrieve and store the reference? lấy và lưu trữ các tài liệu tham khảo?
var root = xmlDoc.xml; var root = xmlDoc.xml;
var root = xmlDoc.firstChild; var root = xmlDoc.firstChild;
Ver. Ver. 1.0 1.0
var root = xmlDoc.rootElement; var root = xmlDoc.rootElement;
var root = xmlDoc.documentElement; var root = xmlDoc.documentElement;
Page 19 Trang 19
var root = xmlDoc.documentElement; var root = xmlDoc.documentElement;
Ver. Ver. 1.0 1.0
Page 20 Trang 20
A user is accessing an XML document, test.xml, by using Một người dùng là truy cập vào
một tài liệu XML, test.xml, bằng cách sử dụng
XML DOM. XML DOM. The user has stored the reference of a node of Người dùng đã lưu
trữ các tài liệu tham khảo của một nút của
test.xml in the Node object. test.xml trong đối tượng Node. Now, the user wants to retrieve
Bây giờ, người dùng muốn lấy
the XML representation of the referred node and its child đại diện XML của nút gọi và con
của nó
dd
Whi hf th f ll i Whi hf thứ e sẽ i
ti ti
f th N d f thứ N d
bj t bj t
nodes. các nút. Which of the following properties of the Node object Những tài sản sau đây
của đối tượng Node
should the user use for this purpose? nên việc sử dụng người sử dụng cho mục đích này?
nodeName nodename
nodeValue nodeValue
xml xml
childNodes childNodes
xml xml
Ver. Ver. 1.0 1.0
xml xml
Page 21 Trang 21
Tom has written a program to load XML data Tom đã viết một chương trình để tải dữ liệu
XML
asynchronously by using XML DOM. không đồng bộ bằng cách sử dụng XML DOM. Tom
wants to start Tom muốn bắt đầu
processing XML data as soon as it is available. xử lý dữ liệu XML ngay khi nó có sẵn. Which
of Nào
the following events should Tom handle to process the XML các sự kiện sau đây Tom nên xử
lý để xử lý XML
dti DTI
di tl ft it i tl di ft nó i
il bl ? il b?
data immediately after it is available? dữ liệu ngay lập tức sau khi nó có sẵn?
onreadystatechange onreadystatechange
ondataavailable ondataavailable
ontransformnode ontransformnode
ondataloaded ondataloaded
Ver. Ver. 1.0 1.0
Văn bản Tiếng Anh gốc:
Editors that can be used for creating Web pages are of two
Đóng góp bản dịch hay hơn

Ban Dich PDF q5

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Ban Dich PDF q5

Uploaded by

Copyright:

Available Formats

Bản đã dịch của trang

Bản đã dịch của trang

Bản đã dịch của trang

Bản đã dịch của trang

Bản đã dịch của trang

Bản đã dịch của trang

Bản đã dịch của trang

Bản đã dịch của trang

Bản đã dịch của trang

Bản đã dịch của trang

Bản đã dịch của trang

Bản đã dịch của trang

Bản đã dịch của trang

Bản đã dịch của trang

Bản đã dịch của trang

Bản đã dịch của trang

You might also like