Cách xây dựng ứng dụng web đầu tiên của bạn – Một ứng dụng ghi chú đơn giản và bộ đếm từ
Việc bắt đầu lập trình có vẻ đáng sợ, với vô số ngôn ngữ, framework và phương pháp cần xem xét. Thậm chí có thể cảm thấy dễ dàng hơn nếu giao phó mọi thứ cho một AI. Hãy yên tâm: lập trình cho web có thể đơn giản, thú vị, và—quan trọng nhất—hoàn toàn miễn phí!
Xem thêm: Hướng dẫn 4 thủ thuật Paste Special giúp bạn tiết kiệm thời gian trong Microsoft Excel
1. Ứng dụng bạn sẽ xây dựng
Theo dõi hướng dẫn này, bạn sẽ xây dựng một ứng dụng web đơn giản để lưu trữ các ghi chú văn bản và đếm số ký tự cũng như số từ trong đó.
Ứng dụng sẽ lưu trữ dữ liệu liên tục, vì vậy nó sẽ ghi nhớ văn bản ngay cả khi bạn làm mới trang hoặc mở lại nó. Điều này có nghĩa là đây là một cách thuận tiện để giữ bất kỳ văn bản nào mà bạn có thể muốn tham khảo lại sau này, chẳng hạn như địa chỉ, URL, v.v.
Nó cũng đếm số ký tự và số từ, đây là một phần giới thiệu hữu ích về cách làm việc với các chuỗi (văn bản). Tất nhiên, ứng dụng này rất đơn giản: đó chính là mục đích. Nhưng, với hướng dẫn này, bạn sẽ học được các khái niệm cơ bản đằng sau việc xây dựng một ứng dụng web, và thế giới sẽ rộng mở với bạn.
2. Cách bạn sẽ xây dựng nó
Mặc dù các ứng dụng web khác nhau rất nhiều, nhưng chúng thường bao gồm ba công nghệ cốt lõi: HTML, CSS và JavaScript. Những công nghệ này có vai trò quan trọng mà bạn nên hiểu rõ trước khi bắt đầu.
HTML (HyperText Markup Language): Cho phép bạn xác định cấu trúc nội dung của mình. Sử dụng nó, bạn có thể đánh dấu văn bản theo ý nghĩa của nó, chỉ ra xem đó là đoạn văn, tiêu đề hay một mục trong danh sách, chẳng hạn.
CSS (Cascading Style Sheets): Cho phép bạn tạo kiểu cho nội dung của mình. Sử dụng ngôn ngữ này, bạn có thể tô màu một đoạn văn nhất định thành màu xanh lá cây, làm cho tất cả các liên kết của bạn in đậm, hoặc định vị một thanh bên cạnh bài viết chính của bạn.
JavaScript: Sử dụng ngôn ngữ lập trình này, bạn có thể thêm chức năng cho trang web của mình. Bạn có thể làm cho các nút hiển thị hoặc ẩn các phần của tài liệu khi được nhấp, hoặc triển khai toàn bộ một trình soạn thảo văn bản hay một trò chơi điện tử.
Trang web.dev (được viết bởi các thành viên của nhóm Chrome) và MDN (Mozilla Developer Network) là hai nguồn thông tin tuyệt vời về các công nghệ web cốt lõi.
3. Cấu trúc ứng dụng
Ứng dụng bạn sẽ xây dựng sẽ bao gồm ba tệp đơn giản: index.html, styles.css và script.js.
Không có yêu cầu đặc biệt nào để chạy ứng dụng, tất cả những gì bạn cần là một trình duyệt web. Không có chức năng backend, vì vậy bạn không cần ngôn ngữ kịch bản như PHP hoặc một máy chủ web cục bộ. Sau khi hoàn thành, bạn có thể mở tệp index.html trực tiếp trong trình duyệt của mình và mọi thứ sẽ hoạt động.
Điều quan trọng cần lưu ý là ứng dụng này lưu văn bản của bạn mà không ghi vào một tệp cụ thể trên đĩa, vì JavaScript không thể truy cập hệ thống tệp. Nó thực hiện điều này bằng cách sử dụng Web Storage API, một giải pháp thay thế mạnh mẽ cho cookie.
4. Cách xây dựng ứng dụng ghi chú
Tạo ba tệp sau trong cùng một thư mục, sau đó mở tệp index.html trong trình duyệt web. Ngoài ra, bạn có thể tải xuống các tệp từ kho lưu trữ GitHub này.
4.1. Xây dựng cấu trúc bằng HTML
Tệp index.html xác định cấu trúc nội dung của ứng dụng bằng HTML. Nó bao gồm các tham chiếu đến hai tệp còn lại để trình duyệt có thể kết hợp chúng lại thành sản phẩm hoàn chỉnh.
Giống như tất cả các tài liệu HTML, cấu trúc cấp cao nhất bao gồm phần head chứa siêu dữ liệu và phần body chứa nội dung thực tế sẽ xuất hiện trên trang:
<!DOCTYPE html> <html> <head>
...
</head>
<body>
...
</body>
</html>Siêu dữ liệu trong phần head rất ngắn gọn, chỉ có tiêu đề trang (hiển thị trong thanh tiêu đề của trình duyệt) và tham chiếu đến tệp styles.css:
<title>Text</title>
<link rel="stylesheet" href="styles.css" />Phần body phức tạp hơn, nhưng chỉ có một vài phần quan trọng:
<div id="counter">
words: <span id="words">0</span>
/
characters: <span id="chars">0</span>
</div>
<textarea id="text" autofocus="1"></textarea>
<script src="script.js"></script>Phần tử div (“division” – phân chia) chứa số lượng từ và ký tự của ứng dụng. Nó sẽ nằm ở đầu ứng dụng web và cập nhật bất cứ khi nào văn bản thay đổi.
Lưu ý các thuộc tính id, chúng rất quan trọng đối với hoạt động. Giá trị của một id phải là duy nhất, để ứng dụng có thể sử dụng nó để xác định một phần tử cụ thể. Điều này giúp chúng ta tạo kiểu cho các phần tử này và cũng nhắm mục tiêu chúng khi chúng ta thêm chức năng.
Phần tử textarea là một phần tử biểu mẫu dựng sẵn cho phép bạn gõ văn bản thuần túy trong trình duyệt. Với thuộc tính autofocus, nó sẽ sẵn sàng cho việc gõ ngay khi trang tải. Cuối cùng, trang tham chiếu tệp javascript, script.js.
Tại thời điểm này, bạn có thể mở tệp index.html trong trình duyệt. Nó sẽ chưa làm được gì ngay bây giờ, và thậm chí sẽ không hiển thị đúng, nhưng việc kiểm tra ứng dụng ở mỗi giai đoạn là hữu ích để đảm bảo các yếu tố cơ bản đang hoạt động như bạn mong đợi.
4.2. Làm cho mọi thứ trông đẹp hơn bằng CSS
CSS cho phép bạn thay đổi kiểu của các phần trên trang web của mình, bằng cách nhắm mục tiêu các phần đó và chỉ định giá trị cho các thuộc tính như font-size (cỡ chữ) và background-color (màu nền). Ứng dụng mẫu này không cần nhiều thiết kế tinh chỉnh vì giao diện của nó quá cơ bản. Tuy nhiên, chúng ta có thể làm sạch một chút bằng một vài kiểu dáng:
Đầu tiên, tạo kiểu cho body để xác định bố cục tổng thể:
body {
margin: 0;
padding: 0;
display: grid;
min-height: 100vh;
grid-template-rows: min-content 1fr;
}CSS này sử dụng bố cục lưới (grid layout) để định vị số lượng từ và ký tự trong một hàng hẹp phía trên textarea. Thuộc tính grid-template-rows chỉ định rằng hàng đếm phải ngắn nhất có thể (min-content) và textarea nên lấp đầy không gian còn lại (1fr).
Hàng đếm (counter row) có một số kiểu cơ bản để phân biệt nó với phần văn bản còn lại, chủ yếu thông qua nền của nó:
#counter {
font-family: sans-serif;
background-color: #f7f7f7;
text-align: center;
width: 100%;
padding: 0.5em 0;
}Cuối cùng, textarea được tạo kiểu để hiển thị văn bản dễ đọc với đủ không gian để “thở”. Đường ngăn cách giữa số đếm và văn bản thực chất là đường viền trên cùng của textarea này.
textarea {
width: 100%;
height: 100%;
font-size: 16pt;
padding: 1em;
box-sizing: border-box;
outline: 0;
border: none;
border-top: 1px solid #999;
} 
4.3. Thêm chức năng bằng JavaScript
Với cấu trúc và kiểu dáng đã được thiết lập, bạn đã sẵn sàng để thêm chức năng: đoạn code làm cho ứng dụng đơn giản này thực sự làm được điều gì đó.
Trước khi bạn bắt đầu viết ngay cả đoạn code đơn giản nhất, điều hợp lý là phải hiểu bạn muốn nó làm gì. Trong trường hợp này, chỉ có một vài yêu cầu chung:
Lưu văn bản đã nhập và tải lại khi cần.
Cập nhật số lượng ký tự và từ để cung cấp số liệu thống kê trực tiếp.
Cả hai yêu cầu đều liên quan đến việc cập nhật các phần tử trong tài liệu. Vì vậy, script bắt đầu bằng cách lấy các tham chiếu đến các nút này bằng cách sử dụng phương thức getElementById:
const words = document.getElementById("words");
const chars = document.getElementById("chars");
const textarea = document.getElementById("text");Lưu ý rằng words, chars, và text là các ID của các phần tử tương ứng trong tài liệu, được gán trong tệp HTML bằng thuộc tính id.
Tiếp theo, chúng ta cần ứng dụng phản ứng khi văn bản thay đổi:
textarea.addEventListener("input", function(ev) {
localStorage.setItem("text", ev.target.value);
update_counts(ev.target.value);
});Một trình lắng nghe sự kiện (event listener) là một hàm mà JavaScript sẽ chạy tự động khi một sự kiện nhất định xảy ra. Trong trường hợp này, chúng ta đính kèm một trình lắng nghe vào nút textarea sẽ chạy khi sự kiện “input” xảy ra. Điều này thực sự là khi ai đó tương tác với textarea.
Tiếp theo, chúng ta sử dụng Web Storage API để lưu nội dung hiện tại của textarea, lấy từ ev.target.value. Trong cấu trúc này, ev là một đối tượng đại diện cho sự kiện đã kích hoạt trình lắng nghe, ev.target là nút đã nhận sự kiện và ev.target.value là văn bản của textarea đó.
Phương thức setItem nhận hai tham số: một tên khóa để liên kết với dữ liệu và dữ liệu thực tế để lưu trữ.
Sau đó, chúng ta gọi update_counts(), chuyển cùng một văn bản cho nó. Chúng ta sẽ giải thích hàm đó trong giây lát.
Bây giờ chúng ta đang lưu văn bản, chúng ta sẽ muốn tải lại nó khi ứng dụng được mở hoặc làm mới. Chúng ta có thể xử lý điều đó bằng cách sử dụng một trình lắng nghe khác:
window.addEventListener("load", function(ev) {
var text = localStorage.getItem("text");
textarea.value = text;
update_counts(text);
});Trình lắng nghe này xử lý sự kiện load xảy ra trên đối tượng window, một đại diện cấp cao nhất của chính cửa sổ trình duyệt. Khi cửa sổ tải, lệnh gọi đến getItem() trả về giá trị được lưu trữ của văn bản của chúng ta từ bộ nhớ cục bộ (local storage). Đoạn code này sau đó đặt giá trị của textarea thành văn bản đã tải và, giống như trình lắng nghe trước đó, gọi update_counts() với văn bản này.
Công việc còn lại diễn ra trong hàm update_counts() trông như thế này:
function update_counts(text) {
chars.innerHTML = text.length;
words.innerHTML = text.split(' ').length;
}Không giống như textarea, văn bản thông thường không có thuộc tính value, vì vậy chúng ta đặt thuộc tính innerHTML thay thế. Thuộc tính length của một chuỗi là một thuộc tính chỉ đọc đơn giản cung cấp cho chúng ta số lượng ký tự.
Lệnh text.split(' ') chia chuỗi tại các ký tự khoảng trắng, trả về kết quả dưới dạng một mảng các chuỗi. Giống như chuỗi, mảng có thuộc tính length cung cấp cho chúng ta số lượng mục trong một mảng.
Tuy nhiên, nếu bạn thử đoạn code này, bạn có thể nhận thấy một vài lỗi:
Nó sẽ không đếm một từ đứng một mình trên một dòng một cách chính xác, vì không có ký tự khoảng trắng ở hai bên của nó.
Khi không có văn bản nào cả, nó sẽ báo cáo là một từ do cách
splithoạt động.
Để khắc phục vấn đề đầu tiên, bạn có thể tách trên một biểu thức chính quy (\s có nghĩa là “một ký tự khoảng trắng”) thay vì khoảng trắng. Để khắc phục vấn đề thứ hai, hãy lọc ra các chuỗi trống khỏi kết quả:
words.innerHTML = text.split(/\s/).filter(function(n) { return n != ''; }).length;Nếu bạn chưa hiểu hoàn toàn dòng đó, hãy kiểm tra các trang MDN cho split và filter.
Bạn có thể xây dựng nhiều ứng dụng web hữu ích chỉ với một vài tệp. Bạn cũng có thể mở rộng ứng dụng ghi chú đơn giản này để thêm nhiều chức năng hơn. Ví dụ: bạn có thể sử dụng thuộc tính window.location để truy xuất URL hiện tại và hỗ trợ nhiều ghi chú bằng cách thay đổi tên bạn chuyển cho localStorage.setItem.
5. Kết luận
Việc tự xây dựng ứng dụng web đầu tiên, dù chỉ là một ứng dụng ghi chú đơn giản hay bộ đếm từ, chính là bước khởi đầu hoàn hảo để bạn làm quen với quy trình phát triển web thực tế. Thông qua dự án nhỏ này, bạn đã hiểu rõ hơn về cách kết hợp HTML, CSS và JavaScript, cách xử lý dữ liệu người dùng cũng như cách tạo ra trải nghiệm tương tác cơ bản. Điều quan trọng không nằm ở độ phức tạp của ứng dụng, mà ở việc bạn đã tự tay tạo ra một sản phẩm hoàn chỉnh — một nền tảng vững chắc để bước tiếp vào các dự án lớn hơn.
Xem thêm: Hướng dẫn 4 thủ thuật Paste Special giúp bạn tiết kiệm thời gian trong Microsoft Excel
Nếu bạn muốn trang bị một chiếc laptop mạnh mẽ, màn hình lập trình sắc nét hay các thiết bị công nghệ phục vụ học tập và phát triển web tốt hơn, hãy ghé COHOTECH — cửa hàng uy tín cung cấp sản phẩm chính hãng cùng đội ngũ tư vấn tận tâm. Đừng quên để lại bình luận chia sẻ ứng dụng đầu tay của bạn hoặc những gì bạn muốn xây dựng tiếp theo, và nhớ chia sẻ bài viết để truyền cảm hứng cho nhiều người khác bắt đầu hành trình lập trình của họ nhé!
214 Tân Phước, Phường 6, Quận 10, TPHCM