JavaScript - .:: HVAOnline ::.

English | Vietnamese

Rules

Main Forum

Portal

Member Listing

Statistics

Search

Reading Room
[Register]

Login [ | https ]

Forum Index

Thảo luận hệ điều hành Windows

JavaScript

[Article] JavaScript	20/06/2006 17:11:56 (+0700) \| #1 \| 556

Mulan
HVA Friend

Joined: 01/02/2002 15:09:07
Messages: 274
Location: 127.0.0.1
Offline

HTML

HTML là thứ dễ học nhất bạn từng thấy. Và vì nó quá đơn giản nên tôi không đi sâu nữa và sẽ bỏ qua nó, hơn nữa đã có quá nhiều forum và portal đã có tutorial về HTML bằng tiếng Việt nên tôi nghĩ việc làm lại tut HTML là một việc thừa.

JavaScript

Cũng tương tự như HTML, đã có quá nhiều site cho download source Javascript cùng với những hiệu ứng của nó, nhưng công việc của tôi không phải là giới thiệu các source code mà là giới thiệu cho bạn hiểu và tự bạn sẽ biết cách viết các code đó. Tôi sẽ bỏ qua các phần không quan trọng như: Are Java and JavaScript the same? What can a JavaScript Do?.....

Chúng ta bắt đầu nhá:

Làm thế nào để viết một đoạn Javascript trong một trang HTML?

<html>
<body>
<script type="text/javascript">
document.write("Hello World!")
</script>
</body>
</html>

Khi bạn chạy trang HTML có code như trên, Trình duyệt sẽ hiển thị dòng

Hello World!

lên màn hình.

Để bắt đầu một đoạn Javascript, chúng ta dùng cặp thẻ <script type="text/javascript"> và </script> hoặc <script language=javascript> và </script>

Để viết cái gì đó lên màn hình bạn dùng lệnh sau: document.write

vd: <script type="text/javascript">document.write("Hello World!") </script>

