Chuong5A-Lap Trinh Web-Java Script

110
Trình bày: Nguyễn Phú Trường

Transcript of Chuong5A-Lap Trinh Web-Java Script

Page 1: Chuong5A-Lap Trinh Web-Java Script

Trình bày: Nguyễn Phú Trường

Page 2: Chuong5A-Lap Trinh Web-Java Script

NỘI DUNG

Bộ môn Mạng máy tính & Truyền thông 2 3/9/2013

Giới thiệu về JavaScript

Biến, kiểu dữ liệu, phép toán

Lệnh điều khiển

Popup

Sử dụng các đối tượng

Page 3: Chuong5A-Lap Trinh Web-Java Script

NỘI DUNG

Bộ môn Mạng máy tính & Truyền thông 3 3/9/2013

Giới thiệu về JavaScript

Biến, kiểu dữ liệu, phép toán

Lệnh điều khiển

Popup

Sử dụng các đối tượng

Page 4: Chuong5A-Lap Trinh Web-Java Script

JAVASCRIPT LÀ GÌ?

Bộ môn Mạng máy tính & Truyền thông 4 3/9/2013

1

Được thiết kế cùng với HTML tạo trang Web sinh động Là ngôn ngữ script, hướng đối tượng, chứa các dòng lệnh thực thi được

2

Được viết trực tiếp vào trang HTML Là ngôn ngữ thông dịch

3

Khác với Java

Page 5: Chuong5A-Lap Trinh Web-Java Script

JAVASCRIPT DÙNG ĐỂ LÀM GÌ?

5 3/9/2013 Bộ môn Mạng máy tính & Truyền thông

Kiểm tra

dữ liệu

trước

khi

submit

Cung

cấp

thông

tin về

browser

Đọc,

viết phần

tử /nội

dung

trang

HTML

Tạo

cookie

Viết

trang

HTML

sinh

động

Bắt và

xử lý

các sự

kiện

Xuất

động

trang

HTML

Page 6: Chuong5A-Lap Trinh Web-Java Script

VÍ DỤ 1 VỀ JAVASCRIPT

3/9/2013 6 Bộ môn Mạng máy tính & Truyền thông

<html>

<body>

<h1>My First Web Page</h1>

<script type="text/javascript">

document.write("<p>" + Date() + "</p>");

</script>

</body>

</html>

Page 7: Chuong5A-Lap Trinh Web-Java Script

VÍ DỤ 2 VỀ JAVASCRIPT

3/9/2013 7 Bộ môn Mạng máy tính & Truyền thông

<html>

<body>

<h1>My First Web Page</h1>

<p id="demo"></p>

<script type="text/javascript">

document.getElementById("demo").innerHTML=Date();

</script>

</body>

</html>

Page 8: Chuong5A-Lap Trinh Web-Java Script

CHÈN JAVASCRIPT VÀO TRANG HTML

3/9/2013 8 Bộ môn Mạng máy tính & Truyền thông

Để chèn một JavaScript vào trang HTML, dùng thẻ

<script>.

Trong thẻ <script> dùng thuộc tính kiểu để định nghĩa

ngôn ngữ kịch bản.

Cặp thẻ <script> và </script> xác định nơi JavaScript bắt

đầu và kết thúc

Các dòng giữa <script> và</script> chứa JavaScript và

được thực thi bởi trình duyệt.

Page 9: Chuong5A-Lap Trinh Web-Java Script

CHÈN JAVASCRIPT VÀO TRANG HTML

3/9/2013 9 Bộ môn Mạng máy tính & Truyền thông

<html>

<body>

<h1>My First Web Page</h1>

<p id="demo">This is a paragraph.</p>

<script type="text/javascript">

... some JavaScript code ...

</script>

</body>

</html>

Page 10: Chuong5A-Lap Trinh Web-Java Script

CHÈN JAVASCRIPT VÀO TRANG HTML

3/9/2013 10 Bộ môn Mạng máy tính & Truyền thông

Các trình duyệt không hỗ trợ JavaScript, sẽ hiển thị

JavaScript như nội dung trang.

Để ngăn chặn chúng thực hiện điều này, và như một

phần của chuẩn JavaScript, thẻ chú thích nên được

dùng để “giấu” JavaScript.

Chỉ thêm thẻ chú thích HTML <!– trước câu lệnh

JavaScript đầu tiên, và --> (kết thúc chú thích) sau dòng

lệnh JavaScript cuối

Page 11: Chuong5A-Lap Trinh Web-Java Script

CHÈN JAVASCRIPT VÀO TRANG HTML

3/9/2013 11 Bộ môn Mạng máy tính & Truyền thông

<html>

<body>

<script type="text/javascript">

<!--

document.getElementById("demo").innerHTML=Date();

//-->

</script>

</body>

</html>

JavaScripts có thể được đặt trong phần <body> và

<head> của một trang HTML.

Page 12: Chuong5A-Lap Trinh Web-Java Script

JAVASCRIPT IN <BODY>

<html>

<body> <h1>My First Web Page</h1>

<p id="demo"></p>

<script type="text/javascript">

document.getElementById("demo").innerHTML=Dat

e();

</script>

</body>

</html>

Bộ môn Mạng máy tính & Truyền thông 12 3/9/2013

Page 13: Chuong5A-Lap Trinh Web-Java Script

CÁC HÀM JAVASCRIPT VÀ SỰ KIỆN

