Báo cáo isas 5 quarter 5 sử dụng javascript

Đề tài: Sử dụng JavaScript trong phát triển trang WebThao tác trên các giá trị ngày tháng và thời gian(Nguyễn Duy Thạc ID: S093006100169) trang 2Sử dụng các hàm toán học(Dương Nguyễn Minh Toàn ID: S093006100142) trang 16Sử dụng đồ họa và ảnh động(Đinh Quốc Cường ID: R093006100190) trang 30

Trung tâm Công nghệ Phần mềm Cần Thơ

NIIT Cần Thơ

MMSv2 – Quarter 5

B110006 – Báo cáo Isas

Cần Thơ, ngày 10 tháng 01 năm 2011

Mục lục

Đề tài: Sử dụng JavaScript trong phát triển trang Web

Thao tác trên các giá trị ngày tháng và thời gian

(Nguyễn Duy Thạc - ID: S093006100169) trang 2

Nguyễn Duy Thạc - Thao tác trên các giá trị ngày tháng và thời gian

Thao tác trên các giá trị ngày tháng và thời gian

Người thực hiện: Nguyễn Duy Thạc

I Đối tượng Date

- Đối tượng Date là một đối tượng trong JavaScript Đối tượng Date là một trong những đối tượng có bậc cao nhất trong mô hình hệ thống cấp bậc các đối tượng của JavaSript Đối tượng Date không chứa bất kỳ đối tượng nào khác.

II Tạo các đối tượng Date

- Đối tượng Date dùng để làm việc với ngày tháng năm và thời gian.

- Để tạo một đối tượng Date ta dùng constructor của Date Có bốn dạng constructor:

new Date() - Tạo đối tượng Date có giá trị là ngày tháng và giờ hiện tại

VD: var myDate = new Date()

 Tùy theo ngày giờ hiện tại, đối tượng myDate có thể có giá trị như sau:

Wed Dec 22 15:50:39 UTC+0700 2010

new Date(miliseconds) - Tạo đối tượng Date với số mili giây tính từ 01/01/1970 Một ngày

tương ứng 86 400 000 mili giây.

VD: var myDate = new Date(86400000);

 Đối tượng myDate có giá trị: Fri Jan 2 07:00:00 UTC+0700 1970

new Date(date_string) - Tạo đối tượng Date từ một chuỗi string ngày tháng.

VD: var myDate = new Date(“January 1, 2011 07:00:00”);

 Đối tượng myDate có giá trị: Sat Jan 1 07:00:00 UTC+0700 2011

new Date(year, month, day, hours, minutes, seconds, milliseconds)

VD: var myDate = new Date(2011, 5, 15, 7, 0, 0, 0);

 Đối tượng myDate có giá trị: Wed Jun 15 07:00:00 UTC+0700 2011

III Các hàm trên đối tượng Date

var d=new Date();

var weekday=new Array(7);

Nguyễn Duy Thạc - Thao tác trên các giá trị ngày tháng và thời gian

var d = new Date("July 21, 1983 01:15:00");

document.write("I was born in " + d.getFullYear());

Nguyễn Duy Thạc - Thao tác trên các giá trị ngày tháng và thời gian

var d = new Date();

document.write(d.getTime() + " milliseconds since 1970/01/01");

var d = new Date()

var gmtHours = -d.getTimezoneOffset()/60;

document.write("The local time zone is: GMT " + gmtHours);

</script>

 Output sẽ trả về local time zone của bạn.

var d=new Date("July 21, 1983 01:15:00");

document.write("I was born in " + d.getUTCFullYear());

</script>

 Output là “I was born in 1983”.

Nguyễn Duy Thạc - Thao tác trên các giá trị ngày tháng và thời gian

Nguyễn Duy Thạc - Thao tác trên các giá trị ngày tháng và thời gian

19 Hàm parse()

- Hàm parse() phân tích một chuỗi ngày tháng và trả về số mili giây giữa chuỗi ngày tháng

đó với 12 giờ đêm ngày 1 tháng 1 năm 1970.

22 Hàm setHours()

- Hàm setHours() thiết lập giờ dựa theo giờ cục bộ.

- Cú pháp: setHours(hour, min, sec, milisec)

