Javascript – Bài học làm quen (P2)

A. Biến (Variable)

1. Giá trị và kiểu (Value & Type)

Kiểu dữ liệu là một trong những yếu tố nền tảng và quan trọng nhất của một ngôn ngữ lập trình, 6 kiểu có sẵn của Javascript:

  • null
  • undefined
  • boolean
  • number
  • string
  • Symbol (Được thêm vào ở ES6)

Ghi chú: Javascript không phân biệt giá trị integer và floating-point. Tất cả giá trị số trong Javascript là floating-point và theo định dạng 64-bit floating-point của IEEE 754.

2. Biến

Như các ngôn ngữ lập trình khác thì trong Javascript cũng có biến. Nói cho dễ hiểu thì biến giống như một cái hộp để chứa dữ liệu. Và những cái hộp này đều được đặt tên để phân biệt với nhau.

Ví dụ

<script type="text/javascript">
     var name = "Ali";
     var money;
     money = 2000.50;
</script>

Ghi chú: chỉ dùng keyword var khi khai báo hay khởi tạo giá trị. Không cần khai báo lại biến ở mỗi lần sử dụng.Ngoài ra Javascript là ngôn ngữ dynamic type. Nghĩa là một biến có thể chứa giá trị của kiểu nào cũng đc. Đối ngược với những ngôn ngữ static type (VD: C, Java), bạn phải khai báo kiểu giá trị của biến. Trong dynamic type, trình thông dịch sẽ gán kiểu cho biến dựa trên giá trị của biến vào thời điểm thực thi.

B. Toán tử (Operator)

Toán tử là gì?

Xét ví dụ, với biểu thức 4 + 5, thì 4 và 5 là toán hạng (operand) và + là toán tử. Javascript hỗ trợ các toán tử sau:

  • Toán tử số học (Arithmetic Operators)
  • Toán tử so sánh (Comparison Operators)
  • Toán tử luận lý (Logical Operators)
  • Toán tử gán (Assignment Operators)
  • Toán tử điều kiệu (Conditional/Ternary Operators)

C. Câu lệnh điều kiện

Trong lập trình, có rất nhiều trường hợp kiểu như khi thỏa mãn một điều kiện nào đó thì ta sẽ làm việc này ngược lại thì làm việc kia (hoặc không làm). Trong những trường hợp đó chúng ta cần dùng câu lệnh điều kiện.

  • Lệnh if-else
  • Lệnh switch-case

D. Câu lệnh lặp

Trong lập trình, chúng ta có thể gặp tình huống cần thực hiện một hành động nhiều lần. Khi đó chúng ta sẽ sử dụng câu lệnh lặp để giảm số dòng code cần viết xuống.

  • Vòng lặp while
  • Vòng lặp do…while
  • Vòng lặp for

E. Các lệnh điều khiển vòng lặp

1. Câu lệnh break

Từng được nhắc đến ở phần lệnh switch-case. Câu lệnh break được sử dụng để kết thúc vòng lặp (thoát khỏi block {}).

2. Câu lệnh continue

Lệnh continue dùng để bỏ qua phần code còn lại trong block {} (bên dưới continue) để chuyển tới lượt lặp tiếp theo

F. Event trong Javascript

Event là gì?

Khi người dùng hay trình duyệt tương tác với trang sẽ tạo ra event. Javascript cung cấp những phương pháp để quản lý các event này.

Ví dụ, khi trang được load, nó sẽ tạo ra một event. Khi người dùng click vào một button, nó cũng sẽ tạo ra một event. Và chúng ta cần phải làm gì khi có event xảy ra?

Một số ví dụ về event trong Javascript

onclick

Xảy ra khi người dùng click chuột trái vào 1 đối tượng trên trang.

Ví dụ

<html>
 <head>
   <script type="text/javascript">
     function sayHello() {
       alert("Hello World");
     }
   </script>
 </head>
 <body>
   <p>Click the following button and see result</p>
   <form>
     <input type="button" onclick="sayHello()" value="Say Hello" />
   </form>
 </body>
</html>

Kết quả

javascript

onsubmit

Xảy ra khi bạn submit form

Ví dụ

<html>
  <head>
    <script type="text/javascript">
      function validation() {
        alert("Form is ok");
        return false;
      }
    </script>
  </head>
  <body>
    <form action="" onsubmit="return validation();">
      <input type="submit" value="Submit" />
    </form>
  </body>
</html>

Kết quả

onmouseover và onmouseout

Sử dụng khi người dùng đưa chuột vào đối tượng và đưa chuột ra khỏi đối tượng.

<html>
<head>
  <script type="text/javascript">
    function over() {
      console.log("Mouse Over");
    }
    function out() {
      console.log("Mouse Out");
    }
 </script>
<head>
<body>
  <p>Bring your mouse inside the division to see the result:</p>
  <div onmouseover="over()" onmouseout="out()">
    <h2> This is inside the division </h2>
  </div>
</body>
</html>

Kết quả

Danh sách tổng hợp event

Tham khảo trên w3school

G. Dialog Boxes trong Javascript

1. Alert Dialog Box

Alert dialog box thưởng được dùng để gửi thông báo đến người dùng. Ngoài ra lập trình viên cũng hay dùng để debug code.

Ví dụ

<html>
<head>
  <script type="text/javascript">
    function warn() {
      alert("This is a warning message!");
      document.write("This is a warning message!");
    }
  </script>
 
</head>
<body>
  <p>Click the following button to see the result: </p>
  <input type="button" value="Click Me" onclick="warn();” />
</body>
</html>

Kết quả

2. Confirmation Dialog Box

Được dùng để lấy xác nhận từ người dùng.

Confirmation dialog box có 2 nút nhấn: OK và Cancel. Nếu người dùng nhấn OK, thì confirm() sẽ trả true. Nếu người dùng nhấn OK thì prompt() sẽ trả về false.

Ví dụ

<html>
<head>
  <script type="text/javascript">
    function getConfirmation() {
      var retVal = confirm("Do you want to continue ?");
      if (retVal == true) {
        document.write("User wants to continue!");
        return true;
      } else {
        document.write("User does not want to continue!");
        return false;
      }
    }
  </script>
</head>
<body>
  <p>Click the following button to see the result: </p>
  <input type="button" value="Click Me" onclick="getConfirmation();" />
</body>
</html>

Kết quả

3. Prompt Dialog Box

Được dùng để lấy dữ liệu từ người dùng.

Prompt dialog box có 2 nút nhấn: OK và Cancel. Nếu người dùng nhấn OK, thì prompt() sẽ trả về nội dung người dùng đã nhập. Nếu người dùng nhấn OK thì prompt() sẽ trả về null.

Ví dụ

<html>
<head>
  <script type="text/javascript">
    function getValue(){
      var retVal = prompt("Enter your name : ", "your name here");
      document.write("You have entered : " + retVal);
    }
  </script>
</head>

<body>
  <p>Click the following button to see the result: </p>
  <input type="button" value="Click Me" onclick="getValue();" >
</body>
</html>

Kết quả

<< Xem lại: Javascript – Bài học làm quen (P1)

Bình luận