Ngôn ngữ kịch bản JavaScript

4.2.1 Kiểu dữ liệu

- Kiểu dữ liệu số:

• Số nguyên: biễu diễn từ -253 tới -253

• Số thực:

- Kiểu văn bản (chuỗi): bắt đầu bằng dấu (“) hoặc (‘)

Ví dụ: “Hello World” , ‘Hello World’, “Peter O’Toole” , “Peter O\’Toole”, 'Hello "Paul"', "Hello "Paul"", "Hello \"Paul\""

Ngoài ra còn có các kiểu kí tự đặc biệt sau đây:

Kí tự đăc biệt Kí tự đại diện

\b Phím lùi \f Form feed \n Dòng mới \r Phím xuống dòng \t Tab \' Nháy đơn \" Nháy kép

\\ Dấu chéo ngược

\xNN NN là số hexa xác định kí tự trong tập kí tự Latin-1 - Kiểu Boolean: Có 2 giá trị Yes hoặc No, True hoặc False

4.2.2 Khai báo biến

Biến là những đại lượng mà giá trị của nó có thể thay đổi trong quá trình xử lý. Trong toán học, biến thường được dùng để lưu trữ các con số, còn trong tin học biến thường được dùng để lưu trữ thông tin.

a. Cách đặt tên biến

• Tên biến phân biệt chữ hoa và chữ thường

• Tên biến bắt đầu bằng kí tự hoặc dấu gạch dưới character

b. Khai báo biến

Sử dụng từ khóa var để khai báo 1 biến: var strname = giá trị

Hoặc không cần dùng từ khóa var strname = some value

c. Gán giá trị cho biến

var strname = "Hege" Hoặc:

strname = "Hege"

d. Thời gian sống của biến

Khi miêu tả biến trong hàm, biến có thể được truy cập bên trong hàm đó. Khi thoát khỏi hàm, biến cũng được giải phóng. Biến này như được gọi là biến cục bộ.

Nếu khai báo biến bên ngoài hàm, tất cả các hàm trong trang có thể truy cập tới biến này. Thời gian sống của biến này bắt đầu từ khi ta khai báo và kết thúc khi trang được đóng. Biến này được gọi là biến toàn cục.

4.2.3. Các toán tử JavaScript

a. Các Toán tử số học

Toán tử Miêu tả Ví dụ Kết quả

+ Cộng x=2 x+2 4 - Trừ x=2 5-x 3 * Nhân x=4 x*5 20 / Chia 15/5 5/2 3 2.5 % Modulus (phần dư) 5%2 10%8 10%2 1 2 0 ++ Tăng x=5 x++ x=6 -- Giảm x=5 x-- x=4

b. Các toán tử gán

Toán tử Ví dụ Diễn giải (adsbygoogle = window.adsbygoogle || []).push({});

= x=y x=y

+= x+=y x=x+y

-= x-=y x=x-y

/= x/=y x=x/y

%= x%=y x=x%y

c. Các toán tử so sánh

Toán tử Miêu tả Ví dụ

== Bằng 5==8 trả về giá trị false

!= Không bằng 5!=8 trả về giá trị true

> Lớn hơn 5>8 trả về giá trị false

< Nhỏ hơn 5<8 trả về giá trị true

>= Lớn hơn hoặc bằng 5>=8 trả về giá trị false <= Nhỏ hơn hoặc bằng 5<=8 trả về giá trị true

d. Các toán tử logic

Toán tử Miêu tả Ví dụ

&& Và x=6

y=3

(x < 10 && y > 1) trả về giá trị true

|| Hoặc x=6

y=3

(x==5 || y==5) trả về giá trị false

! Phủ định x=6

y=3

!(x==y) trả về giá trị true

e. Toán tử chuỗi

txt1="What a very" txt2="nice day!" txt3=txt1+txt2 Ví dụ: <html> <body>

var string1 = "Hello"; var string2 = "Goodbye"; alert(string1); alert(string2);

string2 = string1;

alert(string1); alert(string2);

