Tài liệu giảng dạy HTML/CSS/JS: Position và Z-index
Module 1: Giới thiệu về Position trong HTML
Bài học 1: Hiểu về Position
Position là một thuộc tính trong CSS cho phép bạn điều chỉnh vị trí của một phần tử trên trang web. Có các giá trị position cơ bản sau:
Static (Mặc định): Phần tử sẽ được hiển thị theo thứ tự trong luồng của tài liệu HTML. Thuộc tính top, right, bottom và left không có hiệu lực trên phần tử có giá trị position là static.
Relative: Phần tử được di chuyển từ vị trí ban đầu tương đối so với vị trí mặc định của nó. Bằng cách sử dụng thuộc tính top, right, bottom và left, bạn có thể điều chỉnh vị trí của phần tử theo hướng tương đối.
Absolute: Phần tử được di chuyển đến vị trí cố định trong phạm vi phần tử cha gần nhất có giá trị position là relative, absolute hoặc fixed. Phần tử này sẽ không chiếm diện tích trong luồng của tài liệu.
Bài học 2: Relative và Absolute Position
Để sử dụng relative và absolute position, bạn cần biết cách áp dụng thuộc tính position trong CSS.
Để đặt một phần tử với relative position:
.selector {
position: relative;
}
Để đặt một phần tử với absolute position:
.selector {
position: absolute;
top: 0;
left: 0;
}
Module 2: Tùy chỉnh Vị trí
Bài học 3: Sử dụng Top, Right, Bottom, và Left
Thuộc tính top, right, bottom và left được sử dụng để tùy chỉnh vị trí của phần tử khi sử dụng relative hoặc absolute position.
Ví dụ, để di chuyển một phần tử relative position 10px từ phía trên và 20px từ phía trái:
.selector {
position: relative;
top: 10px;
left: 20px;
}
Ví dụ, để đặt một phần tử absolute position 20px từ phía trên, 30px từ phía phải, 40px từ phía dưới và 50px từ phía trái:
.selector {
position: absolute;
top: 20px;
right: 30px;
bottom: 40px;
left: 50px;
}
Module 3: Z-index và Layering
Bài học 4: Hiểu về Z-index
Z-index là một thuộc tính trong CSS được sử dụng để xác định thứ tự các phần tử trên trang web khi chúng chồng lên nhau. Các phần tử có giá trị z-index lớn hơn sẽ hiển thị trên các phần tử có giá trị z-index nhỏ hơn.
Giá trị z-index có thể là số nguyên hoặc từ khoá như "auto" hoặc "inherit".
Ví dụ, đặt z-index của một phần tử là 2:
.selector {
z-index: 2;
}
Lưu ý: Thuộc tính z-index chỉ có hiệu lực đối với các phần tử có giá trị position là relative, absolute hoặc fixed.
Position Fixed và Tạo Menu với Position Fixed
Position Fixed là một giá trị của thuộc tính position trong CSS, cho phép bạn gắn một phần tử vào một vị trí cố định trên trình duyệt. Điều này có nghĩa là phần tử sẽ không di chuyển khi người dùng cuộn trang web.
Để tạo một menu sử dụng Position Fixed, bạn có thể làm như sau:
HTML:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<header>
<nav class="menu">
<ul>
<li><a href="#">Trang chủ</a></li>
<li><a href="#">Giới thiệu</a></li>
<li><a href="#">Dịch vụ</a></li>
<li><a href="#">Liên hệ</a></li>
</ul>
</nav>
</header>
<div class="content">
<!-- Nội dung trang web -->
</div>
</body>
</html>
CSS (styles.css):
/* Thiết lập menu với position fixed */
.menu {
position: fixed;
top: 0;
left: 0;
width: 100%;
background-color: #f2f2f2;
}
.menu ul {
list-style: none;
margin: 0;
padding: 0;
}
.menu ul li {
display: inline-block;
}
.menu ul li a {
display: block;
padding: 10px 20px;
text-decoration: none;
color: #333;
}
/* Thiết lập nội dung trang web */
.content {
margin-top: 50px; /* Để tránh menu che phần nội dung */
}
Trong ví dụ trên, chúng ta sử dụng position fixed để gắn menu vào vị trí cố định trên cùng của trình duyệt. Các thuộc tính top và left được đặt là 0 để đảm bảo menu nằm ở góc trên bên trái của trình duyệt. Thuộc tính width được đặt là 100% để menu chiếm toàn bộ chiều ngang của trình duyệt.
Các phần tử trong menu được căn chỉnh bằng cách sử dụng display: inline-block và padding để tạo khoảng cách giữa các mục menu.
Để tránh menu che phần nội dung của trang web, chúng ta đặt margin-top cho phần nội dung (class "content") bằng giá trị lớn hơn chiều cao của menu.
Bằng cách sử dụng Position Fixed, menu sẽ luôn được hiển thị ở trên cùng của trình duyệt ngay cả khi người dùng cuộn trang web, tạo ra một trải nghiệm điều hướng thuận tiện cho người dùng.
Javascript Object
Một đối tượng là một thực thể trong lập trình được sử dụng để biểu diễn một đối tượng thực tế hoặc một khái niệm trừu tượng. Đối tượng bao gồm các thuộc tính và phương thức để mô tả đặc điểm và hành vi của đối tượng đó.
Trong lập trình hướng đối tượng, đối tượng là một thực thể độc lập có các thuộc tính và hành vi riêng. Thuộc tính đại diện cho trạng thái của đối tượng, trong khi phương thức đại diện cho các hành động mà đối tượng có thể thực hiện.
Các thuộc tính của một đối tượng có thể là các biến lưu trữ giá trị của các loại dữ liệu khác nhau, chẳng hạn như chuỗi, số, mảng hoặc đối tượng khác. Các phương thức là các hàm được liên kết với đối tượng, cho phép đối tượng thực hiện các hành động cụ thể.
Ví dụ, nếu chúng ta xem xét đối tượng "Car" (Xe hơi), có thể có các thuộc tính như màu sắc, tốc độ, và hãng sản xuất. Ngoài ra, nó có thể có các phương thức như "khởi động", "dừng", và "tăng tốc". Đối tượng "Car" là một thực thể cụ thể trong lập trình, và các thuộc tính và phương thức của nó mô tả các đặc điểm và hành vi của một chiếc xe hơi.
Đối tượng cung cấp một cách tiện lợi để tổ chức mã và dữ liệu trong lập trình. Chúng cho phép mô hình hóa thế giới thực và tạo ra các khối xây dựng tái sử dụng, linh hoạt và dễ bảo trì trong mã nguồn.
Một đối tượng JavaScript là một tập hợp các cặp khóa-giá trị, trong đó mỗi giá trị có thể là bất kỳ kiểu dữ liệu nào, bao gồm cả các đối tượng khác. Đối tượng là một trong những kiểu dữ liệu cơ bản trong JavaScript và được sử dụng rộng rãi để biểu diễn và xử lý dữ liệu.
Dưới đây là một ví dụ về một đối tượng JavaScript:
const person = {
name: "John Doe",
age: 25,
email: "johndoe@example.com",
address: {
street: "123 Main St",
city: "New York",
country: "USA"
},
hobbies: ["đọc sách", "bơi lội", "lập trình"],
greet: function() {
console.log("Xin chào, tôi tên là " + this.name);
}
};
Trong ví dụ trên, person là một đối tượng chứa các thuộc tính như name, age, email, address, hobbies, và greet. Các thuộc tính được định nghĩa bằng cách sử dụng cú pháp khóa-giá trị, trong đó khóa là một chuỗi (hoặc một ký hiệu trong ES6+) và giá trị có thể là bất kỳ biểu thức JavaScript hợp lệ nào.
Các thuộc tính có thể lưu trữ các loại giá trị khác nhau. Trong ví dụ trên, thuộc tính name lưu trữ một chuỗi, thuộc tính age lưu trữ một số, thuộc tính address lưu trữ một đối tượng khác, thuộc tính hobbies lưu trữ một mảng, và thuộc tính greet lưu trữ một hàm.
Bạn có thể truy cập các thuộc tính của một đối tượng bằng cú pháp dấu chấm hoặc cú pháp dấu ngoặc vuông. Ví dụ:
console.log(person.name); // Kết quả: John Doe
console.log(person["age"]); // Kết quả: 25
Bạn cũng có thể sửa đổi hoặc thêm các thuộc tính mới vào một đối tượng bằng toán tử gán. Ví dụ:
person.age = 30;
person["email"] = "newemail@example.com";
person.gender = "male";
Các đối tượng trong JavaScript là có thể thay đổi, có nghĩa là bạn có thể sửa đổi các thuộc tính của chúng ngay cả sau khi chúng đã được tạo.
Đối tượng JavaScript là linh hoạt và mạnh mẽ, và chúng được sử dụng rộng rãi trong lập trình JavaScript để mô hình và xử lý dữ liệu.
Mảng đối tượng
Mảng đối tượng trong JavaScript là một mảng chứa các đối tượng là các phần tử của mảng. Mỗi phần tử trong mảng là một đối tượng độc lập có các thuộc tính và phương thức riêng của nó. Dưới đây là một ví dụ về một mảng đối tượng trong JavaScript:
const students = [
{ id: 1, name: "John", age: 20 },
{ id: 2, name: "Jane", age: 22 },
{ id: 3, name: "Sam", age: 21 }
];
Trong ví dụ trên, students là một mảng chứa ba đối tượng sinh viên. Mỗi đối tượng sinh viên có các thuộc tính như id, name, và age.
Để thao tác với mảng đối tượng, bạn có thể sử dụng các phương thức và toán tử mảng có sẵn trong JavaScript. Dưới đây là một số thao tác thường được sử dụng:
Thêm phần tử vào mảng:
Sử dụng phương thức push() để thêm một phần tử mới vào cuối mảng.
const newStudent = { id: 4, name: "Alex", age: 19 };
students.push(newStudent);
```
Truy cập phần tử trong mảng:
Sử dụng chỉ số để truy cập phần tử trong mảng. Chỉ số bắt đầu từ 0.
console.log(students[0]); // Kết quả: { id: 1, name: "John", age: 20 }
```
Sửa đổi phần tử trong mảng:
Sử dụng chỉ số để truy cập phần tử và thay đổi giá trị của các thuộc tính.
students[1].name = "Janet";
students[1].age = 23;
```
Xoá phần tử khỏi mảng:
Sử dụng phương thức splice() để xoá một hoặc nhiều phần tử khỏi mảng.
students.splice(2, 1); // Xoá phần tử thứ 2 khỏi mảng
```
Lặp qua các phần tử trong mảng:
Sử dụng vòng lặp for hoặc forEach() để duyệt qua từng phần tử trong mảng.
for (let i = 0; i < students.length; i++) {
console.log(students[i]);
}
students.forEach(function(student) {
console.log(student);
});
```
Lưu ý rằng các thao tác trên mảng được thực hiện trực tiếp trên mảng gốc. Điều này có nghĩa là mọi thay đổi sẽ ảnh hưởng trực tiếp đến mảng ban đầu students.
Trong JavaScript, có một số thao tác được sử dụng để cắt và kết hợp mảng. Dưới đây là mô tả về hai thao tác này:
Cắt mảng (Array Slice):
Phương thức slice() được sử dụng để cắt một phần của mảng và trả về một mảng mới chứa phần đã cắt.
Cú pháp: array.slice(start, end)
start là chỉ số của phần tử đầu tiên sẽ được cắt (bao gồm).
end là chỉ số của phần tử cuối cùng sẽ được cắt (không bao gồm).
Nếu chỉ cung cấp start, mảng sẽ được cắt từ start đến hết mảng.
Ví dụ:
const numbers = [1, 2, 3, 4, 5];
const slicedArray = numbers.slice(1, 4);
console.log(slicedArray); // Kết quả: [2, 3, 4]
Kết hợp mảng (Array Join):
Phương thức join() được sử dụng để kết hợp các phần tử trong một mảng thành một chuỗi.
Cú pháp: array.join(separator)
separator là một chuỗi tùy chọn được sử dụng để ngăn cách giữa các phần tử trong chuỗi kết quả. Giá trị mặc định của separator là dấu phẩy (,).
Ví dụ:
const fruits = ["Apple", "Banana", "Orange"];
const joinedString = fruits.join(", ");
console.log(joinedString); // Kết quả: "Apple, Banana, Orange"
Lưu ý rằng cả hai thao tác này không làm thay đổi mảng gốc, mà trả về một mảng mới hoặc một chuỗi mới. Do đó, bạn cần gán kết quả của các thao tác này cho một biến mới nếu bạn muốn sử dụng nó sau đó.