JavaScripts trong trang HTML sẽ được thực thi khi trang

nạp. Điều này không luôn luôn những gì chúng ta muốn.

Đôi khi chúng ta thực thi JavaScript khi sự kiện-event

xảy ra, như khi người dùng nhấp một nút. Đây là trường

hợp chúng ta đặt script trong một hàm-function.

Các sự kiện thường được dùng kết hợp với hàm (giống

như gọi hàm khi sự kiện xảy ra).

Bộ môn Mạng máy tính & Truyền thông 13 3/9/2013

Page 14: Chuong5A-Lap Trinh Web-Java Script

JAVASCRIPT TRONG <HEAD>

<html> <head>

<script type="text/javascript">

function displayDate()

{

document.getElementById("demo").innerHTML=Date();

}

</script>

</head>

<body>

<h1>My First Web Page</h1>

<p id="demo"></p>

<button type="button" onclick="displayDate()">Display Date</button>

</body>

</html>

Bộ môn Mạng máy tính & Truyền thông 14 3/9/2013

Page 15: Chuong5A-Lap Trinh Web-Java Script

SỬ DỤNG MỘT JAVASCRIPT NGOÀI

JavaScript có thể được đặt trong các tập tin ngoài.

Các tập tin ngoài thường chứa mã được dùng cho nhiều

trang web.

Các tập tin JavaScript ngoài có phần mở rộng .js.

Chú ý: script ngoài không chứa thẻ <script></script> !

Để dùng tập tin ngoài, chỉ tới tập tin .js trong thuộc tính

"src" của thẻ <script>

Bộ môn Mạng máy tính & Truyền thông 15 3/9/2013

Page 16: Chuong5A-Lap Trinh Web-Java Script

SỬ DỤNG MỘT JAVASCRIPT NGOÀI

<html>

<head>

<script type="text/javascript" src="xxx.js"></script>

</head>

<body>

</body>

</html>

Bộ môn Mạng máy tính & Truyền thông 16 3/9/2013

Page 17: Chuong5A-Lap Trinh Web-Java Script

SỬ DỤNG MỘT JAVASCRIPT NGOÀI

<html> <head></head>

<body>

<script type="text/javascript" src="xxx.js">

</script>

<p>

The actual script is in an external script file called "xxx.js".

</p>

</body></html>

Bộ môn Mạng máy tính & Truyền thông 17 3/9/2013

document.write("This text was written by an external script!")

Nội dung tập tin xxx.js

Page 18: Chuong5A-Lap Trinh Web-Java Script

BIẾN

18 3/9/2013 Bộ môn Mạng máy tính & Truyền thông

Đặc điểm Khai báo Gán trị

Chứa dữ liệu

Phân biệt hoa và thường

Phạm vi:

Toàn cục

Cục bộ

• var strname = some value

Hoặc

• strname = some value

• var strname = "Hege"

Hoặc

• strname = "Hege"

Page 19: Chuong5A-Lap Trinh Web-Java Script

VÍ DỤ

3/9/2013 19 Bộ môn Mạng máy tính & Truyền thông

Page 20: Chuong5A-Lap Trinh Web-Java Script

KIỂU DỮ LIỆU

Kiểu dữ liệu

Số nguyên : 10, -301, 1974, etc.

Số thực và số chấm động : 13.5, 1.35E1

Luận lý : true, false

Chuỗi : “do thanh nghi”, “sinh nam 1974”, \b, \n, \r, \t, \\

var quote = "He read \"The Cremation of Sam McGee\" by R.W. Service."

document.write(quote)

Kết quả sẽ là :

He read "The Cremation of Sam McGee" by R.W. Service.

3/9/2013 20 Bộ môn Mạng máy tính & Truyền thông

Page 21: Chuong5A-Lap Trinh Web-Java Script

KIỂU DỮ LIỆU

Kiểu dữ liệu

Mảng :

myArray = new Array(10); foo = new Array(5);

myArray[0] = 56; myArray[9] = 44;

colors = new Array();

colors[99] = "midnightblue";

numberOfElements = myArray.length;

3/9/2013 21 Bộ môn Mạng máy tính & Truyền thông

Page 22: Chuong5A-Lap Trinh Web-Java Script

KIỂU DỮ LIỆU

Kiểu dữ liệu

Đối tượng :

3/9/2013 22 Bộ môn Mạng máy tính & Truyền thông

Page 23: Chuong5A-Lap Trinh Web-Java Script

CHUYỂN KIỂU DỮ LIỆU

Kiểu dữ liệu

Được chuyển tự động :

var answer = 42

answer = "Thanks for all the fish..."

x = "The answer is " + 42

Chuyển chuỗi sang số : ParseInt(), ParseFloat()

3/9/2013 23 Bộ môn Mạng máy tính & Truyền thông

Page 24: Chuong5A-Lap Trinh Web-Java Script

PHÉP TOÁN

Phép toán

Gán : =

Phép tăng hoặc giảm 1 : ++, --

Gán rút gọn : +=, -=, *=, /=, %=

So sánh : ==, !=, <, <=, >, >=

Phép tính số học : +, -, *, /, %

Phép toán luận lý : &&, ||, !,

Phép : (cond) ? Expr1:Expr2

3/9/2013 24 Bộ môn Mạng máy tính & Truyền thông

Page 25: Chuong5A-Lap Trinh Web-Java Script

