Đang tải... (xem toàn văn)
Đề 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
Mục Lục 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 Sử dụng các hàm toán học (Dương Nguyễn Minh Toàn - ID: S093006100142) trang 16 Sử dụng đồ họa và ảnh động (Đinh Quốc Cường - ID: R093006100190) trang 30 NIIT Cần Thơ – Quarter 5 – Báo cáo ISAS 1/45 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 NIIT Cần Thơ – Quarter 5 – Báo cáo ISAS Nguyễn Duy Thạc - Thao tác trên các giá trị ngày tháng và thời gian III. Các hàm trên đối tượng Date 1. Hàm getDate() - Hàm getDate() trả về ngày của tháng (từ 1 đến 31) cho một đối tượng Date xác định, dựa theo giờ cục bộ. Hàm này luôn được sử dụng với một đối tượng Date. - Ví dụ: <script type="text/javascript"> var d = new Date("July 21, 1983 01:15:00"); document.write(d.getDate()); </script> Output sẽ là 21. 2. Hàm getDay() - Hàm getDay() trả về ngày trong tuần (từ 0 đến 6) cho một đối tượng date xác định, dựa theo giờ cục bộ. Hàm này luôn được sử dụng với một đối tượng Date. - Lưu ý: Chủ Nhật tương ứng với 0, Thứ Hai tương ứng với 1, … - Ví dụ: <script type="text/javascript"> var d=new Date(); var weekday=new Array(7); weekday[0]="Sunday"; weekday[1]="Monday"; weekday[2]="Tuesday"; weekday[3]="Wednesday"; weekday[4]="Thursday"; weekday[5]="Friday"; weekday[6]="Saturday"; document.write("Today is " + weekday[d.getDay()]); </script> Nếu ngày hiện tại là vào thứ Hai, output sẽ là “Today is Monday”. NIIT Cần Thơ – Quarter 5 – Báo cáo ISAS Nguyễn Duy Thạc - Thao tác trên các giá trị ngày tháng và thời gian 3. Hàm getFullYear() - Hàm getFullYear() trả về năm (4 số) của một đối tượng date xác định, dựa theo giờ cục bộ. - Ví dụ: <script type="text/javascript"> var d = new Date("July 21, 1983 01:15:00"); document.write("I was born in " + d.getFullYear()); </script> Output sẽ là “I was born in 1983”. 4. Hàm getHours() - Hàm getHours() trả về giờ (từ 0 đến 23) của một đối tượng date xác định, dựa theo giờ cục bộ. - Ví dụ: <script type="text/javascript"> var d = new Date("July 21, 1983 01:15:00"); document.write(d.getHours()); </script> Output sẽ là 1. 5. Hàm getMilliseconds() - Hàm getMilliseconds trả về mili giây (từ 0 đến 999) của một đối tượng date xác định, dựa theo giờ cục bộ. - Ví dụ: <script type="text/javascript"> var d = new Date("July 21, 1983 01:15:00"); document.write(d.getMilliseconds()); </script> Output sẽ là 0. NIIT Cần Thơ – Quarter 5 – Báo cáo ISAS Nguyễn Duy Thạc - Thao tác trên các giá trị ngày tháng và thời gian 6. Hàm getMinutes() - Hàm getMinutes() trả về phút (từ 0 đến 59) của một đối tượng date xác định, dựa theo giờ cục bộ. - Ví dụ: <script type="text/javascript"> var d = new Date("July 21, 1983 01:15:00"); document.write(d.getMinutes()); </script> Output sẽ là 15. 7. Hàm getMonth() - Hàm getMonth() trả về tháng (từ 0 đến 11) của một đối tượng date xác định, dựa theo giờ cục bộ. - Lưu ý: Tháng Một tương ứng với 0, tháng Hai tương ứng với 1, … - Ví dụ: <script type="text/javascript"> var d = new Date(); document.write(d.getMonth()); </script> Output sẽ trả về giá trị tháng của ngày hiện tại. 8. Hàm getSeconds() - Hàm getSeconds() trả về giây (từ 0 đến 59) của một đối tượng date xác định, dựa theo giờ cục bộ. - Ví dụ: <script type="text/javascript"> var d = new Date(); document.write(d.getSeconds()); </script> Output sẽ trả về giá trị giây của giờ hiện tại. NIIT Cần Thơ – Quarter 5 – Báo cáo ISAS Nguyễn Duy Thạc - Thao tác trên các giá trị ngày tháng và thời gian 9. Hàm getTime() - Hàm getTime() trả về số mili giây tính từ 12 giờ đêm của ngày 1 tháng 1 năm 1970 đến thời điểm của một đối tượng date xác định. - Ví dụ: <script type="text/javascript"> var d = new Date(); document.write(d.getTime() + " milliseconds since 1970/01/01"); </script> Output sẽ trả về số mili giây tính từ 12 giờ đêm của ngày 1 tháng 1 năm 1970 cho đến thời điểm hiện tại. 10. Hàm getTimezoneOffset() - Hàm getTimezoneOffset() trả về giá trị khác biệt về thời gian giữa Greenwich Mean Time (GMT) và giờ cục bộ, tính bằng số phút. - Ví dụ, nếu vùng thời gian của chúng ta là GMT +2, thì giá trị -120 sẽ được trả về. - Ví dụ: <script type="text/javascript"> 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. NIIT Cần Thơ – Quarter 5 – Báo cáo ISAS Nguyễn Duy Thạc - Thao tác trên các giá trị ngày tháng và thời gian 11. Hàm getUTCDate() - Hàm getUTCDate() trả về ngày trong tháng (từ 1 đến 31) của một đối tượng date xác định, dựa theo giờ chuẩn thế giới. - Universal Coordinated Time (UTC) là thời gian được thiết lập bởi Giờ Chuẩn Thế Giới (World Time Standard). - Ví dụ: <script type="text/javascript"> var d = new Date("July 21, 1983 01:15:00"); document.write(d.getUTCDate()); </script> Trả về ngày trong tháng theo giờ chuẩn thế giới của thời điểm trong đối tượng date xác định. Output sẽ là 20. 12. Hàm getUTCDay() - Hàm getUTCDay() trả về ngày trong tuần (từ 0 đến 6) của một đối tượng date xác định, dựa theo giờ chuẩn thế giới. - Lưu ý: Chủ Nhật tương ứng với 0, Thứ Hai tương ứng với 1, … - Ví dụ: <script type="text/javascript"> var d = new Date(); document.write(d.getUTCDay()); </script> Trả về ngày trong tuần dựa theo giờ chuẩn thế giới. 13. Hàm getUTCFullYear() - Hàm getUTCFullYear() trả về năm (4 chữ số) của một đối tượng date xác định, dựa theo giờ chuẩn thế giới. - Ví dụ: <script type="text/javascript"> 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”. NIIT Cần Thơ – Quarter 5 – Báo cáo ISAS Nguyễn Duy Thạc - Thao tác trên các giá trị ngày tháng và thời gian 14. Hàm getUTCHours() - Hàm getUTCHours() trả về giờ (từ 0 đến 23) của một đối tượng date xác định, dựa theo giờ chuẩn thế giới. - Ví dụ: <script type="text/javascript"> var d=new Date("July 21, 1983 01:15:00"); document.write(d.getUTCHours()); </script> Output sẽ là 18. 15. Hàm getUTCMilliseconds() - Hàm getUTCMilliseconds() trả về mili giây (từ 0 đến 999) của một đối tượng date xác định, dựa theo giờ chuẩn thế giới. - Ví dụ: <script type="text/javascript"> var d = new Date(); document.write(d.getUTCMilliseconds()); </script> Trả về số mili giây hiện tại dựa theo giờ chuẩn thế giới. NIIT Cần Thơ – Quarter 5 – Báo cáo ISAS Nguyễn Duy Thạc - Thao tác trên các giá trị ngày tháng và thời gian 16. Hàm getUTCMinutes() - Hàm getMinutes() trả về phút (từ 0 đến 59) của một đối tượng date xác định, dựa theo giờ chuẩn thế giới. - Ví dụ: <script type="text/javascript"> var d = new Date(); document.write(d.getUTCMinutes()); </script> Trả về phút hiện tại dựa theo giờ chuẩn thế giới. 17. Hàm getUTCMonth() - Hàm getUTCMonth() trả về tháng (từ 0 đến 11) của một đối tượng date xác định, dựa theo giờ chuẩn thế giới. - Lưu ý: Tháng Một tương ứng với 0, tháng Hai tương ứng với 1, … - Ví dụ: <script type="text/javascript"> var d = new Date(); document.write(d.getUTCMonth()); </script> Output sẽ trả về giá trị tháng hiện tại dựa theo giờ chuẩn thế giới. 18. Hàm getUTCSeconds() - Hàm getUTCSeconds() trả về giây (từ 0 đến 59) của một đối tượng date xác định, dựa theo giờ chuẩn thế giới. - Ví dụ: <script type="text/javascript"> var d = new Date(); document.write(d.getSeconds()); </script> Output sẽ trả về giá trị giây của giờ hiện tại theo giờ chuẩn thế giới. NIIT Cần Thơ – Quarter 5 – Báo cáo ISAS 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. - Ví dụ: <script type="text/javascript"> var d = Date.parse("Jul 8, 2005"); document.write(d); </script> Output sẽ là 1120773600000. 20. Hàm setDate() - Hàm setDate() thiết lập ngày của tháng (từ 1 đến 31), dựa theo giờ cục bộ. - Ví dụ: <script type="text/javascript"> var d = new Date(); d.setDate(15); document.write(d); </script> 21. Hàm setFullYear() - Hàm setFullYear() thiết lập năm (4 chữ số), dựa theo giờ cục bộ. - Ví dụ: <script type="text/javascript"> var d = new Date(); d.setFullYear(2020); document.write(d); </script> NIIT Cần Thơ – Quarter 5 – Báo cáo ISAS [...]... thị giá trị 45 document.write("The floor of 45. 95 is " + Math.floor( 45. 95) ) //Hiển thị giá trị -46 document.write("The floor of - 45. 95 is " + Math.floor(- 45. 95) ) Phương thức log Trả về logarit tự nhiên (cơ số e) của 1 số Cú Pháp Math.log(number) number là số dương bất kì hoặc thuộc tính của 1 đối tượng có sẵn Hướng Dẫn NIIT Cần Thơ – Quarter 5 – Báo cáo ISAS Dương Nguyễn Minh Toàn - Sử dụng các hàm... var d=new Date(); document.write(d.toUTCString()); Output có thể là “Sun Jan 09 2011 14:00:12 GMT+0700” NIIT Cần Thơ – Quarter 5 – Báo cáo ISAS 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 NIIT Cần Thơ – Quarter 5 – Báo cáo ISAS 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... 2 : document.write("The natural log of 2 is " + Math.LN2) NIIT Cần Thơ – Quarter 5 – Báo cáo ISAS Đinh Quốc Cường - Sử dụng đồ họa và ảnh động Sử dụng đồ họa và ảnh động Ngườ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 ra cá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ố... thuộc tính src là duy nhất bạn sẽ sử dụng Tuy nhiên, bạn cũng có thể thay đổi những thuộc tính lowsrc Điều này định nghĩa một hình ảnh độ phân giải thấp để tải đầu tiên và sẽ được sử dụng chỉ khi bạn thay đổi thuộc tính src.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: NIIT Cần Thơ – Quarter 5 – Báo cáo ISAS Đinh Quốc Cường - Sử dụng đồ họa và ảnh động Đối với... kết Sử dụng JavaScript, bạn có thể thực hiện các lệnh script khi một khu vực của hình ảnh được nhấp vào thì nó sẽ goi một trang web được liên kết đến vùng đó Với mỗi bức ảnh đã được hiện thỉ trên website của bạn, bạn có thể sử dụng Image Map để tạo ra nhiều vùng trên một bức ảnh và với mỗi vùng bạn có thể gán cho nó một siêu liên kết riêng NIIT Cần Thơ – Quarter 5 – Báo cáo ISAS Đinh Quốc Cường - Sử dụ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 hằng số Math và phương thức Ví dụ: with (Math) { a = PI * r*r y = r*sin(theta) x = r*cos(theta)} NIIT Cần Thơ – Quarter 5 – Báo cáo ISAS Dương Nguyễn Minh Toàn - Sử dụng các hàm toán học Các thuộc tính • • • • • • • • E LN2 LN10 LOG2E LOG10E PI SQRT1_2 SQRT2... tạo ra hiệu ứng Rollover bằng cách sử dụng JavaScript Để làm điều này, bạn bắt đầu với phiên bản thường xuyên và nổi bật của từng hình ảnh rollover Hình 3.1.1 cho thấy ví dụ của các nút điều hướng Hình 3.1.1 Các hình cho ví dụ 3.1.1 NIIT Cần Thơ – Quarter 5 – Báo cáo ISAS Đ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ự... src="archives1.gif"> Đây chỉ là một chút cơ bản của dòng JavaScript, do đó bạn có thể kiểm tra nó bằng cách tải các tập tin HTML vào trình duyệt Kết quả được thể hiện trong hình 3.1.2 Trong hình, con trỏ chuột qua nút Archives Hình 3.1.2 Sử dụng JavaScript để thay đổi hình ảnh NIIT Cần Thơ – Quarter 5 – Báo cáo ISAS Đinh Quốc Cường - Sử dụng đồ họa và ảnh động Lưu ý Bạn có thể làm nổi bật hình ảnh... // Hiển thị giá trị 0.7 853 981633974483 document.write("The arc tangent of 1 is " + Math.atan(1)) // Hiển thị giá trị -0.7 853 981633974483 document.write("The arc tangent of -1 is " + Math.atan(-1)) NIIT Cần Thơ – Quarter 5 – Báo cáo ISAS Dương Nguyễn Minh Toàn - Sử dụng các hàm toán học // Hiển thị giá trị 0.4636476090008061 document.write("The arc tangent of 5 is " + Math.atan( .5) ) Phương thức ceil Trả... 0 document.write("The arc cosine of 1 is " + Math.acos(1)) // Hiển thị giá trị 3.14 159 2 653 589793 document.write("Thearc cosine of -1 is " + Math.acos(-1)) // Hiển thị giá trị 0 document.write("Thearc cosine of 2 is " + Math.acos(2)) Phương thức asin NIIT Cần Thơ – Quarter 5 – Báo cáo ISAS 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) Cú Pháp Math.asin(number) . 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 NIIT Cần Thơ – Quarter 5 – Báo cáo ISAS Nguyễn Duy Thạc - Thao tác trên. type="text /javascript& quot;> var d=new Date(); document.write(d.toLocaleString()); </script> Output có thể là “Sunday, January 09, 2011 1 :57 :23 PM”. NIIT Cần Thơ – Quarter 5 – Báo cáo ISAS Nguyễn. dụ: <script type="text /javascript& quot;> var d = new Date(); d.setTime(7777 156 4221); document.write(d); </script> NIIT Cần Thơ – Quarter 5 – Báo cáo ISAS Nguyễn Duy Thạc - Thao