Cơ bản về HTML, JAVASCRIPT, CSS và ASP

Chia sẻ: Trần Văn Nguyên | Ngày: | Loại File: PDF | Số trang:87

Thêm vào BST

Báo xấu

740
lượt xem 253
download

Download Vui lòng tải xuống để xem tài liệu đầy đủ

Trong nhiều ứng dụng web không phải lúc nào chúng ta cũng có thể sử dụng trình soạn thảo tích hợp kiểu như fontpage hay Dreamweaver để thiết kế giao diện, đặc biệt là khi giao diện này có liên quan đến yếu tố lập trình ứng dụng.

Chủ đề:

Bình luận(0) Đăng nhập để gửi bình luận!

Lưu

Nội dung Text: Cơ bản về HTML, JAVASCRIPT, CSS và ASP

Cơ b n v HTML, JAVASCRIPT, CSS và ASP B i: Khoa CNTT ĐHSP KT Hưng Yên
Cơ b n v HTML, JAVASCRIPT, CSS và ASP B i: Khoa CNTT ĐHSP KT Hưng Yên Phiên b n tr c tuy n: < http://voer.edu.vn/content/col10212/1.2/ > Hoc lieu Mo Vietnam - Vietnam Open Educational Resources
Tài li u này và s biên t p n i dung có b n quy n thu c v Khoa CNTT ĐHSP KT Hưng Yên. Tài li u này tuân th gi y phép Creative Commons Attribution 3.0 (http://creativecommons.org/licenses/by/3.0/). Tài li u đư c hi u đính b i: August 20, 2010 Ngày t o PDF: August 20, 2010 Đ bi t thông tin v đóng góp cho các module có trong tài li u này, xem tr. 79.
N i dung 1 Ph n A 1.1 T o các ph n t HTML cơ b n. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1 1.2 Bài t p cơ b n v JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5 1.3 S d ng các l p x lý Chu i, Ngày tháng, Toán h c. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7 1.4 X lý s ki n trong trang HTML v i JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16 1.5 Đ nh d ng các ph n t HTML b ng CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29 1.6 T o và x lý các t ng (Layer) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 42 1.7 N i dung đ ng và đ nh v đ ng . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 49 2 Ph n B 2.1 ASP . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .. . . . . . . . . . . . . 55 2.2 C u trúc c a m t file ASP . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 58 2.3 Các đ i tư ng Server . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 59 2.4 K t n i và thao tác v i CSDL trong ASP . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 75 Attributions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 79
iv
Chương 1 Ph n A 1.1 T o các ph n t HTML cơ b n.1 M c tiêu: K t thúc chương này, ngư i h c có th • T o các ph n t HTML cơ b n b ng cách code tr c ti p • Dùng Notepad t o m t trang web ch a các ph n t HTML N i dung Gi i thi u Trong nhi u ng d ng web không ph i lúc nào chúng ta cũng có th s d ng trình so n th o tích h p ki u như Frontpage hay Dreamweaver đ thi t k giao di n, đ c bi t là khi giao di n này có liên quan đ n y u t l p trình, khi đó ngư i l p trình ph i t o các ph n t HTML hoàn toàn th công (Code ch không dùng kéo th ). Do v y, vi c hi u cú pháp đ t o các ph n t HTML là vô cùng quan tr ng. 1.1.1 Cú pháp chung: • • • K t h p c hai cách. Trong đó : 1 This content is available online at . 1
2 CHƯƠNG 1. PH N A Figure 1.1 Ph n “giá tr ” có th đ t trong c p ngo c kép ho c c p ngo c đơn ho c không c n !! N u đ t thu c tính theo cách 2, thì có th tham chi u b ng sau (g i là theo cú pháp CSS) 1.1.2 T o m t s ph n t cơ b n • T o nút nh n • T o ô nh p • T o vùng nh p (Textarea) N i dung ghi chú: • T o ô nh p Password • T o listbox
3 Visual Basic L p trình .NET L p trình ASP • T o ComboBox (ch c n b thu c tính size) Visual Basic L p trình .NET L p trình ASP • T o h p ki m Visual Basic Active Server Pages • T o nút Radio Tên gi ng nhau thì s thu c v cùng m t nhóm (Groups) • Ph n t ch n File • T o textbox n (Hidden). T o các ph n t và đ t thu c tính: + T o m t textbox và đ t thu c tính font: + T o m t textbox và đ t thu c tính thông qua phong cách CSS: + T o m t nhãn có font ch xanh, có hi u ng: Xin chào + T o m t nút nh n có màu n n đ :
4 CHƯƠNG 1. PH N A Figure 1.2
5 K t qu 1.2 Bài t p cơ b n v JavaScript2 1.2.1 M c tiêu: K t thúc chương này ngư i h c có th : • Vi t các câu l nh JavaScript và nhúng vào trang web • S d ng đư c các đ i tư ng nh p xu t Promt, document.write. • Truy xu t thu c tính c a các ph n t HTML b ng câu l nh JavaScript • Vi t l nh x lý m t s s ki n đơn gi n. 1.2.2 N i dung: Ví d 1: Cho ngư i dùng nh p vào tên và tu i. Hãy vi t l i tên và tu i c a ngư i đó ra màn hình b ng hàm document.write, trong đó tên có màu đ m, tu i đư c g ch chân. Gi i m u: var Ten, Tuoi; // Khai báo 2 bi n đ lưu tên và tu i Ten = prompt("B n hãy nh p vào tên ", ""); Tuoi = prompt("B n hãy nh p vào Tu i : ", 20); document.write("Chào b n : " + Ten + ""); document.write(""); // Xu ng dòng document.write("Tu i c a b n là : " + Tuoi + ""); Ví d 2: T o m t nút nh n (button) có name là welcome, value là " Welcome ". M t textbox có tên là msg, value = "Welcome to". Hư ng d n : S d ng phương th c (hàm) write c a đ i tư ng document đ t o. Gi i m u: document.write("Tao Button va Text bang Script"); document.write(""); document.write(" "); document.write(""); Ví d 3: T o m t nút như trong ví d 2 và thêm ch c năng sau: Khi ngư i dùng click vào nút welcome thì hi n th thông báo "Welcome to JavaScript !" 2 This content is available online at .
6 CHƯƠNG 1. PH N A Hư ng d n: Dùng th đ t o nút nh n và thêm thu c tính onClick = ";" (Trong đó có th là m t l nh JavaScript b t kỳ, ví d l nh document.write, alert, prompt ho c l nh g i hàm v.v...) Gi i m u: Lưu ý quan tr ng: Trong JavaScript, m t h ng xâu đư c bao b i c p nháy đơn ho c nháy kép, ví d các xâu: ’nháy đơn’, "nháy kép" là nh ng xâu h p l , tuy nhiên b n vi t : ’abc" hay "xyz’ là nh ng xâu không h p l . Trong trư ng h p b n mu n in chính b n thân d u nháy đơn ho c nháy kép ra màn hình thì b n đ t trư c nó m t ký t \, ví d b n có th in ra màn hình dòng ch : Women’s day ra màn hình b ng hai hàm alert và document theo các cách sau đây : alert("Women’s day"), document.write(’Women\’s day’); alert("Women\"s day"); alert(’Women"s day’); v.v... Ví d 4: L y (đ c) giá tr c a m t ph n t HTML T o 2 ph n t như trong ví d 2 b ng th HTML, khi ngư i dùng click chu t vào nút Welcome thì hi n th n i dung ch a trong text có tên là msg. Hư ng d n: Đ l y giá tr c a m t ph n t HTML, b n vi t .value Ví d : msg.value cho ta giá tr c a text tên là msg. Gi i m u: Ví d 5: Khai báo hàm trong JavaScript và cách liên k t nút nh n v i m t hàm T o 2 ph n t như ví d 2, khi ngư i dùng nh n nút thì g i m t hàm có tên là HienThi, hàm hi n th có ch c năng hi n th n i dung trong text có tên là msg trên. Hư ng d n: Trong th t o button, b n đ t thu c tính onClick = "", trong trư ng h p này b n đ t OnClick = "HienThi()". Đi u này có nghĩa là khi ngư i s d ng Click chu t (OnClick = Click chu t) thì trình duy t hãy g i hàm HienThi(). Cũng gi ng như trong ngôn ng C, M t hàm b t bu c ph i có c p ngo c đơn, cho dù có tham s hay không. Ví d khi g i hàm HienThi thì b n ph i vi t là HienThi(). Gi i m u: function HienThi() // Khai báo m t hàm tên là HienThi { alert(msg.value); // L y n i dung trong text box và hi n th alert("B n hãy nh p vào ô text và th l i !"); }
7 Lưu ý: Trong C, đ khai báo m t hàm thư ng b n vi t, ví d : int HienThi() v...v.. Tuy nhiên, v i JavaScript có hơi khác tí chút, thay vào đó b n vi t function HienThi() Còn các câu l nh khác b n vi t tương t như ngôn ng C đã h c. Các hàm khi khai báo trong JavaScript b t bu c ph i đ t trong th ..... . 1.3 S d ng các l p x lý Chu i, Ngày tháng, Toán h c.3 1.3.1 M c tiêu: K t thúc bài h c này, ngư i h c có th . • Mô t đư c công d ng c a các l p x lý Chu i (String), x lý ngày tháng (Date) và x lý các hàm toàn h c Math. • S d ng đư c m t s phương th c, thu c tính cơ b n c a các l p này. • V n d ng vi t m t s trang web đơn gi n có s d ng đ n 3 l p trên. 1.3.2 N i dung: Bài t p 1: Minh ho cách khai báo và s d ng đ i tư ng Date đ ngày gi c a h th ng. Yêu c u: Hãy hi n th ngày và gi c a h th ng máy tính khi trang Web đư c n p. Thông tin hi n th ra có d ng như sau: Hôm nay là th 2, ngày 13 tháng 9 năm 2004 Figure 1.3 Hư ng d n: S d ng đ i tư ng Date và s d ng các hàm l y th , ngày, tháng, năm đ in thông tin ra màn hình. Chú ý đ n các hàm tính tháng, ngày trong tu n b h t m t đơn v . Bài t p 2: Minh ho s khai báo và dùng đ i tư ng Date đ l y Gi , phút, giây c a h th ng Yêu c u: Hi n th Gi và phút trong thanh tiêu đ c a c a s khi trang Web đư c n p. Hư ng d n: Giá tr hi n th trong thanh tiêu đ c a trang web đư c lưu trong thu c tính title c a đ i tư ng document, do v y đ hi n th thông tin trên thanh tiêu đ , b n c n vi t: document.title = . Ví d , đ hi n th dòng ch "Hello Every body !", b n vi t: document.title "Hello Every body !" Minh ho : 3 This content is available online at .
8 CHƯƠNG 1. PH N A var D = new Date(); document.title = "Bây gi là: " + D.getHours()+" gi "+ D.getMinutes()+ " phút."; Bài 3: V n d ng bi n đ i tư ng Date đ tính tu i c a m t ngư i. Yêu c u : Cho ngư i dùng nh p vào năm sinh c a h , sau đó hi n th tu i tương ng. Hư ng d n: S d ng đ i tư ng Date đ l y năm hi n t i. Tu i s b ng năm hi n t i tr đi năm sinh v a nh p vào. Minh ho m u: Tính tu i var D = new Date(); var NamSinh, NamHienTai; NamHienTai = D.getYear(); // Lưu năm hi n t i vào bi n NamSinh = prompt("B n sinh năm bao nhiêu ? : ",""); alert("Tu i c a b n bây gi là : " + (NamHienTai-NamSinh)); Bài 4: Tương t như bài 3 nhưng Năm sinh nh p vào không đư c l n hơn năm hi n t i. Hư ng d n:S d ng vòng l p do. . .while đ yêu c u nh p l i n u năm sinh > năm hi n t i. Minh ho m u: Tinh tuoi var D = newDate(); var NamSinh, NamHienTai; NamHienTai = D.getYear(); //Lưu năm hi n t i vào bi n do { NamSinh = prompt("B n sinh năm bao nhiêu : ",""); } while (parseInt(NamSinh)>NamHienTai); //Nh p l i n u Năm sinh>năm hi n t i alert("Tu i c a b n bây gi là : " + (NamHienTai-NamSinh)); Bài 5: Minh ho cách đ t các câu l nh JavaScript vào trong các ph n t HTML đ th c thi khi ngư i dùng click chu t và s d ng hàm open c a đ i tư ng window đ m trang web. Yêu c u: Vi t đo n Script cho ngư i dùng nh p vào m t s nguyên. N u ngư i dùng nh p s 1 thì m trang Web http://www.vnn.vn, n u nh p s 2 thì m trang http://www.mail.yahoo.com, n u nh p s 3 thì m trang http://www.echip.com.vn, còn n u nh p m t s khác v i 1, 2 hay 3 thì m trang http://www.google.com. Hư ng d n: Đ m m t trang Web b t kỳ trong c a s hi n hành b n vi t như sau: window.open("Đ a ch c a trang c n m ").
9 Ví d : window.open(http://www.vnn.vnn4 ) đ m trang ch c a VNN trong c a s hi n t i. Như v y, đ gi i quy t yêu c u c a bài toán trên , b n c n cho ngư i dùng nh p vào m t s và s d ng c u trúc switch đ ki m tra và m trang web tương ng. Minh ho m u: M trang web v i hàm open c a đ i tư ng window var LuaChon; LuaChon = prompt("B n hãy nh p vào m t s đ m trang web : ", 1); switch (LuaChon) { case "1" : window.open("http://www.vnn.vn"); break; case "2" : window.open("http://www.mail.yahoo.com"); break; case "3" : window.open("http://www.echip.com.vn"); break; default : window.open("http://www.google.com"); } Bài s 6: Minh ho vi c khai báo và s d ng bi n đ i tư ng Array đ lưu tr danh sách và cách s d ng các hàm c a đ i tư ng Array như hàm sort và vòng l p for. . .in Yêu c u: Cho ngư i dùng nh p vào danh sách tên c a m t l p, sau đó s p x p theo v n Alphabet r i hi n th danh sách đã s p x p đó ra màn hình, m i ngư i trên m t dòng. Hư ng d n: S d ng vòng l p for đ cho phép nh p danh sách h tên và Lưu danh sách vào m t m ng, sau đó s d ng phương th c sort c a đ i tư ng m ng đ s p x p, ti p theo dùng vòng l p for. . .in đ in các ph n t trong danh sách. Minh ho m u: S p x p m ng var SoLuong, x; var DS = newArray(100); // Khai báo m ng DS, có th lưu t i đa là 100 ph n t SoLuong = prompt("B n c n nh p bao nhiêu ngư i : ", 5); for (i=0; i < SoLuong; i++) { DS[i] = prompt("Nh p vào h tên : ",""); } // G i hàm sort c a đ i tư ng m ng DS đ s p x p DS.sort(); //Hi n th k t qu sau khi s p (sort) document.write("Danh sách đã s p x p là "); for (x in DS) /* Nên s d ng c u trúc for . . . in này đ duy t m ng */ { document.write( DS[x] ); document.write(""); // Xu ng dòng } 4 http://www.vnn.vnn/
10 CHƯƠNG 1. PH N A *** Nh n xét: N u mu n s p theo chi u gi m d n thì sau khi sort b n g i hàm reverse. Bài s 7: Minh ho vi c đưa các câu l nh JS vào trong m t th khi ngư i dùng click chu t. Yêu c u: T o m t nút nh n (Button) có name = "DangKy", value = "Đăng ký". Khi ngư i dùng Click vào nút này thì thông báo là "Đăng ký d ch v E-Mail". Hư ng d n: Đ i v i các ph n t HTML, như textbox, button, checkbox, Select v.v. . . Các trình duy t đ u cho phép ta th c thi m t ho c nhi u câu l nh JavaScript khi ngư i s d ng click chu t lên các ph n t đó. V n đ ch , vi t các câu l nh đó như th nào ? Đ vi t các câu l nh JavaScript khi ngư i dùng click chu t lên m t ph n t nào đó, trong th c a ph n t này, ta vi t như sau: OnClick = "Các câu l nh JavaScript". "Các câu l nh JavaScript" đây là b t kỳ câu l nh JavaScript nào và chúng ph i đư c cách nhau b i d u ch m ph y. Ngoài ra, các câu l nh ph i đ t trong c p d u nháy kép (Ho c nháy đơn). Ví d m t s cách đưa câu l nh JavaScript c n th c thi khi ngư i dùng click chu t 1. Onclick = "alert(’Hello world’;" 2. OnClick = ’document.write("Welcome to JavaScript");’ 3. OnClick = "var x,y; x = 10; y = 20; alert(’T ng là : ’ + (x + y)); " 4. OnClick = "var Tuoi; Tuoi = txtTuoi.value; KiemTra(Tuoi);" 5. OnClick = "KiemTra();" Theo ví d trên, Khi ngư i s d ng Click : 1 : Th c hi n câu l nh alert(’Hello world’) 2 : Th c hi n câu l nh document.write(’Welcome to JavaScript’); 3 : Th c hi n NHI U câu l nh JavaScript 4 : Th c hi n nhi u câu l nh JavaScript và có l i g i đ n hàm KiemTra(Tuoi) 5 : Th c hi n câu l nh g i hàm KiemTra(). Minh ho m u: Minh ho đưa câu l nh JavaScript vào các ph n t
11 Figure 1.4 Bài s 8: Minh ho cách thay đ i thu c tính c a m t đ i tư ng thông qua vi c vi t các câu l nh JavaScript. T o m t nút có name = ThayMauNen, value = "Thay đ i màu n n". Khi ngư i dùng click chu t vào nút này thì thay đ i màu n n c a trang Web thành màu "xanh". Hư ng d n: Đ thay đ i màu n n c a trang Web thành màu, ta c n thay đ i thu c tính docu- ment.bgColor = "blue". (Màu đ là red, tìm : magenta, đen: black, tr ng: white, vàng: Yellow, tím nh t: lavender). Như v y, câu l nh này s đư c đ t trong ph n onClick như sau: Thay mau nen bang click chuot Thay đ i màu n n s d ng đ i tư ng document Bài s 9: Minh ho vi c đ c giá tr trong ph n t text và hi n th ra màn hình Yêu c u: T o m t h p text có tên là HoTen. M t nút có tên là HienThi, value = "Hi n th ". Khi ngư i dùng click vào nút HienThi thì hi n th n i dung trong h p text đó b ng hàm alert. Hư ng d n: Đ l y giá tr c a m t ph n t HTML nào đó, chúng ta vi t .value Trong đó: chính là giá tr c a thu c tính name khi b n t o th . Ví d : - Hoten.value, DangKy.value, GioiTinh.value, Password.value v.v. . . Minh ho : Đ c giá tr trong h p text
12 CHƯƠNG 1. PH N A Hãy gõ văn b n vào trong h p text và click vào nút Hi n th ∼ Lưu ý : Khi mu n l y giá tr c a ph n t nào đó b ng JavaScript thì b n ph i đ t cho nó m t cái tên, = như ví d trên, đ l y giá tr trong h p text ta đã đ t cho h p text này tên (name) là HoTen. Bài s 10: Minh ho vi c thay đ i giá tr c a h p textbox Yêu c u: T o ra ba h p text l n lư t tên là SoHang1, SoHang2, KetQua và m t nút có tên là TinhTong, đ th c hi n phép tính t ng. Khi ngư i dùng nh p hai s h ng vào h p SoHang1 và SoHang2, sau đó click vào nút TinhTong thì k t qu t ng s đư c lưu vào trong h p text KetQua. Hư ng d n: Đ thay đ i giá tr m t thu c tính nào đó c a ph n t HTML, b n vi t theo cách sau: . = Trong đó: Tên ph n t chính là giá tr c a thu c tính name khi b n t o th . Ví d : HoTen.value = "Đây là văn b n m i", DangKy.value = "Sign Up now", v.v. . . Thay đ i giá tr c a thu c tính Hãy nh p hai s và click vào nút Tính t ng + = [U+F041] Lưu ý: - Giá tr lưu trong h p text luôn là m t xâu, do v y đ th c hi n phép c ng đư c đúng, b n c n ph i chuy n giá tr sang d ng s b ng hàm parseFloat (Ho c parseInt) như trên. - Vi c thay đ i này có th áp d ng cho các ph n t khác như button, checkbox, v.v. . . Figure 1.5
13 Bài t p 11: Minh ho vi c g i hàm khi ngư i dùng click vào m t nút Yêu c u:T o ra 4 text có tên l n lư t là : MauNen, MauChu, TieuDe, TrangThai và m t nút có tên là ThayDoi, value là "Thay đ i". Khi ngư i dùng click vào nút ThayDoi thì màu n n, màu ch , tiêu đ c a tài li u và thanh tr ng thái c a c a s trình duy t s đư c thay đ i b ng các giá tr trong text tương ng Hư ng d n: B n hoàn toàn có th vi t nhi u câu l nh trong thu c tính OnClick như các ví d trư c, tuy nhiên n u có nhi u l nh thì chương trình trông không đư c sáng s a cho l m. Khi đó b n có th nhóm các câu l nh vào trong m t hàm và trong thu c tính OnClick b n ch vi c g i hàm này ra. Minh ho m u Thay đ i thu c tính c a trang Web function CapNhat( ) { document.title = TieuDe.value; /* Thay đ i tiêu đ c a trang Web */ document.bgColor = MauNen.value; /* Thay đ i màu n n c a trang */ document.fgColor = MauChu.value; /* Thay đ i màu ch c a trang */ window.defaultStatus = TrangThai.value; /* Thay đ i dòng tr ng thái c a c a s */ } Nh p vào các giá tr và nh n nút Thay đ i Nh n xét: ví d trên, khi ngư i dùng click chu t lên nút ThayDoi thì hàm CapNhat( ) s đư c g i. Figure 1.6
14 CHƯƠNG 1. PH N A Figure 1.7