string1 = "Now for something different"; alert(string1);alert(string2); (adsbygoogle = window.adsbygoogle || []).push({});

</script> </body>

f.Chuyển đổi kiểu:

Để chuyển đổi kiểu dữ liệu, Javascript hỗ trợ hai hàm sau

• Hàm parseInt(): chuyển chuỗi sang số nguyên

Eg: parseInt(“123”) = 123; parseInt(“1234abc”) = 1234

Ví dụ: <html> <body>

var myFloat;

document.write("\"" + myString + "\" is " + parseInt(myString) + " as an integer" + "<br>");

myInt = parseInt(myString);

document.write("\"" + myString + "\" when converted to an integer equals " + myInt + "<br>");

myFloat = parseFloat(myString); document.write("\"" + myString +

"\" when converted to a floating point number equals " + myFloat); </script>

</body> </html>

Kết quả:

"56.02 degrees centigrade" is 56 as an integer

"56.02 degrees centigrade" when converted to an integer equals 56

"56.02 degrees centigrade" when converted to a floating point number equals 56.02

Trong một số trường hợp, một số chuỗi không thể chuyển đổi thành số ví dụ như các chuỗi không chứa bất kì một số nào cả. Chuyện gì xảy ra nếu chúng ta chuyển đổi chuỗi đó. Ví dụ:

var myInt; var myFloat;

document.write("\"" + myString + "\" is " + parseInt(myString) + " as an integer" + "<br>");

myInt = parseInt(myString);

document.write("\"" + myString + "\" when converted to an integer equals " + myInt + "<br>");

myFloat = parseFloat(myString);

document.write("\"" + myString + "\" when converted to a floating point number equals " + myFloat);

</script> </body> </html>

Kết quả:

"degrees centigrade" is NaN as an integer (adsbygoogle = window.adsbygoogle || []).push({});

"degrees centigrade" when converted to an integer equals NaN

"degrees centigrade" when converted to a floating point number equals NaN NaN: not a number

NaN là giá trị được trả về bởi hàm isNaN(). NaN chỉ nhận một trong 2 giá trị True hoặc False

Ví dụ:

myVar2 = isNaN(“123”);. Giá trị NaN = True

4.2.4. Các câu lệnh rẽ nhánh và lặp

Trong JavaScript có 3 câu lệnh điều kiện

• if câu lệnh

• if...else câu lệnh

• switch câu lệnh

a. Câu lệnh If and If...else câu lệnh

Cú pháp câu lệnh if

if (điều kiện) {

Câu lệnh thực hiện nếu điều kiện đúng }

Ví dụ

//If the time on your browser is less than 10, //you will get a "Good morning" greeting. var d=new Date()

var time=d.getHours() if (time<10) { document.write("<b>Good morning</b>") } </script> Cú pháp câu lệnh If..else if (điều kiện) {

Câu lệnh thực hiện nếu điều kiện đúng }else

{

Câu lệnh thực hiện nếu điều kiện sai }

Ví dụ:

//If the time on your browser is less than 10, //you will get a "Good morning" greeting. //Otherwise you will get a "Good day" greeting. var d = new Date()

var time = d.getHours() if (time < 10)

{

document.write("Good morning!") }

else { document.write("Good day!") } </script> Cú pháp câu lệnh If..else if if (điều kiện) {

Câu lệnh thực hiện nếu điều kiện đúng }else if (điều kiện)

{ (adsbygoogle = window.adsbygoogle || []).push({});

Câu lệnh thực hiện nếu điều kiện sai } …… Else { } Ví dụ: <html> <body>

{

document.write("myAge is between 0 and 10<br>"); }

if ( !(myAge >= 0 && myAge <= 10) ) {

document.write("myAge is NOT between 0 and 10<br>"); }

if ( myAge >= 80 || myAge <= 10 ) {

document.write("myAge is 80 or above OR 10 or below<br>"); }

if ( (myAge >= 30 && myAge <= 39) || (myAge >= 80 && myAge <= 89) ) {

document.write("myAge is between 30 and 39 or myAge is between 80 and 89"); }