PHÉP TOÁN

3/9/2013 25 Bộ môn Mạng máy tính & Truyền thông

Page 26: Chuong5A-Lap Trinh Web-Java Script

PHÉP TOÁN

3/9/2013 26 Bộ môn Mạng máy tính & Truyền thông

Page 27: Chuong5A-Lap Trinh Web-Java Script

PHÉP TOÁN

3/9/2013 27 Bộ môn Mạng máy tính & Truyền thông

Page 28: Chuong5A-Lap Trinh Web-Java Script

PHÉP TOÁN

3/9/2013 28 Bộ môn Mạng máy tính & Truyền thông

Page 29: Chuong5A-Lap Trinh Web-Java Script

PHÉP TOÁN

3/9/2013 29 Bộ môn Mạng máy tính & Truyền thông

Page 30: Chuong5A-Lap Trinh Web-Java Script

ĐỊNH NGHĨA HÀM

Định nghĩa

function functionname(var1,var2,...,varX)

{

some code

}

3/9/2013 30 Bộ môn Mạng máy tính & Truyền thông

Page 31: Chuong5A-Lap Trinh Web-Java Script

ĐỊNH NGHĨA HÀM

Ví dụ

function total(a,b)

{

x=a*b

return x

}

product=total(2,3)

3/9/2013 31 Bộ môn Mạng máy tính & Truyền thông

Page 32: Chuong5A-Lap Trinh Web-Java Script

ĐỊNH NGHĨA HÀM

Ví dụ <html> <head>

<script type="text/javascript">

function displaymessage()

{

alert("Hello World!")

}

</script>

</head><body>

<form>

<input type="button" value="Click me!"

onclick="displaymessage()" >

</form>

</body>

</html> 3/9/2013 32 Bộ môn Mạng máy tính & Truyền thông

Page 33: Chuong5A-Lap Trinh Web-Java Script

ĐỊNH NGHĨA HÀM

3/9/2013 33 Bộ môn Mạng máy tính & Truyền thông

Page 34: Chuong5A-Lap Trinh Web-Java Script

ĐỊNH NGHĨA HÀM

3/9/2013 34 Bộ môn Mạng máy tính & Truyền thông

Page 35: Chuong5A-Lap Trinh Web-Java Script

NỘI DUNG

Bộ môn Mạng máy tính & Truyền thông 35 3/9/2013

Giới thiệu về JavaScript

Biến, kiểu dữ liệu, phép toán

Lệnh điều khiển

Popup

Sử dụng các đối tượng

Page 36: Chuong5A-Lap Trinh Web-Java Script

CẤU TRÚC IF-ELSE

Cú pháp

if (condition) {

statements1

}

Hay

if (condition) {

statements1

}

else {

statements2

} 3/9/2013 36 Bộ môn Mạng máy tính & Truyền thông

Page 37: Chuong5A-Lap Trinh Web-Java Script

CẤU TRÚC IF-ELSE

3/9/2013 37 Bộ môn Mạng máy tính & Truyền thông

Page 38: Chuong5A-Lap Trinh Web-Java Script

CẤU TRÚC IF-ELSE

3/9/2013 38 Bộ môn Mạng máy tính & Truyền thông

Page 39: Chuong5A-Lap Trinh Web-Java Script

CẤU TRÚC SWITCH-CASE

Cú pháp

switch(n) {

case 1:

execute code block 1

break;

case 2:

execute code block 2

break;

default:

execute code block n

}

3/9/2013 39 Bộ môn Mạng máy tính & Truyền thông

Page 40: Chuong5A-Lap Trinh Web-Java Script

CẤU TRÚC SWITCH-CASE

Ví dụ <script type="text/javascript">

var d = new Date()

theDay=d.getDay()

switch (theDay) {

case 5:

document.write("Finally Friday")

break;

case 6:

document.write("Super Saturday");

break;

case 0:

document.write("Sleepy Sunday");

break

default:

document.write("I'm looking forward to this weekend!")

}

</script> 3/9/2013 40 Bộ môn Mạng máy tính & Truyền thông

Page 41: Chuong5A-Lap Trinh Web-Java Script

CẤU TRÚC SWITCH-CASE

3/9/2013 41 Bộ môn Mạng máy tính & Truyền thông

Page 42: Chuong5A-Lap Trinh Web-Java Script

CẤU TRÚC LẶP FOR

Cú pháp

for (initial-expression; condition; increment-expression) {

statements

}

Ví dụ:

var n = 0;

for (var i = 0; i < 3; i++) {

n += i;

alert("The value of n is now " + n);

}

3/9/2013 42 Bộ môn Mạng máy tính & Truyền thông

Page 43: Chuong5A-Lap Trinh Web-Java Script

CẤU TRÚC LẶP FOR

3/9/2013 43 Bộ môn Mạng máy tính & Truyền thông

Page 44: Chuong5A-Lap Trinh Web-Java Script

CẤU TRÚC LẶP FOR

3/9/2013 44 Bộ môn Mạng máy tính & Truyền thông

Page 45: Chuong5A-Lap Trinh Web-Java Script

CẤU TRÚC WHILE, DO-WHILE

Cú pháp

while (var<=endvalue)

{

code to be executed

}

do

{

code to be executed

}

while (var<=endvalue)

3/9/2013 45 Bộ môn Mạng máy tính & Truyền thông