- Các tham số:

• hour  Bắt buộc, là số nguyên từ 0 đến 23 miêu tả số giờ.

• min  Không bắt buộc, là số nguyên từ 0 đến 59 miêu tả số phút.

• sec  Không bắt buộc, là số nguyên từ 0 đến 59 miêu tả số giây.

• milisec  Không bắt buộc, là số nguyên từ 0 đến 999 miêu tả số mili giây.

Nguyễn Duy Thạc - Thao tác trên các giá trị ngày tháng và thời gian

Nguyễn Duy Thạc - Thao tác trên các giá trị ngày tháng và thời gian

Nguồn tham khảo:

www.w3schools.com

Dương Nguyễn Minh Toàn - Sử dụng các hàm toán học

Sử dụng các hàm toán họcNgười thực hiện: Dương Nguyễn Minh Toàn

Math Object ( Đối tượng Math)

JavaScript cho phép bạn thực hiện những phép toán phức tạp Sử dụng đối tượng ngôn ngữ Math bao gồm thuộc tính và phương thức bạn có thể thực hiện các toán

tử toán học.

Thuộc tính của đối tượng Math bao gồm các hằng số như Pi và Euler có thể dùng trong các phép tính toán thông thường Các phương thức của đối tượng Math chứa các hàm lượng giác như sin() và cos() Đối tượng Math là bất biến vì những thuộc tính và phương thức của nó không thể thay thế được Do đó bạn có thể truy xuất phần tử của đối tượng Math mà không cần phải khai báo đối tượng.

Cú Pháp:

Để dùng đối tượng Math:

1 Math.propertyName

2 Math.methodName(parameters)

propertyName là 1 thuộc tính trong danh sách sau đây

methodName là 1 phương thức trong danh sách sau đây

Hướng Dẫn

Math là 1 đối tượng được xây dựng sẵn trong JavaScript

Bạn có thể tham chiếu tới hằng số Pi bằng cách Math.Pi Hằng số được xác định 1 cách chính xác trong JavaScript Tương tự như vậy bạn có thể tham chiếu đến các hàm Math thông qua phương thức Ví dụ như hàm sin là Math.sin(x) trong đó x là tham số.

Thuận tiện hơn khi sử dụng với câu lệnh with khi đoạn code có sử dụng nhiều

Ví dụ sau đây sẽ hiển thị hằng số Euler:

document.write("Euler's constant is " + Math.E)

Ví dụ sau đây hiển thị Logarit tự nhiên của 2 :

document.write("The natural log of 2 is " + Math.LN2)

Thuộc tính LN10

Dương Nguyễn Minh Toàn - Sử dụng các hàm toán học

Logarit tự nhiên của 10 khoảng 2.302

Ví dụ sau đây hiển thị Logarit tự nhiên của 10 :

document.write("The natural log of 10 is " + Math.LN10)

Ví dụ sau đây hiển thị Logarit cơ số 2 của E:

document.write("The base 2 logarithm of E is " + Math.LOG2E)

Thuộc tính LOG10E

Logarit cơ số 10 của E khoảng 0.434

Vì LOG10E là một hằng số nên thuộc tính của nó là read-only(chỉ đọc)

Ví Dụ

Ví dụ sau đây hiển thị Logarit cơ số 10 của E:

document.write("The base 10 logarithm of E is " + Math.LOG10E)

Ví dụ sau đây hiển thị giá trị của Pi:

document.write("The value of pi is " + Math.PI)

Ví dụ sau đây hiển thị căn bậc 2 của ½ :

document.write("1 over the square root of 2 is " + Math.SQRT1_2)

Thuộc tính SQRT2

Dương Nguyễn Minh Toàn - Sử dụng các hàm toán học

Căn bậc 2 của 2 khoảng 1.414

Ví dụ sau đây hiển thị căn bậc 2 của 2:

document.write("The square root of 2 is " + Math.SQRT2)

Trong ví dụ sau đây người dùng nhập số vào texbox và nhấn nút để hiển thị giá trị tuyệt đối của số đó

<FORM>

Enter a number:

<INPUT TYPE="text" NAME="absEntry" />

The absolute value is:

<INPUT TYPE="text" NAME="result">