</script> </body> </html>

if (myAge >= 0 && myAge <= 10) {

document.write("myAge is between 0 and 10"); }

else if ( (myAge >= 30 && myAge <= 39) || (myAge >= 80 && myAge <= 89) ) {

document.write("myAge is between 30 and 39 " + "or myAge is between 80 and 89"); }

else {

document.write("myAge is NOT between 0 and 10, " +

"nor is it between 30 and 39, nor is it between 80 and 89"); } b. Cậu lệnh rẽ nhánh Cú pháp switch (biểu thức) { case nhãn1:

Mã được thực hiện nếu biểu thức = nhãn1 break

case label2:

Mã được thực hiện nếu biểu thức = nhãn2 break

default:

Mã được thực hiện nếu biểu thức khác với nhãn1 và nhãn2 }

Ví dụ:

//You will receive a different greeting based //on what day it is. Note that Sunday=0, //Monday=1, Tuesday=2, etc.

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>

c. Toán tử điều kiện (adsbygoogle = window.adsbygoogle || []).push({});

JavaScript chứa toán tử điều kiện gán giá trị cho biến dựa vào một vài điều kiện

Cú pháp

variablename=(điều kiện)?giá trị 1: giá trị 2 Ví dụ

d. Vòng lặp

• while

Câu lệnh while sẽ thực hiện các câu lệnh đến khi nào điều kiện đúng while (điều kiện)

{ Mã thực thi } Ví dụ: <html> <body> <script type="text/javascript"> i = 0 while (i <= 5) { document.write("The number is " + i) document.write("<br>") i++ } </script> <p>Explanation:</p> <p><b>i</b> equal to 0.</p>

<p>While <b>i</b> is less than , or equal to, 5, the loop will continue to run.</p> <p><b>i</b> will increase by 1 each time the loop runs.</p>

</body> </html>

• do...while

Câu lệnh while sẽ thực hiện các câu lệnh đến khi nào điều kiện đúng Do

{

Mã thực thi }

while (điều kiện) Ví dụ: <html> <body> <script type="text/javascript"> i = 0 do { document.write("The number is " + i) document.write("<br>") i++ } while (i <= 5) </script> <p>Explanation:</p> <p><b>i</b> equal to 0.</p>

<p><b>i</b> will increase by 1 each time the loop runs.</p>

<p>While <b>i</b> is less than , or equal to, 5, the loop will continue to run.</p> </body>

</html>

• for

Câu lệnh for thực hiện với số lần cho trước for (giá trị khởi tạo; điều kiện; tăng) { Mã thực thi } Ví dụ 1 <html> <body> <script type="text/javascript"> for (i = 0; i <= 5; i++) { document.write("The number is " + i) document.write("<br>") } </script> <p>Explanation:</p>

<p>The for loop sets <b>i</b> equal to 0.</p>

<p>As long as <b>i</b> is less than , or equal to, 5, the loop will continue to run.</p> <p><b>i</b> will increase by 1 each time the loop runs.</p>

</body> </html>

var loopCounter;

for (loopCounter = 1; loopCounter <= 3; loopCounter++) <html>

<body>

var degCent = new Array(); var loopCounter;

for (loopCounter = 0; loopCounter <= 2; loopCounter++) { (adsbygoogle = window.adsbygoogle || []).push({});

degCent[loopCounter] = 5/9 * (degFahren[loopCounter] - 32); }

for (loopCounter = 2; loopCounter >= 0; loopCounter--) {

document.write("Value " + loopCounter + " was " + degFahren[loopCounter] + " degrees Fahrenheit");

document.write(" which is " + degCent[loopCounter] + " degrees centigrade<br>");

}

</body> </html>

Trong một số trường hợp lấy giá trị của các phần tử trong mảng mà không quan tâm tới chỉ mạng mảng, chúng ta có thể sủ dụng vòng lặp for với cú pháp như sau:

for (chỉ sổ in tênmảng) {

Câu lệnh

} Ví dụ:

var myArray = new Array("Paul","Paula","Pauline"); var loopCounter;

for (loopCounter = 0; loopCounter < 3; loopCounter++) {

document.write(myArray[loopCounter]); }

var elementIndex;

for (elementIndex in myArray) {

document.write(myArray[elementIndex]); }

Các câu lệnh break và continue

var loopCounter;

for (loopCounter = 0; loopCounter <= 2; loopCounter++) {

if (isNaN(degFahren[loopCounter])) {

alert("Data '" + degFahren[loopCounter] + "' at array index " + loopCounter + " is invalid"); break; } degCent[loopCounter] = 5/9 * (degFahren[loopCounter] - 32); } Hoặc if (isNaN(degFahren[loopCounter])) {

alert("Data '" + degFahren[loopCounter] + "' at array index " + loopCounter + " is invalid");

continue; }

4.2.3. Các đối tượng trong JavaScript

4.2.3.1 Đối tượng mảng

Đối tượng mạng được sử dụng lưu trữ tập các giá trị trong một tên biến. Mỗi giá trị là một phần tử của mạng và có một chỉ số (adsbygoogle = window.adsbygoogle || []).push({});

Để tạo ra một thực thể của Array, sử dụng từ khóa (new) var family_names=new Array(3)

var family_names=new Array("Tove","Jani","Stale")

Để tham chiếu tới các phần tử của mảng, sử dụng tên mảng và chỉ số mảng. Chỉ số bắt đầu bằng 0. family_names[0]="Tove" family_names[1]="Jani" family_names[2]="Stale" mother=family_names[0] father=family_names[1]

Các thuộc tính của mạng và method được miêu tả dưới đây. NN: Netscape, IE: Internet Explorer

Properties (Các thuộc tính)

Cú pháp: object.property_name

Thuộc tính Miêu tả NN IE

Constructor Chứa hàm tạo ra mẫu ban đầu của đối tượng 4 4

Length Trả về số phần tử của mảng 3 4

Prototype Cho phép bổ sung thuộc tính vào mảng 3 4

Phương thức Methods

Cú pháp: object.method_name()

Phương thức Miêu tả NN IE

concat() Nối hai hoặc nhiều mạng thành một mảng mới 4 4

join(dấu phân cách) Đặt tất cả các phần tử của mạng trong một chuỗi phân cách nhau bởi dấu phân cách (dấu phẩy được sử dụng mặc định)

3 4

pop() Loại bỏ và trả về phần tử cuối cùng của mảng 4 5.5

push("phần tử 1 ","phần tử 2") Bổ sung một hoặc nhiều phần tử vào cuối mảng và trả về giá trị length của mạng

4 5.5

Reverse() Đảo ngược thứ tự các phần tử trong mảng 3 4

shift() Loại bỏ và trả về giá trị đầu tiên của mạng 4 5.5

slice(bắt đầu[,kết thúc]) Tạo ra một mảng mới từ một mảng cũ 4 4

sort() Sắp xếp các phần tử của mảng 3 4

splice(chỉ số,số phần tử[,el1,el2])

Bổ sung hoặc loại bỏ các phần tử của mảng 4 5.5 toSource() Trả về chuỗi biểu diễn mã nguồn của mảng 4.06 4 toString() Trả về chuỗi biểu diễn biểu diễn số phần tử của

mạng

3 4

