Nếu bạn sử dụng Google để tìm kiếm
nâng cao một thông tin có dạng sau:
"Ngôn ngữ/Phần mềm" "lập
trình viên" "cần tuyển"
OR "tuyển dụng"
Hiển thị các bài đăng có nhãn Chuyên đề JavaScript cơ bản. Hiển thị tất cả bài đăng
Hiển thị các bài đăng có nhãn Chuyên đề JavaScript cơ bản. Hiển thị tất cả bài đăng
Bài 01: Làm quen với JavaScript
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í
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.
3. Sử dụng 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>
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> Để 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>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>Ví dụ: TH1
<html><head></head> <body> <script type="text/javascript"> document.write("This message is written by JavaScript"); </script></body> </html>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> 5. Vị trí JavaScript trong trang HTML
Đặt trong cặp thẻ <head> của trang web
Đặ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>Đặ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>Đặ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 Documentfunction message(){ alert("This alert box was called with the onload event");}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>6. Hiển thị dữ liệu bằng JS trê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ụ:
Để 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>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 …
7. Ghi chú trong mã lệnh JS
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>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>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
Bài 02: Sử dụng Biến trong JavaScript
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ụ:
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ụ:
Biến có thể là một phép toán nào đó
Ví dụ:
Chú ý: Qui tắc đặt tên 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ụ:
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ụ:
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ụ:
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
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>
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
Chú ý: Qui tắc đặt tên 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>
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>
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>
Bài 03: Phép toán quan hệ trong JavaScript
So sánh và tính logic trong Javascript thường được sử dụng để lấy về 2 kết quả true (đúng) hoặc false (sai)
a. 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
a. 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
|
b. 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
Để 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>
c. Toán tử logic
Cho giá trị x=6 and y=3
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
|
d. 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>
Ví dụ:
var 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);
Bài 04: Toán tử trong JavaScript
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ị
a. Hệ thống phép tính trong JavaScript
Cho biến y = 5
Dấu cộng (+): để cộng thêm một giá trị
a. 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ị số dư
|
x=y%2
|
x=1
|
++
|
Tăng
|
x=++y
|
x=6
|
--
|
Giảm
|
x=--y
|
x=4
|
b. Toán tử gán trong JavaScript
Cho biến x=10 và y=5
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
|
c. 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 (+)
Để 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>
Ví dụ:
<script type="text/javascript">
var txt1,txt2,txt3;
txt1="What a very";
txt2="nice day";
txt3=txt1+" "+txt2;
document.write(txt3);
</script>
d. Phép cộng trong chuỗi và số
<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>
Bài 05: Lệnh điều kiện IF… ELSE trong Java script
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.
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>
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
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>
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.
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");
}
Bài 06: Lệnh điều kiện SWITCH trong Java script
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â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:
switch(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
}
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>
Bài 07: Các lệnh chu trình trong Java script
Khi
bạn muốn thực hiện điều gì đó nhiều lần thì chúng ta sử dụng vòng lặp FOR hoặc
vòng lặp WHILE
a. Lệnh chu trình FOR
Cú pháp:
Dạng
1: Dạng lệnh 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
FOR (variable
in object)
{
code to be executed
}
Dạng 2:
FOR
(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ụ:
<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>
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>
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>
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>
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>
b. Lệnh chu trình 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:
while
(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>
c. Lệnh chu trình 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>
