Tự học Javascript

[Mr.P]

[Mr.P]

New member
LỜI NÓI ĐẦU​
Chào các bạn, đây là lần đầu tiên mình viết một chuyên đề về một ngôn ngữ lập trình. Do đó không thể không tồn tại một số sai sót mong được sự đóp góp nhiệt tình của các bạn.
Theo xu hướng hiện nay, web là một ứng dụng ngày càng được nhiều người sử dụng cùng với sự phát triển không ngừng của internet. Để phát triển được một website năng động về nội dung lẫn hình thức thì đều trước hết chúng ta phải nắm được một số vấn đề cơ bản và những ngôn ngữ cũng như các công cụ giúp chúng ta có thể cho ra đời những trang web hoàn hảo.
Javascript là một ngôn ngữ lập trình tương đối nhẹ, đơn giản nhưng nó lại là cánh tay đắc lực của coder cũng như designer.

Sau đây [Mr.P] chia sẽ lại cách học nó của tác giả [email protected] :D

CHƯƠNG 1: LÀM QUEN VỚI JAVASCRIPT

1.1 JAVASCRIPT LÀ GÌ?

JavaScript được thiết kế để tạo ra các tương tác vào các trang HTML
JavaScript là một ngôn ngữ kịch bản (scripting language)
Một ngôn ngữ kịch bản là một ngôn ngữ lập trình nhẹ
JavaScript thường được nhúng trực tiếp vào các trang HTML
JavaScript là một ngôn ngữ thông dịch nghĩa là script thực hiện mà không cần sự biên dịch
JavaScript thì hoàn toàn miễn phí
1.2 JAVASCRIPT CÓ THỂ LÀM GÌ?

- JavaScript cung cấp cho những designer một công cụ lập trình vì HTML là không phải là một ngôn ngữ lập, nhưng JavaScript là một ngôn ngữ lập trình với cú pháp rất đơn giản. Hầu hết mọi người có thể nhúng các đoạn mã JavaScript vào những trang HTML làm cho nó trở nên sinh động hơn.
- JS có thể đưa vào trang HTML một đoạn văn bản mới mà trước đó nội dung của trang web này chưa hề có.
- JS có thể phản ứng lại với một sự kiện nào đó như người sử dụng nhấn chuột lên một phần tử của trang HTML hoặc thay đổi một giá trị nào đó trong ô nhập liệu …
- JS có thể đọc hoặc thay đổi nội dung của các phần tử trong trang HTML.
- JS có thể dùng để kiểm tra dữ liệu trước khi trình duyệt gửi dữ liệu đến máy chủ. Điều này giúp cho máy chủ không phải xử lý quá nhiều.
- JS có thể dùng để phát hiện các loại trình duyệt khác nhau để có thể tải những phần thiết kế phù hợp với trình duyệt đó
- JS có thể dùng để sử dụng tạo các tập tin cookie lưu trữ và truy xuất thông tin trên máy tính của người truy cập website.
1.3 SỬ DUNG JAVASCRIPT NHƯ THẾ NÀO?

Để sử dụng JS rất đơn giản, chúng ta chỉ cần đưa các câu lệnh của JS vào trong thẻ <script> của HTML

Ví dụ: Xuất ra trình duyệt câu “Hello World”
<html> <body>
<script type="text/javascript">
document.write("Hello World!");
</script>
</body>
</html>
Nhấn để mở rộng...
Chúng ta cũng có thể thêm thẻ của HTML vào JS
<html> <body>
<script type="text/javascript">
document.write("<h1>Hello World!</h1>");
</script>
</body>
</html>
Nhấn để mở rộng...
Để tránh trường hợp một số trình duyệt không hỗ trợ JS và có thể gây ra lỗi khi website của chúng ta có sử dụng JS, chúng ta thêm một đoạn sau ghi chú của HTML cho nội dung của JS
<html>
<body>
<script type="text/javascript">
<!--
document.write("Hello World!");
//-->
</script>
</body>
</html>
Nhấn để mở rộng...
1.4 JAVASCRIPT THỰC THI LỆNH KHI NÀO?

JS trong một trang web thực thi theo 2 cách sau:
TH1: Thực hiện lệnh ngay khi trang web được tải về trình duyệt của người sử dụng.
TH2: Thực hiện lệnh khi nhận được một tác động nào đó như nhấn nút, di chuyển chuột hoặc đưa chuột lên một phần tử nào đó của HTML …
Ví dụ: TH1
<html> <head> <script type="text/javascript"> function message() { alert("This alert box was called with the onload event"); } </script> </head> <body onload="message()"> </body> </html>
Nhấn để mở rộng...
Ví dụ: TH1
<html> <head> </head> <body> <script type="text/javascript"> document.write("This message is written by JavaScript"); </script> </body> </html>
Nhấn để mở rộng...
Ví dụ: TH2
<html> <head> <script type="text/javascript"> function message() { alert("This alert box was called with the onload event"); } </script> </head> <body > <a href="#" onclick="message()">Click Here</a> </body> </html>
Nhấn để mở rộng...
1.5 VỊ TRÍ JAVASCRIPT TRONG TRANG HTML?

Đặt trong cặp thẻ <head> của trang web
<html> <head> <script type="text/javascript"> function message() { alert("This alert box was called with the onload event"); } </script> </head> <body onload="message()"> </body> </html>
Nhấn để mở rộng...
Đặt trong cặp thẻ <body> của trang web
<html> <head> </head> <body> <script type="text/javascript"> document.write("This message is written by JavaScript"); </script> </body> </html>
Nhấn để mở rộng...
Đặt trong tập tin .js sau đó nhúng tập tin này vào website. Tạo tập tin alert.js có nội dung sau:
// JavaScript Document function message() { alert("This alert box was called with the onload event"); }
Nhấn để mở rộng...
Sau đó tạo một tập tin HMTL nhúng tập tin .js trên vào
<html> <head> <script type="text/javascript" src="alert.js"></script> </head> <body > <a href="#" onClick="message()">Click Here</a> </body> </html>
Nhấn để mở rộng...
1.6 HIỂN THỊ DỮ LIỆU BẰNG JAVASCRIPT LÊN TRÌNH DUYỆT

