Bài giảng Thiết kế Web Html + JavaScript + Css

22/04/2011 1 Thiết kế Web 1 THIẾT KẾ WEB Html + JavaScript + Css Dzoãn Xuân Thanh Lời nói đầu Mục tiêu: • Hiểu được cấu trúc của một website. • Xây dựng được một web site bằng HTML Thời lượng: 30LT + 30TH Đối tượng: Những ai cần Hình thức thi: Lý thuyết (thi hết môn) + Thực hành (đề tài) Công cụ hổ trợ: Dreamweaver Thiết kế Web 3 Các khái niệm 1. Các dịch vụ cơ bản trên Internet • WWW (Wold Wide Web): Dịch vụ trao đổi,tìm kiếm truy cập thông tin trên mạng theo giao thức HTTP. Được sử dụng thông qua trình duyệt Web • Email (Thư điện tử): Dịch vụ trao đổi các thông điệp cho nhau SMTP(Simple Mail Tranfer Protocol) Pop3(Post office protocol 3) được quản lý bởi các Mail server như: itc@itc.edu.vn; dzoanthanh@gmail.com,... . Thiết kế Web 4 Các khái niệm • FTP – File Transfer Protocol – Truyền tải tập tin : Dịch vụ trao đổi tập tin giữa các máy trên Internet thường được dùng để Download & Upload các trang web từ người thiết kế đến các máy chủ thông qua các chương trình FTP như FTP Explorer, FlashFXP. • Chat –Tán gẫu: Dịch vụ cho phép người dùng trao đổi trực tuyến với nhau qua mạng internet bằng văn bản, âm thanh, hình ảnh Như : AOL, Yahoo messenger Thiết kế Web 5 Các khái niệm 2. HTTP (Hyper Text Tranfer Protocol): Giao thức dùng để giao tiếp với các trang Web. 3. HTML (Hyper Text Makeup Language): Ngôn ngữ đánh dấu siêu văn bản dùng để thiết kế trang Web. 4. WebPage (Trang Web): Là một tập tin văn bản soạn thảo theo ngôn ngữ HTML có phần mở rộng là HTML hoặc HTM. 5. Web Site: Chuyên khu Web tập hợp các trang web thuộc 1 chủ thể. 6. Home Page: Trang đầu tiên-Trang chủ của 1 Website (Index.htm, Default.htm . . .) Thiết kế Web 6 22/04/2011 2 7. WebServer: Máy chủ web-Máy tính cấu hình mạnh, lưu trữ các trang Web kết nối thường xuyên với mạng Internet cho phép các máy khác truy cập thông tin. 8. Tên miền (Domain Name): Để phân biệt mỗi Web Server có một địa chỉ IP và được ánh xạ bởi 1 tên (VD:itc.edu.vn). Được xem như tên giao dịch của công ty, tổ chức trên Internet. Bao gồm mã quốc gia như :Việt Nam: .vn, Anh: .uk, Mỹ: .us, Nhật:.jp...) và 1 số lĩnh vực. Thiết kế Web 7 Các khái niệm Để sở hữu 1 tên miền phải trả chi phí hàng năm thông qua các công ty ủy quyền bán tên miền (pavietnam, mắt bão, Fpt, . . . Thiết kế Web 8 .Com : Thương mại .Edu : Tổ chức giáo dục .Net : Các mạng thông tin .Info : Các mạng thông tin .Int : Tổ chức quốc tế .Org : Các tổ chức khác .Gov : Tổ chức chính phủ .Mil : Tổ chức quân sự Các khái niệm 9. Hosting: Khi hoàn tất website phải được ghi lưu vào 1 webserver nào đó thì mới truy cập được thông thường là các server của ISP (Nhà cung cấp dịch vụ Internet hay đơn vị chuyên dụng). Tùy theo dung lượng, băng thông và một số hỗ trợ mà chi phí khác nhau. 10. URL(Uniform Resource Location): Địa chỉ truy cập của trang Web - 1 tập tin trong Website ……/File.html 11. Browser: Trình duyệt Web dùng để đọc và hiển thị các trang Web. Phổ biến hiện nay là: InternetExplorer, FireFox, Google Chrome,.. Thiết kế Web 9 Cấu trúc trang HTML Thiết kế Web 10 Nội dung tiêu đề Phần nội dung của trang web Ví dụ: Welcome to HTML My first HTML document CÁC THẺ ĐỊNH DẠNG VĂN BẢN 1. Định dạng Kiểu dáng Nội dung văn bản :  Nội dung văn bản được in đậm Nội dung văn bản :  Nội dung văn bản được in nghiêng Nội dung văn bản :  Nội dung văn bản được gạch dưới Nội dung văn bản :  Nội dung văn bản được gạch ngang Nội dungở đây Nội dungở đây Thiết kế Web 11 CÁC THẺ ĐỊNH DẠNG VĂN BẢN 2. Thay đổi Font, Size • Nội dung văn bản  Xác định Font cho Nội dung văn bản, Nếu máy truy cập không có FontName1 sẽ lấy FontName2 . . . sẽ lấy Font mặc định của trình duyệt. • Nội dung văn bản  Xác định cỡ chữ cho nội dung văn bản Thiết kế Web 12 22/04/2011 3 CÁC THẺ ĐỊNH DẠNG VĂN BẢN Ví dụ 1: Thiết kế Web 13 Thiết kế Web 14 Ví dụ 2: Thiết kế Web 15 Thiết kế Web 16 3. Canh lề đoạn văn bản Đoạn văn bản Hướng: Left  Canh trái đoạn văn bản Right  Canh phải đoạn văn bản Center  Canh giữa đoạn văn bản Justify  Canh đều văn bản Các thành phần cần canh giữa Thiết kế Web 17 4.Tạo văn bản đề mục Đề mục là dòng văn bản định dạng khác các dòng văn bản trong nội dung dùng để tạo đề mục phần, chương. Mỗi thẻ có chức năng phân đoạn, cấp 1 lớn nhất, cấp 6 nhỏ nhất, có thể kết hợp thuộc tính canh lề. Nội dung văn bản đề mục cấp 1 Nội dung văn bản đề mục cấp 2 . . . . . Nội dung văn bản đề mục cấp 6 VD: Đề mục cấp, 3 canh lề giữa Thiết kế Web 18 22/04/2011 4 Sử dụng màu Các mã màu: Để xác lập màu có thể dùng Tên màu hay Trị thập lục phân tương ứng Thiết kế Web 19 BẢNG MÃ MÀU Tên màu Trị Tên màu Trị Black Đen #000000 Olive Nâu vàng #808000 Red Đỏ #FF0000 Teal Nâu sẫm #008080 Blue Xanh #0000FF Maroon Nâu #800000 Navy X.Đãm #000800 Gray Xám #808080 Lime V.Chanh #FFFFFF Fuchsia Hồng #FF00FF White Trằng #FFFFFF Green Lá #008000 Rurple Đ.Tía #800080 Silver Bạc #C0C0C0 Yellow Vàng #FFFF00 Aqua Ngọc #00FFFF Sử dụng màu • Xác lập màu chung cho trang Web Dùng các thuộc tính của thẻ BODY để xác lập: màu nền, màu văn bản, màu các văn bản liên kết... BgColor: Màu nền trang Text: Màu văn bản Link: Màu liên kết chưa truy cập VLink: Màu liên kết đã truy cập Alink: Màu liên kết khi đang trỏ Mouse Thiết kế Web 20 <BODY BgColor=“Màu” Text=“Màu” Link=“Màu” VLink=“Màu” Alink=“Màu”> . . . . . Nội dung trang Web. . . . . Sử dụng màu • Xác lập màu cho văn bản: Dùng thuộc tính Color của thẻ FONT để xác lập màu: cho nội dung văn bản chỉ định. VD: Công nghệ thông tin Thiết kế Web 21 Nội dung văn bản HIỆU ỨNG CHUYỂN ĐỘNG CHỮ Trong đó: Hiệu ứng: +Scroll:Bắt đầu từ 1 cạnh biến mất ở cạnh kia +Slide:Bắt đầu từ 1 cạnh dừng lại ở cạnh kia +Alternate:Bắt đầu từ 1 cạnh chuyển ngược lại ở cạnh kia Huớng: Left, Right, Up, Down (Hướng bắt đầu) n1: Số lần lặp ; n2: Khoảng cách(Pixel) giữa mỗi lần lặp; n3: Thời gian chờ giữa mỗi lần lặp Thiết kế Web 22 <Marquee Behavior=“Hiệu ứng” Direction=“Hướng” Loop=n1 SrollAmount=n2 ScrollDelay=n3 BgColor=“Trị màu”> Chuỗi ký tự HIỆU ỨNG CHUYỂN ĐỘNG CHỮ Ví dụ: Thiết kế Web 23 LIST – DANH SÁCH Danh sách được dùng để trình bày thông tin thành dạng dễ đọc hơn. Chẳng hạn để tạo các bảng chỉ mục, nội dung của các tài liệu hay các chương. HTML có 2 kiểu danh sách: danh sách có thứ tự (ordered) và danh sách không có thứ tự (un ordered). 1. Danh sách không có thứ tự Danh sách không có thứ tự có các mục bắt đầu ký hiệu đánh dấu ở trước Ví dụ: • List 1 • List 2 Thiết kế Web 24 22/04/2011 5 LIST – DANH SÁCH Để tạo ra danh sách không có thứ tự ta dùng các tag sau: Trong đó: - type = “square” (là dạng hình vuông)  List 1  List 2 - type = “bullet” (là dạng hình tròn) • List 1 • List 2 - type = “circle” (là dạng hình tròn rổng) o List 1 o List 2 Thiết kế Web 25 List 1 List 2 ………………….. List n LIST – DANH SÁCH Ví dụ: Thiết kế Web 26 Thiết kế Web 27 LIST – DANH SÁCH 2. Danh sách có thứ tự Danh sách có thứ tự là danh sách mà mỗi mục danh sách được đánh số, thường bắt đấu là 1. Ví dụ: 1. L ist1 2. List 2 Để tạo ra danh sách có thứ tự ta dùng các tag sau: Thiết kế Web 28 List 1 List 2 ………………….. List n LIST – DANH SÁCH Trong đó: - type= 1: giá trị sẽ là số . start: chỉ mục bắt đầu Ví dụ: 1. List 1 2. List 2 - type=a: giá trị sẽ là a, b, c - type = A, giá trị sẽ là ký tự Ví dụ: A. List 1 B. List 2 - type=i: giá trị sẽ là i, ii, iii,… - type=I: giá trị sẽ là I, II, III,… Thiết kế Web 29 Ví dụ: list 1 list 2 Kết quả: 4. list 1 5. list 2 LIST – DANH SÁCH Ví dụ 1: Thiết kế Web 30 22/04/2011 6 Thiết kế Web 31 LIST – DANH SÁCH Ví dụ 2: Thiết kế Web 32 Thiết kế Web 33 Đưa hình ảnh vào trang web - Các kiểu tập tin hình ảnh cho phép: .jpg, .gif, .png, .bmp - Sử dụng hình ảnh cần cân nhắc: số lượng ảnh/1trang, kích thước và độ phân giải, nhằm cải thiện tốc độ truy cập. - Phải lưu hình ảnh ở vị trí nào đó trong thư mục chính của Website 1.Thiết lập ảnh nền cho trang - Sử dụng thuộc tính Background trong thẻ BODY Thiết kế Web 34 Đưa hình ảnh vào trang web • Tên tập tin : Là địa chỉ tuyệt đối hoặc tương đối của tập tin ảnh • Bgproperties =Fixed : Hình ảnh mờ bất động VD: Bổ sung thuộc tính ảnh nền vào 1 trang html bất kỳ. Giả sử tập tin ảnh lưu trong thư mục Images. Tập tin Htm lưu cùng cấp với thư mục Images Thiết kế Web 35 Đưa hình ảnh vào trang web 2. Chèn hình ảnh vào trang Web • Tên tập tin : Là địa chỉ tuyệt đối or tương đối của ảnh • Chú thích: Hiển thị trên trình duyệt khi trỏ Mouse vào hình VD: • n1, n2 : Là tỷ lệ % so với kích thước đối tượng chứa nó hoặc kích thước tính theo Pixel. • n : Độ dày đường viền Thiết kế Web 36 <IMG Src=“tên tập tin” ” Width=“n1” Height=“n2” Align=“Hướng” Border=“n” Alt=“Chú thích”> 22/04/2011 7 Đưa hình ảnh vào trang web • Hướng: .Top: Phần đầu thẳng hàng với dòng đầu VB. .Middle: Phần giữa thẳng hàng với dòng đầu VB. .Bottom: Phần cuối thẳng hàng với dòng đầu VB. .Left:Biên trái ảnh căn thẳng lề trái trang, VB bao quanh bên phải ảnh. .Right:Biên phải ảnh căn thẳng lề phải trang, VB bao quanh bên trái ảnh. .Nếu không khai báo mặc định là thuộc tính Bottom Thiết kế Web 37 Đưa hình ảnh vào trang web Ví dụ: Thiết kế Web 38 Thiết kế Web 39 Link – Liên kết • HTML có khả năng tạo ra các mối liên kết đến các thông tin liên quan. • Các siêu liên kết (Hyper Link) là cốt lõi của tập tin HTML cho phép truy cập đến các trang khác trên cùng máy tính hay ở máy tính khác gồm hình ảnh, âm thanh, Multimedia, HTML,… • Khi Click vào liên kết sự truy cập tại địa chỉ truy cập sẽ thực hiện tự động • Cấu trúc: Thiết kế Web 40 Nhãn liên kết Link – Liên kết 1.Liên kết cục bộ (local link): VD:Abouts 2. Liên kết đến một hình ảnh: VD: View Image 3. Liên kết đến một trang web khác trên internet: VD: ITC 4. Liên kết đến địa chỉ email: VD:Send Mail 5. Tạo liên kết cho tập tin Media: VD:Music 6. Liên kết đến một file - doanload (.doc,.xls,.rar,.pdf,…) VD:Ebook Thiết kế Web 41 Link – Liên kết Ví dụ: Thiết kế Web 42 22/04/2011 8 Thiết kế Web 43 NHÚNG TẬP TIN MEDIA Các dạng tập tin âm thanh thông dụng trên Internet: .wav, .mp3, .wmv, .wma,.mpeg, .Ra, .Rm . . . hay các tập tin Flash : .swf trong đó: Align, Width, Height : Các thuộc tính điều khiển Control VD: Tạo tập tin HTM với nội dung như sau: Thiết kế Web 44 <Embed Src=“Tên tập tin” AutoStart=“True”|“False” Align=“Hướng” Widht=n1 Height=n2> Table – Bảng biểu Việc trình bày trang web theo dạng bảng sẽ làm cho trang web trở nên chuyên Nghiệp hơn. Với dạng bảng bạn có thể chia trang web thành nhiều phần, bạn có thể áp dụng các kiến thức đã học để trang trí riêng cho từng phần 1. Tag cơ bản của bảng: , , : <TABLE border=giá trị cellpadding=X cellspacing=Y bordercolor=”màu” bgcolor=”màu” background=”image” > Hàng 1 cột 1 Hàng 1 cột 2 Hàng 1 cột 3 Hàng 2 cột 1 Hàng 2 cột 2 Hàng 2 cột 3 Thiết kế Web 45 Table – Bảng biểu - X: Khoảng cách giữa nội dung của một ô và đường viền ô đó - Y: Khoảng cách giữa các ô - bordercolor:xác định màu cho khung - bgcolor: xác định màu nền cho table - background: xác định hình nền cho table 2. Hàng và cột: Bảng vừa thiết kế ở trên chỉ là các bảng đơn giản với 2 hàng 3 cột đều nhau. Thực tế có nhiều bảng phức tạp hơn. Để tạo được những bảng phức tạp, chúng ta sử dụng các thuộc tính ColSpan và RowSpan trong tag …… ColSpan =x : chiều rộng của các ô tính theo cột RowSpan =y: chiều cao của các ô tính theo hàng Thiết kế Web 46 Ví dụ 1: Thiết kế Web 47 Table – Bảng biểu Ví dụ 2: Thiết kế Web 48 22/04/2011 9 Thiết kế Web 49 Table – Bảng biểu Ví dụ 3: Thiết kế Web 50 Thiết kế Web 51 Form – Biểu mẫu 1. Giới Thiệu: - Form – Biểu mẫu là một kỹ thuật cho phép chủ trang web giao tiếp với người truy cập. Trên trang web người dùng có thể được yêu cầu trả lời một câu hỏi, cho 1 ý kiến, chọn một mục trong danh sách định trước . . . chủ trang web sẽ tiếp nhận và xử lý thông tin ấy. - Cấu trúc tổng quát: Thiết kế Web 52 Nội dung biểu mẫu Nút gửi dữ liệu Form – Biểu mẫu 2. Định Nghĩa Form: - Dạng 1: Chỉ trình bày không gửi dữ liệu Các đối tượng trong Form - Dạng 2: Thông tin từ Form chuyển cho địa chỉ Mail Các đối tượng trong Form - Dạng 3: Thông tin từ Form chuyển lên Webserver Các đối tượng trong Form Thiết kế Web 53 Form – Biểu mẫu 3. Các thành phần trong form: a. Textarea: tạo ra vùng văn bản, có thể nhập nhiều dòng Trong đó: - Cols: là chiều rộng của vùng văn bản tính theo ký tự - Rols: chiều cao vùng văn bản tính theo hàng - Name: là thuộc tính để nhận dạng, sử dụng trong srcipt Thiết kế Web 54 nội dung 22/04/2011 10 Form – Biểu mẫu b. Textbox: Để nhập vào một dòng đơn. Trong đó: - Size: chỉ chiều dài của textbox - Maxlenght: chỉ số ký tự tối đa hay tối thiểu có thể nhập vào. - Value: là giá trị kiểu xâu được hiển thị Thiết kế Web 55 <INPUT type=”text” name=”…” maxlenght=… size=… value=” “> Form – Biểu mẫu c. PasswordBox: giống textbox nhưng không hiển thị các ký tự d. Radiobutton: Các nút lựa chọn một trong nhiều. Trong đó: -Value: chứa dữ liệu sẽ gửi đến server khi radiobutton đã checked Thiết kế Web 56 <INPUT type=”radio” name=”...“ checked value=”…“ > văn bản đại diện Form – Biểu mẫu e. Checkbox: Hộp chọn checkbox Trong đó: - Value: chứa dữ liệu sẽ gửi đến server khi checkbox đã checked f. Menu (combobox, listbox): Tạo ra hộp menu thả xuống Trong đó: - Multipe: thuộc tính này cho phép bạn chọn nhiều mục Thiết kế Web 57 <INPUT type=”checkbox” name=” “ value=” “ checked> văn bản đại diện nội dung … … … … Form – Biểu mẫu g. Submit and reset buttons: Các button để nhận thông tin và khởi tạo lại thông tin trên form. Nút Submit là nút để sever có thể lấy thông tin từ người dùng sử dụng. Sau khi nhập liệu xong, người dùng ấn vào nút này thì mọi thông tin sẽ gửi đến server. Nếu có thông tin sai quy định thì lập tức server sẽ gửi trả lại kèm với thông tin báo lỗi. Nút reset sẽ khởi tạo lại toàn bộ các giá trị của form bằng các giá trị mặc định. Trong đó: - Value: chứa phần text hiển thị trên nút bấm. Nút reset chỉ khởi động lại các giá trị trong cùng một form mà thôi. Thiết kế Web 58 Hoặc Hoặc Form – Biểu mẫu Ví dụ 1: Thiết kế Web 59 Thiết kế Web 60 22/04/2011 11 Form – Biểu mẫu Ví dụ 2: Thiết kế Web 61 Thiết kế Web 62 FAQ ? ? ? Thiết kế Web 63 THIẾT KẾ WEB JavaScript Dzoãn Xuân Thanh Lời nói đầu Mục tiêu: • Hiểu được cấu trúc của một website. • Xây dựng được một web site bằng HTML Thời lượng: 30LT + 30TH Đối tượng: Những ai cần Hình thức thi: Lý thuyết (thi hết môn) + Thực hành (đề tài) Công cụ hổ trợ: Dreamweaver Thiết kế Web 65 NGÔN NGỮ KỊCH BẢN JAVASCRIPT JavaScript Exemple var name=window.prompt(“Hello! What’s your name ?”,””); document.write(“Hello ” + name + “ ! Do you like JavaScript ”); Thiết kế Web 66 Ví dụ: 22/04/2011 12 NGÔN NGỮ KỊCH BẢN JAVASCRIPT Thiết kế Web 67 Biến trong Javascript • Cũng như các ngôn ngữ lập trình khác javascript dùng biến để lưu trữ các giá trị nhập vào, các giá trị tính toán . . .Nói cách khác biến là vùng nhớ sử dụng để lưu trữ các giá trị khác nhau trong quá trình chương trình hoạt động. • Mỗi biến có một tên, Tên biến trong JavaScript phải bắt đầu bằng ký tự . Phạm vi của biến có thể là một trong hai kiểu sau: • Biến toàn cục: Có thể được truy cập từ bất kỳ đâu trong ứng dụng. Được khai báo: x = 0; • Biến cục bộ: Chỉ được truy cập trong phạm vi chương trình mà nó khai báo. Biến cục bộ được khai báo trong một hàm với từ khoá var: var x = 0; Thiết kế Web 68 Kiểu dữ liệu 1. Kiểu nguyên (Interger) Số nguyên có thể được biểu diễn theo ba cách: Hệ cơ số 10 (hệ thập phân), Hệ cơ số 8 (hệ bát phân) và Hệ cơ số 16 (hệ thập lục phân) -Với hai chữ số đầu tiên là 0x. (VD: 0x5F) 2. Kiểu dấu phẩy động (Floating Point) Một biến có kiểu dấu phẩy động có 4 thành phần sau: Phần nguyên thập phân. Dấu chấm thập phân (.). Phần dư. Phần mũ. Để phân biệt kiểu dấu phẩy động với kiểu số nguyên, phải có ít nhất một chữ số theo sau dấu chấm hay E VD: 9.87 hay 9.87E14 Thiết kế Web 69 Kiểu dữ liệu 3. Kiểu logic (Boolean) Kiểu logic được sử dụng để chỉ hai điều kiện : đúng hoặc sai. Miền giá trị của kiểu này chỉ có hai giá trị : true , false 4. Kiểu chuỗi (String) Một biến kiểu chuỗi biểu diễn bởi không hay nhiều ký tự đặt trong cặp dấu " ... " hay '... ' VD: “The dog ran up the tree” hay “100” Ghi chú: Để biểu diễn dấu nháy kép ( " ), trong chuỗi sử dụng ( \" ), VD: document.write(“ \”This text inside quotes.\” ”); Thiết kế Web 70 Toán tử & Biểu thức trong JavaScript 1. Định nghĩa và phân loại biểu thức: Tập hợp các biến và các toán tử nhằm đánh giá một giá trị nào đó được gọi là một biểu thức (expression). Về cơ bản có ba kiểu biểu thức: • Số học: Nhằm để lượng giá giá trị số. VD: (3+4)+(84.5/3) bằng 197.1666666667. • Chuỗi: Nhằm để đánh giá chuỗi. VD: "The dog”+”barked!" là “The dog barked!” • Logic: Nhằm đánh giá giá trị logic. VD: 23>32 là False. • Ngoài ra JavaScript cũng hỗ trợ biểu thức điều kiện, cú pháp như sau: (biểu thức) ? giá trị đúng: giá trị sai .VD: xeploai= (diemtb>=8) ? “Gioi" : “Kha" Thiết kế Web 71 Toán tử & Biểu thức trong JavaScript 2. Các toán tử (Operator): a) Gán: b) So sánh Thiết kế Web 72 22/04/2011 13 Toán tử & Biểu thức trong JavaScript c) Số học: d) Chuỗi: Khi được sử dụng với chuỗi, toán tử + được coi là kết hợp hai chuỗi, ví dụ: "abc" + "xyz" được "abcxyz“ Chú ý: Nếu bạn gán giá trị của toán tử ++ hay -- vào một biến, như y= x++, có thể có các kết quả khác nhau phụ thuộc vào vị trí xuất hiện trước hay sau của ++ hay -- với tên biến (là x trong trường hợp này). Nếu ++ đứng trước x, x sẽ được tăng hoặc giảm trước khi giá trị x được gán cho y. Nếu ++ hay -- đứng sau x, giá trị của x được gán cho y trước khi nó được tăng hay giảm. Thiết kế Web 73 Cấu trúc và lệnh: rẽ nhánh, lặp, thao tác trên đối tượng 1. Cấu trúc lệnh rẽ nhánh (Điều Kiện): Cú pháp: Ví dụ: if (x==10){ document.write(“x bằng 10, đặt lại x bằng 0.”); x = 0; } else document.write(“x không bằng 10.”); Thiết kế Web 74 if ( ) { //Các câu lệnh với điều kiện đúng } else{ //Các câu lệnh với điều kiện sai } Cấu trúc và lệnh: rẽ nhánh, lặp, thao tác trên đối tượng 2. Cấu trúc lệnh lặp: a) For: Ví dụ: For loop Example for (x=1; x<=10 ; x++) { y=x*25; document.write("x ="+ x +";y= "+ y + ""); } Thiết kế Web 75 for (initExpr; ; incrExpr){ //Các lệnh được thực hiện trong khi lặp } b) While: Vòng lặp while lặp khối lệnh chừng nào còn được đánh giá là đúng Ví dụ: //Kết quả của VD này giống như VD trước x=1; while (x<=10){ y=x*25; document.write("x="+x +"; y = "+ y + ""); x++; } Thiết kế Web 76 while (){ //Các câu lệnh thực hiện trong khi lặp } Cấu trúc và lệnh: rẽ nhánh, lặp, thao tác trên đối tượng c) Break: Câu lệnh break dùng để kết thúc việc thực hiện của vòng lặp for hay while. Chương trình được tiếp tục thực hiện tại câu lệnh ngay sau chỗ kết thúc của vòng lặp. Cú pháp: break; Ví dụ : Nếu giá trị x đưa vào vòng lặp nhỏ hơn 50, vòng lặp sẽ kết thúc: while (x<100){ if (x<50) break; x++; } Thiết kế Web 77 Cấu trúc và lệnh: rẽ nhánh, lặp, thao tác trên đối tượng d) Lệnh Continue: Đối với vòng lặp while lệnh continue điều khiển quay lại ; với for lệnh continue điều khiển quay lại incrExpr. Cú pháp: continue; Ví dụ: Đoạn mã sau tăng x từ 0 lên 5, nhảy lên 8 và tiếp tục tăng lên 9,10: x=0; while (x<=10) { document.write(“Giá trị của x là:”+ x+””); if (x=5) { x=8; continue; }x++; } Thiết kế Web 78 Cấu trúc và lệnh: rẽ nhánh, lặp, thao tác trên đối tượng 22/04/2011 14 3. Thao tác rên đối tượng:JavaScript là một ngôn ngữ dựa trên đối tượng, do đó nó có một số câu lệnh làm việc với các đối tượng. a) FOR...IN: Câu lệnh này được sử dụng để lặp tất cả các thuộc tính (properties) của một đối tượng. Tên biến có thể là một giá trị bất kỳ, chỉ cần thiết khi bạn sử dụng các thuộc tính trong vòng lặp. Ví dụ sau sẽ minh hoạ điều này Cú pháp: Thiết kế Web 79 Cấu trúc và lệnh: rẽ nhánh, lặp, thao tác trên đối tượng for ( in ){ //Các câu lệnh } Ví dụ: lấy ra tất cả các thuộc tính của đối tượng Window và in ra tên của mỗi thuộc tính. For in Example document.write("The properties of the Window object are: ”); for (var x in window) document.write(“ "+ x + ", "); Thiết kế Web 80 Cấu trúc và lệnh: rẽ nhánh, lặp, thao tác trên đối tượng b) NEW: Biến new được thực hiện để tạo ra một thể hiện mới của một đối tượng. Cú pháp: objectvar = new object_type([param1],[param2]...,[paramN]) Ví dụ: tạo đối tượng person có các thuộc tính firstname, lastname, age, sex. Chú ý rằng từ khoá this được sử dụng để chỉ đối tượng trong hàm person. Sau đó ba thể hiện của đối tượng person được tạo ra bằng lệnh new Thiết kế Web 81 Cấu trúc và lệnh: rẽ nhánh, lặp, thao tác trên đối tượng New Example function Nguoi(Ten, HoLot, Tuoi, Phai){ this.Ten=Ten; this.HoLot= HoLot; this. Tuoi =Tuoi; this.Phai= Phai; } person1= new Nguoi ("Ty", "Tran Van", "18", "Nu"); person2= new Nguoi ("Suu", "Nguyen Van", "20", "Nam"); person3= new Nguoi ("Dan", "Nguyen Nhat", "21", "Nam"); document.write ("1."+person1.Ten+" " + person1.HoLot+ "" ); document.write("2."+person2. Ten +" "+ person2. HoLot + ""); document.write("3."+ person3. Ten +" "+ person3. HoLot + ""); Thiết kế Web 82 Cấu trúc và lệnh: rẽ nhánh, lặp, thao tác trên đối tượng c) THIS: Từ khoá this được sử dụng để chỉ đối tượng hiện thời. Đối tượng được gọi thường là đối tượng hiện thời trong phương thức hoặc trong hàm. Cú pháp: this [.property] Có thể xem ví dụ của lệnh new. d) WITH: Lệnh này được sử dụng để thiết lập đối tượng ngầm định cho một nhóm các lệnh, bạn có thể sử dụng các thuộc tính mà không đề cập đến đối tượng. Cú pháp: Ví dụ: sử dụng lệnh with để thiết lập đối tượng ngầm định là document và có thể sử dụng phương thức write mà không cần đề cập đến đối tượng document With Example with (document) { write(“Day la phat bieu with . ”); write(“Dang su dung phuong thuc write ma khong can dung den doi tuong document”); } Thiết kế Web 83 Cấu trúc và lệnh: rẽ nhánh, lặp, thao tác trên đối tượng with (object){ // statement } Function - Hàm • Trong lập trình sử dụng hàm là để thực hiện một đoạn chương trình nào đó. Trong Javascript có các hàm được xây dựng sẵn để giúp thực hiện một chức năng và ta cũng có thể định nghĩa ra các hàm khác để thực hiện một công việc nào đó. • Hàm có thể có 1 hay nhiều tham số truyền vào và 1 giá trị trả về. Hàm có thể là thuộc tính của 1 đối tượng, trong trường hợp này nó được xem như là phương thức của đối tượng đó. • Cú pháp: Thiết kế Web 84 function fnName([param1],[param2],...,[paramN]) { //function statement } 22/04/2011 15 Function - Hàm • Ví dụ: Function function testQuestion(question){ var answer=eval(question); var output="What is " + question + "?"; var correct=" alt='vui'"; var incorrect=" alt='buon'"; var response=prompt(output,"0"); return(response == answer)?correct:incorrect; } var result=testQuestion("10 + 10"); document.write(result); Thiết kế Web 85 Function - Hàm Các hàm hổ trợ: 1. Hàm eval: Chuyển đổi giá trị chuỗi thành giá trị số. Cú pháp: returnval=eval (biểu thức) Ví dụ: Eval Example var string=”10+ Math.sqrt(64)”; document.write(string+ “=”+ eval(string)); Thiết kế Web 86 Function - Hàm 2. Hàm parseInt: Hàm này chuyển một chuỗi số thành số nguyên với cơ số là tham số thứ hai. Cú pháp: parseInt (string, [, radix]) Ví dụ: ParserInt Example document.write("Converting 0xC hex to base-10: " + parseInt(0xC,10) + ""); document.write("Converting 1100 binary to base-10:" + parseInt(1100,2) + ""); Thiết kế Web 87 Function - Hàm 3. Hàm parseFloat: Hàm này giống hàm parseInt nhưng nó chuyển chuỗi thành số biểu diễn dưới dạng dấu phẩy động. Cú pháp: parseFloat (string) Ví dụ: document.write("This script will show how diffrent strings are "); document.write("Converted using parseFloat"); document.write("137= " + parseFloat("137") + ""); document.write("137abc= " + parseFloat("137abc") + ""); document.write("abc137= " + parseFloat("abc137") + ""); document.write("1abc37= " + parseFloat("1abc37") + ""); Thiết kế Web 88 Array - Mảng Mặc dù JavaScript không hỗ trợ cấu trúc dữ liệu mảng nhưng tạo ra phương thức cho phép bạn tự tạo ra các hàm khởi tạo mảng như sau: function taomang(n) { this.length = n; for (var x=1; x<=n; x++){ this[x]=0 } return this; } Thiết kế Web 89 Array - Mảng Ví dụ: Array Exemple function taomang(n) { this.length = n; for (var i=1; i<=n; i++){ this[i]=0 } return this; } a = new taomang(10); a[1] = "Nghệ An"; a[2] = "Hà Nội"; document.write(a[1] + ""); document.write(a[2] + ""); Thiết kế Web 90 22/04/2011 16 Đối tượng và sự kiện 1. Các đối tượng:: Thiết kế Web 91 Đối tượng và sự kiện 2. Sự kiện: - Một số sự kiện trong JavaScript: Thiết kế Web 92 onBlur Xảy ra khi input focus bị xoá từ thành phần form onClick Xảy ra khi người dùng kích vào các thành phần hay liên kết của form. onChange Xảy ra khi giá trị của thành phần được chọn thay đổi onFocus Xảy ra khi thành phần của form được focus(làm nổi lên). onLoad Xảy ra trang Web được tải. onMouseOver Xảy ra khi di chuyển chuột qua kết nối hay anchor. onSelect Xảy ra khi người sử dụng lựa chọn một trường nhập dữ liệu trên form. onSubmit Xảy ra khi người dùng đưa ra một form. onUnLoad Xảy ra khi người dùng đóng một trang Đối tượng và sự kiện - Các sự kiện có sẵn của một số đối tượng: Thiết kế Web 93 Đối tượng Chương trình xử lý sự kiện có sẵn Selection list onBlur, onChange, onFocus Text onBlur, onChange, onFocus, onSelect Textarea onBlur, onChange, onFocus, onSelect Button onClick Checkbox onClick Radio button onClick Hypertext link onClick, onMouseOver, onMouseOut Clickable Imagemap area onMouseOver, onMouseOut Reset button onClick Submit button onClick Document onLoad, onUnload, onError Window onLoad, onUnload, onBlur, onFocus Framesets onBlur, onFocus Form onSubmit, onReset Image onLoad, onError, onAbort Đối tượng và sự kiện - Ví dụ: Event Handler <BODY onLoad="alert('Welcome to my page!');" onUnload="alert('Goodbye! ');"> Thiết kế Web 94 Đối tượng và sự kiện Thiết kế Web 95 3. Các đối tượng thường dùng 3.1 Đối tượng Navigator: Đối tượng này được sử dụng để đạt được các thông tin về trình duyệt như số phiên bản. Đối tượng này không có phương thức hay chương trình xử lý sự kiện. - Các thuộc tính: Đối tượng và sự kiện Thiết kế Web 96 - Ví dụ: hiển thị các thuộc tính của đối tượng navigator Navigator Object Exemple document.write("appCodeName = "+navigator.appCodeName + ""); document.write("appName = "+navigator.appName + ""); document.write("appVersion = "+navigator.appVersion + ""); document.write("userAgent = "+navigator.userAgent + ""); 22/04/2011 17 Đối tượng và sự kiện Thiết kế Web 97 3.2 Đối tượng window: Đối tượng window là đối tượng ở mức cao nhất. Các đối tượng document, frame, location đều là thuộc tính của đối tượng window. - Các thuộc tính: defaultStatus Thông báo ngầm định hiển thị lên trên thanh trạng thái của cửa sổ Frames Mảng xác định tất cả các frame trong cửa sổ. Length Số lượng các frame trong cửa sổ cha. Name Tên của cửa sổ hiện thời. Parent Đối tượng cửa sổ chA Self Cửa sổ hiện thời. Status Được sử dụng thông báo tạm thời hiển thị lên trên thanh trạng thái cửa sổ. Top Cửa sổ ở trên cùng. Window Cửa sổ hiện thời. Đối tượng và sự kiện Thiết kế Web 98 - Các phương thức: alert ("message") Hiển thị hộp thoại với chuỗi "message" và nút OK. clearTimeout(timeoutID) Xóa timeout do SetTimeout đặt. SetTimeout trả lại timeoutID WindowReference.close Đóng cửa sổ windowReference. confirm("message") Hiển thị hộp thoại với chuỗi "message", nút OK và nút Cancel. Trả lại trị True cho OK và False cho Cancel. [windowVar = ][window]. open("URL", "windowName", [ "windowFeatures" ] ) Mở cửa sổ mới. prompt ("message" [,"defaultInput"]) Mở hộp hội thoại để nhận dữ liệu vào trường text. TimeoutID = setTimeout(expression,msec) Đánh giá biểu thức expresion sau thời gian msec. Đối tượng và sự kiện Thiết kế Web 99 - Ví dụ: Window Object <Input Type="button" VALUE="Open Second Window" onClick="msgWindow=window.open('','window2','resizable=no,width=200,height=200')"> Load a File into window2 Đối tượng và sự kiện 3.3 Đối tượng document: Đối tượng này chứa các thông tin về document hiện thời. Đối tượng document được tạo ra bằng cặp thẻ và . Một số các thuộc tính gắn với thẻ . - Các thuộc tính: Thiết kế Web 100 alinkColor Giống như thuộc tính ALINK. anchor Mảng tất cả các anchor trong document. bgColor Giống thuộc tính BGCOLOR. cookie Sử dụng để xác định cookie. fgColor Giống thuộc tính TEXT. forms Mảng tất cả các form trong document. lastModified Ngày cuối cùng văn bản được sửa. linkColor Giống thuộc tính LINK. links Mảng tất cả các link trong document. location URLđầy đủ của văn bản. referrer URLcủa văn bản gọi nó. title Nội dung của thẻ . vlinkColor Giống thuộc tính VLINK. Đối tượng và sự kiện - Các phương thức: Thiết kế Web 101 document.clear Xoá document hiện thời. document.close Đóng dòng dữ liệu vào và đưa toàn bộ dữ liệu ra màn hình. document.open (["mineType"]) Mở một stream để thu thập dữ liệu vào của các phương thức write và writeln. document.write(expression1 [,expression2]...[,expressionN]) Viết biểu thức HTML lên văn bản trông một cửa sổ xác định. document.writeln (expression1 [,expression2] ... [,expressionN] ) Giống phương thức trên nhưng khi hết mỗi biểu thức lại xuống dòng. Đối tượng và sự kiện 3.4 Đối tượng location: Các thuộc tính của đối tượng location duy trì các thông tin về URL của document hiện thời. VD:http:// www.abc.com/ chap1/page2.html#topic3 - Các thuộc tính: Thiết kế Web 102 hash Tên anchor của vị trí hiện thời (VD topic3). Host Phần hostname:port của URL (VD www.abc.com ). Hostname Tên của host và domain (VD www.abc.com ). href Toàn bộ URL cho document hiện tại. Pathname Phần đường dẫn của URL (VD /chap1/page2.html). Port Cổng truyền thông được sử dụng cho máy tính host, thường là cổng ngầm định. Protocol Giao thức được sử dụng (cùng với dấu hai chấm) (VD http:). Search Câu truy vấn tìm kiếm có thể ở cuối URL cho các script CGI. 22/04/2011 18 Đối tượng và sự kiện 3.5 Đối tượng history: Đối tượng này được sử dụng để lưu giữ các thông tin về các URL trước được người sử dụng sử dụng. Danh sách các URL được lưu trữ theo thứ tự thời gian. - Các thuộc tính: Length - Số lượng các URL trong đối tượng. - Các phương thức: • history.back() - Được sử dụng để tham chiếu tới URL mới được thăm trước đây. • history.forward() - Được sử dụng để tham chiếu tới URL kế tiếp trong danh sách. • history.go (delta | "location") - Được sử dụng để chuyển lên hay chuyển xuống delta bậc hay di chuyển đến URL xác định bởi location trong danh sách. Dịch chuyển lên phía trên khi delta dương và xuống phía dưới khi delta âm. Thiết kế Web 103 Đối tượng và sự kiện 3.6 Đối tượng links: Đối tượng link là một đoạn văn bản hay một ảnh được xem là một siêu liên kết. Các thuộc tính của đối tượng link chủ yếu xử lý về URL của các siêu liên kết. - Ví dụ: http:// www.abc.com/ chap1/page2.html#topic3 - Các thuộc tính: Thiết kế Web 104 hash Tên anchor của vị trí hiện thời (VD topic3). Host Phần hostname:port của URL (VD www.abc.com). Hostname Tên của host và domain (VD ww.abc.com). href Toàn bộ URL cho document hiện tại. Pathname Phần đường dẫn của URL (VD /chap1/page2.html). port Cổng truyền thông được sử dụng cho máy tính host, thường là cổng ngầm định. Protocol Giao thức được sử dụng (cùng với dấu hai chấm) (VD http:). Search Câu truy vấn tìm kiếm có thể ở cuối URL cho các script CGI. Target Giống thuộc tính TARGET của Đối tượng và sự kiện 3.7 Đối tượng forms: Các form được tạo ra nhờ cặp thẻ . . . . Có một vài phần tử (elements) của đối tượng forms như: Button, checkbox, password, radio, reset, select, submit, text, textarea, … - Các thuộc tính: Thiết kế Web 105 Action thuộc tính ACTION của thẻ FORM. Elements Mảng chứa các thành phần trong form (như checkbox, textbox . . Encoding Xâu chứa kiểu MIME được sử dụng để mã hoá nội dung của form gửi cho server. length Số lượng các thành phần trong một form. Method Thuộc tính METHOD. target Xâu chứa tên của cửa sổ đích khi submit form Đối tượng và sự kiện - Các phương thức: formName.submit () - Xuất dữ liệu của một form tên formName tới trang xử lý. Phương thức này mô phỏng một click vào nút submit trên form - Các chương trình xử lý sự kiện: onSubmit: Chương trình xử lý sự kiện này được gọi khi người sử dụng chuyển dữ liệu từ form đi a) Phần tử Text: Phần tử này nằm trong những phần tử hay được sử dụng nhất trong các form HTML. Trường text cho phép nhập vào một dòng đơn. Thiết kế Web 106 Đối tượng và sự kiện: phần tử Text - Các thuộc tính và phương thức: -VD: Trang TextField.htm Tự động cập nhật các trường text . TextField Example function echo(form,currentField){ if (currentField == "first") form.second.value = form.first.value; else form.first.value = form.second.value; } Thiết kế Web 107 Thuộc tính Mô tả defaultValue Chỉ ra giá trị mặc định của phần tử được chỉ ra trong thẻ INPUT (thuộc tính) name Tên của đối tượng được chỉ ra trong thẻ INPUT (thuộc tính) value Giá trị hiện thời của phần tử (thuộc tính) focus() Mô tả việc con trỏ tới trường text (cách thức) blur() Mô tả việc con trỏ rời trường text (cách thức) select() Mô tả việc lựa chọn dòng text trong trường text (cách thức) Đối tượng và sự kiện: phần tử Textarea b) Phần tử Textarea: Thẻ TEXTAREA cung cấp một hộp cho phép nhập số dòng text do người thiết kế định trước. Ví dụ: Default Text Here ví dụ này tạo ra một trường text cho phép đưa vào 10 hàng , mỗi hàng 25 ký tự. Dòng "Defautl Text Here"sẽ xuất hiện trong trường này vào lần hiển thị đầu tiên. • Thuộc tính: tương tự phần tử text, Textarea cũng có các thuộc tính defaultValue, name, và value. • Cách thức: focus(), select(), và blur() • Sự kiện: onBlur, onForcus, onChange, onSelect. Thiết kế Web 108 22/04/2011 19 Đối tượng và sự kiện: phần tử Raido c) Phần tử radio:Đối tượng radio gần giống sự bật tắt checkbox. Khi nhiều radio được kết hợp thành một nhóm, chỉ có một nút được chọn trong bất kỳ một thời điểm nào.Nhóm các nút radio lại bằng cách đặt cho chúng có cùng một tên trong các thẻ INPUT. - Các thuộc tính và phương thức: - Sự kiện: onClick Thiết kế Web 109 Thuộc tính Mô tả checked Mô tả trạng thái hiện thời của phần tử radio defaultChecked Mô tả trạng thái mặc định của phần tử index Mô tả thứ tự của nút radio được chọn hiện thời trong một nhóm length Mô tả tổng số nút radio trong một nhóm name Mô tả tên của phần tử được chỉ định trong thẻ INPUT value Mô tả giá trị hiện thời của phần tử được định ra trong thẻ INPUT click() Mô phỏng một click trên nút radio (cách thức) Đối tượng và sự kiện: phần tử Raido - Ví dụ: Thiết kế Web 110 Đối tượng và sự kiện: phần tử checkbox d) Phần tử checkbox: Các phần tử checkbox có khả năng bật tắt dùng để chọn hoặc không chọn một thông tin. - Các thuộc tính và các phương thức: - Sự kiện: onClick - Ví dụ: Thiết kế Web 111 checked Cho biết trạng thái hiện thời của checkbox defaultChecked Cho biết trạng thái mặc định của phần tử name Cho biết tên của phần tử được chỉ định trong thẻ INPUT value Cho biết giá trị hiện thời của phần tử được chỉ định trong thẻ INPUT click() Mô tả một click vào checkbox (Phương thức) Đối tượng và sự kiện: phần tử Select e) Phần tử select: • Với các thành phần lựa chọn, danh sách các lựa chọn được chứa trong một mảng được đánh số từ 0. Trong trường hợp này, mảng là một thuộc tính của đối tượng select gọi là option. • Cả việc lựa chọn các option và từng phần tử option riêng biệt đều có những thuộc tính. Bổ sung thêm vào mảng option, phần tử select có thuộc tính selectedIndex, có chứa số thứ tự của option được lựa chọn hiện thời - Thuộc tính của các mục chọn (option): Thiết kế Web 112 DEFAULTSELECTED Cho biết option có mặc định là chọn trong thẻ OPTION hay không. INDEX Chứa giá trị số thứ tự của option hịên thời trong mảng option. SELECTED Cho biết trạng thái hiện thời của option TEXT Có chứa giá trị của dòng text hiển thị trên menu cho mỗi option, và thuộc tính value mọi giá trị chỉ ra trong thẻ OPTION. Đối tượng và sự kiện: phần tử Button f) Phần tử button: Trong một form HTML chuẩn, chỉ có hai nút bấm có sẵn là submit và reset bởi vì dữ liệu trong form phải được gửi tới một địa chỉ URL để xử lý và lưu trữ. Một phần tử button được chỉ định rõ khi sử dụng thẻ INPUT: - Sự kiện duy nhất là onClick. - Ví dụ: Thiết kế Web 113 Đối tượng và sự kiện: phần tử Reset g) Phần tử reset: Sử dụng đối tượng reset, cũng giống đối tượng button, đối tượng reset có hai thuộc tính là name và value và một sự kiện onClick. Đối tượng reset dùng để xoá form - Ví dụ: Thiết kế Web 114 22/04/2011 20 Đối tượng và sự kiện h) Phần tử submit: Nút Submit là một trường hợp đặc biệt của button, cũng như nút Reset. Nút này đưa thông tin hiện tại từ các trường của form tới địa chỉ URL được chỉ ra trong thuộc tính ACTION của thẻ form sử dụng cách thức METHOD chỉ ra trong thẻ FORM i) Phần tử File Upload: Phần tử này cung cấp cho form một cách để người sử dụng có thể chỉ rõ một File đưa vào form xử lý. j) Phần tử hidden: Phần tử hidden là phần tử không được hiển thị trên Web browser. Trường hidden có thể sử dụng để lưu các giá trị cần thiết để gửi tới server song song với sự xuất ra từ form nhưng nó không được hiển thị trên trang. k) Phần tử Password: Đối tượng Password là đối tượng mà khi gõ bất kỳ ký tự nào vào cũng đều hiển thị dấu sao(*). Dùng để nhập những thông tin bí mật như mật khẩu... Thiết kế Web 115 Đối tượng và sự kiện 3.8 Đối tượng Date: Đối tượng Date là đối tượng có sẵn trong JavaScript. Nó cung cấp nhiều phương thức có ích để xử lý về thời gian và ngày tháng - Các phương thức: Thiết kế Web 116 dateVar.getDate() Trả lại ngày trong tháng (1-31) cho dateVar. dateVar.getDay() Trả lại ngày trong tuần (0=chủ nhật,...6=thứ bảy) cho dateVar. dateVar.getHours() Trả lại giờ (0-23) cho dateVar. dateVar.getMinutes() Trả lại phút (0-59) cho dateVar. dateVar.getSeconds() Trả lại giây (0-59) cho dateVar. dateVar.getTime() Trả lại số lượng các mili giây từ ngày . dateVar.getTimeZoneOff set() Trả lại độ dịch chuyểnbằng phút của giờ địa phương hiện tại so với giờ quốc tế GMT. dateVar.getYear() Trả lại năm cho dateVar. Date.parse (dateStr) Phân tích chuỗi dateStr và trả lại số lượng các mili giây tính từ 00:00:00 ngày 01/01/1970. Đối tượng và sự kiện dateVar.setDay(day) Đặt ngày trong tháng là day cho dateVar. dateVar.setHours(hours) Đặt giờ là hours cho dateVar. dateVar.setMinutes(minutes) Đặt phút là minutes cho dateVar. dateVar.setMonths(months) Đặt tháng là months cho dateVar. dateVar.setSeconds(seconds) Đặt giây là seconds cho dateVar. dateVar.setTime(value) Đặt thời gian là value, trong đó value biểu diễn số lượng mili giây từ ngày . dateVar.setYear(years) Đặt năm là years cho dateVar. dateVar.toGMTString() Trả lại chuỗi biểu diễn dateVar dưới dạng GMT. dateVar.toLocaleString() Trả lại chuỗi biểu diễn dateVar theo khu vực thời gian hiện thời. Date.UTC (year, month, day [,hours] [,minutes] [,seconds]) Trả lại số lượng mili giây từ GMT. Thiết kế Web 117 - Ví dụ: Đối tượng và sự kiện 3.9 Đối tượng Math: Đối tượng Math là đối tượng nội tại trong JavaScript. Các thuộc tính của đối tượng này chứa nhiều hằng số toán học, các hàm toán học, lượng giác phổ biến - Các thuộc tính: Thiết kế Web 118 E Hằng số Euler, khoảng 2,718. LN2 logarit tự nhiên của 2, khoảng 0,693. LN10 logarit tự nhiên của 10, khoảng 2,302. LOG2E logarit cơ số 2 của e, khoảng 1,442. PI Giá trị của , khoảng 3,14159. SQRT1_2 Căn bậc 2 của 0,5, khoảng 0,707. SQRT2 Căn bậc 2 của 2, khoảng 1,414. Đối tượng và sự kiện - Các phương thức: Thiết kế Web 119 Math.abs (number) Trả lại giá trị tuyệt đối của number. Math.acos (number) Trả lại giá trị arc cosine (theo radian) của number. Giá trị của number phải nămg giữa 1 và 1. Math.asin (number) Trả lại giá trị arc sine (theo radian) của number. Giá trị của number phải nămg giữa 1 và 1. Math.atan (number) Trả lại giá trị arc tan (theo radian) của number. Math.ceil (number) Trả lại số nguyên nhỏ nhất lớn hơn hoặc bằng number. Math.cos (number) Trả lại giá trị cosine của number. Math.exp (number) Trả lại giá trị e^ number, với e là hằng số Euler. Math.floor (number) Trả lại số nguyên lớn nhất nhỏ hơn hoặc bằng number. Math.log (number) Trả lại logarit tự nhiên của number. Math.max (num1,num2) Trả lại giá trị lớn nhất giữa num1 và num2 Math.min (num1,num2) Trả lại giá trị nhỏ nhất giữa num1 và num2. Math.pos (base,exponent) Trả lại giá trị base luỹ thừa exponent. Math.random(r) Trả lại một số ngẫu nhiên giữa 0 và 1. Phwong thức này chỉ thực hiện được trên nền tảng UNIX. Math.round (number) Trả lại giá trị của number làm tròn tới số nguyên gần nhất. Math.sin (number) Trả lại sin của number. Math.sqrt (number) Trả lại căn bậc 2 của number. Math.tan (number) Trả lại tag của number. Đối tượng và sự kiện Đối tượng String: Đối tượng String là đối tượng được xây dựng nội tại trong JavaScript cung cấp nhiều phương thức thao tác trên chuỗi. - Các phương thức: Thiết kế Web 120 str.anchor (name) Được sử dụng để tạo ra thẻ (một cách động). Tham số name là thuộc tính NAME của thẻ . str.big() Kết quả giống như thẻ trên chuỗi str. str.blink() Kết quả giống như thẻ trên chuỗi str. str.bold() Kết quả giống như thẻ trên chuỗi str. str.charAt(a) Trả lại ký tự thứ a trong chuỗi str. str.fixed() Kết quả giống như thẻ trên chuỗi str. str.fontcolor() Kết quả giống như thẻ . str.fontsize(size) Kết quả giống như thẻ . str.index0f(srchStr [,index]) Trả lại vị trí trong chuỗi str vị trí xuất hiện đầu tiên của chuỗi srchStr. Chuỗi str được tìm từ trái sang phải. Tham số index có thể được sử dụng để xác định vị trí bắt đầu tìm kiếm str.italics() Kết quả giống như thẻ trên chuỗi str. 22/04/2011 21 Đối tượng và sự kiện str.lastIndex0f(srchStr [,index]) Trả lại vị trí trong chuỗi str vị trí xuất hiện cuối cùng của chuỗi srchStr. Chuỗi str được tìm từ phải sang trái. Tham số index có thể được sử dụng để xác định vị trí bắt đầu tìm kiếm. str.link(href) Được sử dụng để tạo ra một kết nối HTML động cho chhuỗi str. Tham số href là URL đích của liên kết. str.small() Kết quả giống như thẻ trên chuỗi str. str.strike() Kết quả giống như thẻ trên chuỗi str. str.sub() Tạo ra một subscript cho chuỗi str, giống thẻ . str.substring(a,b) Trả lại chuỗi con của str là các ký tự từ vị trí thứ a tới vị trí thứ b. Các ký tự được đếm từ trái sang phải bắt đầu từ 0. str.sup() Tạo ra superscript cho chuỗi str, giống thẻ . str.toLowerCase() Đổi chuỗi str thành chữ thường. str.toUpperCase() Đổi chuỗi str thành chữ hoa. Thiết kế Web 121 XEM LẠI CÁC LỆNH VÀ MỞ RỘNG Leänh/Môû roäng Kieåu Moâ taû blur() caùch thöùc JavaScript Moâ taû vieäc dòch chuyeån con troû töø moät phaàn töû form.action caùch thöùc JavaScript Xaâu chöùa giaù trò cuûa thuoäc tính ACTION trong theû FORM form.elemrnts thuoäc tính JavaScript maûng chöùa danh saùch caùc phaàn töû trong form (nhö checkbox, tröôøng text, danh saùch löïa choïn) form.encoding thuoäc tính JavaScript xaâu chöùa kieåu MIME söû duïng khi chuyeån thoâng tin töø form tôùi server form,name thuoäc tính JavaScript Xaâu chöùa giaù trò thuoäc tính NAME trong theû FORM form.target thuoäc tính JavaScript Xaâu chöùa teân cöûa soå ñích bôûi moät form submition form.submit caùch thöùc JavaScript Moâ taû vieäc submit moät form HTML type thuoäc tính JavaScript aùnh xaï kieåu cuûa moät phaàn töû form thaønh moät xaâu. onSubmit Theû söï kieän theû söï kieän cho vieäc submit button thuoäc tính HTML Thuoäc tính kieåu cho caùc nuùt baám cuûa HTML () checkbox thuoäc tính HTML Thuoäc tính kieåu cho caùc checkbox cuûa HTML () pasword thuoäc tính HTML Thuoäc tính kieåu cho caùc doøng pasword cuûa HTML() Thiết kế Web 122 XEM LẠI CÁC LỆNH VÀ MỞ RỘNG radio thuoäc tính HTML Thuoäc tính kieåu cho caùc nuùt radio cuûa HTML (<INPUT TYPE=radio>) reset thuoäc tính HTML Thuoäc tính kieåu cho caùc nuùt reset cuûa HTML (<INPUT TYPE=reset>) SELECT theû HTML Hoäp theû cho danh saùch löïa choïn OPTION theû HTML chæ ra caùc löïa choïn trong danh saùch löïa choïn(Option 1Option 2) submit thuoäc tính HTML Thuoäc tính kieåu cuûa nuùt submit (<INPUT TYPE=submit>) text thuoäc tính HTML Thuoäc tính kieåu cuûa tröôøng trong form (<INPUT TYPE=text>) TEXTAREA Theû HTML Hoäp theû cho nhieàu doøng text ( defautl text ) name thuoäc tính JavaScript Xaâu chöùa teân phaàn töû HTML (button, checkbox, password...) value thuoäc tính JavaScript Xaâu chöùa giaù trò hieân thôøi cuûa moät phaàn töû HTML(button, checkbox, password...) click() caùch thöùc JavaScript Moâ taû vieäc kích vaøo moät phaàn töû treân form (button, checkbox,password) onClick thuoäc tính JavaScript Theû söï kieän cho söï kieän kích (button, checkbox, radio button, reset, selection list, submit) checked thuoäc tính JavaScript Giaù trò kieåu Boolean moâ taû moät löïa choïn check(checkbox, radio button)Thiết kế Web 123 XEM LẠI CÁC LỆNH VÀ MỞ RỘNG defaultChecked thuoäc tính JavaScript Xaâu chöùa giaù trò maëc ñònh cuûa moät phaàn töû HTML (password, text, textarea) focus() caùch thöùc JavaScript Moâ taû vieäc con troû tôùi moät phaàn töû (password, text, textarea) blur() caùch thöùc JavaScript Moâ taû vieäc con troû rôøi khoûi moät phaàn töû (password, text, textarea) select() caùch thöùc JavaScript Moâ taû vieäc löïa choïn doøng text trong moät tröôøng (password, text, textarea) onFocus() Theû söï kieän Theû söï kieän cho söï kieän focus(password, selection list, text, textarea) onBlur Theû söï kieän Theû söï kieän cho söï kieän blur (password, selection list, text, textarea) onChange Theû söï kieän Theû söï kieän cho söï kieän khi giaù trò cuûa tröôøng thay ñoåi (password, selection list, text, textarea) onSelect Theû söï kieän Theû söï kieän khi ngöôøi söû duïng choïn doøng text trong moät tröôøng (password, text, textarea) index thuoäc tính JavaScript Laø moät soá nguyeân moâ taû löïa choïn hieän thôøi trong moät nhoùm löïa choïn (radio button) length thuoäc tính JavaScript Soá nguyeân moâ taû toång soá caùc löïa choïn trong moät nhoùm caùc löïa choïn (radio button) Thiết kế Web 124 XEM LẠI CÁC LỆNH VÀ MỞ RỘNG dafautlSelected thuoäc tính JavaScript Giaù trò Boolean moâ taû khi coù moät löïa choïn ñöôïc ñaët laø maëc ñònh (seledtion list) options thuoäc tính JavaScript Maûng caùc löïa choïn trong danh saùch löïa choïn text thuoäc tính JavaScript Doøng text hieån thò cho moät thaønh phaàn cuûa menu trong danh saùch löïa choïn TABLE theû HTML Hoäp theû cho caùc baûng HTML TR theû HTML Hoäp theû cho caùc haøng cuûa moät baûng HTML TD theû HTML Hoäp theû cho caùc oâ cuûa moät haøng trong moät baûng HTML COLSPAN thuoäc tính HTML Laø thuoäc tính cuûa theû TD moâ taû trong moät oâ cuûa baûng coù nhieàu coät ROWSPAN thuoäc tính HTML Laø thuoäc tính cuûa theû TD moâ taû trong moät oâ cuûa baûng coù nhieàu haøng BODER thuoäc tính HTML Laø thuoäc tính cuûa theû TABLE moâ taû ñoä roäng ñöôøng vieàn cuûa baûng document.forms() thuoäc tính JavaScript maûng cuûa caùc ñoái töôïng form vôùi moät danh saùch caùc form trong moät document string.substring() caùch thöùc JavaScript Traû laïi moät xaâu con cuûa xaâu string töø tham soá vò trí kyù töï ñaàu ñeán vò trí kyù töï cuoái Math.floor() caùch thöùc JavaScript Traû laïi moät giaù trò nguyeân tieáp theo nhoû hôn giaù trò cuûa tham soá ñöa vaøo. string.length thuoäc tính JavaScript Giaù trò nguyeân cuûa soá thöù töï kyù töï cuoái cuøng trong xaâu stringThiết kế Web 125 FAQ 126Thiết kế Web