Không giống như các ngôn ngữ lập trình khác như C++ hay Java, Javascript không bắt buộc bạn phải đặt dấu chấm phẩy ( smilie

ở cuối mỗi câu lệnh trừ phi bạn đặt nhiều câu lệnh trên một dòng.

Bạn cũng có thể đặt các câu lệnh trong các thẻ chú giải (comment) như sau:

<script type="text/javascript">

</script>

Chúng ta sẽ đặt các đoạn mã Javascript ở đâu?

Các bạn cần biết rằng, các Script sẽ thực thi ngay khi trang đó được load vào trong trình duyệt, nhưng đó chưa chắc đã là điều lúc nào chúng ta cũng muốn. Thỉnh thoảng chúng ta chỉ muốn Script đó thực thi khi mà user thực hiện một động tác nào đó chẳng hạn.

Javascript đặt trên head section: Các script này sẽ chỉ thực thi khi chúng ta gọi nó hay khi có một sự kiện nào đó xẩy ra như khi bạn click chuột, hay bấm vào một button nào đó. Khi bạn đặt các script trên head section, bạn phải chắc chắn là đoạn script đó đã được load xong trước khi user dùng nó.

vd:

<html>
<head>
<script type="text/javascript">
some statements
</script>
</head>
<body>
content
</body>
</html>

Javascript đặt trong body section: Khi bạn đặt các script vào trong body section, nó sẽ sinh ra nội dung của trang đó.

vd:
<html>
<head>
</head>
<body>
<script type="text/javascript">
some statements
</script>
</body>
</html>

Javascript đặt cả trên head và body section: Bạn có thể để không giới hạn các script trong tài liệu của bạn, vì thế bạn có thể đặt các script cả trên head lẫn body section.

vd:

<html>
<head>
<script type="text/javascript">
some statements
</script>
</head>
<body>
<script type="text/javascript">
some statements
</script>
</body>

Làm thế nào để chạy Javascript như là phần mở rộng?

Thỉnh thoảng, bạn muốn chạy một đoạn script cho nhiều trang mà không muốn viết lại từng dòng lệnh cho các trang đó. Có một cách đơn giả là bạn viết các đoạn script ra một file mở rộng và save nó thành đuôi *.js

Chẳng hạn như bạn viết:

document.write("This script is external")

save nó lại thành xxx.js (Chú ý rằng trong flie js này, bạn viết trực tiếp các script luôn mà không cần phải viết cặp thẻ <script> và </script> smilie

Bây giờ bạn có thể tái sử dụng các script đó khi gọi nó bằng thuộc tính "src"

<html>
<head>
</head>
<body>
<script src="xxx.js"></script>
</body>
</html>

Bạn phải chú ý đến đường dẫn tới file js này cẩn thận.

Các biến trong Javascript.

Một biến trong Javascript là một vại nước gạo hổ lốn smilie

(container) cho các thông tin mà bạn muốn chứa vào. Thực sự là vậy, trong Javascript một biến có thể chứa được rất nhiều kiểu, ví dụ như integer, char, string......

Bạn có thể tạo ra một biến với câu lệnh var: var strname = some value

hoặc gán trực tiếp giá trị cho biến khi khai báo luôn: var strname = "Hege"

hoặc khi bạn chẳng muốn viết từ khóa var thì bạn cũng có thể tương luôn: strname = "Hege". Nó sẽ tự hiểu strname là biến, và "Hege" là giá trị.

Vòng đời của các biến:

Khi bạn khai báo biến trong một hàm thì biến đó chỉ có thể được dùng cho hàm đó và nó sẽ bị "triệt tiêu" smilie

(destroy) khi bạn thoát ra khỏi hàm. Biến này được gọi là biến cục bộ, và vì tính chất của biến cục bộ như vậy nên bạn hoàn có thể dùng các biến cục bộ trùng tên nhưng khác hàm.

Nếu bạn khai báo một biến ngoài hàm thì tất cả các hàm đều có thể truy xuất biến đó. Vòng đời của biến này được tạo ra khi nó được khai báo và sẽ kết thúc khi user đóng trang đó lại.

Các toán tử:

Các toán tử trong Javascript hoàn toàn giống các toán tử trong các ngôn ngữ lập trình khác:

+ - * / % ++ --

= += -= *= /= %=

== != > < >= <=

&& || !

Để cộng các chuỗi, bạn có thể dùng toán tử "+"

vd:

txt1="What a very"
txt2="nice day!"
txt3=txt1+txt2
Biến txt3 bây giờ sẽ chứa "What a verynice day!".

Để thêm khoảng trắng vào giữa hai biến, ta có hai cách:

txt1="What a very"
txt2="nice day!"
txt3=txt1+" "+txt2
or
txt1="What a very "
txt2="nice day!"
txt3=txt1+txt2
Và biến txt3 bây giờ sẽ chứa "What a very nice day!"

Hàm

Một hàm thường là một vài đoạng code sẽ được thực thi bởi một sự kiện nào đó xẩy ra và gọi ngay chính hàm đó. Một hàm là một tập các câu lệnh, bạn có thể dùng lại hàm trong cùng một script hoặc trong cả các tài liệu khác. Bạn phải định nghĩa hàm khi bắt đầu của một file (in the head section) để gọi chúng sau này. Bây giờ chúng ta sẽ cùng học về hộp thoại cảnh báo (alert box):

Đây là cách mà Javascript dùng để cảnh báo tới user:

alert("This is a message")

Làm sao để định nghĩa một hàm:

Để tạo một hàm bạn hãy định nghĩa tên cho nó, một vài đối số ("arguments"), và một vài câu lệnh:

function myfunction(argument1,argument2,etc)
{
some statements
}

Một hàm không có đối số thì vẫn phải có 2 dấu ngoặc đơn: ( và ) :

function myfunction()
{
some statements
}

Các đối số là các biến được sử dụng trong hàm. Giá trị của các biến này là các giá trị được đưa vào khi hàm được gọi. Bằng cách đặt hàm lên trên head section, bạn đã chắc chắn việc tất cả các code trong hàm đã được load trước khi hàm được gọi.

Một vài hàm sẽ trả ngay về giá trị khi được gọi:

function result(a,b)
{
c=a+b
return c
}

Làm thế nào để gọi hàm?

Một hàm chưa được thực thi khi nó chưa được gọi. Bạn có thể gọi được một hàm chứa các đối số:

myfunction(argument1,argument2,etc)

hoặc không chứa đối số:

myfunction()

Câu lệnh trả về:

Muốn hàm trả về kết quả, bạn phải dùng câu lệnh "return". Câu lệnh này sẽ chỉ rõ giá trị nào sẽ trả về nơi mà hàm được gọi. Giả sử bạn có một hàm trả về giá trị tổng của hai số:

function total(a,b)
{
result=a+b
return result
}

Khi bạn gọi hàm trên, bạn phải truyền vào 2 đối số cho nó:
sum=total(2,3)

Các câu lệnh điều kiện:

Trong khi viết JavaScript, có lúc bạn muốn thực hiện các hành động khác nhau cho những trường hợp sự kiện xẩy ra khác nhau. Bạn có thể sử dụng các câu lệnh điều kiện để làm điều này.

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

Câu lệnh If và If....Else:

sử dụng câu lệnh này nếu bạn muốn thực thi code khi điều kiện là đúng. Cú pháp:

if (condition)
{
code to be executed if condition is true
}
Vd:

<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()
//You can put (time>10) if Brower don't display "Good morning" message.
if (time<10)
{
document.write("<b>Good morning</b>")
}
</script>
Chú ý rằng không có else trong ví dụ trên, nhưng nếu bạn muốn thực thi đoạn code này khi điều kiện đúng và đoạn code kia khi điều kiện sai thì JavaScript cung cấp cho bạn cú pháp sau:

if (condition)
{
code to be executed if condition is true
}
else
{
code to be executed if condition is false
}
Vd:

<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âu lệnh Switch

Câu lệnh Switch cho phép bạn chọn lựa các phần của mã lệnh tùy theo giá trị của một biến hoặc một biểu thức. Cú pháp:

switch (biểu thức)
{
case label1:
Đoạn mã thực thi nếu biểu thức = label1
break
case label2:
Đoạn mã thực thi nếu biểu thức = label2
break
default:
Đoạn mã thực thi khi biểu thức không bằng cả label1 và label2.
}
Đây là cách nó làm việc: JavaScript sẽ định ra giá trị của biểu thức và sau đó so sánh giá trị nhận được với các giá trị trong từng câu lệnh case. Ngay khi gặp giá trị phù hợp, mã lệnh sẽ được thực hiện và tiếp tục qua tất cả các câu lệnh case còn lại. Chúng ta sử dụng câu lệnh break để ngưng việc thực hiện câu lệnh hiện tại và chuyển sang thực hiện câu lệnh tiếp theo. Chúng ta cũng rất thường sử dụng câu lệnh default trong câu lệnh switch để thực hiện mã lệnh khi không có một câu lệnh case nào phù hợp.

Các giá trị của câu lệnh case có thể có một kiểu dữ liệu bất kỳ, chẳng hạn như số hoặc chuỗi. Chúng ta có thể sử dụng bao nhiêu câu lệnh case tùy ý.

Vd:

<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>
Toán tử điều kiện:

Cú pháp:

variablename=(condition)?value1:value2
Ví dụ:

greeting=(visitor=="PRES")?"Dear President ":"Dear "
Nếu biến visitor bằng PRES thì chuỗi "Dear President" sẽ được gán cho biến greeting, còn nếu biến visitor không bằng PRES thì chuỗi "Dear" sẽ được gán cho biến greeting.

Vòng lặp

- While

Vòng lặp while sẽ thực thi đoạn mã cho đến khi điều kiện vẫn còn đúng.

Cú pháp:

while (condition)
{
code to be executed
}

- do...While

Câu lệnh do...While sẽ thi hành khối lệnh ít nhất một lần và sau đó sẽ lặp lại cho đến khi nào điều kiện vẫn còn đúng.

Cú pháp:

do
{
code to be executed
}
while (condition)

- For

Vòng lặp For sẽ lặp lại việc thực thi khối lệnh theo số lần được chỉ định trước.

Cú pháp:

for (initialization; condition; increment)
{
code to be executed
}

Đối Tượng Array

Đối tượng mảng được dùng để chứa một tập các giá trị trong một biến cùng tên. Mỗi giá trị là một phần tử của mảng. Mảng cho phép chúng ta chứa và truy xuất các dữ liệu có liên quan.

Bạn có thể tạo một kiểu của đối tượng mảng với từ khóa "new". Ví dụ sau sẽ tạo ra 2 mảng có 3 phần tử:

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

Bạn có thể truy nhập vào từng phần tử riêng biệt trong mảng bằng cách sử dụng tên mảng cùng với chỉ số của nó. Chỉ số bắt đầu bằng số 0.

Nếu bạn tạo ra một mảng chỉ có các tham số, bạn có thể gán dữ liệu vào từng phần tử của mảng như sau:

family_names[0]="Tove"
family_names[1]="Jani"
family_names[2]="Stale"

Và dữ liệu có thể lấy ra bằng cách dùng các chỉ số của các phần tử riêng biệt trong mảng mà bạn muốn:

mother=family_names[0]
father=family_names[1]

mother và farther là hai biến mới được gán thành 2 tên là Tove và Jani.

Các thuộc tính và phương thức của đối tượng mảng được mổ tả dưới đây:

Đối tượng Boolean:

Đối tượng Boolean là một đối tượng bao ngòai cho một giá trị boolean và nó được dùng để chuyển một giá trị không phải boolean (non-boolean) thành giá trị boolean - hoặc đúng, hoặc sai.

vd:

Nếu một đối tượng boolean không có giá trị khởi tạo(giá trị ban đầu) hoặc nó bằng 0, null, "", NaN(Not A Number) thì giá trị khởi tạo của nó sẽ được gán là false. Đối tượng boolean chỉ nhận giá trị true khi giá trị khởi tạo là chuỗi, kể cả chuỗi "false" smilie

Ví dụ về đối tượng boolean với giá trị khởi tạo là false:

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)

Ví dụ về đối tượng boolean với giá trị khởi tạo là true:

var b1=new Boolean(true)
var b2=new Boolean("true")
var b3=new Boolean("false")
var b4=new Boolean("Richard")

Đối tượng Date:

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

Đây là cách tạo một trường hợp của đối tượng Date và gán nó cho biến "d":

var d = new Date()

Sau khi khai báo xong, bạn hoàn toàn có thể truy xuất vào tất cả các phương thức của đối tượng Date từ biến "d".

ví dụ, để trả về ngày hiện tại trong một tháng (từ 1 đến 31) của đối tượng Date, ta có phương thức:

d.getDate()

Đối tượng Date có các tham số sau:

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

Nếu bạn chỉ sử dụng Date(), JavaScript sẽ tạo ra một đối tượng có ngày tháng theo thời gian hiện tại của 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 và phương thức của đối tượng Date().

Đối tượng Math

Đối tượng Math bao gồm tất cả các hàm và các hằng số toán học có sẵn. Bạn không cần phải tạo đối tượng Math trước khi dùng.

vd: chứa một số random nằm trong khoảng 0 và 1 trong biến "r_number" ta có hàm random():

r_number=Math.random()

Để làm tròn số 8,6 ta có hàm round():

r_number=Math.round(8.6)

Các thuộc tính và phương thức của đối tượng Math được mô tả ở đây:

Chuỗi(String): được sử dụng để làm việc với các đoạn văn bản

Các bạn hãy cẩn thận với các thuộc tính và các phương thức của String vì nó được dùng rất nhiều và tương đối quan trọng trong JavaScript.

Ngoài ra bạn có thể xem thêm ví dụ ở http://consinat.com/ebook/Javascript.rar

Mulan

[Question] JavaScript	26/06/2006 12:40:43 (+0700) \| #2 \| 959

anhtuanapt
Member

Joined: 21/04/2006 01:31:49
Messages: 1
Offline

Rất cơ bản nhưng khá hay !
Thanks !

[Question] Re: JavaScript	27/06/2006 02:58:58 (+0700) \| #3 \| 1100

siêu-hacker1983
Member

Joined: 26/06/2006 14:00:51
Messages: 1
Offline

Quá hay, CHÚC MỪNG SỰ TRỞ LẠI CỦA HVA smilie

[Question] JavaScript	27/06/2006 04:53:39 (+0700) \| #4 \| 1147

chupichu
Elite Member

Joined: 16/07/2004 14:17:57
Messages: 229
Location: Lầu Xanh
Offline

Bổ xung cho anh Anh thêm kho JS cho mọi người tham khảo
http://webdeveloper.earthweb.com/
http://www.scriptsearch.com/
http://www.2o2o.org/scripts.html
http://echip.com.vn/echiproot/javascript/index.html
http://hotscripts.com/

Where Have You Gone..

Go to:

Users currently in here
1 Anonymous