Page 46: Chuong5A-Lap Trinh Web-Java Script

CẤU TRÚC WHILE, DO-WHILE

Ví dụ <html>

<body>

<script type="text/javascript">

var i=0

while (i<=10)

{

document.write("The number is " + i)

document.write("<br />")

i=i+1

}

</script>

</body>

</html>

3/9/2013 46 Bộ môn Mạng máy tính & Truyền thông

Page 47: Chuong5A-Lap Trinh Web-Java Script

CẤU TRÚC WHILE, DO-WHILE

Ví dụ <html>

<body>

<script type="text/javascript">

var i=0

do {

document.write("The number is " + i)

document.write("<br />")

i=i+1

}

while (i<0)

</script>

</body>

</html>

3/9/2013 47 Bộ môn Mạng máy tính & Truyền thông

Page 48: Chuong5A-Lap Trinh Web-Java Script

CẤU TRÚC WHILE, DO-WHILE

3/9/2013 48 Bộ môn Mạng máy tính & Truyền thông

Page 49: Chuong5A-Lap Trinh Web-Java Script

CẤU TRÚC WHILE, DO-WHILE

3/9/2013 49 Bộ môn Mạng máy tính & Truyền thông

Page 50: Chuong5A-Lap Trinh Web-Java Script

BREAK TRONG CẤU TRÚC LẶP

3/9/2013 50 Bộ môn Mạng máy tính & Truyền thông

Page 51: Chuong5A-Lap Trinh Web-Java Script

CONTINUE TRONG CẤU TRÚC LẶP

3/9/2013 51 Bộ môn Mạng máy tính & Truyền thông

Page 52: Chuong5A-Lap Trinh Web-Java Script

NỘI DUNG

Bộ môn Mạng máy tính & Truyền thông 52 3/9/2013

Giới thiệu về JavaScript

Biến, kiểu dữ liệu, phép toán

Lệnh điều khiển

Popup

Sử dụng các đối tượng

Page 53: Chuong5A-Lap Trinh Web-Java Script

ALERT("SOMETEXT")

3/9/2013 53 Bộ môn Mạng máy tính & Truyền thông

Page 54: Chuong5A-Lap Trinh Web-Java Script

CONFIRM("SOMETEXT")

3/9/2013 54 Bộ môn Mạng máy tính & Truyền thông

Page 55: Chuong5A-Lap Trinh Web-Java Script

PROMPT("SOMETEXT","DEFAULTVALUE")

3/9/2013 55 Bộ môn Mạng máy tính & Truyền thông

Page 56: Chuong5A-Lap Trinh Web-Java Script

KẾT HỢP VỚI FORM

3/9/2013 56 Bộ môn Mạng máy tính & Truyền thông

Page 57: Chuong5A-Lap Trinh Web-Java Script

KẾT HỢP VỚI FORM

3/9/2013 57 Bộ môn Mạng máy tính & Truyền thông

Page 58: Chuong5A-Lap Trinh Web-Java Script

NỘI DUNG

Bộ môn Mạng máy tính & Truyền thông 58 3/9/2013

Giới thiệu về JavaScript

Biến, kiểu dữ liệu, phép toán

Lệnh điều khiển

Popup

Sử dụng các đối tượng

Page 59: Chuong5A-Lap Trinh Web-Java Script

ĐỐI TƯỢNG

Các đối tượng

String

Date

Array

Boolean

Math

HTML DOM

3/9/2013 59 Bộ môn Mạng máy tính & Truyền thông

Page 60: Chuong5A-Lap Trinh Web-Java Script

ĐỐI TƯỢNG STRING

3/9/2013 60 Bộ môn Mạng máy tính & Truyền thông

Page 61: Chuong5A-Lap Trinh Web-Java Script

ĐỐI TƯỢNG STRING

3/9/2013 61 Bộ môn Mạng máy tính & Truyền thông

Page 62: Chuong5A-Lap Trinh Web-Java Script

ĐỐI TƯỢNG STRING

Ví dụ

var txt="Hello world!"

document.write(txt.length)

document.write(txt.toUpperCase())

document.write(txt.substring(4, 8))

document.write(txt.small())

document.write(txt.strike())

document.write(txt.charAt(8))

3/9/2013 62 Bộ môn Mạng máy tính & Truyền thông

Page 63: Chuong5A-Lap Trinh Web-Java Script

ĐỐI TƯỢNG DATE

3/9/2013 63 Bộ môn Mạng máy tính & Truyền thông

Page 64: Chuong5A-Lap Trinh Web-Java Script

ĐỐI TƯỢNG DATE

3/9/2013 64 Bộ môn Mạng máy tính & Truyền thông

Page 65: Chuong5A-Lap Trinh Web-Java Script

ĐỐI TƯỢNG DATE

3/9/2013 65 Bộ môn Mạng máy tính & Truyền thông

Page 66: Chuong5A-Lap Trinh Web-Java Script

ĐỐI TƯỢNG DATE

3/9/2013 66 Bộ môn Mạng máy tính & Truyền thông

Page 67: Chuong5A-Lap Trinh Web-Java Script

ĐỐI TƯỢNG DATE

Ví dụ

var myDate=new Date()

myDate.setFullYear(2010,0,14)

myDate.setDate(myDate.getDate()+5)

myDate.setFullYear(2010,0,14)

var today = new Date()

if (myDate>today)

