Bảng tra cứu 📌

<h1>My website</h1>

Tiêu đề lớn nhất. Chỉ một lần trên mỗi trang — giống như tên sách.

<h2>Chapter</h2>

Tiêu đề nhỏ hơn. Có từ <h1> đến <h6> (nhỏ nhất).

<p>Hi, this is text.</p>

Một đoạn văn bản thường.

<strong>important</strong>

Làm chữ in đậm.

<em>interesting</em>

Chữ nghiêng (xiên).

<a href="https://example.com">Click</a>

Một liên kết. href chứa địa chỉ nơi nó dẫn đến.

<img src="dog.jpg" alt="My dog">

Một hình ảnh. src = tệp hình, alt = mô tả phòng khi hình không tải được.

<ul>
  <li>first</li>
  <li>second</li>
</ul>

Danh sách dấu chấm. Mỗi mục là một <li>.

<ol>
  <li>step 1</li>
  <li>step 2</li>
</ol>

Danh sách đánh số — trình duyệt tự thêm số.

<div class="card">...</div>

Một hộp để nhóm những thứ thuộc về nhau. Bạn tự đặt tên class.

<!-- note to myself -->

Ghi chú. Trình duyệt bỏ qua — chỉ dành cho bạn thôi.

h1 {
  color: red;
}

Mọi tiêu đề <h1> sẽ có màu đỏ.

.card {
  background: yellow;
}

Mọi thứ có class="card" sẽ có nền vàng. Dấu chấm nghĩa là "tìm class này".

p {
  font-size: 20px;
}

Cỡ chữ của đoạn văn. Số càng lớn = chữ càng to.

body {
  font-family: Arial;
}

Phông chữ cho cả trang.

.card {
  padding: 16px;
}

Khoảng cách bên trong — padding giữa nội dung và cạnh hộp.

.card {
  margin: 16px;
}

Khoảng cách bên ngoài — khoảng cách với thứ xung quanh.

.card {
  border: 2px solid black;
}

Viền: độ dày, kiểu đường và màu.

.card {
  border-radius: 12px;
}

Góc bo tròn. Số càng lớn = càng tròn.

.menu {
  display: flex;
  gap: 10px;
}

Các phần tử bên trong xếp cạnh nhau với khoảng cách 10px. Mẹo hay cho menu!

img {
  width: 200px;
}

Chiều rộng hình. Chiều cao tự co giãn để hình không bị méo.

const name = 'Kate';

Một biến — hộp có nhãn để bạn cất thứ gì đó vào.

let points = 0;
points = points + 1;

let là hộp bạn có thể thay đổi. Ở đây ta cộng thêm một điểm.

alert('Hi!');

Hiện hộp thông báo. Hay để thử nghiệm lần đầu.

console.log('it works');

In thông báo ra console (F12) — cửa sổ bí mật cho lập trình viên.

document.querySelector('h1')

Tìm <h1> đầu tiên trên trang để bạn thao tác với nó.

element.textContent = 'New text';

Đổi chữ bên trong phần tử bạn vừa tìm.

element.addEventListener('click', () => {
  alert('Clicked!');
});

Khi ai đó bấm vào phần tử, phần bên trong sẽ chạy.

if (points > 10) {
  alert('You won!');
}

Điều kiện: mã bên trong chỉ chạy nếu phần trong ngoặc đúng.

element.classList.toggle("dark");

Thêm class nếu chưa có — và xóa nếu đã có. Dark mode hoạt động y hệt vậy.

const r = await fetch(address);

Gửi yêu cầu tới API và chờ (await) câu trả lời.

const data = await r.json();

Biến phản hồi thành đối tượng bạn có thể dùng.

data.current_weather.temperature

Lấy giá trị từ đối tượng bằng dấu chấm — giống mọi đối tượng khác.

await fetch('/ask', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ question }),
});

POST = gửi dữ liệu TỚI máy chủ. body chứa đối tượng đã chuyển thành văn bản.

{ "city": "Prague", "temperature": 21 }

JSON — ngôn ngữ chung của API. Văn bản trong dấu ngoặc kép, số thì không.

JSON.stringify(obj)

Biến đối tượng thành văn bản JSON (trước khi gửi).

JSON.parse(text)

Biến văn bản JSON trở lại thành đối tượng (sau khi nhận).

process.env.AI_KEY

Trên máy chủ: đọc khóa bí mật từ tệp .env. Khóa không bao giờ được để trong trình duyệt!

cd my-website

Vào thư mục my-website (cd = change directory).

ls

Liệt kê nội dung thư mục hiện tại (trên Windows: dir).

node server.js

Chạy tệp server.js bằng Node.js.

npm install

Tải tất cả gói mà dự án cần.

git status

Hiện những gì đã thay đổi kể từ lần lưu trước.

git add .

Chuẩn bị mọi thay đổi để lưu (dấu chấm nghĩa là "tất cả").

git commit -m "Added a menu"

Lưu thay đổi vào lịch sử kèm ghi chú bạn đã làm gì.

git push

Gửi thay đổi đã lưu lên GitHub.