unshift("phần tử 1,” phần tử 1”) Bổ sung một hoặc nhiều phần tử đến đầu mảng và trả về length mới

4 5.5

Ví dụ: <html> <body> (adsbygoogle = window.adsbygoogle || []).push({});

myArray[0] = "Bob"; myArray[1] = "Pete"; myArray[2] = "Paul"; document.write("myArray[0] = " + myArray[0] + "<br>"); document.write("myArray[2] = " + myArray[2] + "<br>"); document.write("myArray[1] = " + myArray[1] + "<br>"); myArray[1] = "Mike";

document.write("myArray[1] changed to " + myArray[1]); </script>

</body> </html>

Mảng 2 chiều và nhiều chiều

Chỉ số 0 1 2

0 Name1 Name2 Name3

1 Age1 Age2 Age3

2 Address1 Address2 Address3

personnel[0] = new Array(); personnel[0][0] = "Name0"; personnel[0][1] = "Age0"; personnel[0][2] = "Address0";

personnel[1] = new Array(); personnel[1][0] = "Name1"; personnel[1][1] = "Age1"; personnel[1][2] = "Address1";

personnel[2] = new Array(); personnel[2][0] = "Name2"; personnel[2][1] = "Age2"; personnel[2][2] = "Address2"; document.write("Name : " + personnel[1][0] + "<br>"); document.write("Age : " + personnel[1][1] + "<br>"); document.write("Address : " + personnel[1][2]); </script> </body> </html>

4.2.3.2 Đối tượng Boolean

Đối tượng Boolean là một trình bao bọc đối tượng cho giá trị boolean và được sử dụng để chuyển đổi giá trị không phải là Boolean sang giá trị boolean.

Nếu đối tượng boolean không có giá trị khởi tạo hoặc bằng 0, null, “”, false và NaN, giá trị khởi tạo là false ngược lại bằng true.

var b1=new Boolean() var b2=new Boolean(0) var b3=new Boolean(null) var b4=new Boolean("") var b5=new Boolean(false) var b6=new Boolean(NaN) var b1=new Boolean(true) var b2=new Boolean("true") var b3=new Boolean("false") var b4=new Boolean("Richard")

Các thuộc tính và method được miêu tả dưới đây:

Các thuộc tính

Cú pháp: đốitượng.tênthuộctính

Thuộc tính Miêu tả NN IE

constructor Chứa hàm tạo mẫu của đối tượng 4 4

prototype Cho phép bổ sung thuộc tính và phương thức cho đối tượng

3 4

Các phương thức

Cú pháp: object.method_name()

Method Description NN IE

toString() Chuyển đổi giá trị Boolean sang string. Phương thức này được gọi tự động bởi Javascript bất kì khi nào đối tượng Boolean được sử dụng trong tính hướng yêu cầu một chuỗi (adsbygoogle = window.adsbygoogle || []).push({});

4 4

valueOf() Trả về giá trị nguyên thủy (“true” hoặc “false”) của đối tượng Boolean 4 4 Ví dụ: <html> <body> <script type="text/javascript"> var b1=new Boolean( 0) var b2=new Boolean(1) var b3=new Boolean("") var b4=new Boolean(null) var b5=new Boolean(NaN) var b6=new Boolean("false")

document.write("0 is boolean "+ b1 +"<br />") document.write("1 is boolean "+ b2 +"<br />")

document.write("An empty string is boolean "+ b3 + "<br />") document.write("null is boolean "+ b4+ "<br />")

document.write("The string 'false' is boolean "+ b6 +"<br />") </script>

</body> </html>

4.2.3.3 Đối tượng Date

Đối tượng Date được sử dụng làm việc với ngày tháng và thời gian.

Để tạo ra một thực thể của đối tượng Date và gán giá trị tới biến “d”, thực hiện các bước sau: var d=new Date()

Sau khi tạo được thực thể đối tượng Date, có thể truy cập tới tất cả các method của đối tượng Date thông qua biến “d”.

Để trả về ngày hiện thời trong tháng của đối tượng Date, có thể viết như sau: d.getDate()

Đối tượng Date có thể có các tham số như sau: new Date(milliseconds)

new Date(dateString)

new Date(yr_num, mo_num, day_num [, hr_num, min_num, sec_num, ms_num])

• milliseconds - the number of milliseconds since 01 January, 1970 00:00:00

• dateString - the date in a format that is recognized by the Date.parse method

• yr_num, mo_num, day_num - the year, month or day of the date

• hr_num, min_num, sec_num, ms_num - the hours, minutes, seconds and milliseconds Nếu sử dụng Date(), JavaScript tạo ra một đối tượng cho ngày hiện thời theo thời gian trên máy cục bộ

var d=new Date("October 12, 1988 13:14:00") var d=new Date("October 12, 1988")

var d=new Date(88,09,12,13,14,00) var d=new Date(88,09,12)

var d=new Date(500)

Các thuộc tính

Cú pháp: object.property_name

Thuộc tính Miêu tả NN IE

constructor Chứa hàm tạo mẫu của đối tượng 4 4

prototype Cho phép bổ sung thuộc tính cho đối tượng date 3 4

Các phương thức

Cú pháp: object.method_name()

Phương thức Miêu tả NN IE

Date() Trả về đối tượng Date 2 3 (adsbygoogle = window.adsbygoogle || []).push({});

getDate() Trả về ngày của đối tượng Date ( từ 1-31) 2 3

getDay() Trả về ngày của đối tượng Date (từ 0-6. 0=Sunday, 1=Monday, vv.)

2 3

getMonth() Trả về giá trị tháng của đối tượng Date (từ 0-11. 0=January, 1=February, vv.)

2 3

getYear() Returns the year of a Date object (from 0-99). Use

getFullYear instead !! 2 3

getHours() Trả về giá trị Giờ 2 3

getMinutes() Trả về giá trị phút 2 3

getSeconds() Trả về gí trị giây 2 3

parse() Trả về giá trị chuỗi 2 3

setDate() Thiết lập giá trị ngày của tháng 2 3

setFullYear() Thiết lập giá trị năm 4 4

setHours() Thiết lập giá trị giờ 2 3

setMilliseconds() Thiết lập giá trị milli giây 4 4

setMinutes() Thiết lập giá trị phút 2 3

setMonth() Thiết lập giá trị tháng 2 3

setSeconds() Thiết lập giá trị giây 2 3

setTime() Thiết lập giá trị milli giây 2 3

setYear() Thiết lập giá trị năm (00-99) 2 3

Ví dụ: <html> <body>

var weekday=new Array("Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday") var monthname=new Array("Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec") document.write(weekday[d.getDay()] + " ") document.write(d.getDate() + ". ") document.write(monthname[d.getMonth()] + " ") document.write(d.getFullYear()) </script> </body> </html>

Kết quả: hiển thị ngày đầy đủ

4.2.3.5 Đối tượng Math

Đối tượng toán học được xây dựng sẵn chứa hằng số và hàm. Không cần phải tạo ra đối tượng Math trước khi sử dụng nó.

Ví dụ: Để lưu trữ số ngẫu nhiên từ 0 tới 1 trong biến "r_number": r_number=Math.random()

r_number=Math.round(8.6)

Các thuộc tính

Cú pháp: object.property_name (adsbygoogle = window.adsbygoogle || []).push({});

Thuộc tính Miêu tả NN IE

E 2 3

LN2 2 3

LN10 2 3

LOG10E 2 3

PI 2 3

SQRT1_2 2 3

SQRT2 2 3

Các phương thức

Cú pháp: object.method_name()

Phương thức Miêu tả NN IE abs(x) 2 3 acos(x) 2 3 asin(x) 2 3 atan(x) 2 3 atan2(y,x) 2 3 ceil(x) 2 3 cos(x) 2 3 exp(x) 2 3 floor(x) 2 3 log(x) 2 3 max(x,y) 2 3 min(x,y) 2 3 pow(x,y) 2 3 random() 2 3 round(x) 2 3 sin(x) 2 3 sqrt(x) 2 3 tan(x) 2 3

4.2.3.6 Đối tượng String

Đối tượng String được sử dụng với các văn bản. Các thuộc tính và phương thức được miêu tả dưới đây:

Các thuộc tính

Cú pháp: object.property_name

Phương thức Miêu tả NN IE

constructor Chứa hàm tạo mẫu của đối tượng 4 4

Length Trả về số các kí tự trong chuỗi 2 3

Các phương thức

Cú pháp: object.method_name()

Phương thức Miêu tả NN IE

big() Trả về cơ chữ lớn 2 3

blink() Trả về chuỗi nhấp nháy 2

Mục lục