alert("Today is before 14th January 2010")

else

alert("Today is after 14th January 2010")

3/9/2013 67 Bộ môn Mạng máy tính & Truyền thông

Page 68: Chuong5A-Lap Trinh Web-Java Script

KHỞI TẠO ĐỐI TƯỢNG DATE

Với lệnh khởi tạo Date không tham số, hệ thống sẽ trả về

ngày hiện tại

var now = new Date();

Khởi tạo đối tượng Date chỉ định rõ những tham số theo

thứ tự sau: năm, tháng, ngày, giờ, phút, giây:

var vnwomanDay = new Date(2011, 9, 20);

var vnwomanDayAndTime = new Date(2011, 9, 20, 12,

20, 30);

Lưu ý: trong Javascript, tháng được tính từ 0 - 11, nghĩa

là 0 là tháng 1, 1 là tháng 2 ...

Bộ môn Mạng máy tính & Truyền thông 68 3/9/2013

Page 69: Chuong5A-Lap Trinh Web-Java Script

KHỞI TẠO ĐỐI TƯỢNG DATE

Date còn được khởi tạo bằng cách truyền vào một chuỗi

ngày tháng hợp lệ

var date1 = new Date("10/20/2011");

var date2 = new Date("Wednesday, October 20, 2010");

Cả 2 kết quả đều như nhau, chỉ khác nội dung chuỗi

tham số khởi tạo.

Tháng trình bày trong chuỗi vẫn tính từ 1 - 12, không cần

phải chuyển đổi thành 0 - 11 như truyền trực tiếp tham

số tháng ở trên.

Nhưng nếu ta sử dụng chuỗi làm tham số khởi tạo mà lại

bỏ quên chữ new, kết quả sẽ không như mong đợi

Bộ môn Mạng máy tính & Truyền thông 69 3/9/2013

Page 70: Chuong5A-Lap Trinh Web-Java Script

CÁC PHƯƠNG THỨC GET

var now = new Date();

alert("Ngày hôm nay: " + now);

alert("Ngày hôm qua: " + new Date(now.getFullYear(), now.getMonth(),

now.getDate() - 1));

alert("Ngày mai: " + new Date(now.getFullYear(), now.getMonth(),

now.getDate() + 1));

alert("Ngày mốt: " + new Date(now.getFullYear(), now.getMonth(),

now.getDate() + 2));

alert("Tháng trước: " + new Date(now.getFullYear(), now.getMonth() -

1, now.getDate()).getMonth() + 1); // phải cộng thêm 1 vì tháng tính từ 0 - 11

alert("Tháng sau: " + new Date(now.getFullYear(), now.getMonth() + 1,

now.getDate()).getMonth() + 1); // phải cộng thêm 1 vì tháng tính từ 0 - 11

Bộ môn Mạng máy tính & Truyền thông 70 3/9/2013

Page 71: Chuong5A-Lap Trinh Web-Java Script

TÍNH KHOẢNG THỜI GIAN

var now = new Date();

var xmasDay = new Date(now.getFullYear(), 11, 24);

// khởi tạo ngày Noel cùng năm với ngày hiện tại

var offset = xmasDay.getTime() - now.getTime();

// lấy độ lệch của 2 mốc thời gian, đơn vị tính là millisecond

var totalDays = Math.round(offset / 1000 / 60 / 60 / 24);

alert("Còn " + totalDays + " ngày là đến Noel");

var totalHours = Math.round(offset / 1000 / 60 / 60);

alert("Còn " + totalHours + " giờ là đến Noel");

var totalMinutes = Math.round(offset / 1000 / 60);

alert("Còn " + totalMinutes + " phút là đến Noel");

var totalSeconds = Math.round(offset / 1000);

alert("Còn " + totalSeconds + " giây là đến Noel");

Bộ môn Mạng máy tính & Truyền thông 71 3/9/2013

Page 72: Chuong5A-Lap Trinh Web-Java Script

TÍNH KHOẢNG THỜI GIAN

//Tính chi tiết

var days = Math.floor(offset / 1000 / 60 / 60 / 24);

offset -= days * 1000 * 60 * 60 * 24; // giảm offset đi

var hours = Math.floor(offset / 1000 / 60 / 60);

offset -= hours * 1000 * 60 * 60; // giảm offset đi

var minutes = Math.floor(offset / 1000 / 60);

offset -= minutes * 1000 * 60;

var seconds = Math.floor(offset / 1000);

alert("Còn " + days + " ngày " + hours + " giờ " + minutes + " phút " +

seconds + " giây là đến Noel");

Đoạn mã trên sử dụng hàm getTime của Date, hàm này trả về tổng

số millisecond tính từ ngày 1/1/1970

2 ngày khác nhau nhưng cùng một mốc tính là 1/1/1970 chúng ta có

thể tính toán ra được những thành phần khác

Bộ môn Mạng máy tính & Truyền thông 72 3/9/2013

Page 73: Chuong5A-Lap Trinh Web-Java Script

XÁC ĐỊNH NĂM NHUẦN

Theo định nghĩa, năm nhuần là năm chia hết cho 100 và

400 (xem thêm tại Wiki), nhưng với Javascript ta chỉ cần:

function isLeapYear(year) {

return new Date(year, 2, 0).getDate() > 28;

}

Bộ môn Mạng máy tính & Truyền thông 73 3/9/2013