Để in ra một giá trị nào đó bằng JS ra trình duyệt chúng ta chỉ dụng câu lệnh đơn giản sau

Cú pháp
document.write("<giá trị cần in>");
Ví dụ:
<script type="text/javascript">
document.write("<h1>This is a heading</h1>");
document.write("<p>This is a paragraph.</p>");
document.write("<p>This is another paragraph.</p>");
</script>
Nhấn để mở rộng...
Chúng ta có thể dùng câu lệnh này để in các giá trị có thể chuỗi, số, thẻ HTML …
1.7 GHI CHÚ TRONG JAVASCRIPT

Khi chúng ta lập trình đoạn mã sẽ không đơn giản là một vài dòng mà đôi khi có thể lên đến cả ngàn dòng lệnh trên một trang nên chúng ta cần ghi chú cho các dòng lệnh, đoạn mã lệnh để khi chúng ta hoặc người khác đọc có thể hiểu được đoạn mã đó có ý nghĩa gì

Có 2 kiểu ghi chú thường được sử dụng trong ngôn ngữ lập trình:

Dòng ghi chú đơn bắt đầu với dấu //
Ví dụ:
<script type="text/javascript">
// Write a heading
document.write("<h1>This is a heading</h1>");
// Write two paragraphs:
document.write("<p>This is a paragraph.</p>");
document.write("<p>This is another paragraph.</p>");
</script>
Nhấn để mở rộng...
Nhiều dòng ghi chú bắt đầu với dấu /* và kết thúc với */
Ví dụ:
<script type="text/javascript">
/*
The code below will write
one heading and two paragraphs
*/
document.write("<h1>This is a heading</h1>");
document.write("<p>This is a paragraph.</p>");
document.write("<p>This is another paragraph.</p>");
</script>
Nhấn để mở rộng...
Chú ý: Chúng ta có thể dùng 2 dòng ghi chú này để đóng tạm thời các dòng lệnh JS trong quá trình lập trình
 
CHƯƠNG 2: BIẾN TRONG JAVASCRIPT

2.1 KHAI BÁO BIẾN

Biến được dùng để lưu trữ những thông tin trong quá trình xử lý một vấn đề nào đó. Như chúng ta đã học tại các trường phổ thông thì:
x=5
y=6
z=x+y = 5 + 6 = 11

Với phép toán trên thì x, y, z là các biến.
• x dùng để lưu trữ giá trị 5
• y dùng để lưu trữ giá trị 6
• z dùng để lưu trữ tổng giá trị của 2 biến x và y

Với JS cũng vậy biến dùng để lưu trữ một giá trị nào đó có thể là một chuỗi, một đối tượng, một con số, một mảng, một phép toán nào đó ... Để khai báo một biến trong JavaScript chúng ta chỉ cần đặt một câu lệnh var trước tên của biến.
var <tên biến>;

Chúng ta có thể khai báo trước biến và không cần đưa giá trị vào biến đó
Ví dụ:
<script type="text/javascript">
var x;
var carname;
</script
Nhấn để mở rộng...
Chúng ta cũng có thể vừa khai báo biến và vừa gán giá trị vào biến đó. Giá trị đó được gọi là giá trị mặc định

Ví dụ:
<script type="text/javascript">
var x=5;
var carname="Volvo";
</script>
Nhấn để mở rộng...
Biến có thể là một phép toán nào đó
Ví dụ:
<script type="text/javascript">
var x=5;
y=x-5;
z=y+5;
</script>
Nhấn để mở rộng...
2.2 CÁC QUI TẮC VỀ BIẾN

Tên biến phải bắt đầu bằng ký tự hoặc dấu gạch dưới ( _ ) và không có khoảng trắng.
Ví dụ:
<script type="text/javascript">
var xToaDo =5;
var _toaDo = 10;
</script>
Nhấn để mở rộng...
Tên biến phân biệt chữ hoa và chữ thường nghĩa là chữ x sẽ khác với chữ X
Ví dụ:
<script type="text/javascript">
var xToaDo = 5;
var XToaDo = 10;
</script>
Nhấn để mở rộng...
Cách đặt tên biến nên sử dụng trong lập trình.
• Đặt tên biến có đầy đủ ý nghĩa với nội dung biến sẽ chứa.
• Chữ cái đầu tên trong cụm từ tạo tên biến nên là chữ thường và các chữ cái đầu tiên trong các từ còn là chữ hoa.
Ví dụ:
<script type="text/javascript">
var tongGiaTri;
var toaDoX;
var toaDoY;
</script>
Nhấn để mở rộng...
 
CHƯƠNG 3: CÁC TOÁN TỬ

Toán tử là một trong những phần không thể thiếu trong bất kỳ ngôn ngữ lập trình nào. Nếu chúng ta hiểu rõ toán tử thì các dòng sử lý lệnh của chúng ta sẽ gắn gọn và dể hiểu hơn.
Dấu bằng (=): sử dụng để gán một giá trị.
Dấu cộng (+): để cộng thêm một giá trị
3.1 HỆ THỐNG PHÉP TÍNH TRONG JAVASCRIPT

Cho biến y = 5
Toán tử
​
Miêu tả
​
Ví dụ
​
Kết quả

