Giáo trình Thiết kế trang Web gồm các nội dung chính như: Tổng quan về WWW-Ngôn ngữ HTML; Thao tác với phần mềm Dreamweaver; CSS; Những kiến thức cơ bản về VBScript. Mời các bạn cùng tham khảo.
ỦY BAN NHÂN DÂN TỈNH AN GIANG TRƯỜNG CAO ĐẲNG NGHỀ AN GIANG GIÁO TRÌNH THIẾT KẾ TRANG WEB NGHỀ: LẬP TRÌNH MÁY TÍNH Trình độ trung cấp/cao đẳng (Ban hành theo Quyết định số: /QĐ-CĐN ngày tháng năm 20 Hiệu trưởng trường Cao đẳng nghề An Giang) Tác giả: Vương Thị Minh Nguyệt Năm ban hành : 2019 TUYÊN BỐ BẢN QUYỀN Tài liệu thuộc loại sách giáo trình nên nguồn thơng tin phép dùng nguyên trích dùng cho mục đích đào tạo tham khảo Mọi mục đích khác mang tính lệch lạc sử dụng với mục đích kinh doanh thiếu lành mạnh bị nghiêm cấm LỜI GIỚI THIỆU Ngày nay, phát triển Internet ảnh hưởng lớn tới ngành CNTT Internet mở nhiều hội tốt cho nhà lập trình phát triển ứng dụng Web nhà thiết kế Web Song song với phát triển đó, thiết kế web có phát triển việc cải tiến kỹ thuật thiết kế Với hỗ trợ máy tính cơng nghệ phần mềm giúp thực việc thiết kế trang web nhanh chóng, hiệu chuyên nghiệp Tài liệu thiết kế theo mô đun/ môn học thuộc hệ thống mô đun/môn học chương trình để đào tạo hồn chỉnh nghề Lập trình máy tính dùng làm giáo trình cho học viên khóa đào tạo, sử dụng cho đào tạo ngắn hạn cho cơng nhân kỹ thuật Trong q trình biên soạn, cố gắng tham khảo nhiều tài liệu giáo trình khác tác giả khơng khỏi tránh thiếu sót hạn chế Tác giả chân thành mong đợi nhận xét, đánh giá góp ý để giáo trình ngày hồn thiện Nội dung mơn học: Chương 1: Tổng quan WWW-Ngôn ngữ HTML Chương 2: Thao tác với phần mềm Dreamweaver Chương 3: CSS Chương 4: Những kiến thức VBScript An Giang, ngày tháng năm 20 Tham gia biên soạn Vương Thị Minh Nguyệt MỤC LỤC ĐỀ MỤC TRANG LỜI GIỚI THIỆU MỤC LỤC CHƯƠNG TRÌNH MƠN HỌC CHƯƠNG 1: TỔNG QUAN VỀ WWW – NGÔN NGỮ HTML I TỔNG QUAN VỀ WWW II NGÔN NGỮ HTML Bài tập 14 CHƯƠNG 2: THAO TÁC VỚI PHẦN MỀM DREAMWEARVER 16 I GIỚI THIỆU PHẦN MỀM DREAMWEARVER 16 II QUẢN LÝ VÀ THAO TÁC TRÊN WEBSITE 18 III ĐỊNH DẠNG VĂN BẢN 19 IV BẢNG BIỂU 22 V TẠO LIÊN KẾT 26 VI FORM VÀ CÁC THÀNH PHẦN TRÊN FORM 29 VII FRAME 38 Bài tập 42 CHƯƠNG 3: CSS 43 I GIỚI THIỆU CSS 43 II CÁC THUỘC TÍNH CSS 45 Bài tập 49 CHƯƠNG 4: NHỮNG KIẾN THỨC CƠ BẢN VỀ VBSCRIPR 50 I KHÁI NIỆM VỀ NGÔN NGỮ VBSCRIPT 50 II ĐƯA CÁC ĐOẠN SCRIPT VÀO TRANG WEB 50 III THIẾT LẬP CÁC THƯ VIỆN PROCEDURE, FUNCTION CHO ỨNG DỤNG WEB 51 Bài tập 57 TÀI LIỆU THAM KHẢO 58 CHƯƠNG TRÌNH MƠN HỌC Tên mơn học: THIẾT KẾ TRANG WEB Mã môn học: MH 20 Thời gian thực môn học: 75 (Lý thuyết: 20 giờ, thực hành 53 giờ, kiểm tra: giờ) I VỊ TRÍ, TÍNH CHẤT CỦA MƠN HỌC Vị trí: - Thuộc nhóm mơn: Chun ngành - Được bố trí sau mơn: Lập trình , Cơ sở liệu, Hệ quản trị CSDL Tính chất: Môn học làm sở cho sinh viên – học sinh có kỹ thiết kế trang web hồn chỉnh II MỤC TIÊU CỦA MƠN HỌC Về kiến thức: - Định hướng cách thiết kế Website - Nêu ứng dụng thẻ HTML - Tổ chức thông tin trang chủ web - Định hướng cách liên kết đến trang web - Đưa ý tưởng giao diện - Có khả sử dụng dụng thẻ HTML Về kỹ năng: - Sử dụng thẻ HTML để thiết kế trang web - Thiết kế giao diện trang website - Sử dụng thành thạo công cụ thiết kế Web Về lực tự chủ trách nhiệm: - Làm việc nhóm, tăng tính chia sẻ làm việc cộng đồng III NỘI DUNG MÔN HỌC Nội dung tổng quát phân bố thời gian: TT Tên chương, mục Thời gian (giờ) Tổng Lý Thực hành, Kiểm số thuyết thí nghiệm, tra thảo luận, tập Chương 1: Tổng quan WWW-Ngôn 12 ngữ HTML I Lịch sử WWW II Ngôn ngữ HTML Chương 2: Thao tác với phần mềm 24 15 Dreamweaver I Giới thiệu phần mềm Dreamweaver II Quản lý thao tác website III Định dạng văn IV Bảng biểu 3 V Tạo liên kết VI Form thành phần form VII Frame VIII Kiểm tra Chương 3: CSS I Giới thiệu CSS II Các thuộc tính CSS III Kiểm tra Chương 4: Những kiến thức VB Script I Khái niệm ngôn ngữ VB Script II Đưa đoạn Script vào trang Web III Thiết lập thư viện procedure, function cho ứng dụng WEB Ôn tập Cộng 24 15 10 20 53 75 2 Nội dung chi tiết: Chương 1: Tổng quan www – Ngôn ngữ HTML Thời gian: 12 A Mục tiêu bài: - Nêu lịch sử WWW - Trình bày sử dụng cấu trúc trang HTML - Thiết kế trang web ngôn ngữ HTML B Nội dung bài: I Lịch sử WWW II Ngôn ngữ HTML Chương 2: Thao tác với phần mềm Dreamweaver Thời gian: 24 A Mục tiêu bài: - Thực số thao tác phần mềm Internet Information Services để kết nối chạy trang web localhost - Sử dụng thành thạo chức năng, công cụ phần mềm tạo web Macromedia DreamWeaver để tạo trang web tĩnh gồm đầy đủ thành phần văn bản, hình ảnh, âm thanh…và số tích hợp hiệu ứng khác B Nội dung bài: I Giới thiệu phần mềm Dreamweaver II Quản lý thao tác website III Định dạng văn IV Bảng biểu V Tạo liên kết VI Form thành phần form VII Frame VIII Kiểm tra Chương 3: CSS Thời gian: 24 A Mục tiêu - Trình bày thuộc tính CSS - Sử dụng thành thạo thuộc tính CSS để thiết kế trang web hoàn chỉnh B Nội dung I Giới thiệu CSS II Các thuộc tính CSS III Kiểm tra Chương 4: Những kiến thức JavaScript Thời gian: 10 A Mục tiêu - Hiểu nắm kiến thức javascript - Biết cách khai báo biến, biết sử dụng cấu trúc điều khiển, hàm sử dụng đối tượng xây dựng sẵn để lập trình trang web nhằm tính tốn, phục vụ mục tiêu cụ thể ngôn ngữ javascript B Nội dung I Khái niệm ngôn ngữ JavaScript II Đưa đoạn Script vào trang Web III Thiết lập thư viện procedure, function cho ứng dụng WEB CHƯƠNG TỔNG QUAN VỀ WWW – NGÔN NGỮ HTML Giới thiệu HTML Tim Berner Lee phát minh W3C (World Wide Web Consortium) đưa thành chuẩn năm 1994 Mục tiêu Học xong học viên có khả năng: - Nêu lịch sử WWW - Trình bày sử dụng cấu trúc trang HTML - Thiết kế trang web ngôn ngữ HTML Nội dung I TỔNG QUAN VỀ WWW CÁC KHÁI NIỆM CƠ BẢN: - Internet mạng máy tính tồn cầu máy truyền thơng với theo ngơn ngữ chung TCP/IP - Intranet mạng cục không nối vào Internet cách truyền thông chúng theo ngôn ngữ chung TCP/IP - Mơ hình Client-Server: mơ hình khách-chủ Server chứa tài nguyên dùng chung cho nhiều máy khách (Client) tập tin, tài liệu, máy in… Ưu điểm mơ hình tiết kiệm thời gian, tài chính, dễ quản trị hệ thống…Cách hoạt động mơ hình máy Server trạng thái hoạt động (24/24) chờ yêu cầu từ phía Client Khi Client yêu cầu máy Server đáp ứng yêu cầu - Internet Server Server cung cấp dịch vụ Internet(Web Server, Mail Server, FTP Server…) - Internet Service Provider(ISP): Là nơi cung cấp dịch vụ Internet cho khách hàng Mỗi ISP có nhiều khách hàng có nhiều loại dịch vụ Internet khác - Internet Protocol : Các máy sử dụng mạng Internet liên lạc với theo tiêu chuẩn truyền thông gọi Internet Protocol (IP) IP Address-địa IP: để việc trao đổi thông tin mạng Internet thực máy mạng cần phải định danh để phân biệt với máy khác Mỗi máy tính mạng định danh nhóm số gọi địa IP Địa IP gồm số thập phân có giá từ đến 255 phân cách dấu chấm Ví dụ 192.168.0.1 Địa IP có giá trị toàn mạng Internet Uỷ ban phân phối địa IP giới phân chia nhóm địa IP cho quốc gia khác Thông thường địa IP quốc gia quan bưu điện quản lý phân phối lại cho ISP Một máy tính thâm nhập vào mạng Internet cần có địa IP Địa IP cấp tạm thời cấp vĩnh viễn Thông thường máy Client kết nối vào mạng Internet thông qua ISP đường điện thoại Khi kết nối, ISP cấp tạm thời IP cho máy Client - Phương thức truyền thông tin Internet: Khi máy tính có địa IP x(máy X) gửi tin đến máy tính có địa IP y (máy Y) phương thức truyền tin diễn sau: Nếu máy X máy Y nằm mạng thơng tin gửi trực tiếp Cịn máy X Y khơng nằm mạng thơng tin chuyển tới máy trung gian có đường thơng với mạng khác chuyển tới máy Y Máy trung gian gọi Gateway - World Wide Web(WWW): dịch vụ phổ biến Internet Dịch vụ đưa cách truy xuất tài liệu máy phục vụ dễ dàng thông qua giao tiếp đồ họa Để sử dụng dịch vụ máy Client cần có chương trình gọi Web Browser - Web Browser (trình duyệt): trình duyệt Web Dùng để truy xuất tài liệu Web Server Các trình duyệt Internet Explorer, Nestcape - Home page: trang web web site - Hosting provider: công ty tổ chức đưa trang lên web - Hyperlink : tên khác hypertextlink - Publish: làm cho trang web chạy mạng - URL (Unioform resource locator): địa chỉ đến file cụ thể nguồn tài nguyên mạng - Web server chương trình đáp ứng lại yêu cầu truy xuất tài nguyên từ trình duyệt GIỚI THIỆU KHÁI QUÁT VỀ WEB - Web ứng dụng chạy mạng(Client-Server), chia sẻ khắp toàn cầu - Trang web file văn chứa tag HTML đoạn mã đặc biệt mà trình duyệt web (Web browser) hiểu thơng dịch được, file lưu với phần mở rộng html htm - HTML (HyperText Markup Language), gồm đoạn mã chuẩn quy ước để thiết kế Web hiển thị trình duyệt Web (Web Browser) Hypertext (Hypertext link), từ hay cụm từ đặc biệt dùng để tạo liên kết trang web Markup: cách định dạng văn để trình duyệt hiểu thông dịch Language: không ngơn ngữ lập trình, mà tập nhỏ quy luật để định dạng văn trang web - Trình soạn thảo trang web : Có thể soạn thảo web trình soạn thảo văn Các trình soạn thảo phổ biến là: Notepad, FrontPage Dreamweaver II NGÔN NGỮ HTML Tag HTML câu lệnh nằm cặp tag “”, dùng để định dạng văn trang web Dạng chung tag HTML là: Object Trong đó: – TagName : tên tag HTML, viết liền với dấu “< “, khơng có khoảng trắng – Object : đối tượng cần định dạng trang Web – ListPropeties danh sách thuộc tính Tag, đặc điểm bổ sung vào cho tag, thứ tự thuộc tính tag tuỳ ý Nếu có từ thuộc tính trở lên thuộc tính cách khoảng trắng Object – Giá trị thuộc tính đặt nháy đơn ‘ nháy đơi “ (có thể bỏ qua) – : gọi tag mở – : gọi tag đóng Thơng thường tag có tag đóng Tuy nhiên có số tag khơng có tag đóng Ví dụ : nội dung TagName(mở) Properties TagName(đóng) – Có thể có nhiều tag lồng vào nhau, theo nguyên tắc tag mở trước tag đóng sau Ví dụ: Object Object1Object2 – Trong trang HTML, tag bị sai nội dung bên Tag khơng hiển thị trình duyệt CẤU TRÚC CƠ BẢN CỦA TRANG WEB: a Cấu trúc trang web – Phần đầu(): phần chứa thông tin trang Web – Phần thân (): phần chứa nội dung trang Web – Phần đầu phần thân đặt cặp tag Nội dung thông tin trang web Nội dung hiển thị trình duyệt b Hiển thị trang web: – Khởi động trình duyệt Internet Explorer – Chọn menu file,open, dùng browse tìm tập tin html tạo – Hoặc double click vào tên tập tin htm c Các tag HTML : Hiển thị nội dung tiêu đề trang web tiêu đề trình duyệt – Cặp tag đặt phần trang HTML – Cú pháp: Nội dung tiêu đề : Tạo header, gồm cấp header, đặt phần BODY – Cú pháp: Nội dung Header Trong đó: – Direction: gồm giá trị left, right, center, dùng để canh lề cho header, mặc định canh trái – Ví dụ: Heading 1 Heading 2 Heading 3 Heading 4 Heading 5 Heading 6– Dùng để ngắt đoạn bắt đầu đoạn – Cú pháp:
Nội dung đoạn
– Tag không bắt buộc – Tagtự động bắt đầu đoạn – Ngắt dòng vị trí của tag Ví dụ:
Mary had a little lamb It’s fleece was white as snow Everywhere that Mary went She was followed by a little lamb
: – Dùng để kẻ đường ngang trang, khơng có tag đóng – Cú pháp: Trong đó: Direction: gồm giá trị left, right, center Width: độ dài đường kẻ, tính Pixel % Size: độ dày đường kẻ, tính pixel Color: màu đường kẻ, dùng tên màu dùng mã #rrggbb Ví dụ: Welcome to HTML My first HTML document a Inline style: Là kiểu gán cho dòng đoạn văn bản, cách sử dụng thuộc tính style bên tag muốn định dạng Nội dung văn muốn định dạng Ví dụ : Setting PropertiesThis paragraph has an inline style applied to it
This paragraph is displayed in the default style
Can you see the difference inthis line b Internal style : Là bảng mẫu thích hợp cho trang riêng lẻ với nhiều văn bản, cách tạo bảng mẫu chung đầu trang dùng cho trang HTML TagName{property1: value 1; property2: value 2…} (lặp lại cho tag có thuộc tính cần định dạng) Ví dụ : H1,H2 { color: limegreen; font-family: Arial } This is the H1 element This is the H2 element This is the H3 element with its default style as displayed in the browser c External style :Là bảng kiểu lưu trữ thành file bên liên kết với trang HTML.Bảng kiểu áp dụng ảnh hưởng cho tất trang website Cách tạo: 44 Tạo tập tin văn Nhập tên tag muốn định dạng thuộc tính theo mẫu: TagName{property1: value1; property2:value2;…} Lưu tập tin với định dạng Text Only có phần mở rộng css Cách dùng External style: Ví dụ: Tạo tập tin Sheet1.css H2 {color:blue; font-style:italic} P{text-align:justify; text-indent:8pt; font:10pt/15pt Myriad Roman , Verdana } Trang1.htm Changing the rules Changing the rules is fun
Changing the rules may not be such fun The H2 element again Trang2.htm Changing the rules This document ues the sheet1 style sheet
Selecting this option could delete all your files The H2 element again II CÁC THUỘC TÍNH CSS Định bảng mẫu cho class Cú pháp: Trong phần nhập cú pháp: 45 ClassName{thuộc tính1:giá trị1;thuộc tính2:giá trị2;…} Trong phần , đánh dấu phần nằm lớp cú pháp: Nội dung Ví dụ: water{color:blue} danger{color:red}
test water
test danger Định tag riêng biệt: Dùng áp dụng cho phần tử riêng biệt trang Web Cú pháp: Trong Tag Style nhập : TagName#IDName{th/tính1: giá trị1; thuộc tính2: giá trị 2;…} Trong tag Body nhập : Nội dung Ví dụ 1: ID Selectors #control { color: red ;FONT-WEIGHT:BOLD} Fire is this colorThis paragraph has no style applied Ví dụ 2: combining ID and class Selector forest { color: green;font-weight:bold } danger { color: red;font-weight:bold } #control{ color: blue;font-weight:bold } 46
green things
fire hazards more green things more fire hazards
- things that burn
- things that don’t burn
water
Tạo tag tuỳ ý: Có loại tag chung kết nối Class hay ID để tạo tag tuỳ ý cần phân biệt đối tượng cấp khối cấp hàng: - Đối tượng cấp khối đoạn văn, thường bắt đầu dòng chứa đối tượng cấp khối khác gồm tag: P, H1, Body, table - Đối tượng cấp hàng thường khơng tạo dịng mới, thường chứa văn yếu tố hàng khác gồm tag: B, Font - Các tag DIV SPAN: kết nối với phần tử cấp khối ID để tạo tag tuỳ ý Trong DIV phù hợp với đối tượng cấp khối, SPAN phù hợp với đối tượng cấp hàng a Tạo tag cấp khối tuỳ ý: Cú pháp: Bằng cách thêm lớp ID vào tag DIV định mẫu cần có Trong phần Style bảng mẫu bên ngồi ta nhập: DIV.ClassName{th/tính1:giá trị 1; thuộc tính 2: giá trị 2…} với ClassName tên lớp sử dụng hoặc: DIV#Idname{thuộc tính1: giá trị 1; thuộc tính 2: giá trị 2…} với IDName tên cá biệt tag DIV Áp dụng tag cấp khối tuỳ ý vào trang HTML: Tại đầu phần văn muốn định dạng, nhập cú pháp Nội dung (bên chứa tag) b Tạo tag hàng tuỳ ý: Kết nối nhiều kiểu định dạng văn tag Cú pháp: Trong phần Style, nhập cú pháp: SPAN.Classname {th/tính1:giá trị1; th/tính2: giá trị 2…} Hoặc: SPAN#IDname {th/tính1:giá trị 1; th/tính 2: giá trị 2…} Áp dụng tag hàng tuỳ ý vào trang HTML: Tại đầu đoạn văn muốn định dạng, nhập cú pháp: nội dung văn bản 47 Hoặc: Nội dung văn bản Các thuộc tính định dạng văn bản: Chọn font: font-family: familyname1, familyname2… Tạo chữ nghiêng: Font-style: italic Tạo chữ đậm: Font-weight: bold Định cỡ chữ: Font-size: xx-smallhoặc x-small, small, medium, large, x-large, xxlarge Font-size:12pt (giá trị cụ thể) Có thể định dạng thuộc tính chữ nghiêng, đậm cở chữ lúc: Font: italic bold size Màu chữ: Color: colorName/#rrggbb Màu chữ: Background:colorName/#rrggbb Định khoảng từ, ký tự: Word-spacing:n (n: khoảng cách từ, tính pixel) Letter-spacing:n (n: khoảng cách từ, tính pixel) Canh lề cho văn bản: Text-Align: left, right, center, justify Thay đổi dạng chữ: Text-transform: capitalize, uppercase, lowercase Định dạng danh sách: List-style:circle chấm tròn rổng List-style: disc chấm trịn đen List-style: square chấm đen vng List-style: decimal đánh số ả rập List-style: lower-alpha thứ tự alpha List-style: upper-alpha thứ tự alpha chữ in hoa List-style: upper-roman số la mã hoa List-style: lower-roman số la mã thường Định dạng màu nền: Body{color:#rrggbb} blockquote{background-color:#rrggbb} background:bacground-color background :background-image background: background –position background: background-repeat background: background-attachment Định dạng Hypertext link A{Text-Decoration:none}: không gạch A:visited{color:#rrggbb} 48 A:link{styles cho vvị trí chưa xem} A:active{style style cho nh link click} A:hover{style tr trỏ lướt qua link} Bài tập Tạo hiệu ứng tương ương ứng với trình trạng liên kết: ết: liên li chưa thăm có màu xanh lá, kích cỡ ỡ font 14px; liên li kết mouse over có màu àu đỏ đ tươi, kích cỡ font 1.2em, hiệu ệu ứng nhấp nháy; liên li kết thăm có màu àu xanh da trời, tr khơng có đường ờng gạch chân; li liên kết kích hoạt có màu àu tím font dạng d small-caps Thiết ết kế layout theo mẫu 49 CHƯƠNG NHỮNG KIẾN THỨC CƠ BẢN VỀ VBSCRIPT Giới thiệu VBscript ngôn ngữ kịch (script) để viết kịch cho phía client Client side yêu cầu người sử dụng xử lý máy khách Thơng thường u cầu tính tốn, kiểm tra tính hợp lệ liệu hay hiệu ứng, yêu cầu thường không liên quan đến nguồn sở liệu server Mục tiêu: học xong học học viên có khả năng: - Hiểu nắm nguyên tắc hoạt động trang Asp - Biết cách khai báo biến, biết sử dụng cấu trúc điều khiển, hàm sử dụng đối tượng xây dựng sẵn Asp để lập trình trang web nhằm tính tốn, phục vụ mục tiêu cụ thể ngơn ngữ VBScript Nội dung I KHÁI NIỆM VỀ NGÔN NGỮ VBSCRIPT Giới thiệu VBscipt VBscript ngôn ngữ kịch (script) để viết kịch cho phía client Client side yêu cầu người sử dụng xử lý máy khách Thông thường u cầu tính tóan, kiểm tra tính hợp lệ liệu hay hiệu ứng, yêu cầu thường không liên quan đến nguồn sở liệu server Đặc điểm VBSCRIPT: VBscript ngôn ngữ kịch viết chung với HTML Không biên dịch ngôn ngữ khác Khi trang web load xuống trình duyệt thông dịch VBscript ngôn ngữ thiết kế động đối tượngS có khả tương tác với thông qua người sử dụng kiện Được hỗ trợ tất trình duyệt Nescape Internet Explorer Cấu trúc đọan VBscript: Các lệnh VBscript II ĐƯA CÁC ĐOẠN SCRIPT VÀO TRANG WEB VBSCRIPT trang HTML Đặt dòng mã lệnh VBscript cặp tag Có thể viết nhiều đoạn mã lệnh VBscript tập tin HTML Các khối mã lệnh VBscript đặt nơi trang HTML Có thể đặt cặp tag cặp tag nhiên ta nên đặt cặp tag để dễ kiểm soát mã lệnh dễ sửa đổi chương trình Có thể viết tập tin VBscript riêng sau kết nối với nhiều tập tin trang web khác 50 Mơi trường viết VBSCRIPT: Có thể dùng chương trình soạn thảo: Frontpage, Notepad, Visual InterDev, Dreamweaver để viết mã VBscript, giáo trình sử dụng môi trường Dreaweaver, chọn chế độ code, Dreamweaver hổ trợ phân biệt từ khóa màu chữ, hổ trợ hàm, thuộc tính tag, giúp người sử dụng thuận tiện việc thiết kế viết chương trình III THIẾT LẬP CÁC THƯ VIỆN PROCEDURE, FUNCTION CHO ỨNG DỤNG WEB Các kiểu liệu VBScript có kiểu liệu Variant Variant kiểu liệu đặc biệt chứa loại liệu khác từ kiểu liệu đơn giản kiểu số kiểu liệu phức tạp kiểu ghi (record) Vì Variant kiểu liệu VBScript nên là kiểu liệu trả từ hàm/thủtục viết VBScript Variant Subtypes: dạng thông tin khác mà kiểu liệu Variant lưu trữ Khai báo biến Người ta sử dụng từ khóa Dim để khai báo biến Để khai báo nhiều biến, người ta dùng dấu “,” để phân cách biến Ví dụ: Dim Left, Top, Right, Bottom Trong VBScript, không thiết phải khai báo biến trước sử dụng Để yêu cầu biến cần phải khai báo trước sử dụng, ta dùng lệnh “Option Explicit” đặt trước lệnh đoạn mã chương trình Qui tắc đặt tên biến: •Phải bắt đầu kí tự chữ •Khơng chứa dấu “.” •Khơng vượt q 255 kí tự Để khai báo mảng, ta dùng cặp dấu “(“ “)” để định nghĩa số chiều kích thước chiều màng Ví dụ: để khai báo mảng chiều có 11 phần tử: Dim A(10) Phần tử bắt đầu mảng chiều phần tử có số Để truy xuất tới phần tử thứ i mảng chiều A, ta dùng sau: A(i) VBScript hỗ trợ mảng lên đến 60 chiều Tuy nhiên, thường dùng mảng nhiều chiều mảng chiều chiều Ví dụ khai báo mảng chiều gồm dòng, 11 cột: Dim MyTable(5, 10) Để truy xuất tới phần tử mảng chiều, ví dụ phần tử dòng i, cột j, ta dùng: MyTable(i, j) Đối với mảng không khai báo kích thước trước, người ta gọi mảng động (dynamic) Nghĩa kích thước mảng thay đổi trình chạy chương trình Người ta dùng từ khóa ReDim để thay đổi kích thước mảng Lệnh điều kiện Có hai dạng lệnh điều kiện If Then Else Select Case • Các cú pháp lệnh If Then Else If Then 51 Ví dụ: Sub FixDate() Dim myDate myDate = #2/13/95# If myDate < Now Then myDate = Now End Sub Chú ý: Lệnh viết hàng với If … Then If Then End If Ví dụ: Sub AlertUser(value) If value = Then AlertLabel.ForeColor = vbRed AlertLabel.Font.Bold = True AlertLabel.Font.Italic = True End If End Sub If Then Else End If Ví dụ: Sub AlertUser(value) If value = Then AlertLabel.ForeColor = vbRed AlertLabel.Font.Bold = True AlertLabel.Font.Italic = True Else AlertLabel.Forecolor = vbBlack AlertLabel.Font.Bold = False AlertLabel.Font.Italic = False End If End Sub If Then ElseIf Then 52 ElseIf Then Else End If Ví dụ: Sub ReportValue(value) If value = Then MsgBox value ElseIf value = Then MsgBox value ElseIf value = then Msgbox value Else Msgbox "Value out of range!" End If •Cú pháp lệnh Select Case Select Case Case Case Case Else End Select Ví dụ: Select Case Document.Form1.CardType.Options(SelectedIndex).Text Case "MasterCard" DisplayMCLogo ValidateMCAccount Case "Visa" DisplayVisaLogo ValidateVisaAccount Case "American Express" DisplayAMEXCOLogo ValidateAMEXCOAccount Case Else 53 DisplayUnknownImage PromptAgain End Select Lệnh lặp Có bốn dạng lệnh lặp Do Loop, While Wend, For Next, For Each Next • Các cú pháp lệnh Do Loop Do While Loop Do Loop While Ví dụ: Sub ChkFirstWhile() Dim counter, myNum counter = myNum = 20 Do While myNum > 10 myNum = myNum - counter = counter + Loop MsgBox "The loop made " & counter & " repetitions." End Sub Sub ChkLastWhile() Dim counter, myNum counter = myNum = Do myNum = myNum - counter = counter + Loop While myNum > 10 MsgBox "The loop made " & counter & " repetitions." End Sub Do Until Loop Do 54 Loop Until Ví dụ: Sub ChkFirstUntil() Dim counter, myNum counter = myNum = 20 Do Until myNum = 10 myNum = myNum - counter = counter + Loop MsgBox "The loop made " & counter & " repetitions." End Sub Sub ChkLastUntil() Dim counter, myNum counter = myNum = Do myNum = myNum + counter = counter + Loop Until myNum = 10 MsgBox "The loop made " & counter & " repetitions." End Sub •Cú pháp lệnh While Wend While Wend Nên dùng Do Loopthay cho While Wend • Các cú pháp lệnh For Next For = To Next Ví dụ: Sub DoMyProc50Times() Dim x For x = To 50 MyProc Next End Sub 55 For = To Step Next Ví dụ: Sub TwosTotal() Dim j, total For j = To 10 Step total = total + j Next MsgBox "The total is " & total End Sub Sub NewTotal() Dim myNum, total For myNum = 16 To Step -2 total = total + myNum Next MsgBox "The total is " & total End Sub • Các cú pháp lệnh For Each Next Tương tự For Next thay lặp theo số lần định trước, lệnh For Each Next dùng để lặp tương ứng với thành phần biến dạng collection thành phần mảng Ví dụ: Forms and Elements