Page 74: Chuong5A-Lap Trinh Web-Java Script

TÍNH SỐ NGÀY CỦA THÁNG

function getDaysOfMonth(year, month) {

return new Date(year, month + 1, 0).getDate();

}

alert("Tháng 2 có " + getDaysOfMonth(new

Date().getFullYear(), 1) + " ngày"); // tháng 2 có giá trị là 1

alert("Tháng 10 có " + getDaysOfMonth(new

Date().getFullYear(), 9) + " ngày"); // tháng 10 có giá trị là 9

Bộ môn Mạng máy tính & Truyền thông 74 3/9/2013

Page 75: Chuong5A-Lap Trinh Web-Java Script

XÁC ĐỊNH THỨ TỰ NGÀY, TUẦN TRONG NĂM

Để xác định thứ tự một ngày trong năm, ý tưởng là sẽ

lấy mốc thời gian hiện tại trừ đi mốc thời gian từ đầu

năm

function getDayOfYear(date) {

var offset = new Date(date.getFullYear(), date.getMonth(),

date.getDate()).getTime() - new Date(date.getFullYear(), 0,

1).getTime();

return Math.ceil(offset / 1000 / 60 / 60 / 24);

}

Bộ môn Mạng máy tính & Truyền thông 75 3/9/2013

Page 76: Chuong5A-Lap Trinh Web-Java Script

XÁC ĐỊNH THỨ TỰ NGÀY, TUẦN TRONG NĂM

Tương tự chúng ta cũng có thể tính được thứ tự tuần

trong năm bằng cách lấy thứ tự ngày chia và làm tròn

cho 7

function getWeekOfYear(date) {

var dayOfYear = getDayOfYear(date);

return Math.ceil(dayOfYear / 7);

}

Bộ môn Mạng máy tính & Truyền thông 76 3/9/2013

Page 77: Chuong5A-Lap Trinh Web-Java Script

ĐỐI TƯỢNG ARRAY

3/9/2013 77 Bộ môn Mạng máy tính & Truyền thông

Page 78: Chuong5A-Lap Trinh Web-Java Script

ĐỐI TƯỢNG ARRAY

Ví dụ:

var mycars=new Array()

mycars[0]="Saab"

mycars[1]="Volvo"

mycars[2]="BMW“

var mycars=new Array("Saab","Volvo","BMW")

var mycars=new Array(3)

mycars[0]="Saab"

mycars[1]="Volvo"

mycars[2]="BMW"

3/9/2013 78 Bộ môn Mạng máy tính & Truyền thông

Page 79: Chuong5A-Lap Trinh Web-Java Script

ĐỐI TƯỢNG ARRAY

Ví dụ

var arr = new Array(3)

arr[0] = "Jani"

arr[1] = "Tove"

arr[2] = "Hege"

var arr2 = new Array(3)

arr2[0] = "John"

arr2[1] = "Andy"

arr2[2] = "Wendy"

document.write(arr.concat(arr2))

3/9/2013 79 Bộ môn Mạng máy tính & Truyền thông

Page 80: Chuong5A-Lap Trinh Web-Java Script

ĐỐI TƯỢNG ARRAY

Ví dụ

var arr = new Array(6)

arr[0] = "Jani"

arr[1] = "Hege"

arr[2] = "Stale"

arr[3] = "Kai Jim"

arr[4] = "Borge"

arr[5] = "Tove"

document.write(arr + "<br />")

document.write(arr.sort())

3/9/2013 80 Bộ môn Mạng máy tính & Truyền thông

Page 81: Chuong5A-Lap Trinh Web-Java Script

ĐỐI TƯỢNG BOOLEAN

3/9/2013 81 Bộ môn Mạng máy tính & Truyền thông

Page 82: Chuong5A-Lap Trinh Web-Java Script

ĐỐI TƯỢNG BOOLEAN

Ví dụ

var myBoolean=new Boolean()

var myBoolean=new Boolean(0)

var myBoolean=new Boolean(null)

var myBoolean=new Boolean("")

var myBoolean=new Boolean(false)

var myBoolean=new Boolean(NaN)

var myBoolean=new Boolean(true)

var myBoolean=new Boolean("true")

var myBoolean=new Boolean("false")

var myBoolean=new Boolean("Richard")

3/9/2013 82 Bộ môn Mạng máy tính & Truyền thông

Page 83: Chuong5A-Lap Trinh Web-Java Script

ĐỐI TƯỢNG MATH

3/9/2013 83 Bộ môn Mạng máy tính & Truyền thông

Page 84: Chuong5A-Lap Trinh Web-Java Script

ĐỐI TƯỢNG MATH

3/9/2013 84 Bộ môn Mạng máy tính & Truyền thông

Page 85: Chuong5A-Lap Trinh Web-Java Script

ĐỐI TƯỢNG MATH

3/9/2013 85 Bộ môn Mạng máy tính & Truyền thông

Page 86: Chuong5A-Lap Trinh Web-Java Script

ĐỐI TƯỢNG MATH

Ví dụ Math.E

Math.PI

Math.SQRT2

Math.SQRT1_2

Math.LN2

Math.LN10

Math.LOG2E

Math.LOG10E

document.write(Math.round(4.7))

document.write(Math.random())

document.write(Math.floor(Math.random()*11))

document.write(Math.round(-4.60))

3/9/2013 86 Bộ môn Mạng máy tính & Truyền thông

