Tuần 2. HTML, CSS, JS cơ bản

Mục lục

  1. Giới thiệu

  2. Phần 1: HTML - Nền tảng của trang web

  3. Phần 2: CSS - Trang trí và bố cục

  4. Phần 3: JavaScript - Tương tác và chức năng

Giới thiệu

Tài liệu này được viết một cách tối ưu hóa các kiến thức nhằm góm gọn tài nguyên học tập. Lưu ý nếu ban theo backend thì hãy năm chắc 50% còn nếu theo frontend hãy nắm chắc 100% và hơn thế nữa nhé.

Dối với CSS, thực tế thì bình thường lúc mới học a không thế nhớ hết đống này trong 1 ngày 1 tuần thậm chí 1 tháng được, mà anh sử dụng phương pháp vừa học vừa làm. Mỗi lần làm lã mở sẵn 1 tab tài liệu lên và ví dụ: nếu cần căn giữa thì như nào, chuyển qua tab tài liệu và search. Cứ vậy cứ vậy và sẽ nhớ hết. Sau này các bạn nào theo Frontend or Fullstack thì sẽ nên học tailwindcss code khá nhanh và gọn.

Mục tiêu của tài liệu:

  • Giúp các bạn nắm vững kiến thức cơ bản về HTML, CSS và JavaScript

  • Hướng dẫn cách xây dựng trang web từ đơn giản đến phức tạp

  • Cung cấp các ví dụ thực tế và bài tập thực hành

  • Tạo nền tảng vững chắc cho việc học lập trình web nâng cao

Đối tượng sử dụng:

  • Học sinh THCS và THPT

  • Người mới bắt đầu học lập trình web

  • Giáo viên dạy tin học và công nghệ thông tin

Phần 1: HTML - Nền tảng của trang web

1.1. HTML là gì?

HTML (HyperText Markup Language) là ngôn ngữ đánh dấu siêu văn bản, được sử dụng để tạo cấu trúc và nội dung cho trang web. HTML không phải là ngôn ngữ lập trình mà là ngôn ngữ đánh dấu, sử dụng các thẻ (tags) để định nghĩa các phần tử trên trang web.

Đặc điểm của HTML:

  • Sử dụng các thẻ để định nghĩa cấu trúc trang web

  • Được trình duyệt web đọc và hiển thị

  • Tệp HTML có phần mở rộng là .html hoặc .htm

  • Là nền tảng của mọi trang web

1.2. Cấu trúc cơ bản của một trang HTML

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Tiêu đề trang web</title>
</head>
<body>
    <h1>Đây là tiêu đề lớn</h1>
    <p>Đây là một đoạn văn bản.</p>
</body>
</html>

Giải thích:

  • <!DOCTYPE html>: Khai báo kiểu tài liệu HTML5

  • <html>: Thẻ gốc chứa toàn bộ trang web

  • <head>: Chứa thông tin về trang web (metadata)

  • <meta charset="UTF-8">: Khai báo bộ ký tự Unicode

  • <title>: Tiêu đề hiển thị trên tab trình duyệt

  • <body>: Chứa nội dung hiển thị trên trang web

  • <h1>: Tiêu đề cấp 1 (lớn nhất)

  • <p>: Đoạn văn bản

1.3. Các thẻ HTML cơ bản

1.3.1. Thẻ tiêu đề

<h1>Tiêu đề cấp 1</h1>
<h2>Tiêu đề cấp 2</h2>
<h3>Tiêu đề cấp 3</h3>
<h4>Tiêu đề cấp 4</h4>
<h5>Tiêu đề cấp 5</h5>
<h6>Tiêu đề cấp 6</h6>

1.3.2. Thẻ văn bản

<p>Đây là một đoạn văn bản.</p>
<pre>Văn bản định dạng sẵn
    giữ    khoảng   cách
    và    xuống dòng</pre>
<br> <!-- Xuống dòng -->
<hr> <!-- Đường kẻ ngang -->

1.3.3. Thẻ định dạng văn bản

<b>Chữ đậm</b> hoặc <strong>Chữ đậm (với ngữ nghĩa quan trọng)</strong>
<i>Chữ nghiêng</i> hoặc <em>Chữ nghiêng (với ngữ nghĩa nhấn mạnh)</em>
<u>Chữ gạch chân</u>
<s>Chữ gạch ngang</s>
<mark>Chữ được đánh dấu</mark>
<sub>Chữ dưới</sub> và <sup>Chữ trên</sup>
<code>Đoạn mã</code>