<INPUT TYPE="button" VALUE="Calculate"

Dương Nguyễn Minh Toàn - Sử dụng các hàm toán học

Trả về cung sin của một số (radian).

// Hiển thị giá trị 1.570796326794897 (pi/2)

document.write("The arc sine of 1 is " + Math.asin(1))

// Hiển thị giá trị -1.570796326794897 (-pi/2)

document.write("The arc sine of -1 is " + Math.asin(-1))

// Hiển thị giá trị 0 vì vượt quá phạm vi

document.write("The arc sine of 2 is " + Math.asin(2))

//Hiển thị giá trị 6.123031769111886e-017

document.write("The cosine of PI/2 radians is " + Math.cos(Math.PI/2))

//Hiển thị giá trị -1

document.write("The cosine of PI radians is " + Math.cos(Math.PI))

//Hiển thị giá trị 1

Dương Nguyễn Minh Toàn - Sử dụng các hàm toán học

Nếu number vượt quá phạm vi thì giá trị trả về luôn luôn là

document.write("The natural log of 1 is " + Math.log(1))

//Hiển thị giá trị -1.797693134862316e+308

//Vì tham số vượt quá phạm vi

document.write("The natural log of 0 is " + Math.log(0))

Dương Nguyễn Minh Toàn - Sử dụng các hàm toán học

base là 1 biểu thức số hoặc thuộc tính của một đối tượng có sẵn

exponent là 1 biểu thức số hoặc thuộc tính của một đối tượng có sẵn

Hiển thị 1 số ngẫu nhiên giữa 0 và 1

document.write("The random number is " + Math.random())

Trả về giá trị của một số được làm tròn tới số nguyên gần nhất

Dương Nguyễn Minh Toàn - Sử dụng các hàm toán học

//Hiển thị giá trị 1

document.write("The sine of pi/2 radians is " + Math.sin(Math.PI/2))

//Hiển thị giá trị1.224606353822377e-016

document.write("The sine of pi radians is " + Math.sin(Math.PI))

document.write("Thesquare root of 2 is " + Math.sqrt(2))

//Hiển thị giá trị 0 vì tham số vượt quá phạm vi

document.write("The square root of -1 is " + Math.sqrt(-1))

Phương thức tan

Trả về tan của 1 số

Cú Pháp

Math.tan(number)

Phương thức tan trả về 1 số là giá trị tan của góc đó

Ví Dụ

//Hiển thị giá trị 0.9999999999999999

document.write("The tangent of pi/4 radians is " + Math.tan(Math.PI/4))

//Hiển thị giá trị 0

document.write("Thetangent of 0 radians is " + Math.tan(0))

Vì LN2 là một hằng số nên thuộc tính của nó là read-only(chỉ đọc)

Ví Dụ

Ví dụ sau đây hiển thị Logarit tự nhiên của 2 :

document.write("The natural log of 2 is " + Math.LN2)

Đinh Quốc Cường - Sử dụng đồ họa và ảnh động

Sử dụng đồ họa và ảnh độngNgười thực hiện: Đinh Quốc Cường

Một trong những thách thức và bổ ích, của sử dụng một ngôn ngữ lập trình là tạo racác ứng dụng đồ họa và trò chơi

Tất nhiên, JavaScript là một ngôn ngữ tương đối đơn giản và có thể thực hiện một

số tính năng hữu ích với đồ họa, và thậm chí có thể làm hình ảnh động đơn giản

I Làm việc với đối tượng image

Bạn có thể thay đổi hình ảnh động bằng cách sử dụng đối tượng image liên quanvới nó Cách thường dùng để làm điều này là với mảng document.images Mảng nàychứa một mục cho mỗi hình ảnh được định nghĩa trên trang Mỗi hình ảnh cũng cóthể có một tên Trong hệ thống phân cấp đối tượng, mỗi đối tượng hình ảnh là concủa đối tượng tài liệu

Với W3C DOM, bạn cũng có thể chỉ định một thuộc tính id vào một hình ảnh trongthẻ <img>, và sau đó sử dụng document.getElementById để tìm đối tượng cho hìnhảnh đó Mỗi đối tượng hình ảnh có tính chất sau đây:

• Complete là một lá cờ đó cho bạn xem hình ảnh đã được tải xong Đây là một giá trị Boolean (đúng hoặc sai).

• Height và width hình ảnh phản ánh các thuộc tính tương ứng Đây là thông tin duy nhất, bạn không thể thay đổi kích thước của hình ảnh động.

• hspace và vspace đại diện cho các thuộc tính hình ảnh tương ứng, trong

đó xác định vị trí của hình ảnh trên trang Một lần nữa, đây là một thuộc tính chỉ đọc.

• name là tên của hình ảnh Bạn có thể xác định điều này với các thuộc tính NAME trong định nghĩa hình ảnh.

• align (có các giá trị top/middle/bottom/left/right) dùng để canh hình ảnh so với văn bản.

• alt là chữ sẽ được hiển thị khi hình ảnh không tồn tại hoặc chức năng show hình ảnh bị tắt.

• src là đường dẫn của hình ảnh, hoặc URL Bạn có thể thay đổi giá trị này để thay đổi hình ảnh động.

• Thẻ border xác định đường viền của ảnh Điều này xác định liệu một đườngviền được vẽ trên một hình ảnh liên kết

• #Lowsrc là giá trị của thuộc tính LOWSRC Đây là một thuộc tính cụ thể củaNetscape cho phép bạn chỉ định một hình ảnh độ phân giải thấp để được nạptrước khi hình ảnh "thật"

Đối với hầu hết các mục đích, những thuộc tính src là duy nhất bạn sẽ sử dụng Cácđối tượng hình ảnh không có phương thức Nó có ba xử lý sự kiện bạn có thể sửdụng:

• Các sự kiện onLoad xảy ra khi kết thúc tải hình ảnh (Bởi vì sự kiện onload cho toàn bộ tài liệu được kích hoạt khi tất cả các hình ảnh đã tải xong, nó thường là một sự lựa chọn tốt hơn.)

• Sự kiện onAbort xảy ra nếu người dùng hủy bỏ các trang trước khi hình ảnh được tải.

• Các sự kiện onError xảy ra nếu tập tin hình ảnh không tìm thấy hoặc lỗi Lưu ý

Mặc dù thay đổi nguồn hình ảnh hoạt động tốt, bạn cũng có thể sử dụng W3C DOM hoàn toàn loại bỏ hoặc thay thế các đối tượng hình ảnh, hoặc chèn mới, giống như bất kỳ đối tượng khác.

II Hình ảnh nạp trước

Mặc dù bạn không thể thêm một hình ảnh để trang web tự động, bạn có thể tạo ramột đối tượng hình ảnh độc lập Điều này cho phép bạn chỉ định một hình ảnh đó sẽđược tải và được đặt trong bộ nhớ cache, nhưng sẽ không được hiển thị trên trang.Điều này có vẻ vô dụng, nhưng đó là một cách tuyệt vời để làm việc với các kết nốimodem tốc độ Sau khi bạn đã cài đặt sẵn một hình ảnh, bạn có thể thay thế bất kỳhình ảnh trên trang với những hình ảnh đó và bởi vì nó đã lưu trữ, thay đổi xảy rangay lập tức Ngay cả trên một kết nối nhanh chóng, điều này tránh nhấp nháy vàlàm cho hình ảnh động mượt mà hơn

Bạn có thể ghi nhớ một hình ảnh bằng cách tạo ra một đối tượng hình ảnh mới, sửdụng các từ khoá mới Dưới đây là ví dụ:

Image2 = new Image();

Image2.src = "arrow1.gif";

III Tạo Rollovers

Một trong những ứng dụng cổ điển của JavaScript là tạo ra hiệu ứng Rollover image

đó là những hình ảnh sẽ thay đổi khi bạn di chuyển con trỏ chuột lên chúng Chúngthường được sử dụng để tạo ra các liên kết chuyển hướng này đem lại cho người

sử dụng một chút hướng dẫn bằng cách chọn một trong các con chuột là hơn

Rollovers thường được sử dụng cho các những hình ảnh được liên kết Sử dụngtính năng này, bạn có thể đánh dấu những liên kết hiện tại với một màu sắc khácnhau, biên giới, hoặc thậm chí bằng cách thay đổi hình ảnh hoàn toàn

