Bài 2: Biến và hàm trong javascript

0

1.Biến và khai báo biến

1.1Khai báo biến trong javascript

Để khai báo một biến ta sử dụng từ khóa  var tenbien. Ví dụ:

1
var username;

Tuy nhiên không phải muốn đặt tên biến gì cũng được mà phải tuân theo quy tắc sau đây:

  • Tên biến phải là các chữ không dấu viết  hoa hoặc viết thường, các chữ số từ 0-9 và dấu gạch dưới (-).
  • Tên biến bắt đầu phải là chữ hoặc dấu gạch dưới (-), nếu bắt đầu bằng số là sai
  • Tên biến có thể đặt dài hay ngắn tùy vào lập trình viên.

Ví dụ:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// Đúng
var username;
// Đúng
var _username;
// Đúng
var __username;
// Đúng
var username90;
// SAI
var 90thehalfheart;

 

Ngoài cách khai báo trên ta còn có cách khai báo biến liên tiếp cách nhau bởi dấu phẩy, ví dụ:

 

1
var username, _username, __username, username90;

1.2. Gán giá trị cho biến trong javascript

Để gán giá trị cho biến ta dùng dấu bằng (=) để gán vế phải vào vế trái, ví dụ gán giá trị thehalfheart vào biến username thì ta viết làusername = 'thehalfheart'.

Có hai cách gán thông dụng đó là vừa khai báo biến vừa gán giá trị và khai báo rồi mới gán giá trị:

Ví dụ vừa khai báo vừa gán giá trị:

 

1
var username = 'thehalfheart';

Ví dụ khai báo xong mới gán giá trị:

 

1
2
var username;
username = 'thehalfheart';

 

1.3. Gán kiểu giá trị cho biến

Giống như php, để xác định biến có kiểu dữ liệu là gì thì ta dựa vào giá trị mà nó đang có, có nghĩa khi bạn gán một con số không có dấu chấm động thì nó sẽ là kiểu INT, nếu gán một chuỗi thì là kiểu String.

Ví dụ:

 

1
2
3
4
5
6
7
8
// Biến website đag kiểu String
var website = 'thehalfehart';
// Biến website chuyển sang kiểu INT
website = 12;
// Biến website chuyển sang kieeur float
website = 12.5;

Chi tiết hơn thì ta sẽ tìm hiểu các kiểu dữ liệu trong javascript ở các bài tiếp theo nhé.

1.4. In giá trị của biến ra trình duyệt

Để in giá trị của biến hoặc một chuỗi nào đó ra trình duyệt thì ta sử dụng hàm document.write(value).

Ví dụ: XEM DEMO

 

1
2
3
4
5
6
7
8
9
10
11
<html>
    <head>
        <title></title>
    </head>
    <body>
        <script language="javascript"
>
            var website = 'freetuts.net';
            document.write(website);
        </script>
    </body>
</html>

 

2.Hàm alert() – confirm() – prompt() trong javascript

2.1Hàm alert() trong javascript

Hàm alert() có nhiệm vụ in một thông báo popup, nó có một tham số truyền vào và tham số này chính là nội dung ta muốn thông báo với người dùng.

ham-alert-trong-javascript.png

Ví dụ: Viết chương trình khi click vào button thì xuất hiện một thông báo.

XEM DEMO

Bài này ta đã làm ở ví dụ bài tìm hiểu javascript là gì rồi nên mình sẽ viết lại nó hơi khác chút xíu, đó là mình sẽ dùng sự kiện onclickthay vì dùng hàm addEventListener như ở bài trước nhé.

 

1
2
3
4
5
6
7
<html>
  <head>
  </head
>
  <body>
    <inputtype="butto
<inputtype="button"onclick="alert('Xin
chào các bạn')"value="Click Me"/>
  </body>
</html>

Các bạn thấy mình đã code sử dụng hàm alert() trong sự kiện onclick đấy, đây là cách code inline mà chúng ta đã học ở bài trước rồi nhé.

2.2. Hàm confirm() trong javascript

Hàm confirm() cũng sẽ xuất hiện một thông báo popup nhưng nó có thêm hai sự lựa chọn là Yes và No, nếu người dùng chọn Yes thì nó trả về TRUE và ngược lại nếu chọn NO thì nó sẽ trả về FALSE. Nó cũng có một tham số truyền vào và tham số này chính là nội dung thông báo.

ham-confirm-trong-javascript.png

Ví dụ: Viết chương trình hiển thị thông báo  xác nhận và dùng hàm alert() để hiển thị kết quả người dùng chọn.

XEM DEMO

Vì chúng ta chưa học hàm nên mình sẽ không viết dài dòng mà sẽ viết chạy trực tiếp khi load trang, nghĩa là khi trang web được chạy lên thì thông báo nó hiển thị luôn chứ không cần phải click vào button nhé.

 

1
2
3
4
5
6
7
8
9
10
11
<html>
    <head>
        <title></title>
        <script language="javascript">
            confirm("Do you like freetuts.net");
        </script>
    </head>
    <body>
        
    </body>
</html>

 

2.3. Hàm prompt() trong javascript

Hàm prompt() dùng  để lấy thông tin từ người dùng, gồm có hai tham số truyền vào là nội dung thông báo và giá trị ban đầu. Nếu người dùng không nhập vào thì giá trị nó sẽ trả về là NULL

ham-prompt-trong-javascript.png

Ví dụ: Viết chương trìn lấy thông tin tên của người dùng

XEM DEMO

Ta sẽ khai báo biến lưu trữ kết quả và kết hợp sử dụng hàm alert() để thông báo kết quả người dùng nhập vào.

 

1
2
3
4
5
6
7
8
9
10
11
12
<html>
    <head>
        <title></title>
        <script language="javascript">
            var t = prompt("Nhập tên của bạn", '');
            alert(t);
        </script>
    </head>
    <body>
        
    </body>
</html>

Nguồn: freetuts.net

Share.

About Author

Leave A Reply