1.3.4. Danh sách

<!-- Danh sách không thứ tự -->
<ul>
    <li>Mục 1</li>
    <li>Mục 2</li>
    <li>Mục 3</li>
</ul>

<!-- Danh sách có thứ tự -->
<ol>
    <li>Bước 1</li>
    <li>Bước 2</li>
    <li>Bước 3</li>
</ol>

<!-- Danh sách định nghĩa -->
<dl>
    <dt>HTML</dt>
    <dd>Ngôn ngữ đánh dấu siêu văn bản</dd>
    <dt>CSS</dt>
    <dd>Ngôn ngữ tạo kiểu cho trang web</dd>
</dl>

1.3.5. Liên kết và hình ảnh

<!-- Liên kết -->
<a href="https://www.example.com">Đây là một liên kết</a>
<a href="trang2.html">Liên kết nội bộ</a>
<a href="#section1">Liên kết đến phần trong trang</a>

<!-- Hình ảnh -->
<img src="image.jpg" alt="Mô tả hình ảnh" width="300" height="200">

1.3.6. Bảng

<table border="1">
    <thead>
        <tr>
            <th>STT</th>
            <th>Họ tên</th>
            <th>Điểm</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>Nguyễn Văn A</td>
            <td>8.5</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Trần Thị B</td>
            <td>9.0</td>
        </tr>
    </tbody>
</table>

1.3.7. Biểu mẫu

<form action="/submit" method="post">
    <label for="name">Họ tên:</label>
    <input type="text" id="name" name="name" required><br><br>
    
    <label for="email">Email:</label>
    <input type="email" id="email" name="email" required><br><br>
    
    <label for="gender">Giới tính:</label>
    <select id="gender" name="gender">
        <option value="male">Nam</option>
        <option value="female">Nữ</option>
        <option value="other">Khác</option>
    </select><br><br>
    
    <label>Sở thích:</label><br>
    <input type="checkbox" id="hobby1" name="hobby" value="reading">
    <label for="hobby1">Đọc sách</label><br>
    <input type="checkbox" id="hobby2" name="hobby" value="sports">
    <label for="hobby2">Thể thao</label><br><br>
    
    <label for="message">Lời nhắn:</label><br>
    <textarea id="message" name="message" rows="4" cols="50"></textarea><br><br>
    
    <input type="submit" value="Gửi">
    <input type="reset" value="Xóa">
</form>

1.3.8. Các thẻ phân chia và ngữ nghĩa

<div>Khối chung để nhóm các phần tử</div>
<span>Phần tử inline để định dạng một phần văn bản</span>

<!-- Thẻ ngữ nghĩa trong HTML5 -->
<header>Phần đầu trang</header>
<nav>Thanh điều hướng</nav>
<main>Nội dung chính</main>
<section>Một phần nội dung</section>
<article>Bài viết độc lập</article>
<aside>Nội dung phụ</aside>
<footer>Cuối trang</footer>

1.4. Thuộc tính HTML

Thuộc tính cung cấp thông tin bổ sung cho các thẻ HTML. Chúng luôn được đặt trong thẻ mở và thường có dạng name="value".

Thuộc tính phổ biến:

  • id: Định danh duy nhất cho phần tử

  • class: Phân loại phần tử (có thể dùng chung cho nhiều phần tử)

  • style: Định dạng inline CSS

  • title: Thông tin mô tả khi di chuột qua phần tử

  • lang: Ngôn ngữ của nội dung

  • data-*: Lưu trữ dữ liệu tùy chỉnh

1.5. HTML5 và các tính năng mới

HTML5 là phiên bản mới nhất của HTML với nhiều tính năng mới:

  • Thẻ ngữ nghĩa: <header>, <footer>, <nav>, <section>, <article>, <aside>, <main>

  • Đa phương tiện: <audio>, <video>, <canvas>

  • Đồ họa: <svg>

  • Biểu mẫu cải tiến: Nhiều loại input mới (date, email, range, search, tel, url, ...)

  • API mới: Geolocation, Web Storage, Web Workers, ...

Ví dụ về video:

<video width="320" height="240" controls>
    <source src="movie.mp4" type="video/mp4">
    <source src="movie.ogg" type="video/ogg">
    Trình duyệt của bạn không hỗ trợ video tag.
</video>

Ví dụ về audio:

<audio controls>
    <source src="audio.mp3" type="audio/mpeg">
    <source src="audio.ogg" type="audio/ogg">
    Trình duyệt của bạn không hỗ trợ audio tag.