Bạn có thể biến một hình ảnh vào một rollover bằng cách thêm một xử lý sự kiệnonmouseover thay thế hình ảnh với một phiên bản được đánh dấu và một xử lý sựkiện onMouseOut trả về hình ảnh gốc

Đinh Quốc Cường - Sử dụng đồ họa và ảnh động

Như bạn có thể thấy, tất cả điều này đòi hỏi trong JavaScript là một kết hợp xử lý sựkiện onmouseover với một hình ảnh năng động Thêm onMouseOut cho phép tậplệnh của bạn để khôi phục lại hình ảnh ban đầu khi con chuột di chuyển Ví dụ 3.1.1,cho thấy một cách đơn giản để làm điều này với xử lý sự kiện nội tuyến

Ví dụ 3.1.1 Sử dụng Rollovers JavaScript cơ bản

Lưu ý

Bạn có thể làm nổi bật hình ảnh của bạn trong cách khác - ví dụ: thay đổi màu sắc của chúng Phương pháp khác là đặt một hình ảnh nhỏ hơn để những bên của mỗi hình ảnh đó bắt đầu ra như thay đổi trống và để thay đổi một mũi tên hoặc biểu tượng khác khi con trỏ chuột trên những hình ảnh liên kết.

2 JavaScript CSS Rollovers

Mặc dù JavaScript rollovers làm việc tốt trong các trình duyệt hiện nay, kỹ thuật này

đã được phát triển trong những ngày trước khi CSS, và bây giờ có một cách tốt hơn

để thực hiện điều tương tự Sử dụng: Chỉ thị di chuột vào CSS, bạn có thể tạo liênkết văn bản là thay đổi màu sắc khi các dao động chuột lên chúng Ví dụ 3.2.1 chothấy một ví dụ đơn giản bị lật CSS

Công nghệ CSS được đề cập đầu tiên bởi W3C vào năm 1996 Theo định nghĩa củaW3C (Wide Web Consortium) CSS (từ viết tắt của Cascading Style Sheet tạm dịch

là bảng kiểu xếp chồng) là một ngôn ngữ giúp người thiết kế web có thể add kiểuvào tài liệu web (như kiểu font chữ, màu sắc, khoảng cách vv ) Bạn có thể tạo rakiểu một lần nhưng có thể dùng lại nhiều lần trong các tài liệu web tiếp theo

Ví dụ 3.2.1 JavaScript-Miễn phí Rollovers với CSS

Đinh Quốc Cường - Sử dụng đồ họa và ảnh động

<a id="archives" href="archives.html"><b>Archives</b></a>

</body>

</html>

Để thử ví dụ này, chỉ cần tải các tài liệu HTML vào trình duyệt Khi bạn di chuyểnchuột lên các liên kết, hình nền thay đổi màu sắc từ trắng đến màu xám Ví dụ nàyđược thể hiện trong hình 3.2.1

Hình 3.2.1 Đơn giản chỉ rollover CSS

Đây không phải kiểu như là lật JavaScript, nhưng nó có một số lợi thế:

• Đầu tiên, nó không yêu cầu JavaScript

• Thứ hai, các liên kết được ở văn bản thực tế có nghĩa là họ sẽ làm việc ngay cả trong các trình duyệt dựa trên văn bản, trình duyệt điện thoại di động nguyên thủy, và tiếng nói-đọc các trình duyệt cho người mù, mặc

dù các hiệu ứng rollover sẽ không làm việc trong 1 vài tình huống

• Thứ ba, tải trang nhanh hơn, và bạn có thể thêm các liên kết nhiều hơn

mà không tạo ra đồ họa.

3 Graphic CSS Rollovers

Giả sử bạn đang thực sự gắn liền với giao diện đồ hoạ tiện lợi của ví dụ tái đầu tưđầu tiên Trước khi bạn làm một cái gì đó như thế, hãy xem ví dụ 3.3.1 Danh sáchnày sử dụng CSS để thực hiện lật đồ họa, mà nhìn và làm việc chính xác như hình3.1.2, không có JavaScript

Ví dụ 3.3.1 Graphic Rollovers với CSS