HTML: Tổng quan về JavaScript


1. GIỚI THIỆU VỀ JAVASCRIPT: 
Javascript ra đời với tên gọi LiveScript, sau đó Nescape đổi tên thành Javascript. Tuy nhiên giữa Java và Javascript có rất ít các điểm chung dù cú pháp của chúng có thể có những điểm giống nhau.
Javascript là một ngôn ngữ kịch bản (script) để viết kịch bản cho phía client. Client side là những yêu cầu của người sử dụng được xử lý tại máy khách. Thông thường những yêu cầu này là tính toán, kiểm tra tính hợp lệ của dữ liệu hay các hiệu ứng, các yêu cầu này thường không liên quan đến nguồn cơ sở dữ liệu trên server.
1.1. Đặc điểm của JAVASCRIPT:

  • Javascript là một ngôn ngữ kịch bản được viết chung với HTML. 
  • Không biên dịch như các ngôn ngữ khác. Khi trang web load xuống nó được trình duyệt thông dịch.
  • Javascript là ngôn ngữ thiết kế động vì các đối tựơng có khả năng tương tác với nhau thông qua người sử dụng hoặc các sự kiện. 
  • Là ngôn ngữ hướng đối tượng. Phân biệt chữ hoa, chữ thường 
  • Được hỗ trợ bởi tất cả các trình duyệt như Nescape và Internet Explorer
  • JavaScript có khả năng tạo và sử dụng các đối tượng (Object), các đối tượng gồm 2 nhóm:

- Các Object do người sử dụng tạo ra gồm :

  • Định nghĩa thuộc tính cho đối tượng
  • Cú pháp: Object Name.Properties
  • Thêm phương thức cho đối tượng
  • Tạo một instance của đối tượng

- Các object có sẵn: JavaScript cung cấp một bộ các Built–in Object để cung cấp các thông tin về sự hiện hành của các đối tượng được load trong trang Web và nội dung của nó, các đối tượng này gồm phương pháp (method) làm việc với các thuộc tính (properties) của nó.
1.2. Cấu trúc của đoạn Javascript:
<Script language=”JavaScript”>
       Các lệnh Javascript
</Script>
1.3. JAVASCRIPT trong một trang HTML

  • Đặt các dòng mã lệnh của Javascript giữa cặp thẻ <script></script>
  • Có thể viết nhiều đoạn mã lệnh Javascript trong cùng một tập tin HTML. Các khối mã lệnh Javascript có thể đặt bất kỳ nơi nào của trang HTML. Có thể đặt trong cặp thẻ <head></head> hoặc trong cặp thẻ <body> </body> tuy nhiên ta nên đặt trong cặp thẻ <head> để dễ kiểm soát mã lệnh và cũng dễ sửa đổi chương trình. 
  • Có thể viết một tập tin Javascript riêng và sau đó kết nối với một hoặc nhiều tập tin trang web khác nhau.

Cách 1: Viết đoạn mã Script trong cùng trang HTML
Ví dụ 1: 
<HTML>
<HEAD>
<script language="javascript" >
document.write(“What is your name? ”);
</script>
</HEAD>
<BODY>
Nội dung của trang
</BODY>
</HTML>
Ví dụ 2: 
<HTML>
<BODY>
<script language="javascript">
document.write("Hello World!")
</script>
</BODY>
</HTML> 
Ví dụ 3: 
<html>
<head>
<script type="text/javascript">
      some statements
</script>
</head>
<body>
<script type="text/javascript">
      some statements
</script>
</body>
</html>
Cách 2: Mở trình soạn thảo Notepad, viết đoạn chương trình Javascript. Lưu lại với phần mở rộng là .js (lưu ý trong  tập tin này không chứa bất kỳ một thẻ nào của ngôn ngữ HTML).
- Liên kết với một file JavaScript.js đã được xây dựng trước 
Cú pháp:
<HTML>
<BODY>
<Script SRC=”fileJavascript.js” Language="javascript" >
JavaScript comments
</Script>
</BODY>
</HTML>