</audio>

1.6. Bài tập thực hành HTML

  1. Tạo một trang web cá nhân đơn giản với thông tin về bản thân

  2. Tạo một trang web giới thiệu về trường học

  3. Tạo một trang web danh bạ với bảng thông tin liên hệ

  4. Tạo một biểu mẫu đăng ký tham gia câu lạc bộ

  5. Tạo một trang web giới thiệu sản phẩm với hình ảnh và mô tả

Phần 2: CSS - Trang trí và bố cục

2.1. CSS là gì?

CSS (Cascading Style Sheets) là ngôn ngữ tạo kiểu mô tả cách hiển thị các phần tử HTML trên trang web. CSS giúp tách biệt nội dung (HTML) và hình thức trình bày (CSS).

Đặc điểm của CSS:

  • Điều khiển giao diện và bố cục trang web

  • Áp dụng cho nhiều trang web cùng lúc

  • Tiết kiệm thời gian và công sức

  • Dễ dàng bảo trì và cập nhật

2.2. Cách thêm CSS vào trang HTML

Có 3 cách để thêm CSS vào trang HTML:

2.2.1. CSS Inline

<p style="color: red; font-size: 20px;">Đây là đoạn văn bản có màu đỏ và cỡ chữ 20px.</p>

2.2.2. CSS Internal (Nội bộ)

<!DOCTYPE html>
<html>
<head>
    <style>
        p {
            color: blue;
            font-size: 16px;
        }
        h1 {
            color: green;
            text-align: center;
        }
    </style>
</head>
<body>
    <h1>Tiêu đề trang web</h1>
    <p>Đây là đoạn văn bản.</p>
</body>
</html>

2.2.3. CSS External (Bên ngoài)

File HTML (index.html):

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1>Tiêu đề trang web</h1>
    <p>Đây là đoạn văn bản.</p>
</body>
</html>

File CSS (styles.css):

p {
    color: blue;
    font-size: 16px;
}
h1 {
    color: green;
    text-align: center;
}

2.3. Cú pháp CSS

selector {
    property1: value1;
    property2: value2;
    /* Chú thích CSS */
}

Giải thích:

  • selector: Chọn phần tử HTML muốn định dạng

  • property: Thuộc tính muốn thay đổi

  • value: Giá trị của thuộc tính

2.4. Bộ chọn (Selectors) trong CSS

2.4.1. Bộ chọn cơ bản

/* Chọn tất cả các phần tử */
* {
    margin: 0;
    padding: 0;
}

/* Chọn theo tên thẻ */
p {
    color: blue;
}

/* Chọn theo ID */
#header {
    background-color: black;
    color: white;
}

/* Chọn theo class */
.important {
    font-weight: bold;
}

/* Chọn nhiều phần tử */
h1, h2, h3 {
    color: green;
}

2.4.2. Bộ chọn kết hợp

/* Chọn phần tử con */
div > p {
    color: red;
}

/* Chọn phần tử con cháu */
div p {
    font-size: 14px;
}

/* Chọn phần tử anh em liền kề */
h1 + p {
    font-weight: bold;
}

/* Chọn tất cả phần tử anh em */
h1 ~ p {
    font-style: italic;
}

2.4.3. Bộ chọn theo thuộc tính

/* Chọn theo thuộc tính */
[type] {
    border: 1px solid gray;
}

/* Chọn theo giá trị thuộc tính */
[type="text"] {
    background-color: lightyellow;
}

/* Chọn theo giá trị thuộc tính chứa từ */
[class*="btn"] {
    cursor: pointer;
}

/* Chọn theo giá trị thuộc tính bắt đầu bằng */
[href^="https"] {
    color: green;
}

/* Chọn theo giá trị thuộc tính kết thúc bằng */
[src$=".jpg"] {
    border: 2px solid black;
}

2.4.4. Bộ chọn giả (Pseudo-selectors)

/* Trạng thái phần tử */
a:hover {
    color: red;
}

a:visited {
    color: purple;
}

input:focus {
    border-color: blue;
}

/* Vị trí phần tử */
li:first-child {
    font-weight: bold;
}

li:last-child {
    font-style: italic;
}

li:nth-child(odd) {
    background-color: #f2f2f2;
}

/* Phần tử giả */
p::first-line {
    font-variant: small-caps;
}

p::first-letter {
    font-size: 2em;
}

p::before {
    content: "♥ ";
}