+
Cộng
x=y+2
x=7

-
Trừ
x=y-2
x=3

*
Nhân
x=y*2
x=10

/
chia
x=y/2
x=2.5

%
Lấy giá trị lẻ
x=y%2
x=1

++
Tăng
x=++y
x=6

--
Giảm
x=--y
x=4
Nhấn để mở rộng...

3.2 TOÁN TỬ GÁN TRONG JAVASCRIPT

Cho biến x=10 và y=5
Operator
Example
Same As
Result

=
x=y

x=5

+=
x+=y
x=x+y
x=15

-=
x-=y
x=x-y
x=5

*=
x*=y
x=x*y
x=50

/=
x/=y
x=x/y
x=2

%=
x%=y
x=x%y
x=0
Nhấn để mở rộng...
3.3 NỐI CÁC CHUỖI KÝ TỰ

Để nối các chuỗi ký tự lại với nhau, JavaScript sử dụng dấu cộng (+)
Ví dụ:
<script type="text/javascript"> var txt1,txt2,txt3;
txt1="What a very";
txt2="nice day";
txt3=txt1+txt2;
document.write(txt3);
</script>
Nhấn để mở rộng...
Ví dụ:
<script type="text/javascript"> var txt1,txt2,txt3;
txt1="What a very";
txt2="nice day";
txt3=txt1+" "+txt2;
document.write(txt3);
</script>
Nhấn để mở rộng...
3.4 PHÉP CỘNG TRONG CHUỖI VÀ SỐ

Ví dụ:

<script type="text/javascript"> x=5+5; document.write(x); x="5"+"5"; document.write(x); x=5+"5"; document.write(x); x="5"+5; document.write(x); </script>
Nhấn để mở rộng...
3.5 TOÁN TỬ SO SÁNH

Ví dụ chúng ta có một biến x có giá trị là 5. Bây giờ chúng thử xem với hệ thống toán tử so sánh trong JavaScript như thế nào.
Toán tử
​
Mô tả
​
Ví dụ
==
So sánh bằng
x==8 is false
===
So sánh tuyệt đối
x==="5" is false
x===5 is true
!=
Không bằng
x!=8 is true
>
Lớn hơn
x>8 is false
<
Nhỏ hơn
x<8 is true
>=
Lớn hơn hoặc bằng
x>=8 is false
<=
Nhỏ hơn hoặc bằng
x<=8 is true
Nhấn để mở rộng...
Sử dụng:
Để sử dụng chúng ta kết hợp các toán tử so sánh với các câu điều kiện if hoặc if … else
<script type="text/javascript"> var age = 10; if (age<18) document.write("Too young"); </script>
Nhấn để mở rộng...
3.6 TOÁN TỬ LOGIC

Cho giá trị x=6 and y=3
Toán tử
​
Mô tả
​
Ví dụ
&&
and
(x < 10 && y > 1) is true
||
or
(x==5 || y==5) is false
!
not
!(x==y) is true
Nhấn để mở rộng...

3.7 TOÁN TỬ ĐIỀU KIỆN

Cú pháp
variablename=(condition)?value1:value2
Ví dụ:
<script type="text/javascript"> greeting=(visitor=="PRES")?"Dear President ":"Dear ";
</script>
Nhấn để mở rộng...
Ví dụ:

Codevar tuoi = 5; var ketqua;

/*if(tuoi> 5){
document.write("vao cap 1");
}else{
document.write("khong duoc vao cap 1");
}*/

//variablename=(condition)?value1:value2

ketqua = ( tuoi> 5)? "vao cap 1" : "khong duoc vao cap 1";
document.write(ketqua);
Nhấn để mở rộng...
 
CHƯƠNG 4: CÁC PHÁT BIỂU
​

4.1 CÂU LỆNH IF… ELSE

Câu điều kiện thường được sử dụng để thực hiện các hành động khác nhau với những điều kiện khác nhau.

Câu điều kiện là câu lệnh mà chúng ta thường xuyên sử dụng khi viết mã cho bằng bất kỳ ngôn ngữ nào. Để thực hiện nhưng hành động khác nhau trong những điều kiện khác nhau.

Ví dụ: nếu bạn đủ 22 điểm bạn sẽ được vào Đại Học, nếu bạn có điểm dưới 22 bạn sẽ học hệ Cao Đẳng.

Trong JavaScript chúng ta có những kiểu câu điều kiện IF sau:
a. Câu lệnh IF
Sử dụng câu lệnh này để thực hiện một số mã lệnh nếu đúng điều kiện định ra.
Ví dụ:
<script type="text/javascript"> var diemHocVien_A = 5.0;
var diemHocVien_B = 4.5;
var diemHocVien_C = 6.5;

if( diemHocVien_A >= 5){
document.write("Bạn được lên lớp");
}

if( diemHocVien_B >= 5){
document.write("Bạn được lên lớp");
}