Page 87: Chuong5A-Lap Trinh Web-Java Script

ĐỐI TƯỢNG HTML DOM

3/9/2013 87 Bộ môn Mạng máy tính & Truyền thông

Page 88: Chuong5A-Lap Trinh Web-Java Script

ĐỐI TƯỢNG HTML DOM

3/9/2013 88 Bộ môn Mạng máy tính & Truyền thông

Page 89: Chuong5A-Lap Trinh Web-Java Script

ĐỐI TƯỢNG HTML DOM

3/9/2013 89 Bộ môn Mạng máy tính & Truyền thông

Page 90: Chuong5A-Lap Trinh Web-Java Script
Page 91: Chuong5A-Lap Trinh Web-Java Script
Page 92: Chuong5A-Lap Trinh Web-Java Script
Page 93: Chuong5A-Lap Trinh Web-Java Script
Page 94: Chuong5A-Lap Trinh Web-Java Script
Page 95: Chuong5A-Lap Trinh Web-Java Script

ĐỐI TƯỢNG REGEXP

Biểu thức chính qui là một đối tượng mô tả mẫu các ký

tự.

Biểu thức chính qui được dùng để thực hiện so sánh sự

trùng khớp mẫu và các chức năng “tìm và thay thế" trên

văn bản.

Cú pháp

var txt=new RegExp(pattern,modifiers); hay

var txt=/pattern/modifiers;

Pattern: xác định mẫu của biểu thức

Modifiers: xác định tìm kiếm nên là toàn cục, phân biệt hoa

thường,..

Bộ môn Mạng máy tính & Truyền thông 95 3/9/2013

Page 96: Chuong5A-Lap Trinh Web-Java Script

THÍ DỤ 1: REGEXP

<html>

<body>

<script type="text/javascript">

var str = "Visit W3Schools";

var patt1 = /w3schools/i;

document.write(str.match(patt1));

</script>

</body>

</html>

Bộ môn Mạng máy tính & Truyền thông 96 3/9/2013

Page 97: Chuong5A-Lap Trinh Web-Java Script

THÍ DỤ 2: REGEXP

<html>

<body>

<script type="text/javascript">

var str="Is this all there is?";

var patt1=/is/g;

document.write(str.match(patt1));

</script>

</body>

</html>

Bộ môn Mạng máy tính & Truyền thông 97 3/9/2013

Page 98: Chuong5A-Lap Trinh Web-Java Script

THÍ DỤ 3: REGEXP

<html>

<body>

<script type="text/javascript">

var str="Is this all there is?";

var patt1=/is/gi;

document.write(str.match(patt1));

</script>

</body>

</html>

Bộ môn Mạng máy tính & Truyền thông 98 3/9/2013

Page 99: Chuong5A-Lap Trinh Web-Java Script

THÍ DỤ 4: REGEXP

<html>

<body>

<script type="text/javascript">

var patt1=new RegExp("e");

document.write(patt1.test("The best things in life are free"));

</script>

</body>

</html>

Bộ môn Mạng máy tính & Truyền thông 99 3/9/2013

Page 100: Chuong5A-Lap Trinh Web-Java Script

THÍ DỤ 5: REGEXP

<html>

<body>

<script type="text/javascript">

var patt1=new RegExp("e");