p::after {
    content: " ♥";
}

2.5. Thuộc tính CSS quan trọng

2.5.1. Văn bản

p {
    color: #333;               /* Màu chữ */
    font-family: Arial, sans-serif; /* Font chữ */
    font-size: 16px;           /* Cỡ chữ */
    font-weight: bold;         /* Độ đậm */
    font-style: italic;        /* Kiểu chữ */
    text-align: center;        /* Căn lề văn bản */
    text-decoration: underline; /* Gạch chân */
    text-transform: uppercase; /* Chuyển đổi chữ */
    line-height: 1.5;          /* Khoảng cách dòng */
    letter-spacing: 1px;       /* Khoảng cách ký tự */
    word-spacing: 2px;         /* Khoảng cách từ */
    text-shadow: 1px 1px 2px black; /* Đổ bóng chữ */
}

2.5.2. Màu sắc và nền

div {
    color: red;                /* Màu chữ */
    background-color: #f0f0f0; /* Màu nền */
    background-image: url('background.jpg'); /* Hình nền */
    background-repeat: no-repeat; /* Lặp lại hình nền */
    background-position: center; /* Vị trí hình nền */
    background-size: cover;    /* Kích thước hình nền */
    background: linear-gradient(to right, #ff0000, #0000ff); /* Gradient */
    opacity: 0.8;              /* Độ trong suốt */
}

2.5.3. Box Model

div {
    width: 300px;              /* Chiều rộng */
    height: 200px;             /* Chiều cao */
    padding: 20px;             /* Khoảng cách trong */
    margin: 10px;              /* Khoảng cách ngoài */
    border: 2px solid black;   /* Viền */
    box-sizing: border-box;    /* Bao gồm padding và border trong kích thước */
}

2.5.4. Bố cục

div {
    display: block;            /* Kiểu hiển thị */
    position: relative;        /* Vị trí */
    top: 10px;                 /* Khoảng cách từ trên */
    right: 20px;               /* Khoảng cách từ phải */
    bottom: 30px;              /* Khoảng cách từ dưới */
    left: 40px;                /* Khoảng cách từ trái */
    float: left;               /* Trôi về bên trái */
    clear: both;               /* Xóa hiệu ứng float */
    z-index: 1;                /* Vị trí theo trục Z */
    overflow: hidden;          /* Xử lý nội dung tràn */
}

2.5.5. Flexbox

.container {
    display: flex;             /* Kích hoạt flexbox */
    flex-direction: row;       /* Hướng của flex container */
    flex-wrap: wrap;           /* Cho phép xuống dòng */
    justify-content: center;   /* Căn giữa theo chiều ngang */
    align-items: center;       /* Căn giữa theo chiều dọc */
    gap: 10px;                 /* Khoảng cách giữa các phần tử */
}

.item {
    flex: 1;                   /* Tỷ lệ phần tử con */
    order: 2;                  /* Thứ tự hiển thị */
    align-self: flex-start;    /* Căn chỉnh riêng */
}

2.5.6. Grid

.container {
    display: grid;             /* Kích hoạt grid */
    grid-template-columns: 1fr 2fr 1fr; /* Cột */
    grid-template-rows: 100px 200px;    /* Hàng */
    grid-gap: 10px;            /* Khoảng cách */
    grid-template-areas:       /* Vùng bố cục */
        "header header header"
        "sidebar content content"
        "footer footer footer";
}

.header {
    grid-area: header;         /* Chỉ định vùng */
}

.sidebar {
    grid-area: sidebar;
}

.content {
    grid-area: content;
}

.footer {
    grid-area: footer;
}

2.5.7. Chuyển đổi và hoạt ảnh

.element {
    /* Chuyển đổi */
    transform: rotate(45deg) scale(1.5) translate(10px, 20px);
    
    /* Hiệu ứng chuyển đổi */
    transition: all 0.3s ease;
    
    /* Hoạt ảnh */
    animation: slide 2s ease infinite;
}

/* Định nghĩa hoạt ảnh */
@keyframes slide {
    0% { transform: translateX(0); }
    50% { transform: translateX(100px); }
    100% { transform: translateX(0); }
}

2.5.8. Đáp ứng (Responsive)

/* Media Query */
@media screen and (max-width: 768px) {
    body {
        font-size: 14px;
    }
    .container {
        flex-direction: column;
    }
}

/* Đơn vị tương đối */
.responsive-text {
    font-size: 1.2em;    /* Tỷ lệ với font-size của phần tử cha */
    width: 50%;          /* Tỷ lệ với chiều rộng phần tử cha */
    margin: 1rem;        /* Tỷ lệ với font-size của phần tử gốc */
    padding: 2vw;        /* Tỷ lệ với chiều rộng khung nhìn */
}

2.6. Độ ưu tiên trong CSS

CSS có một hệ thống độ ưu tiên để xác định phong cách nào sẽ được áp dụng khi có nhiều quy tắc xung đột:

  1. !important - Cao nhất

  2. Inline style (trong thuộc tính style của thẻ HTML)

  3. ID (#id)

  4. Class (.class), thuộc tính ([attr]) và pseudo-class (:hover)

  5. Element (thẻ HTML) và pseudo-element (::before)

Ví dụ:

p {
    color: blue;                  /* Ưu tiên thấp */
}
.text {
    color: green;                 /* Ưu tiên trung bình */
}
#unique {
    color: red;                   /* Ưu tiên cao */
}
p {
    color: purple !important;     /* Ưu tiên cao nhất */
}

2.7. CSS Preprocessors

CSS Preprocessors như Sass, Less, và Stylus mở rộng khả năng của CSS với các tính năng như biến, lồng ghép, mixin, và hàm.

Ví dụ về Sass:

// Biến
$primary-color: #3498db;
$padding: 10px;

// Lồng ghép
nav {
    background-color: $primary-color;
    
    ul {
        margin: 0;
        padding: $padding;
        
        li {
            display: inline-block;
            
            a {
                color: white;
                
                &:hover {
                    text-decoration: underline;
                }
            }
        }
    }
}

// Mixin
@mixin border-radius($radius) {
    -webkit-border-radius: $radius;
    -moz-border-radius: $radius;
    border-radius: $radius;
}

.button {
    @include border-radius(5px);
    padding: $padding;
    background-color: $primary-color;
}

2.8. Bài tập thực hành CSS

  1. Tạo một trang web sử dụng CSS để tạo bố cục 2 cột

  2. Tạo menu điều hướng ngang và dọc

  3. Tạo một hình ảnh gallery với hiệu ứng hover

  4. Thiết kế một trang web đáp ứng sử dụng media queries

  5. Thiết kế lại trang web cá nhân sử dụng Flexbox hoặc Grid

Phần 3: JavaScript - Tương tác và chức năng

3.1. JavaScript là gì?

JavaScript là ngôn ngữ lập trình của web, cho phép tạo các trang web động và tương tác. JavaScript chạy trên trình duyệt của người dùng và có thể thay đổi nội dung HTML, CSS, xử lý sự kiện, và giao tiếp với máy chủ.

Đặc điểm của JavaScript:

  • Chạy phía client (trình duyệt)

  • Tương tác với DOM (Document Object Model)

  • Xử lý sự kiện người dùng

  • Tạo hiệu ứng và hoạt ảnh

  • Giao tiếp với máy chủ qua AJAX

3.2. Cách thêm JavaScript vào trang HTML

Có 3 cách để thêm JavaScript vào trang HTML:

3.2.1. JavaScript Inline

<button onclick="alert('Xin chào!')">Nhấn vào đây</button>

3.2.2. JavaScript Internal (Nội bộ)

<!DOCTYPE html>
<html>
<head>
    <script>
        function sayHello() {
            alert('Xin chào!');
        }
    </script>
</head>
<body>
    <button onclick="sayHello()">Nhấn vào đây</button>
</body>
</html>

3.2.3. JavaScript External (Bên ngoài)

File HTML (index.html):

<!DOCTYPE html>
<html>
<head>
    <script src="script.js"></script>
</head>
<body>
    <button onclick="sayHello()">Nhấn vào đây</button>
</body>
</html>

File JavaScript (script.js):

function sayHello() {
    alert('Xin chào!');
}

3.3. Cú pháp JavaScript cơ bản

🧠 1. CÚ PHÁP CƠ BẢN JAVASCRIPT

🟡 Khai báo biến

JavaScript

C

Ghi chú

let x = 10;

int x = 10;

let dùng cho biến có thể đổi

const pi = 3.14;

const float pi = 3.14;

const tương tự trong cả hai

var y = 5;

int y = 5;

var cũ, nên dùng let hoặc const

🟡 Câu điều kiện

if (x > 10) {
  console.log("Lớn hơn 10");
} else {
  console.log("Không");
}

Tương đương trong C:

if (x > 10) {
  printf("Lớn hơn 10\n");
} else {
  printf("Không\n");
}

🟡 Vòng lặp

for (let i = 0; i < 5; i++) {
  console.log(i);
}

Tương đương trong C:

for (int i = 0; i < 5; i++) {
  printf("%d\n", i);
}

🟡 Hàm

function add(a, b) {
  return a + b;
}

Tương đương trong C:

int add(int a, int b) {
  return a + b;
}

JS không cần khai báo kiểu dữ liệu cho tham số và biến.

DOM (Document Object Model) là mô hình cho phép JavaScript truy cập và thao tác với nội dung HTML/CSS trên trang web.

🧩 1. Truy cập phần tử HTML

🔹 getElementById(id)

Tìm phần tử theo id.

<h1 id="title">Xin chào</h1>

let title = document.getElementById("title");

🔹 getElementsByClassName(className)

Trả về HTMLCollection chứa các phần tử có class đó.

<p class="item">A</p>
<p class="item">B</p>

let items = document.getElementsByClassName("item");

🔹 getElementsByTagName(tag)

Tìm theo tên thẻ HTML.

let paragraphs = document.getElementsByTagName("p");

🔹 querySelector(selector)

Trả về phần tử đầu tiên khớp với CSS selector.

let firstItem = document.querySelector(".item");

🔹 querySelectorAll(selector)

Trả về NodeList của tất cả các phần tử khớp với selector.

let allItems = document.querySelectorAll(".item");

🧾 2. Thay đổi nội dung & thuộc tính

🔸 innerText / textContent

title.innerText = "Chào bạn!";

🔸 innerHTML – Thay đổi hoặc chèn HTML bên trong

title.innerHTML = "<span style='color:red'>Chào!</span>";

🔸 setAttribute() / getAttribute()

link.setAttribute("href", "https://example.com");
let href = link.getAttribute("href");

🔸 style – Thay đổi CSS trực tiếp

title.style.color = "blue";
title.style.fontSize = "24px";

🔧 3. Tạo, chèn, xóa phần tử

🔸 Tạo phần tử

let newDiv = document.createElement("div");
newDiv.innerText = "Nội dung mới";

🔸 Thêm phần tử vào DOM

document.body.appendChild(newDiv);           // Thêm vào cuối body
parentElement.appendChild(newDiv);           // Thêm vào một phần tử cụ thể

🔸 Chèn trước phần tử khác

parent.insertBefore(newDiv, existingElement);

🔸 Xóa phần tử

element.remove(); // hoặc
parent.removeChild(child);

🎯 4. Xử lý sự kiện (Events)

🔹 Thêm sự kiện với addEventListener

<button id="btn">Bấm tôi</button>

let btn = document.getElementById("btn");

btn.addEventListener("click", function () {
  alert("Bạn vừa bấm nút!");
});

🔹 Một số sự kiện phổ biến

Sự kiện

Ý nghĩa

click

Khi người dùng click

input

Khi nhập dữ liệu

change

Khi giá trị thay đổi

mouseover

Khi rê chuột vào

keydown

Khi nhấn phím

🧠 5. Ví dụ thực tế

<input id="nameInput" placeholder="Nhập tên...">
<button id="sayHiBtn">Chào</button>
<p id="result"></p>

let input = document.getElementById("nameInput");
let button = document.getElementById("sayHiBtn");
let result = document.getElementById("result");

button.addEventListener("click", function () {
  let name = input.value;
  result.innerText = `Xin chào, ${name}!`;
});

✅ 6. Lưu ý

  • getElementsBy... trả về HTMLCollection → cần for...of hoặc Array.from() để xử lý mảng.

  • querySelectorAll trả về NodeList → cũng có thể dùng forEach.

Phần 4. Dự án để báo cáo

Hãy làm 1 trang web đơn giản tương tự như trang web sau đây
https://microsoftedge.github.io/Demos/demo-to-do/

Cuối tuần sau chúng ta lại tiếp tục báo cáo về sản phẩm của bản thân, hạn chế sử dụng AI để code chỉ dùng để hỏi (Ví dụ hỏi như căn giữa chữ kiểu gì thì được).

Một số ý tưởng mn có thể tham khảo: Một page ể thêm bớt sinh viên chỉnh sửa sinh viên, page thêm bớt sản phẩm chỉnh sửa sản phẩm,….

Nhớ up code lên github trước lúc báo cáo

Updated on
Ngoài lề. OTA Firmware
Tuần 3. Ở bên link a Thắng