THIẾT KẾ WEB Html + JavaScript + Css pot

THÔNG TIN TÀI LIỆU

Thông tin cơ bản

Định dạng
Số trang	21
Dung lượng	2,84 MB

Nội dung

22/04/2011 1 Thiết kế WebThiết kế Web 11 THIẾT KẾ WEBTHIẾ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ế WebThiết kế Web 33 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ế WebThiết kế Web 44 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ế WebThiết kế Web 55 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ế WebThiết kế Web 66 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ếtThiết kếkế WebWeb 77 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ếtThiết kếkế WebWeb 88 .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 http://doamainname/……/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ếtThiết kếkế WebWeb 99 Cấu trúc trang HTML ThiếtThiết kếkế WebWeb 1010 <HTML> <HEAD> <TITLE> Nội dung tiêu đề </TITLE> </HEAD> <BODY> Phần nội dung của trang web </BODY> </HTML> Ví dụ: <HTML> <HEAD> <TITLE> Welcome to HTML</TITLE> </HEAD> <BODY> My first HTML document </BODY> </HTML> CÁC THẺ ĐỊNH DẠNG VĂN BẢN 1. Định dạng Kiểu dáng <B> Nội dung văn bản </B>:  Nội dung văn bản được in đậm <I> Nội dung văn bản </I> :  Nội dung văn bản được in nghiêng <U> Nội dung văn bản </U> :  Nội dung văn bản được gạch dưới <S> Nội dung văn bản </S> :  Nội dung văn bản được gạch ngang Nội dung<SUP> ở đây </SUP> Nội dung<SUB> ở đây </SUB> ThiếtThiết kếkế WebWeb 1111 CÁC THẺ ĐỊNH DẠNG VĂN BẢN 2. Thay đổi Font, Size • <FONT FACE=“FontName1, FontName2…”> Nội dung văn bản </FONT>  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. • <FONT SIZE=“n”> Nội dung văn bản </FONT>  Xác định cỡ chữ cho nội dung văn bản ThiếtThiết kếkế WebWeb 1212 22/04/2011 3 CÁC THẺ ĐỊNH DẠNG VĂN BẢN Ví dụ 1: ThiếtThiết kếkế WebWeb 1313 Thiết kế WebThiết kế Web 1414 Ví dụ 2: ThiếtThiết kếkế WebWeb 1515 Thiết kế WebThiết kế Web 1616 3. Canh lề đoạn văn bản <P Align=”Hướng”> Đoạn văn bản </P> 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 <CENTER> Các thành phần cần canh giữa</CENTER> ThiếtThiết kếkế WebWeb 1717 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ề. <H1> Nội dung văn bản đề mục cấp 1</H1> <H2> Nội dung văn bản đề mục cấp 2</H2> . . . . . <H6> Nội dung văn bản đề mục cấp 6</H6> VD: <H3 Align=Center> Đề mục cấp, 3 canh lề giữa</H3> ThiếtThiết kếkế WebWeb 1818 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ếtThiết kếkế WebWeb 1919 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ếtThiết kếkế WebWeb 2020 <BODY BgColor=“Màu” Text=“Màu” Link=“Màu” VLink=“Màu” Alink=“Màu”> . . . . . Nội dung trang Web. . . . . </BODY> 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: <FONT FACE=“Tahoma” COLOR=“Red” SIZE=3> Công nghệ thông tin </FONT> ThiếtThiết kếkế WebWeb 2121 <FONT COLOR =“Trịmàu”> Nội dung văn bản </FONT> 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ếtThiết kếkế WebWeb 2222 <Marquee Behavior=“Hiệu ứng” Direction=“Hướng” Loop=n1 SrollAmount=n2 ScrollDelay=n3 BgColor=“Trị màu”> Chuỗi ký tự </Marqueee> HIỆU ỨNG CHUYỂN ĐỘNG CHỮ Ví dụ: ThiếtThiết kếkế WebWeb 2323 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ếtThiết kếkế WebWeb 2424 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ếtThiết kếkế WebWeb 2525 <UL type=”kiểu” > <LI> List 1 </li> <LI> List 2 </li> ………………… <LI> List n </li> </UL> LIST – DANH SÁCH Ví dụ: ThiếtThiết kếkế WebWeb 2626 Thiết kế WebThiết kế Web 2727 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ếtThiết kếkế WebWeb 2828 <ol type=”kiểu” start=”giá trị”> <li> List 1 </li> <li> List 2 </li> ………………… <li> List n </li> </ol> 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ếtThiết kếkế WebWeb 2929 Ví dụ: <ol type=“1” start=“4”> <li> list 1 </li> <li> list 2 </li> </ol> Kết quả: 4. list 1 5. list 2 LIST – DANH SÁCH Ví dụ 1: ThiếtThiết kếkế WebWeb 3030 22/04/2011 6 Thiết kế WebThiết kế Web 3131 LIST – DANH SÁCH Ví dụ 2: ThiếtThiết kếkế WebWeb 3232 Thiết kế WebThiết kế Web 3333 Đư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ế WebThiết kế Web 3434 <BODY Background=“tên tập tin” Bgproperties =Fixed> Đư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 <BODY Background ="Images/Banner.JPG" > Thiết kế WebThiết kế Web 3535 Đư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: <Img Src=" /Images/P02.jpg"> <Img Src=" /Images/P06.jpg" Alt=“Đây là Bill Gates"> • 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ế WebThiết kế Web 3636 <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ế WebThiết kế Web 3737 Đưa hình ảnh vào trang web Ví dụ: Thiết kế WebThiết kế Web 3838 Thiết kế WebThiết kế Web 3939 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ế WebThiết kế Web 4040 <A HREF =“Địa chỉ liên kết” target=“_blank”> Nhãn liên kết </A> Link – Liên kết 1.Liên kết cục bộ (local link): VD:<A href=“about.html”>Abouts</A> 2. Liên kết đến một hình ảnh: VD: <A href =”Img/Product.gif”>View Image</A> <A href =”Img/Product.gif”><img src=“Img/Product.gif”</A> 3. Liên kết đến một trang web khác trên internet: VD: <A href =”http://www.itc.edu.vn”>ITC</A> 4. Liên kết đến địa chỉ email: VD:<a href =”mailto:itc@itc.edu.vn”>SendMail</a> 5. Tạo liên kết cho tập tin Media: VD:<a href =”music/hanhkhuc.wma”>Music</a> 6. Liên kết đến một file - doanload (.doc,.xls,.rar,.pdf,…) VD:<a href =”Upload/Webdesign.doc”>Ebook</a> ThiếtThiết kếkế WebWeb 4141 Link – Liên kết Ví dụ: Thiết kế WebThiết kế Web 4242 22/04/2011 8 Thiết kế WebThiết kế Web 4343 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: <HTML> <HEAD><TITLE> </TITLE></HEAD> <Embed SRC="chiaxa.wma" AutoStart=False><BR><BR> <Embed SRC="Tainan.mpeg" AutoStart=true width=300 height=250> </HTML> Thiết kế WebThiết kế Web 4444 <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>, <TR>, <TD>: <TABLE border=giátrị cellpadding=X cellspacing=Y bordercolor=”màu” bgcolor=”màu” background=”image” > <TR> <!– xác định hàng > <TD> Hàng 1 cột 1 </TD> <TD> Hàng 1 cột 2 </TD> <TD> Hàng 1 cột 3 </TD> </TR> <TR> <TD> Hàng 2 cột 1 </TD> <TD> Hàng 2 cột 2 </TD> <TD> Hàng 2 cột 3 </TD> </TR> </TABLE> Thiết kế WebThiết kế Web 4545 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 <TD>……</TD> 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ế WebThiết kế Web 4646 Ví dụ 1: Thiết kế WebThiết kế Web 4747 Table – Bảng biểu Ví dụ 2: Thiết kế WebThiết kế Web 4848 22/04/2011 9 Thiết kế WebThiết kế Web 4949 Table – Bảng biểu Ví dụ 3: Thiết kế WebThiết kế Web 5050 Thiết kế WebThiết kế Web 5151 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ế WebThiết kế Web 5252 <FORM các thuộc tính> Nội dung biểu mẫu Nút gửi dữ liệu </FORM> 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 <Form Name=Tên> Các đối tượng trong Form </Form> - Dạng 2: Thông tin từ Form chuyển cho địa chỉ Mail <Form Name=Tên Method=“Post” Action=”Mailto: Địa chỉ mail> Các đối tượng trong Form </Form> - Dạng 3: Thông tin từ Form chuyển lên Webserver <Form Name=Tên Method=“Pos”t Action=”Trang xử lý”> Các đối tượng trong Form </Form> Thiết kế WebThiết kế Web 5353 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ế WebThiết kế Web 5454 <textarea rows=… cols=… name=”… “> nội dung </textarea> 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ế WebThiết kế Web 5555 <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ế WebThiết kế Web 5656 <INPUT type=”password” maxlenght=“… “ name=”… “ size=… > <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ế WebThiết kế Web 5757 <INPUT type=”checkbox” name=” “ value=” “ checked> văn bản đại diện <SELECT size=” “ multipe> <OPTION selected value=” “> nội dung </OPTION> … … <OPTION> … … </OPTION> </SELECT> 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ế WebThiết kế Web 5858 <Input Type=”Submit” Value=”Nhãn”> Hoặc <Button Type=”Submit” Value=”Nhãn”> Hoặc <Button Type=”Submit”> <Img=“ảnh”> </Button> <Input type=”reset” name=” “ value=”Reset” > Form – Biểu mẫu Ví dụ 1: Thiết kế WebThiết kế Web 5959 Thiết kế WebThiết kế Web 6060 [...]... Biểu mẫu Ví dụ 2: Thiết kế Web 61 62 Thiết kế Web FAQ ? ? ? THIẾT KẾ WEB JavaScript Dzỗn Xn Thanh Thiết kế Web 63 Lời nói đầu NGƠN NGỮ KỊCH BẢN JAVASCRIPT Ví dụ: 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 JavaScript Exemple 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)... chuỗi str thành chữ hoa Thiết kế Web 121 XEM LẠI CÁC LỆNH VÀ MỞ RỘNG radio thuộc tính HTML reset thuộc tính HTML SELECT OPTION thẻ HTML thẻ HTML submit thuộc tính HTML text thuộc tính HTML TEXTAREA Thẻ HTML thuộc tính JavaScript value thuộc tính JavaScript click() cách thức JavaScript onClick thuộc tính JavaScript checked thuộc tính JavaScript Giá trò kiểu Boolean mô tả Thiết kế Web check(checkbox, radio... 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 Thiết kế Web 90... Nếu bạn gán giá trị của tố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,... (đề tài) < /HTML> Cơng cụ hổ trợ: Dreamweaver Thiết kế Web var name=window.prompt(“Hello! What’s your name ?”,””); document.write(“Hello ” + name + “ ! Do you like JavaScript ”); 65 Thiết kế Web 66 11 22/04/2011 NGƠN NGỮ KỊCH BẢN JAVASCRIPT 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... Navigator Object Exemple document.write("appCodeName = "+navigator.appCodeName + ""); document.write("appName = "+navigator.appName + ""); document.write("appVersion = "+navigator.appVersion + ""); document.write("userAgent = "+navigator.userAgent + ""); < /HTML> Thiết kế Web 96 16 22/04/2011 Đối tượng và sự kiện Đối... "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 + ""); < /HTML> 81 c) THIS: Từ khố this được sử dụng để chỉ đối tượng hiện thời Đối tượng được gọi thường là... quotes.\” ”); 71 Thiết kế Web 70 Tốn tử & Biểu thức trong JavaScript 2 Các tốn tử (Operator): a) Gán: b) So sánh Thiết kế Web 72 12 22/04/2011 Tốn tử & Biểu thức trong JavaScript 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: c) Số học: d) Chuỗi: Khi được sử dụng với chuỗi, tốn tử + được coi là kết hợp hai chuỗi, ví dụ: "abc" + "xyz" được "abcxyz“... document.write(result); < /HTML> Thiết kế Web 85 Function - Hàm 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ố ngun 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 . 1: Thiết kế WebThiết kế Web 5959 Thiết kế WebThiết kế Web 6060 22/04/2011 11 Form – Biểu mẫu Ví dụ 2: Thiết kế WebThiết kế Web 6161 Thiết kế WebThiết kế Web 6262 FAQ ? ? ? Thiết kế WebThiết kế Web 6363 THIẾT. bản ThiếtThiết k kế WebWeb 1212 22/04/2011 3 CÁC THẺ ĐỊNH DẠNG VĂN BẢN Ví dụ 1: ThiếtThiết k kế WebWeb 1313 Thiết kế WebThiết kế Web 1414 Ví dụ 2: ThiếtThiết k kế WebWeb 1515 Thiết kế WebThiết kế. dụ 1: ThiếtThiết k kế WebWeb 3030 22/04/2011 6 Thiết kế WebThiết kế Web 3131 LIST – DANH SÁCH Ví dụ 2: ThiếtThiết k kế WebWeb 3232 Thiết kế WebThiết kế Web 3333 Đưa hình ảnh vào trang web - Các

Ngày đăng: 21/06/2014, 23:20

Xem thêm