if( diemHocVien_C >= 5){
document.write("Bạn được lên lớp");
} </script>
Nhấn để mở rộng...
b. Câu lệnh IF…ELSE
Sử dụng câu lệnh điều kiện này để thực hiện một số mã lệnh nếu đúng điều kiện đã định và nếu không đúng điều kiện đã định thì thực hiện một số mã lệnh khác
Ví dụ:
<script type="text/javascript"> var diemHocVien_A = 5.0; var diemHocVien_B = 4.5; var diemHocVien_C = 6.5; if( diemHocVien_A >= 5){ document.write("Bạn được lên lớp"); }else{ document.write("Bạn phải thi lại"); } if( diemHocVien_B >= 5){ document.write("Bạn được lên lớp"); }else{ document.write("Bạn phải thi lại"); } </script>
Nhấn để mở rộng...
c. Câu lệnh IF… ELSE IF … ELSE
Sử dụng câu lệnh điều kiện này trong trường hợp có nhiều điều kiện đặt ra và khi thỏa mỗi điều kiện sẽ thực hiện một số mã lệnh khác nhau.
Ví dụ:
<script type="text/javascript"> var diemHocVien_A = 8.1; if( diemHocVien_A < 3.5){ document.write("Học lực loại KÉM"); }else if ( diemHocVien_A < 5){ document.write("Học lực loại YẾU"); }else if ( diemHocVien_A < 6.5){ document.write("Học lực loại TRUNG BÌNH"); }else if ( diemHocVien_A < 8){ document.write("Học lực loại KHÁ"); }else{ document.write("Học lực loại GIỎI"); } </script>
Nhấn để mở rộng...
4.2 CÂU LỆNH SWITCH…CASE

Câu điều kiện Switch thường được sử dụng để thực hiện các hành động khác nhau với những điều kiện khác nhau.

Câu điều kiện này gần giống như câu điều kiện IF … ELSE nhưng có một điểm đặc biệt là trong câu điều kiện Switch có một điều kiện mặc định nghĩa là khi giá trị đưa vào không thỏa một điều kiện nào thì nó sẽ lấy các câu lệnh trong phần điều kiện mặc định để thực hiện.
Cú pháp:
Codeswitch(n) {
case 1:
execute code block 1
break;
case 2:
execute code block 2
break;
default:
code to be executed if n is different from case 1 and 2
}
Nhấn để mở rộng...
Ví dụ:
<script type="text/javascript"> var tuoiHocVien = 8; switch(tuoiHocVien) { case 6: document.write("Bạn sẽ học lớp 1"); break; case 7: document.write("Bạn sẽ học lớp 2"); break; case 8: document.write("Bạn sẽ học lớp 3"); break; default: document.write("Xin vui lòng nhập tuổi để chúng tôi xếp lớp cho bạn"); } </script>
Nhấn để mở rộng...
4.3 VÒNG LẶP FOR