Lưu ý: trong thẻ JavaScript ta có thể bỏ thuộc tính SRC và Language, khi đó ngôn ngữ mặc định là JavaScript.
1.4. Môi trường viết JAVASCRIPT:
Có thể dùng chương trình soạn thảo: Frontpage, Notepad, Visual InterDev, Dreamweaver để viết mã Javascript, trong giáo trình này sẽ sử dụng môi trường Dreaweaver, chọn chế độ code, Dreamweaver hổ trợ phân biệt từ khóa bằng màu chữ, hổ trợ các hàm, thuộc tính của các tag, giúp người sử dụng thuận tiên trong việc thiết kế và viết chương trình
1.5. Lệnh đơn và khối lệnh:
a) Lệnh đơn: 
Lệnh đơn là một câu lệnh được kết thúc bằng dấu chấm phẩy(;). Trong JavaScript cuối mỗi câu lệnh ta có thể dùng dấu (;) hoặc không dùng dấu gì cả.
b) Khối lệnh: 
Khối lệnh là tập hợp nhiều câu lệnh đơn được bao bọc bởi cặp dấu {}
c) Lời chú thích trong chương trình: 
Lời chú thích này trình duyệt sẽ bỏ qua khi thông dịch chương trình. JavaScript hổ trợ 2 loại chú thích:

  • Chú thích trên một dòng: dùng cặp dấu //
  • Chú thích trên nhiều dòng: dùng cặp dấu   /*…*/

1.6. Xuất dữ liệu ra trang Web
JavaScript hỗ trợ 2 phương thức hiển thị dữ liệu ra trang Web là: 

  • document.write(“Text”) 
  • document.writeln(“Text”)

Text là chuỗi dữ liệu muốn hiển thị ra trang Web, phải được đặt trong cặp nháy kép. 
Nếu xuất giá trị của biến thị không cần đặt trong nháy. Có thể dùng dấu + để nối các chuỗi và biến
document.write(“String ” + variable );
Nếu xuất thẻ HTML thì cặp thẻ đó cũng phải đặt trong cặp dấu nháy kép
­ document.writeln: nếu đặt trong cặp tag<pre></pre> thì lệnh document.writeln xuất dữ liệu và xuống dòng. Nếu không có cặp thẻ <pre></pre> thì nó cách ra một khoảng trắng
Ví dụ:
<BODY  >
<Script Language=”JavaScript”>
document.write ("<H1>Hello<H1>");
document.write ("<font color=red>World</font>");
</Script>
</BODY>
Ví dụ:
<body>
<pre>
<script>
document.writeln("<b>Hello</b>");
document.writeln("<b>Wordl</b>");
</script>
</pre>
</body>
2. BIẾN VÀ DỮ LIỆU TRONG JAVASCRIPT
2.1. Biến
- Khái niệm: Biến là tên của một phần tử trong chương trình, được sử dụng để lưu trữ thông tin do người dùng nhập vào hoặc kết quả trung gian của quá trình tính toán. Khi khai báo biến trong Javascript không cần xác định kiểu dữ liệu cho biến cho nên khi một biến được khai báo xong nó có thể chứa bất kỳ kiểu dữ liệu nào.
- Cách khai báo biến: Trong JavaScript, để khai báo biến dùng từ khoá var, cũng có thể bỏ qua từ khóa var.
var NameVariable ;
Một biến có thể được khai báo và khởi tạo hoặc không khởi tạo giá trị ban đầu
Muốn khai báo nhiều biến cùng một lúc thì liệt kê tên biến kế tiếp nhau cách nhau bởi dấu (,)
Ví dụ: Var x = 7 ;
           var y,z = "19" ; 
Trong JavaScript, 1 biến có thể chứa bất kỳ kiểu dữ liệu gì 
Ví dụ:
           var a=”Hello World”;
           a=1999 ;
