Các tác động thơng thường lên trang web là:
− Chọn một liên kết.
− Di chuyển đến trang trước hoặc trang sau trong các trang đã duyệt.
− Mở một trang Web mới dùng chức năng “New Window”.
− Thốt khỏi trình duyệt web.
Các sự kiện thường gặp đối với các đối tượng là:
− Di chuyển chuột
− Thay đổi trạng thái.
Chèn đoạn mã java script trong html:
− <SCRIPT LANGUAGE="LangName" [SRC="URL"]>
<SCRIPT LANGUAGE="JavaScript" SRC="jscode/click.js"> </SCRIPT>
Ẩn nội dung source đi:
<SCRIPT LANGUAGE="JavaScript"> <!--
function dontclickme() alert("Ban da click chuot"); return(false);
}
<!-- end script -->
</SCRIPT>
Một trang Web hồn chỉnh dùng code Jaca Script: ví dụ tạo một nút “Chao”, khi click vào nút này xuất hiện thơng báo “Chao cac ban”
<HTML> <HEAD>
<TITLE>Chao ban</TITLE>
<SCRIPT LANGUAGE="JavaScript"> <!--
function dontclickme() { alert("Chao cac ban"); }
<!-- end script -->
<BODY> <FORM>
<INPUT TYPE="button" NAME="chao" VALUE="Chao!" onClick="dontclickme()">
</FORM> </BODY> </HTML>
Ta cĩ thể viết lệnh Java script trực tiếp vào sự kiện:
<HTML> <HEAD>
<TITLE>Chao ban</TITLE> </HEAD>
<BODY> <FORM>
<INPUT TYPE="button" NAME="chao" VALUE="Chao!" onClick="alert('Chao cac ban');">
</FORM> </BODY> </HTML>
Bắt sự kiện của List: ví dụ kiểm tra sự thay đổi giá trịlistbox dùng hàm onChange()
<HTML> <HEAD>
<TITLE>Su kien List</TITLE>
<SCRIPT LANGUAGE="JavaScript"> <!-- function Thongbao(str) { alert(str); } <!-- end script --> </SCRIPT> </HEAD> <BODY>
<SELECT NAME="Ten" onChange="Thongbao('Co su thay doi')"> <OPTION SELECTED>Lan</OPTION>
<OPTION>Cuc</OPTION> <OPTION>Hong</OPTION> </SELECT>
</BODY> </HTML>
Bắt sự kiện của document (dùng khi cần gọi hàm lúc trang Web vừa mở hoặc khi đĩng trang Web):
BÀI THỰC HÀNH CHƯƠNG BÀI THỰC HÀNH CHƯƠNG BÀI THỰC HÀNH CHƯƠNG BÀI THỰC HÀNH CHƯƠNG 555 5
1/ Tạo Form chứa hộp văn bản
Mã code HTML tham khảo
<html> <head> <title>Text Fields</title> </head> <body> <form> First name:
<input type="text" name="firstname"> <br>
Last name:
<input type="text" name="lastname"> </form>
</body> </html>
Mã code HTML tham khảo <html> <head> <title>Nut radio</title> </head> <body> <form>
<input type="radio" name="sex" value="male"> Male <br>
<input type="radio" name="sex" value="female"> Female </form>
</body> </html>
3/ Tạo Form chứa checkbox
Mã code HTML tham khảo
<html> <head> <title>Check Box</title> </head> <body> <form>
<input type="checkbox" name="bike"> I have a bike
<br>
<input type="checkbox" name="car"> I have a car
</form> </body> </html>
4/ Tạo form chứa danh sách lựa chọn
Mã code HTML tham khảo
<html> <head>
<title>Drop Down List</title> </head> <body> <form action=""> cars: <select name="cars"> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="fiat">Fiat</option> <option value="audi">Audi</option> </select> </form> </body> </html>
Mã code HTML tham khảo <html> <head> <title>Text Area</title> </head> <body> <form action=""> <p> Ý kiến của độc giả: </p> <textarea rows="10" cols="30"> Gõ ý kiến vào ơ này. </textarea> </form>
</body> </html>
6/ Tạo form chứa nút nhấn
Mã code HTML tham khảo
<html> <head> <title>Button</title> </head> <body> <form action="">
<input type="button" value="Send..."> </form>
</body> </html>
7/ Tạo Form sau
Mã code HTML tham khảo
<html> <head>
<title>title goes here</title> </head>
<body>
<form action="mailto:ngkimthu@hcm.vnn.vn" method="POST" enctype="text/plain"><br> Your first name: <input type="text" name = "first" size="15" maxlength="60"><br> Your student ID number: <input type="text" name = "ID"size="15" maxlength="60"><br> <p>What age bracket are you in:<br>
<input type="radio" name="age" value="118">1 to 18 years<br> <input type="radio" name="age" value="1925">19 to25 years<br> <input type="radio" name="age" value="2540"> 25 to40 years<br> <input type="radio" name="age" value="40"> Over 40<br> </p>
<input type="checkbox" name="time" value="Morn">Morning <br> <input type="checkbox" name="time" value="Afte"> Afternoon<br> <input type="checkbox" name="time" value="Nigh"> Night<br>
<input type="checkbox" name="time" value="Mid">Midnight to dawn<br> </p>
<br> <input type="image" src="images/submit.gif" alt="Submit!"> <br> <input type="reset" value ="clear your answers and start again."> </form>
</body> </html>
8/ Tạo Form sau
BÀI TẬP JAVASCRIPST Phần 1: Bài tập ví dụ mẫu
Câu 1: Đây là ví dụ sử dụng các tag trong html
<html> <head>
<title>Cau 1</title> </head> <body> <script type="text/javascript"> { document.write("<h1>This is a header</h1>"); document.write("<p>This is a paragraph</p>"); document.write("<p>This is another paragraph</p>"); }
</script> </body> </html>
Câu 2: Đây là ví dụ sử dụng biến trong JS
<html> <head>
<title>Cau 2</title> </head>
<body>
<script type="text/javascript">
var name="QUOC PHUONG"; document.write("<b>"+name+"</b>"); document.write("<br>"); name="05TH1A"; document.write(name); </script> </body> </html>
Câu 3: Đây là ví dụ sử dụng Textbox và Chương trình con
<html> <head>
<body>
<script type="text/javascript">
function chay(){ var a;
a=window.document.cau3.T1.value; alert(" so ban vua nhap la: "+a); }
</script> </head> <body>
<form name=cau3>
<input type=text name=T1>
<input type=button name=c value="chay thu" onclick="chay()"> </form> </body> </html> Câu 4:Ví dụ sử dụng câu lệnh IF <html> <head>
<title>Cau 4</title> </head> <body> <script type="text/javascript"> function chay(){ var a; a=window.document.cau4.T1.value*1; if ((a%2)==0) { alert(a+ " la so chan ");} else {alert(a+" la so le ");} } </script> </head> <body> <form name=cau4>
<input type=text name=T1>
<input type=button name=c value="chay thu" onclick="chay()"> </form>
</body> </html>
Câu 5: Ví dụ sử dụng đối tượng ngày tháng năm trong JS
<html> <body>
<script type="text/javascript">
var d = new Date(); var time = d.getHours(); if (time<10)
{
document.write("<b>Good morning</b>"); }
else if (time>=10 && time<16) { document.write("<b>Good day</b>"); } else{ document.write("<b>Hello World!</b>"); } </script>
<p>day la vi du su dung cau lenh if..else if...else .</p> </body>
</html>
Câu 6: Ví dụ sử dụng câu lệnh switch
<html> <body>
<script type="text/javascript">
var d=new Date(); theDay=d.getDay(); switch (theDay) { case 5: document.write("Friday"); break; case 6: document.write("Saturday"); break; case 0: document.write("Sunday"); break; default:
document.write("Chuc dau tuan vui ve!"); }
</script> </body>
Câu 7: Ví dụ sử dụng confirm <html> <head> <script type="text/javascript"> function disp_confirm() {
var r=confirm("Press a button"); if (r==true) {
document.write("You pressed OK!"); }
else {
document.write("You pressed Cancel!"); }
}
</script> </head> <body>
<input type="button" onclick="disp_confirm()" value="Display a confirm box" /> </body> </html> Câu 8:Ví dụ sử dụng prompt <html> <head> <script type="text/javascript"> function disp_prompt() {
var name=prompt("VUI LONG NHAP TEN CUA BAN","LE THANH LAM"); if (name!=null && name!="")
{
document.write("XIN CHAO " + name + "! How are you today?"); }
}
</script> </head> <body>
<input type="button" onclick="disp_prompt()" value="Display a prompt box" /> </body>
Câu 9:Ví dụ sử dụng kiểu String
<html> <body>
<script type="text/javascript">
var str="Hello world!";
document.write(str.indexOf("Hello") + "<br />"); document.write(str.indexOf("World") + "<br />"); document.write(str.indexOf("world")+ "<br />"); document.write(str.toUpperCase()+ "<br />"); document.write(str.length+ "<br />"); document.write(str.replace("w","W") + "<br />"); </script> </body> </html> Câu 10:Ví dụ sử dụng kiểu ARRAY <html> <body> <script type="text/javascript"> var x;
var mycars = new Array(); mycars[0] = "Saab"; mycars[1] = "Volvo"; mycars[2] = "BMW"; for (x in mycars) { document.write(mycars[x] + "<br />"); } </script> </body> </html>
Câu 11: Ví dụ sử dụng kiểu thiết lập thời gian
<html> <head>
<script type="text/javascript">
function timedMsg() {
var t=setTimeout("alert('5 seconds!')",5000); }
</script> </head> <body> <form>
<input type="button" value="Display timed alertbox!" onClick = "timedMsg()"> </form>
<p>Click on the button above. An alert box will be displayed after 5 seconds.</p> </body>
</html>
Câu 12:Ví dụ khác về cách sử dụng thiết lập thời gian
<html> <head>
<script type="text/javascript">
function timedText() {
var t1=setTimeout("window.document.lam.txt.value='2 seconds!'",2000); var t2=setTimeout("document.getElementById('txt').value='4 seconds!'",4000); var t3=setTimeout("document.getElementById('txt').value='6 seconds!'",6000); }
</script> </head> <body>
<form name=lam>
<input type="button" value="Display timed text!" onClick="timedText()"> <input type="text" id="txt">
</form> </body> </html> Câu 13:Đồng hồ <html> <head> <script type="text/javascript"> function startTime() {
var today=new Date(); var h=today.getHours(); var m=today.getMinutes(); var s=today.getSeconds(); m=checkTime(m);
s=checkTime(s); document.getElementById('txt').innerHTML=h+":"+m+":"+s; t=setTimeout('startTime()',500); } function checkTime(i) { if (i<10) { i="0" + i; } return i; } </script> </head> <body onload="startTime()"> <div id="txt"></div>
</body> </html> Câu 14:Hiệu ứng ảnh <html> <head> <script type="text/javascript"> function mouseOver() { document.b1.src ="a.gif"; } function mouseOut() { document.b1.src ="b.gif"; } </script> </head> <body>
<a href="http://www.dayhoctructuyen.com" target="_blank">
<img border="0" alt="Chao ban" src="a.gif" name="b1" width="206" height="106" onmouseover="mouseOver()" onmouseout="mouseOut()" /></a>
</body> </html>
Câu 15:Sử dụng Select … option
<html> <head>
<script language="JavaScript">
var phone=new Array(); phone["lam"] ="090540468"; phone["duc"] ="0905274747"; phone["thinh"] ="0904909086"; phone["hien"] ="0905146560"; phone["daotao"] ="05113519929"; function disphone(thephone,entry) { var num=thephone[entry]; window.document.myform.numbox.value=num; } </script> </head> <body>
<form name ="myform">
<select onChange="disphone(phone,this.options[this.selectedIndex].value);"> <option value="lam"> Lê Thanh Lâm
<option value="duc"> Nguyễn Đinh minh Đức
<option value="thinh"> Trần Văn thịnh
<option value="hien">Đỗ Thế Hiền
<option value="daotao"> Phịng Đào tạo
</select>
<input type="text" name="numbox" value="" disabled > </form>
</body> </html>
Phần 2: Bài tập tự làm Bài 1:
Viết chương trình nhập vào 2 số m(dịng), n(cột) (dùng hàm prompt để nhập). Sau đĩ xuất ra trang Web một Table theo dạng sau:
Ví dụ (m=3,n=4)
11 12 13 14
21 22 23 24
Bài 2:
Viết chương trình nhập vào Mã số SV, Họ tên, Lớp (dùng hàm prompt để nhập) Sau đĩ hiển thị thơng tin vừa nhập vào ra bảng theo dạng sau:
Bài 3:
Viết chương trình nhập vào số 3 số m, n , p (dùng hàm prompt). Sau đĩ tạo ra một Form gồm cĩ m phần tử Text , n nhĩm radio mỗi nhĩm cĩ 2 tùy chọn các nút radio cĩ giá trị lần lượt là 1->2*n , và 1 Dropdown menu(Listbox) cĩ p tùy chọn mỗi option cĩ giá trị lần lượt là 1->p vàText của option là Text1 ->Textp.
(Lưu ý là các phần tử trên Form phải cĩ tên khác nhau.)
Bài 4:
Viết chương trình tạo một Form như sau:
Sau đĩ nhập liệu vào Form khi bấm nút Nhap(button), rồi hiển thị kết quả ra dạng như sau: lấy dữ liệu trường Họ tên hiển thị vào ơ YourName, Mật khẩu vào ơ YourPWD
Bài 5:
Yêu cầu như bài 4 nhưng kiểm tra dữ liệu các trường phải khơng rỗng và trường Password cĩ ít nhất 6 ký tự nếu trường nàokhơng thỏa yêu cầu thì hiển thị thơng báo và đưa con trỏ về ơ đĩ
để yêu cầu người sử dụng nhập lại dữ liệu.
Bài 6 :
Yêu cầu như bài 4 nhưng thêm điều kiện như sau khi Form Load lên thì con trỏ đặt trong trường UserName và nút Nhap ở chếđộ khơng cho phép chọn . Khi người sử dụng rời khỏi trường UserName nếu kiểm tra trường này khơng rỗng thì nút Nhap được sáng lên (cho phép chọn)
Bài 7: Thiết kế trang như sau:
Bấm vào nút Play thì chương trình thay đổi hình thay đổi một cách ngẫu nhiên (2 giây đổi 1 hình) Bấm stop thì dừng lại
Bài 8:
Thiết kế trang như sau. Khi người sử dụng nhập vào trường số lượng và rời khỏi trường này thì ơ Tổng thành tiền sẽđược cập nhật (lưu ý nếu nhập vào khơng phải là số thì thơng báo yêu cầu nhập lại)
Bài 9:
Cho trang Web sau
Trong nĩ gồm các tùy chọn sau: Mua vào, Bán ra là trường textbox
Loại xe là Dropdown Menu gồm các option
Text Value
Toyota ../images/mer2.jpg KIA ../images/otoa1.jpg Ford ../images/t2.jpg
Cập nhật cho: gồm 2 tùy chọn lần lượt cĩ giá trị là 1 , 0 mặc định khơng được chọn nút nào. Update, State là nút button.
Yêu cầu xử lý:
1) Khi trang load lên thì con trỏ nhập liệu trong trường ‘Mua vào’ và nút State ở chếđộ
khơng cho phép chọn.
2) Khi di chuyển con trỏ ra khỏi trường ‘Mua vào’ nếu như giá trị trường này là số và khơng rỗng thì nút State sáng lên.
3) Khi Click vào mục chọn hình quảng cáo thì sẽ thể hiện hình đĩ bên vùng bên.
4) Khi bấm vào nút Update và nếu nút radio ‘Vàng’ được chọn thì cập dữ liệu ở ‘Bảng tin thị trường’ trong mục ‘Vàng’ cịn ngược lại thì cập nhật ở mục ‘USD’ tương ứng với trường ‘Mua vào’ của cột ‘Mua vào’ và trường ‘Bán ra’ của cột ‘Bán ra’ (Dùng inner để cập nhật)
Bài 10:
Cho trang web sau:
Yêu cầu: (Tự thêm các option trong Listbox và đặt giá trị trong radio)
Hãy nhập dữ liệu trên Form sau đĩ bấm Dang ky thì dữ liệu sẽ hiện thị vào các cột tương ứng a,b,c,d .(Lưu ý là dữ liệu trước đĩ vẫn cịn) dùng:
Bài 11:
Viết chương trình xử lý theo yêu cầu sau:
1. Khi trang load lên thì nút Nhap ở chếđộ mờ và con trỏ nhập liệu ở ơ họ tên. 2. Khi rời khỏi trường Lớp nếu trường họ tên và lớp khác rỗng thì nút Nhap sáng lên. 3. Bấm nút Nhap thì dữ liệu hiển thị vào bảng “Danh Sach Sinh Vien” ở bên dưới và
nút Nhap lại mờ
Bài 12:
Tạo một biểu mẫu mua hàng trực tuyến như hình vẽ sau:
Hình 1
- Hãy thực hiện việc kiểm tra dữ liệu như sau:
o Nếu người sử dụng khơng điền thơng tin vào các trường: Họ và tên đệm, Tên, Địa chỉ, Thành phố
o Nếu người sử dụng chưa check vào ơ: Chọn vào đây nếu địa chỉ của bạn khác với địa chỉđã điền trong email thì ơ text bên dưới sẽ bị mờđi. Khi người sử
dụng check vào thì sẽ hiện ra ơ bên dưới cho phép đưa địa chỉ vào.
o Khi người sử dụng nhấn chuột vào ơ điền địa chỉ thì dịng chữ: Hãy điền địa chỉ
giao hàng vào đây nếu khác trên sẽ tựđộng được xĩa đi. o Kiểm tra thời gian hết hiệu lực (01/99)
- Sau khi các dữ liệu đã được điền đúng. Nếu người sử dụng nhấn vào nút Đồng ý thì mở
một cửa sổ mới với các thơng tin điền vào như hình vẽ 2.
Hình 2
o Nếu người sử dụng nhấn Cancel thì chuyển lại form mua hàng với yêu cầu focus vào ơ Họ và tên đệm.
o Nếu người sử dụng nhấn OK thì ơ thơng báo như hình 3 hiện ra.
Hình 3
BÀI TẬP LÀM THÊM
Session 8, Session 12, Session 14, Session 16, , Session 18 trong tập tin HDJ- Aptech.chm
CHƯƠ CHƯƠ CHƯƠ
CHƯƠNG NG NG NG 6666
THIẾT KẾ WEB SỬ DỤNG DREAMWEAVER c mục chính Bài tập bắt Bài tập làm Tĩm tắt Mục tiêu Các mục chính Bài tập bắt buộc Bài tập làm thêm
Kết thúc bài học này cung cấp học viên kiến thức về cách sử dụng phần mềm DreamWaver trong việc hỗ trợ thiết kế một Website nhanh chĩng và đẹp… 6.1 Định dạng Webpage 6.2 Table 6.3 Form 6.4 Layer
6.5 Flash button, flash text, rollover images, jump menu images, jump menu
6.6 Bổ sung multimedia cho trang web (âm thanh, phim Ảnh) web (âm thanh, phim Ảnh)
6.7 Frameset
6.8 Cascade style sheet- template
Dựa vào bài tập trong phần cuối Chương 6. Dựa vào bài tập trong phần cuối Chương 6.
Giới thiệu
− Dreamweaver MX là một cơng cụ thiết kế web chuyên nghiệp, phần cốt lõi của nĩ là HTML.
− Dreamweaver MX là một cơng cụ trực quan, trong đĩ cĩ thể bổ sung Javascrip, biểu mẫu, bảng biểu và nhiều loại đối týợng khác mà khơng cần viết một đoạn mã nào.
− Dreamweaver MX cĩ thể thiết kế bằng chếđộ Design view hoặc Code view hoặc Code and Design.
Cài đặt
− Dreamweaver MX 2004 là một chương trình trong bộ Macromedia MX, bạn nên cài đặt trên máy trọn bộ Macromedia MX
− Sau khi cài đặt, khởi động Draemvaerver MX: Start Programs Macromedia Macromedia Dreamweaver MX 2004
Màn hình Dreamweaver
1. Insert Bar: Gồm các chức năng tiện ích dùng để chèn các đối tượng vào trang web
− Common: Chèn các đối tượng: Image, Flash, Date, Template, …
− Layout: Chứa các cơng cụ trình bày trang, gồm 3 chếđộ: Standard, Expended, Layout
− Forms: Chứa các cơng cụ tạo Form
− Text: Dùng định dạng văn bản
− HTML: chứa các cơng cụ tạo trang web bằng code view
2. Document Toolbar: Chứa các nút cho phép xem trang web ở dạng Design hay dạng Code
− Show code view: Xem dạng trang HTML
− Show Design view: Xem trang dạng thiết kế, sử dụng các cơng cụ của Dreamwerver
− Show code and design view: Chia cửa sổ làm 2 phần: phần trên dạng code view, phần dưới dạng Design view
− Title: tiêu đề của trang Web
− Preview/Debug in Browser:Xem kết quả trang web thơng qua trình duyệt web
− Document Window: Cửa sổ dùng để tạo và hiệu chỉnh trang Web
3. Properties Inspector: Hiển thị các thuộc tính của các đối tượng đang được chọn, đồng thời cho phép chỉnh sửa các thuộc tính đĩ
4. Panel groups: nhĩm các Panel cho phép quản lý các đối tượng trong trang Web
− Bật / tắt các thanh Panel: Chọn menu Window Chọn thanh Panel tương ứng
− Mở rộng các thanh Panel: Click vào mũi tên ở gĩc trái của mỗi Panel
5. Status bar: Thanh trạng thái, nằm dưới đáy của Document Window, hiển thị Tag Selector, Window size, Document size và Download time.