Cú pháp:
Codefor (startValue; endValue;varIncrement) { //Code goes here }
startValue: giá trị bắt đầu
endValue: giá trị cuối cùng
varIncrement: giá trị tăng của vòng lặp

Ví dụ: In ra giá trị từ 1 đến 20
<script type="text/javascript"> var i; for (i=1;i<=20;i++) { document.write("The number is " + i); document.write("<br />"); } </script>
Nhấn để mở rộng...
Ví dụ: In ra các trị chẵn từ 1 đến 20
<script type="text/javascript"> var i; for (i=2;i<=20;i +=2) { document.write("The number is " + i); document.write("<br />"); } </script>
Nhấn để mở rộng...
Ví dụ 3: In ra các giá trị lẻ từ 1-20
<script type="text/javascript"> var i; for (i=1;i<=20;i +=2) { document.write("The number is " + i); document.write("<br />"); } </script>
Nhấn để mở rộng...
Ví dụ 4: In ra các giá trị từ 20 – 1
<script type="text/javascript"> var i; for (i=20;i>=1;i--) { document.write("The number is " + i); document.write("<br />"); } </script>
Nhấn để mở rộng...
4.4 VÒNG LẶP WHILE

Vòng lặp while thực hiện một khối lệnh khi điều kiện thỏa và dừng lại ngay khi điều kiện không thỏa

Cú pháp:
Codewhile (var<=endvalue) { code to be executed }
Ví dụ:
<script type="text/javascript"> var i=0; while (i<=5) { document.write("The number is " + i); document.write("<br />"); i++; } </script>
Nhấn để mở rộng...
4.5 VÒNG LẶP DO…WHILE

Vòng lặp này sẽ thực hiện khối lệnh một lần sau đó, rồi sau đó kiểm tra điều kiện nếu đúng sẽ thực hiện lại khối lệnh đó một lần nữa

Cú pháp:
do { code to be executed } while (var<=endvalue);
Ví dụ:
<html> <body> <script type="text/javascript"> var i=0; do { document.write("The number is " + i); document.write("<br />"); i++; } while (i<=5); </script> </body> </html>
Nhấn để mở rộng...
4.6 VÒNG LẶP FOR…IN

Vòng lặp này thường dùng để duyện qua một mảng dữ liệu hoặc thuộc tính của một đối tượng

Cú Pháp:
for (variable in object) { code to be executed }
Ví dụ:
<html> <body> <script type="text/javascript"> var x; var mycars = new Array(); mycars[0] = "Saab"; mycars[1] = "Volvo"; mycars[2] = "BMW"; for (x in mycars) { document.write(mycars[x] + "<br />"); } </script> </body> </html>
Nhấn để mở rộng...
4.7 CÂU LỆNH BREAK VA CONTINUE

4.7.1 Break

Câu lệnh này có chức năng thoát khỏi một vòng lệnh nếu thỏa một điều kiện nào đó
<html> <body> <script type="text/javascript"> var i=0; for (i=0;i<=10;i++) { if (i==3) { break; } document.write("The number is " + i); document.write("<br />"); } </script> </body> </html>
Nhấn để mở rộng...
4.7.2 Continue

Câu lệnh này có chức năng thực hiện một điều gì đó nếu thỏa một điều kiện.
<html> <body> <script type="text/javascript"> var i=0 for (i=0;i<=10;i++) { if (i==3) { continue; } document.write("The number is " + i); document.write("<br />"); } </script> </body> </html>
Nhấn để mở rộng...
 
CHƯƠNG 5: CỬA SỔ THÔNG BÁO
​

JavaScript có 3 kiểu hiển thị hộp thoại thông báo: Alert box(Cảnh báo), Confirm box(xác nhận), Prompt box(gợi ý).
5.1 HỘP THOẠI CẢNH BÁO

Là loại hộp thoại cảnh báo thường được sử dụng để báo cho người sử dụng có chắc chắn muốn thực hiện thao tác họ đăng thực hiện hay không. Khi hộp thông báo hiện lên, nếu người dùng nhấn nút OK thì quá trình thực hiện thao tác mới được tiến hành.

Cú pháp:
alert("sometext");

Ví dụ:
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>JavaScript training </title> <script type="text/javascript"> function show_alert() { alert("Đây là hộp thoại hiển thị cảnh báo!"); } </script> </head> <body> <input type="button" onclick="show_alert()" value="Hiện Alert Box" /> </body> </html>
Nhấn để mở rộng...
5.2 HỘP THOẠI XÁC NHẬN

Là một hộp thoại thường được sử dụng để yêu cầu người sử dụng xác nhận có thực hiện một hành động nào đó hay không. Hộp thoại này có 2 nút nhấn "OK" và "Cancel". Nếu người sử dụng nhấn vào nút "OK" hành động sẽ được thực hiện và ngược lại nếu người
sử dụng nhấn vào nút "Cancel" hành động sẽ bị hủy bỏ.

Khi nhấn vào nút OK chúng ta sẽ nhận được một giá trị của hộp thoại gửi về là true và ngược lại là false

Cú pháp:
confirm("sometext");

Ví dụ:
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>JavaScript training </title> <script type="text/javascript"> function show_comfirm() { var comfirmBox; comfirmBox = confirm("Hệ thống tên lửa đã được kích hoạt.\n Bạn có muốn phóng tên lửu đi không?"); if(comfirmBox == true){ document.write("Tên lửa đã được phóng"); }else{ document.write("Quá trình phóng tên lửa đã được hủy"); } } </script> </head> <body> <input type="button" onclick="show_comfirm()" value="Hiện Alert Box" /> </body> </html>
Nhấn để mở rộng...
5.3 HỘP THOẠI NHẬP LIỆU

Là kiểu hộp thoại dùng để nhắc người sử dụng nhập một giá trị nào đó để sau đó thực hiện một hành động nếu được nhấn nút OK. Trong hộp thoại này cũng có 2 nút "OK" và "Cancel" giống như hộp thoại Confirm. Khi nhấn vào nút OK chúng ta sẽ nhận được giá trị trong ô nhập liệu của hộp thoại Confirm

Cú pháp:
prompt(text,value);
text: là thông tin hiển thị trên hộp thoại
value: là giá trị mặc định hiển thị trong ô nhập liệu của hộp thoại.

Ví dụ:
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>JavaScript training </title> <script type="text/javascript"> function show_prompt() { var name; name = prompt("Tên của bạn là gì?","Xin vui lòng nhập tên bạn vào đây"); if(name != "" && name != null){ document.write("Xin chào " + name); } } </script> </head> <body> <input type="button" onclick="show_prompt()" value="Hiện Alert Box" /> </body> </html>
Nhấn để mở rộng...
 
CHƯƠNG 6: HÀM (FUNCTION) TRONG JAVASCRIPT
​

6.1 FUNCTION LA GÌ ?

Function là một chức năng mà thông thường chúng ta gọi làm hàm. Trong JavaScript hàm thường được gọi thông qua một sự kiện hoặc hàm nào đó.

Để trình duyệt kết hợp với JavaScript một cách linh động chúng ta có thể đưa các đoạn mã JavaScript mà một hàm và khi cần dùng đến chức năng mà hàm cung cấp chúng ta chỉ cần gọi hàm ra sử dụng.

Khi sử dụng hàm chúng ta có nhiều lợi ích như không phải viết lại các đoạn mã giống nhau, có thể gọi hàm ở bất kỳ nơi đâu trên trang HTML mà chúng ta muốn và cũng có thể gọi hàm trên các trang HTML khác nếu chúng ta đưa hàm này vào tập tin .js

Hàm có thể để ở nhiều nơi trong trang HTML: trong cặp thẻ <head>, trong cặp thẻ <body>, trong tập tin .js, hoặc sau thẻ </html> ở cuối trang HTML.
Cú pháp:
function function_name(var1,var2,...,varX)
{
//Code goes here
}
Nhấn để mở rộng...
var1, var2 … varX: được gọi là các tham số của hàm. Hàm có thể có nhiều tham số hoặc không có tham sao nào cả.

Chú ý: cách đặt tên hàm tương tự như cách đặt tên biến. Hoặc chúng ta dùng dấu gạch dưới ( _ ) trong hàm có tên là một cụm từ.
6.2 HÀM KHÔNG THAM SỐ

Ví dụ:
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>JavaScript training </title> <script type="text/javascript"> function show_alert() { alert("Đây là hộp thoại hiển thị cảnh báo!"); } </script> </head> <body> <input type="button" onclick="show_alert()" value="Hiện Alert Box" /> </body> </html>
Nhấn để mở rộng...
6.3 HÀM CÓ THAM SỐ

Ví dụ:
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>JavaScript training </title> <script type="text/javascript"> function show_alert(text) { alert(text); } </script> </head> <body> <input type="button" onclick="show_alert('Hay nhap vao nhung gi ban muon')" value="Hiện Alert Box" /> </body> </html>
Nhấn để mở rộng...
6.4 HÀM CÓ TRẢ VỀ GIÁ TRỊ SAU KHI THỰC HIỆN LỆNH

Thông thường hàm sử dụng để xử lý một chức năng nào đó và sau khi xử lý xong thường phải trả về các giá trị. Để trả về một giá trị nào đó sau khi xử lý chúng ta dùng lệnh return.

Ví dụ:
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>JavaScript training </title> </head> <body> <script type="text/javascript"> function phepCong(a,b) { var tongGiaTri; tongGiaTri = a + b; return tongGiaTri; } var phepToan; phepToan = phepCong(10,7); document.write(phepToan); </script> </body> </html>
Nhấn để mở rộng...
6.5 GỌI HÀM TRONG MỘT HÀM KHÁC

Chúng ta có thể xây dựng nhiều hàm xử lý và chúng ta có thể sử dụng hàm xử lý này trong một hàm xử lý khác.

Ví dụ:
<script type="text/javascript"> function xuLyPhepToan(val_1,val_2,operator){ var phepToan; if(operator == "cong"){ phepToan = phepCong(val_1,val_2); } if(operator == "tru"){ phepToan = phepTru(val_1,val_2); } return phepToan; } function phepCong(a,b) { var tongGiaTri; tongGiaTri = a + b; return tongGiaTri; } function phepTru(a,b) { var tongGiaTri; tongGiaTri = a - b; return tongGiaTri; } var phepToan; phepToan = xuLyPhepToan(10,7,"tru"); document.write(phepToan); </script>
Nhấn để mở rộng...
Chú ý: Biến trong các một hàm bất kỳ chỉ có tác dụng trong hàm đó chứ không hề ảnh hưởng đến các hàm khác cho dù tên biến giống nhau.
 
CHƯƠNG 7: SỰ KIỆN TRONG JAVASCRIPT
​

7.1 SỰ KIỆN LÀ GÌ ?

Sự kiện là những hành động của người sử dụng được phát hiện bởi JavaScript. Tất cả các thành phần của trang web đều có sự kiện, điều mà có thể kích hoạt một đoạn mã JavaScript. Ví dụ về các sự kiện:
• Nhấn chuột
• Tải một trang web hoặc một hình ảnh
• Di chuyển chuột qua một vị trí nào đó của trang web
• Lựa chọn một ô nhập liệu trong HTML form
• Gửi một dữ liệu từ HTML
• Nhấn một tổ hợp phím

Onload và unload:

Là 2 sự kiện được người dùng sử dụng khi vào hoặc rời khỏi website. Các sự kiện onload thường để kiểm tra loại trình duyệt của người truy cập và phiên bản trình duyệt để tải phiên bản thích hợp cho website đó

Thuộc tính sự kiện (Event Properties):

x - Tọa độ x của chuột khi có một sự kiện xảy ra
y - Tọa độ y của chuột khi có một sự kiện xảy ra

JavaScript định ra 5 loại sự kiện sau: FORM, Images, image map link, and window. Những sự kiện này được liên kết với các thẻ HTML trong trang web.

7.2 SỰ KIỆN VỚI FORM

blur: Sự kiện xảy ra khi chúng ta rời khỏi một phần tử nào đó của FORM
change: Sự kiện xảy ra khi chúng ta thay đổi giá trị một phần tử nào đó của FORM
focus: Sự kiện xảy ra khi chúng ta đến một phần tử nào đó của FORM
reset: Sự kiện xảy ra khi chúng ta thiết lập lại giá trị cho FORM nào đó
select: Sự kiện xảy ra khi chúng ta chọn một đoạn văn bản nào đó
submit: Sự kiện xảy ra khi chúng ta muốn gửi dữ liệu trong FORM từ trình duyệt đến máy chủ

7.3 SỰ KIỆN VỚI HÌNH ẢNH

about: tạo ra một hành động hủy bỏ chức năng
error: Có lỗi xảy ra
load: một đối được đã tải xong

7.4 SỰ KIỆN VỚI IMAGE MAP

mouseOut: Chuột được di chuyển ra ngoài từ link của MAP
mouseOver: Chuột được di chuyển lên link của MAP

7.5 SỰ KIỆN VỚI LINK

click: Một đối tượng link được nhấn
mouseOut: Chuột được di chuyển ra ngoài từ link
mouseOver: Chuột được di chuyển lên link

7.6 SỰ KIỆN VỚI WINDOW

blur: Rời khỏi một phần tử nào đó
error: Một lỗi xảy ra.
focus: Chuyển đến một phần tử nào đó
load: Load một phần tử
unload: Thoát khỏi một phần tử
 
CHƯƠNG 8: MẢNG TRONG JAVASCRIPT
​

8.1 MẢNG CƠ BẢN

a.Tạo một mảng:
var arrayName = new Array();
b. Thêm một phần tử vào mảng:
arrayName[0] = value;
c. Các cách tạo một mảng:

Cách 1:
var students = new Array(); students[0] = "Nguyen Van A"; students[1] = "Nguyen Van B"; students[2] = "Nguyen Van C"; Cách 2:
var students=new Array("Nguyen Van A","Nguyen Van B","Nguyen Van C");
Cách 3:
var students=["Nguyen Van A","Nguyen Van B","Nguyen Van C"];
d. In từng phần tử trong mảng:
document.write(students[0]);
e. In tất cả mảng:
<script type="text/javascript"> var students=["Nguyen Van A","Nguyen Van B","Nguyen Van C"]; for (x in students) { document.write(students[x] + "<br />"); } </script> <script type="text/javascript"> var students=["Nguyen Van A","Nguyen Van B","Nguyen Van C"]; document.write(students); </script>
Nhấn để mở rộng...

f. Lấy chiều dài của một mảng:
<script type="text/javascript"> var students=["Nguyen Van A","Nguyen Van B","Nguyen Van C"]; document.write(students.length); </script>
Nhấn để mở rộng...

8.2 NỐI MẢNG (CONCAT)

Khi chúng ta có nhiều mảng và chúng ta muốn nối các mảng lại với nhau thì chúng ta dùng phương thức concat() của đối tượng mảng

Cú pháp:
array.concat(array2, array3, ..., arrayX);
Ví dụ 1:
<script type="text/javascript">
var str_1 = ["a","b","c"];
var str_2 = ["d","e","f"];
var str_3 = ["g","h","i"];
var charaters;
charaters = str_1.concat(str_2);
document.write(charaters);
</script>
Nhấn để mở rộng...
Ví dụ 2:
<script type="text/javascript">
var str_1 = ["a","b","c"];
var str_2 = ["d","e","f"];
var str_3 = ["g","h","i"];
var charaters;
charaters = str_1.concat(str_2,str_3);
document.write(charaters);
</script>
Nhấn để mở rộng...
8.3 NỐI CÁC PHẦN TỬ TRONG MẢNG (JOIN)

Phương thức này giúp chúng ta có thể tạo ra một chuỗi từ các phần tử trong một mảng và được ngăn cách bằng một ký tự bất kỳ

Ví dụ:
<script type="text/javascript"> var str_1 = ["a","b","c"]; var str_2 = ["d","e","f"]; var str_3 = ["g","h","i"]; var charaters; charaters = str_1.join("|"); document.write(charaters); </script>
Nhấn để mở rộng...
8.4 XÓA MỘT PHẦN TỬ Ở CUỐI MẢNG (POP)

Để bỏ đi một phần tử ở cuối mảng chúng ta có thể sử dụng phương thức pop().

Ví dụ:
<script type="text/javascript">
var str_1 = ["a","b","c"];
document.write(str_1 + "<br>");
document.write(str_1.pop() + "<br>");
document.write(str_1 + "<br>");
</script>
Nhấn để mở rộng...
8.5 THÊM MỘT PHẦN TỬ VÀO CUỒI MẢNG (PUSH)

Phương thức push() dùng để thêm 1 phần tử vào cuối mảng, và sau khi thực hiện phương thức này chúng ta sẽ nhận được giá trị chiều dài mới của mảng.

Ví dụ:
<script type="text/javascript">
var str_1 = ["a","b","c"];
document.write(str_1 + "<br>");
document.write(str_1.push("d") + "<br>");
document.write(str_1 + "<br>");
document.write(str_1.push("e","f") + "<br>");
document.write(str_1 + "<br>");
</script>
Nhấn để mở rộng...
8.6 ĐẢO NGƯỢC MỘT MẢNG (REVERSE)

Để đảo ngược thứ tự của một mảng trong JavaScript,chúng ta sử dụng phương thức reverse()

Ví dụ:
<script type="text/javascript">
var str_1 = ["a","b","c"];
document.write(str_1 + "<br>");
str_1.reverse();
document.write(str_1 + "<br>");
</script>
Nhấn để mở rộng...
8.7 LOẠI BỎ MỘT PHẦN TỬ Ở ĐẦU MẢNG (SHIFT)

Phương thức shift() dùng để loại bỏ phần tử ở đầu mảng. Sau đó trả về giá trị của phần tử mảng đã xóa.

Ví dụ:
<script type="text/javascript">
var str_1 = ["a","b","c"];
var x;
document.write(str_1 + "<br>");
x = str_1.shift();
document.write(x + "<br>");
document.write(str_1 + "<br>");
</script>
Nhấn để mở rộng...
8.8 TẠO MẢNG MỚI TỪ MỘT MẢNG CÓ SẲN (SLICE)

Phương thức slice(start, end) giúp chúng ta tạo một mảng mới từ một mảng đã có sẵn bằng cách nhập vào vị trí bắt đầu và kết thúc

Ví dụ:
<script type="text/javascript">
var str_1 = ["a","b","c",1,2,3];
var x;
document.write(str_1 + "<br>");
x = str_1.slice(0,5);
document.write(str_1 + "<br>");
document.write(x + "<br>");
</script>
Nhấn để mở rộng...
8.9 SẮP XẾP MẢNG (SORT)

Phương thức sort() giúp chúng ta sắp xếp một mảng theo giá trị của các phần tử trong mảng đó

Ví dụ:
<script type="text/javascript">
var str_1 = ["a","b","c",1,2,3];
var x;
document.write(str_1 + "<br>");
str_1.sort();
document.write(str_1 + "<br>");
</script>
Nhấn để mở rộng...
8.10 THÊM VÀ XÓA CÁC PHẦN TỬ CỦA MẢNG (SPLICE)

Phương thức splice() giúp chúng ta xóa các phần tử trong mảng theo vị trí nhập vào (giống slice()) và thêm vào các phần tử mảng mới vào cuối mảng (giống push())

Ví dụ:
<script type="text/javascript">
var str_1 = ["a","b","c",1,2,3];
var x;
document.write(str_1 + "<br>");
str_1.splice(0,2,"Nguyen Van A","Nguyen Van B", 6,7,8);
document.write(str_1 + "<br>");
</script>
Nhấn để mở rộng...
8.11 CHUYỂN MỘT MẢNG THÀNH CHUỖI (TOSTRING)

Phương thức toString() giúp chúng ta chuyển một mảng thành một chuỗi, hãy xem ví dụ sau:

Ví dụ:
<script type="text/javascript">
var str_1 = ["a","b","c",1,2,3];
var x;
x = str_1.toString();
document.write(x);
</script>
Nhấn để mở rộng...
8.12 THEM PHẦN TỬ VÀO ĐẦU MẢNG (UNSHIFT)

Phương thức unshift() giúp chúng ta thêm các giá trị vào một mảng và trả về một mảng mới

Ví dụ:
<script type="text/javascript">
var str_1 = ["a","b","c",1,2,3];
var x;
document.write(str_1 + "<br>");
str_1.unshift(100);
document.write(str_1 + "<br>");
str_1.splice(0,0,200);
document.write(str_1 + "<br>");
</script>
Nhấn để mở rộng...
 
CHƯƠNG 9: ĐỐI TƯỢNG MATH VÀ THIẾT LẬP THỜI GIAN CHẠY
​

9.1 ĐỐI TƯỢNG MATH

Đối tượng Math trong JavaScript hỗ trợ chúng ta trong công việc thực hiện các phép toán

Cách sử dụng:
Math.<phương thức>;

Các phương thức thông dụng trong đối tượng Math:
ID​
Phương thức​
Chức năng​
1​
Math.round(x)
Làm tròn (.5 = 1)
2​
Math.floor(x)
Làm tròn xuống (.6 = 0)
3​
Math.random()
Lấy ngẫu nhiên một số
4​
Math.max(x,y,z,...,n)
Lấy số có giá trị lớn nhất trong chuỗi số
5​
Math.min(x,y,z,...,n)
Lấy số có giá trị nhỏ nhất trong chuỗi số
6​
Math.abs(x)
Trả về giá trị số nguyên dương
Nhấn để mở rộng...


Ví dụ: Hiển thị ngẫu nhiên một hình ảnh từ một tập hợp nhiều ảnh

Trong ví dụ này chúng ta sẽ kết hợp 2 đối tượng Array và Math của JavaScript. Các bước thực hiện:
- Chuẩn bị một số hình ảnh ( 5 pictures)
- Tạo một mảng lưu tên của các hình ảnh này
- Sử dụng các phương thức floor(), random() để hiển thị ngẫu nhiên một hình ảnh
<html> <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript">
var imageList = new Array;
imageList[0] = "images/001.jpg";
imageList[1] = "images/002.jpg";
imageList[2] = "images/003.jpg";
imageList[3] = "images/004.jpg";
imageList[4] = "images/005.jpg";
function showImage() {
var imageChoice = Math.floor(Math.random() * imageList.length);
document.write('<img src="' + imageList[imageChoice] + '">');
}
</script>
</head>
<body>
<script type="text/javascript">
showImage();
</script>
</body>
</html>
Nhấn để mở rộng...
9.2 THIẾT LẬP THỜI GIAN CHẠY

JavaScript có thể thực hiện một chức năng nào đó sau một thời gian được định trước.

setTimeout() - Thực hiện một số lệnh với thời gian được định trước trong tương lai.
clearTimeout() - Hủy hàm setTimeout()

Cú pháp:
setTimeout("javascript statement",milliseconds); //milliseconds * 1000 = 1 giây
Ví dụ 1: Hiển thị hộp thoại alert sau 5 giây sau khi nhấn nút Code<html> <head>
<script type="text/javascript">
var t;
function timedMsg(){
var t=setTimeout("alert('5 seconds!')",5000);
}
</script>
</head>

<body>
<form>
<input type="button" value="Display timed alertbox!" onClick="timedMsg()" />
</form>
</body>
</html>
Nhấn để mở rộng...

Ví dụ 2: Tạo một ô textbox và có giá trị thay đổi theo thời gian
<html> <head>
<script type="text/javascript">
var c=0;
var t;
function timedCount(){
document.getElementById('txt').value=c;
c=c+1;
t=setTimeout("timedCount()",1000);
}
</script>
</head>

<body>
<form>
<input type="button" value="Start count!" onClick="timedCount()">
<input type="text" id="txt" />
</form>
</body>
</html>
Nhấn để mở rộng...
Ví dụ 3: Dừng giá trị trong ô textbox trong ví dụ 2
<html> <head>
<script type="text/javascript">
var c=0;
var t;

function timedCount(){
document.getElementById('txt').value=c;
c=c+1;
t=setTimeout("timedCount()",1000);
}
function stopCount()
{
clearTimeout(t);
}
</script>
</head>
<body>
<form>
<input type="button" value="Start count!" onClick="timedCount()">
<input type="text" id="txt">
<input type="button" value="Stop count!" onClick="stopCount()">
</form>
</body>
</html>
Nhấn để mở rộng...
Ví dụ 4: Ẩn hiện một bức tranh kết hợp setTimeout() và thuộc tính opacity của CSS
\
<html> <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript">

var maxOpacity = 1;
var minOpacity = 0;

function setHidden(){
var thisObj = document.getElementById('picture');
maxOpacity = maxOpacity - 0.1;
if(maxOpacity >= 0){
thisObj.style.opacity = maxOpacity;
//thisObj.filters.alpha.opacity = maxOpacity;
window.setTimeout("setHidden('picture')",100);
}else{
thisObj.style.opacity = 0;
}
}

function setShow(){
var thisObj = document.getElementById('picture');
minOpacity = minOpacity + 0.1;
if(minOpacity <= 1){
thisObj.style.opacity = minOpacity;
//thisObj.filters.alpha.opacity = maxOpacity;
window.setTimeout("setShow('picture')",100);
}else{
thisObj.style.opacity = 1;
}
}

</script>
</head>
<body >
<input type="button" onClick="setHidden()" value="Hidden">
<input type="button" onClick="setShow()" value="Show">
<br>
<img src="images/007.jpg" id="picture" >
</body>
</html>
Nhấn để mở rộng...
 
Cuối cùng xin chúc các bạn thành công và học thật tốt
Các bạn có thể Download 9 chương file PDF tại
You must be registered for see links

​
 
Bạn phải đăng nhập hoặc đăng ký để bình luận.
Back
Top