Chuyên mục Học nhanh Javascript cùng Minacode

Khái niệm Đối tượng và Sự kiện trong Javascript - #9

Đăng bởi: Minacode|Cập nhật:17-01-2024

Ok anh em, Tiếp theo với chủ đề học nhanh Javascript cùng Minacode. Bài viết này mình sẽ cùng các bạn làm quen với khái niệm Đối tượng và Sự kiện trong Javascript nhé! Nào Let's go thôi.

Đối tượng và khái niệm thuộc tính, phương thức trong JavaScript

Nếu liên tưởng đến trong cuộc sống thực tế, một chiếc ô tô là một đối tượng. Nó có các thuộc tính như trọng lượng, màu sắc và có các phương thức như khởi động và dừng.

Rõ ràng tất cả các ô tô đều có cùng thuộc tính , nhưng giá trị thuộc tính khác nhau giữa các ô tô.

Tương tự như vậy tất cả chúng đều có những phương thức giống nhau , nhưng các phương pháp này được thực hiện vào những thời điểm khác nhau .

Các thuộc tính của đối tượng được viết dưới dạng cặp tên:giá trị (tên và giá trị được phân tách bằng dấu hai chấm) và tất cả nằm trong cặp dấu ngoặc nhọn{}.

Chúng ta thường khai báo các đối tượng bằng từ khóa const .

const car = {type:"Vinfast", model:"500", color:"white"};

Dấu cách và ngắt dòng không quan trọng. Một định nghĩa đối tượng có thể trải dài trên nhiều dòng:

const person = {
  firstName: "Ngô",
  lastName: "Nguyên",
  age: 30,
  eyeColor: "blue"
};

Truy cập thuộc tính của đối tượng

Bạn có thể truy cập các thuộc tính đối tượng theo hai cách:

objectName.propertyName

sẽ là:

person.lastName;

hoặc

objectName["propertyName"]

sẽ là:

person["lastName"];

Các phương thức được lưu trữ trong các thuộc tính dưới dạng định nghĩa hàm.

const person = {
  firstName: "Ngô",
  lastName: "Nguyên",
  fullName : function() {
    return this.firstName + " " + this.lastName;
  }
};

Trong ví dụ trên, từ khóa this đang đề cập đến đối tượng person:

+ this.firstName có nghĩa là thuộc tính firstName của person.
+ this.lastName có nghĩa là thuộc tính LastName của person.

Trong JavaScript, từ khóa this đề cập đến một đối tượng. Nó không phải là một biến nên chúng ta không thể thay đổi giá trị của this.

Truy cập các phương thức đối tượng

Bạn truy cập một phương thức đối tượng với cú pháp sau:

objectName.methodName()

sẽ là:

name = person.fullName();

Bạn nhớ phải có toán tử () phía sau nhé!

Khi một biến JavaScript được khai báo bằng từ khóa " new", biến đó được tạo dưới dạng một đối tượng:

x = new person();

Sự kiện- Events trong Javascript

Sự kiện Html là "những điều" xảy ra với các phần tử hay thẻ Html. Chúng ta sẽ dùng JavaScript để "phản ứng" với những sự kiện này.

Events

Dưới đây là một số ví dụ về các sự kiện trong Html:

+ Một trang web Html đã tải xong
+ Trường nhập thông tin Html đã được thay đổi
+ Một nút Html đã được người dùng nhấp vào

Thông thường, khi một sự kiện xảy ra, bạn có thể muốn làm điều gì đó với nó. JavaScript cho phép bạn thực thi mã khi phát hiện sự kiện. Html cho phép chúng ta thêm các thuộc tính để xử lý sự kiện với mã JavaScript vào các phần tử hay thẻ của nó.

<element event='JavaScript'>;//Với dấu ngoặc đơn
<element event="JavaScript">;//Với dấu ngoặc kép

Trong ví dụ dưới đây, một thuộc tính onclick có chứa Javascript được thêm vào một thẻ <button>:

<button onclick="document.getElementById('demo').innerHTML = Date()">Ấn vào để xem ngày</button>

Trong ví dụ trên, mã JavaScript đã thay đổi nội dung của phần tử có id="demo".

Trong ví dụ tiếp theo, mã JavaScript sẽ thay đổi nội dung của chính nó (sử dụng this.innerHTML):

<button onclick="this.innerHTML = Date()">Ấn vào để xem ngày</button>

Thông thường mã JavaScript sẽ dài. Nên thường chúng tà thường định nghĩa hàm và gọi hàm khi cần thiết. ví dụ:

<button onclick="displayDate()">Ấn vào để xem ngàybutton>

Code đầy đủ sẽ là:

<!DOCTYPE html>
<html>
<body>
<h1>Minacode|JavaScript</h1>
<h2>Thêm thuộc tính onlick vào thẻ button</h2>
<button onclick="displayDate()">Xem ngày?</button>

<script>
function displayDate() {
 document.getElementById("demo").innerHTML = Date();
}
</script>

<p id="demo"></p>

</body>
</html>

Một số sự kiện phổ biến như là:

Có rất nhiều sự kiện khác nữa nhưng mình sẽ đi chi tiết về các sự kiện này trong các bài viết sau nhé!

>>Còn tiếp nhé>>