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 bả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 kí 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: Có 2 giá trị Yes hoặc No, True hoặc False
4.2.2 Khai báo biến
Biến là những đại lượng mà giá trị của nó có thể thay đổi trong quá trình xử lý. Trong toán học, biến thường được dùng để lưu trữ các con số, còn trong tin học biến thường được dùng để lưu trữ thông tin.
a. Cách đặt tên biến
• Tên biến phân biệt chữ hoa và chữ thường
• Tên biến bắt đầu bằng kí tự hoặc dấu gạch dưới character
b. Khai báo biến
Sử dụng từ khóa var để khai báo 1 biến: var strname = giá trị
Hoặc không cần dùng từ khóa var strname = some value
c. Gán giá trị cho biến
var strname = "Hege" Hoặc:
strname = "Hege"
d. Thời gian sống của biến
Khi miêu tả biến trong hàm, biến có thể được truy cập bên trong hàm đó. Khi thoát khỏi hàm, biến cũng được giải phóng. Biến này như được gọi là biến cục bộ.
Nếu khai báo biến bên ngoài hàm, tất cả các hàm trong trang có thể truy cập tới biến này. Thời gian sống của biến này bắt đầu từ khi ta khai báo và kết thúc khi trang được đóng. Biến này được gọi là biến toàn cục.
4.2.3. Các toán tử JavaScript
a. Các Toán tử số họ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. Các toán tử gán
Toán tử Ví dụ Diễn giải
= 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. Các toán tử so sá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. Các toá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. Toán tử chuỗi
txt1="What a very" txt2="nice day!" txt3=txt1+txt2 Ví dụ: <html> <body>
<script language="JavaScript" type="text/javascript">
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);
</script> </body>
f.Chuyển đổi kiểu:
Để chuyển đổi kiểu dữ liệu, Javascript hỗ trợ hai hàm sau
• Hàm parseInt(): chuyển chuỗi sang số nguyên
Eg: parseInt(“123”) = 123; parseInt(“1234abc”) = 1234
Ví dụ: <html> <body>
<script language="JavaScript" type="text/javascript"> var myString = "56.02 degrees centigrade"; 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 quả:
"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 thành số ví dụ như các chuỗi không chứa bất kì một số nào cả. Chuyện gì xảy ra nếu chúng ta chuyển đổi chuỗi đó. Ví dụ:
<html> <body>
<script language="JavaScript" type="text/javascript"> var myString = "degrees centigrade";
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 quả:
"degrees centigrade" is NaN as an integer
"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 là giá trị được trả về bởi hàm isNaN(). NaN chỉ nhận một trong 2 giá trị True hoặc False
Ví dụ:
myVar2 = isNaN(“123”);. Giá trị NaN = True
4.2.4. Các câu lệnh rẽ nhánh và 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ụ
<script type="text/javascript">
//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ụ:
<script type="text/javascript">
//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)
{
Câu lệnh thực hiện nếu điều kiện sai } …… Else { } Ví dụ: <html> <body>
<script language="JavaScript" type="text/javascript"> var myAge = Number(prompt("Enter your age",30)); if (myAge >= 0 && myAge <= 10)
{
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ụ:
<script type="text/javascript">
//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
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. Vò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>The loop will run</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>
<script language="JavaScript" type="text/javascript"> var degFahren = new Array(212, 32, -459.15);
var degCent = new Array(); var loopCounter;
for (loopCounter = 0; loopCounter <= 2; loopCounter++) {
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 giá trị của các phần tử trong mảng mà không quan tâm tới chỉ mạng mảng, chúng ta có thể sủ dụng vòng lặp for với cú phá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]); }
Các câu lệnh break và continue
<script language="JavaScript" type="text/javascript"> var degFahren = new Array(212, "string data", -459.67); var degCent = new Array();
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. Cá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ố
Để 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)
Cú phá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
Cú phá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>
<script language="JavaScript" type="text/javascript"> var myArray = new Array();
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>
Mảng 2 chiều và nhiều chiều
Chỉ số 0 1 2
0 Name1 Name2 Name3
1 Age1 Age2 Age3
2 Address1 Address2 Address3
<html> <body>
<script language="JavaScript" type="text/javascript"> var personnel = new Array();
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:
Các thuộc tí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
Cá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
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ử dụng Date(), JavaScript tạo ra một đối tượng cho ngày hiện thời theo thời gian trên máy cụ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)
Các thuộc tính
Cú phá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
Các phương thức
Cú pháp: object.method_name()
Phương thức Miêu tả NN IE
Date() Trả về đối tượng Date 2 3
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>
<script type="text/javascript"> var d=new Date()
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 toán học được xây dựng sẵn chứa hằng số và hàm. Không cần phải tạo ra đối tượng Math trước khi sử dụng nó.
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)
Các thuộc tính
Cú pháp: object.property_name
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
Các phương thức
Cú phá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