document.write(patt1.exec("The best things in life are

free"));

</script>

</body></html>

Bộ môn Mạng máy tính & Truyền thông 100 3/9/2013

Page 101: Chuong5A-Lap Trinh Web-Java Script

MODIFIERS

Modifiers Mô tả FF IE

i Thực hiện so sánh không phân biệt hoa thường 1 4

g Thực hiện so sánh toàn cục (tìm tất cả các trùng khớp

hơn là dừng sau khi gặp trùng khớp đầu tiên)

1 4

m Thực hiện so sánh nhiều dòng 1 4

Bộ môn Mạng máy tính & Truyền thông 101 3/9/2013

Modifiers được dùng để thực hiện việc tìm kiếm

không phân biệt hoa thường và toàn cục

Page 102: Chuong5A-Lap Trinh Web-Java Script

BRACKET

Biểu thức Mô tả F IE

[abc] Tìm bất cứ ký tự giữa hai dấu ngoặc 1 4

[^abc] Tìm bất cứ ký tự không thuộc ký tự giữa hai

dấu ngoặc

1 4

[0-9] Tìm bất cứ con số nào từ 0 tới 9 1 4

[a-z] Tìm bất cứ ký tự từ a tới z 1 4

[A-Z] Tìm bất cứ ký tự từ A tới Z 1 4

[a-Z] Tìm bất cứ ký tự từ a tới Z 1 4

[adgk] Tìm bất cứ ký tự nào trong tập hợp được cho 1 4

[^adgk] Tìm bất cứ ký tự nào ngoài tập hợp được cho 1 4

[red|blue|green] Tìm một trong các khả năng được xác định:

red, blue hay green

1 4

Bộ môn Mạng máy tính & Truyền thông 102 3/9/2013

Bracket ([ ]) được dùng để tìm dãy ký tự:

Page 103: Chuong5A-Lap Trinh Web-Java Script

METACHARACTER

Metacharacter Mô tả F IE

. Tìm một ký tự, ngoại trừ dòng mới hay kết thúc

dòng

1 4

\w Tìm một ký tự là từ 1 4

\W Tìm một ký tự không là từ 1 4

\d Tìm một con số 1 4

\D Tìm một ký tự không là con số 1 4

\s Tìm một ký tự khoảng trắng 1 4

\S Tìm một ký tự không là khoảng trắng 1 4

\b Tìm sự trùng khớp tại vị trí bắt đầu/kết thúc của

một từ

1 4

\B Tìm sự trùng khớp tại vị trí KHÔNG bắt đầu/kết

thúc của một từ

1 4

\0 Tìm một ký tự NUL 1 4

Bộ môn Mạng máy tính & Truyền thông 103 3/9/2013

Metacharacters là những ký tự với ý nghĩa đặc biệt:

Page 104: Chuong5A-Lap Trinh Web-Java Script

METACHARACTER

Metacharacter Mô tả F IE

\n Tìm một ký tự xuống dòng 1 4

\f Tìm ký tự form feed 1 4

\r Tìm ký tự trở về đầu dòng 1 4

\t Tìm ký tự tab 1 4

\v Tìm ký tự tab đứng 1 4

\xxx Tìm ký tự được xác định bởi số bát phân xxx 1 4

\xdd Tìm ký tự được xác định bởi một số thập lục

phân dd

1 4

\uxxxx Tìm ký tự Unicode được xác định bởi số thập

lục phân xxxx

1 4

Bộ môn Mạng máy tính & Truyền thông 104 3/9/2013

Page 105: Chuong5A-Lap Trinh Web-Java Script

QUANTIFIER

Quantifier Mô tả F IE

n+ Tìm bất cứ chuỗi chứa ít nhất một n 1 4

n* Tìm bất cứ chuỗi chứa 0 hay nhiều lần n 1 4

n? Tìm bất cứ chuỗi chứa 0 hay 1 lần n 1 4

n{X} Tìm bất cứ chuỗi chứa một dãy X lần của n 1 4

n{X,Y} Tìm bất cứ chuỗi chứa một dãy X hay Y lần của n 1 4

n{X,} Tìm bất cứ chuỗi chứa một dãy ít nhất X lần của n 1 4

n$ So sánh bất cứ chuỗi với n tại vị trí cuối của nó 1 4

^n So sánh bất cứ chuỗi với n tại vị trí đầu của nó 1 4

?=n So sánh bất cứ chuỗi được theo sau bởi một chuỗi n 1 4

?!n So sánh bất cứ chuỗi không được theo sau bởi một chuỗi n 1 4

Bộ môn Mạng máy tính & Truyền thông 105 3/9/2013

Page 106: Chuong5A-Lap Trinh Web-Java Script

THUỘC TÍNH ĐỐI TƯỢNG REGEXP

Thuộc tính Mô tả F IE

global Xác định nếu "g" modifier được đặt 1 4

ignoreCase Xác định nếu “i" modifier được đặt 1 4

lastIndex Chỉ mục tại vị trí mà sự trùng khớp tiếp theo 1 4

multiline Xác định nếu "m" modifier được đặt 1 4

source Chuỗi của mẫu RegExp 1 4

Bộ môn Mạng máy tính & Truyền thông 106 3/9/2013

Page 107: Chuong5A-Lap Trinh Web-Java Script

CÁC PHƯƠNG THỨC ĐỐI TƯỢNG REGEXP

Phương

thức

Mô tả F IE

compile() Thay đổi biểu thức chính qui 1 4

exec() Tìm kiếm một chuỗi cho một giá trị xác định. Trả về giá trị

được tìm thấy và ghi nhớ vị trí

1 4

test() Tìm kiếm một chuỗi cho một giá trị xác định. Trả về true

hay false

1 4

Bộ môn Mạng máy tính & Truyền thông 107 3/9/2013

Page 108: Chuong5A-Lap Trinh Web-Java Script

HÀM

Hàm Mô tả F IE

decodeURI() Giải hóa một URI được mã hóa 1 5.5

decodeURIComponent() Giải hóa một thành phần URI được mã hóa 1 5.5

encodeURI() Mã hóa một chuỗi như một URI 1 5.5

encodeURIComponent() Mã hóa một chuỗi như một thành phần URI 1 5.5

escape() Mã hóa một chuỗi 1 3

eval() Định giá trị một chuỗi và thực thi nó nếu như nó là một

1 3

isFinite() Kiểm tra nếu giá trị là một số xác định 1 4

isNaN() Kiểm tra nếu một giá trị không là một số 1 3

Number() Chuyển giá trị của một đối tượng tới một số 1

parseFloat() Dịch một chuỗi và trả về số float 1 3

parseInt() Dịch một chuỗi và trả về số integer 1 3

String() Dịch giá trị của một đối tượng thành chuỗi 1

unescape() Giải mã một chuỗi được mã hóa bởi escape() 1 3

Bộ môn Mạng máy tính & Truyền thông 108 3/9/2013

Page 109: Chuong5A-Lap Trinh Web-Java Script

TOP-LEVEL PROPERTIES

Thuộc tính Mô tả F IE

Infinity Một giá trị số biểu diễn số vô cùng dương hay âm 1 4

NaN Hiển thị giá trị là “không là số” "Not a Number" 1 4

undefined Hiển thị một biến không được gán giá trị 1 5.5

Bộ môn Mạng máy tính & Truyền thông 109 3/9/2013

Page 110: Chuong5A-Lap Trinh Web-Java Script