- Cách xuất giá trị của biến: 
document.write(NameVariable )
- Quy tắc đặt tên biến: 
Tên biến gồm các chữ cái và số, không dùng các ký tự đặc biệt như: ( , [ , { , # , & …. theo nguyên tắc sau:

  • Tên biến phải bắt đầu bằng ký tự hoặc ký tự gạch dưới( _ )
  • Không bắt đầu bằng ký tự số.
  • Không chứa khoảng trắng, tên biến phải gợi nhớ
  • Không trùng với từ khoá của JavaScript 
  • Các từ khoá trong JavaScript 

- Tầm vực của biến: là tầm ảnh hưởng của biến trong chương trình. Có 2 loại biến:
­ Biến toàn cục: được khai báo ngoài các hàm. Phạm vi hoạt động của biến là từ vị trí khai báo trở về sau trong chương trình.
­ Biến cục bộ: được khai báo trong chương trình con. Phạm vi hoạt động của biến là từ vị trí khai báo đến kết thúc chương trình con.
Lưu ý: Nếu tên biến toàn cục và cục bộ trùng nhau thì biên được sử dụng trong hàm là biến cục bộ.
2.2. Dữ liệu: Có 4 loại dữ liệu
­ Kiểu số: một biến kiểu số chứa bất kỳ giá trị số nào: số thập phân, số nguyên, số dạng chấm phẩy động.
­ Kiểu chuỗi: một biến kiểu chuổi có thể chứa một nhóm ký tự (Chữ cái, ký tự số, khoảng trắng, các ký tự đặc biệt, …). Giá trị chuổi phải đặt trong cặp dấu nháy đôi (“ “) hoặc đơn (‘ ‘) 
Ví dụ: 
var  s1, s2, s3 ;
s1=”Hello  World” ;
s2=’Hello World ‘ ;
­ Kiểu Boolean: Là dữ liệu chỉ có 2 giá trị False hoặc True thường dùng trong trường hợp biến hoặc hàm chỉ nhận một trong 2 trạng thái đúng hoặc sai.
Ví dụ: var bl;
bl=true ;
­ Kiểu Null: là biến không gán cho giá trị  
2.3. Toán tử:
- Toán tử số học 
Tóan Tử
Chức Năng
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
%
Lấy phần dư
5%2
10%8
10%2
1
2
0
++
Tăng giá trị lên 1
x=5
x++
x=6
--
Giảm giá trị  xuống 1
x=5
x--
x=4


- Toán tử gán 
Tóan Tử
Ví dụ
Tương đương
=
x = y
x= y
+=
x += y
x = x+y
-=
x -= y
x = x-y
*=
x *= y
x = x*y
/=
x /= y
x= x/y
%=
x%=y
x = x%y


- Toán tử so sánh

Tóan Tử
Chức Năng
Ví dụ
= =
bằng
5==8 returns false
!=
Không bằng
5!=8 returns true
> 
lớn hơn
5>8 returns false
< 
nhỏ hơn
5<8 returns true
>=
lớn hợn hoặc bằng
5>=8 returns false
<=
nhỏ hơn hoặc bằng
5<=8 returns true

- Toán Tử logic
Tóan Tử
Chức Năng
Ví dụ
&&
x =6; y =3 ;
(x < 10 && y > 1) returns true
||
hoặc
x = 6 ; y =3
(x==5 || y==5) returns false
!
not
x=6; y =3;
!(x==y) returns true

- Toán tử chuỗi 
Ký hiệu + : Là phép toán nối hai chuỗi với nhau 

Ví dụ:
<html>
<script>
txt1=”What a very”;
txt2="nice day!";
document.write('<h2>'+txt1+txt2+'</h2>'); 
</script>
</html>

- Một số ký tự đặc biệt: \n ( new line), \t (tab), \b (BackSpace), \& (dấu &), \”(“)
Ví dụ:
<html>
<script>
document.write ("You \& i sing \"Happy Birthday\".") 
</script>
</html>

- Toán tử điều kiện: 
Cú pháp:
(Điều kiện) ? value1: value2

  • Nếu biểu thức điều kiện đúng thì trả về giá trị value 1 
  • Nếu biểu thức điều kiện sai thì trả về giá trị value 2 

Ví dụ:
<html>
<script>
a=5; b=6;
document.write((a>b)? 'a lon hon b':'b lon hon a');
</script>
</html>



Related Posts
Previous
« Prev Post