JAVASCRIPT
"Tôi không thực sự kiểm soát được Javascript. Tôi không thể bắt đầu làm việc với các thành phần từ đầu. Đầu óc tôi như trống rỗng khi bắt đầu với một trang Javascript trắng. Tối đoán là tôi không thể tư duy được như một lập trình viên bình thường" 
Nghe quen chứ? Thực sự thì bạn không hề cô đơn đâu. Rất nhiều người chọn Javascript làm ngôn ngữ lập trình đầu tiên đã và đang gặp những vấn đề tương tự. Ngay cả những lập trình viên đã có kinh nghiệm với những ngôn ngữ khác cũng gặp những vấn đề như vậy với Javascript. Thế nên thay vì nói rằng "Tôi không thể tư duy như một lập trình viên", nó phải là "Tôi không thể nghĩ được gì với Javascript". Nhưng vấn đề sẽ được giải quyết khi hôm nay, bạn học cách tư duy như một lập trình viên thực thụ.
_Bạn hoàn toàn có thể tư duy như một lập trình viên_
Bạn đã từng thử những bài toán đơn giản với Javascript trên freeCodeCamp, Code Academy hoặc Code Wars? Nếu bạn đã từng, bạn rõ ràng đã có thể tư duy như một lập trình viên! Vậy lí do tại sao đầu óc bạn lại trống rỗng khi đối mặt với Javascript thì có vẻ lí do ở những khối code lớn, rằng bạn sợ khi viết Javascript nó sẽ không chạy, bạn sợ lỗi có thể xảy ra. Và có thể bạn đơn giản là không biết bắt đầu như thế nào. Để vượt qua những vấn đề trong code, bạn có thể thử làm theo 4 bước sau:
- Chia nhỏ vấn đề thành những vấn đề nhỏ hơn.
- Tìm giải pháp cho những vấn đề nhỏ đó.
- Lắp ghép các mảnh nhỏ lại một cách mạch lạc và rõ ràng.
- Refactor code và cải tiến.
Cùng nhìn kỹ hơn từng bước từng bước bạn nên làm nhé.
_Bước 1: Chia nhỏ vấn đề thành những vấn đề nhỏ hơn_
Chúng ta sẽ bắt đầu với câu hỏi quen thuộc: "Làm sao để nhét cả 1 con voi vào tủ lạnh?" Phần lớn mọi người đưa ra câu trả lời sau: "Mở tủ lạnh - nhét con voi vào - đóng tủ lạnh. Vậy là xong"
Câu trả lời này là ví dụ tốt nhất về việc vì sao bạn mắc kẹt ở một file Javascript trống. Nó đã bỏ qua nhiều bước. Nếu bạn suy nghĩ một cách logic về câu hỏi, bạn sẽ thấy rất nhiều vấn đề còn chưa được trả lời như là:
- Chiếc tủ lạnh mà chúng ta đang nói đến là thứ gì?
- Loại voi mà chúng ta đang nói đến là loại gì?
- Nếu con voi quá lớn so với chiếc tủ lạnh, chúng ta sẽ làm gì?
- Chúng ta tìm thấy con voi ở đâu khi bắt đầu?
- Chúng ta sẽ làm thế nào để chuyển con voi vào trong chiếc tủ lạnh?
Khi code, bạn sẽ cần trả lời mọi câu hỏi nhỏ mà bạn có thể nghĩ đến. Đó là lí do tại sao khi bắt đầu code bạn phải chia nhỏ vấn đề thành những mảnh nhỏ hơn để giải quyết.
_Bước 2: Tìm giải pháp cho những vấn đề nhỏ hơn_
Bước thứ 2 là bạn cần tìm giải pháp cho mỗi vấn đề nhỏ bạn gặp phải. Ở đây, quan trọng là bạn cần làm chi tiết hết mức có thể.
- Chiếc tủ lạnh nào? _ Chiếc tủ lạnh đặt trong căn bếp của bạn.
- Con voi loại nào? _ Một con voi rừng châu Phi.
- Nếu con voi quá lớn thì sao? _ Lấy một khẩu súng thu nhỏ mà thu nhỏ con voi lại.
- Vậy chúng ta tìm con voi ở đâu? _ Châu Phi.
- Làm sao để chúng ta vận chuyển con voi? _ Nhét nó vào túi của bạn sau khi đã thu nhỏ rồi bắt máy bay trở về nhà.
Nhiều khi, bạn cần đào sâu thêm vài lớp mới tìm được câu trả lời mà bạn cần. Trong ví dụ trên, chúng ta có thể đào sâu thêm ở câu trả lời thứ 3 và thứ 4 kiểu như:
- Chúng ta sẽ tìm thấy khẩu súng thu nhỏ ở đâu? _ Mượn nó từ gã bác học điên ở gần nhà bạn.
- Chúng ta có thể tìm thấy con voi ở chỗ nào tại châu Phi? Addo Elephant Part ở Nam Phi.
Khi bạn đã có câu trả lời cho câu hỏi nhỏ của bạn, hãy lắp ghép những mảnh đó lại để giải quyết vấn đề lớn. Như vậy mọi chuyện sẽ dần trở nên rõ ràng hơn.
_Bước 3: Lắp ghép những giải pháp lại một cách mạch lạc_
Vậy là với câu hỏi "Làm sao để nhét cả con voi vào tủ lạnh", bạn có thể làm theo những bước sau:
- Mượn khẩu súng thu nhỏ từ nhà gã bác học điên.
- Bay đến Nam Mỹ.
- Đi đến công viên Addo Elephant Park
- Tìm một con voi trong công viên.
- Bắn con voi bằng khẩu súng thu nhỏ.
- Đút con voi đã thu nhỏ vào túi bạn.
- Di chuyển về sân bay.
- Bay về nước.
- Di chuyển về nhà bạn.
- Nhét con voi vào trong tủ lạnh.
=>> Vấn đề đã được giải quyết. Nghe có vẻ thực sự thú vị đấy, nhưng có vẻ bạn sẽ không nhét được một con voi vào tủ lạnh với Javascript đâu.
_Hãy thử qua một ví dụ thực tế_
Giả sử rằng bạn muốn tạo ra một button, khi bấm vào nó sẽ hiển thị ra sidebar.
Bước 1: chia nhỏ vấn đề ra nào. Khi chia nhỏ bài toán ra những mảnh nhỏ hơn, đây là một số vấn đề bạn có thể gặp phải:
- Markup của button này là gì?
- Button đó nên nhìn ra sao?
- Chuyện gì xảy ra khi nút được bấm 1 lần?
- Chuyện gì xảy ra khi nút được tiếp tục bấm?
- Chuyện gì xảy ra khi nút được bấm lần thứ 3?
- Markup của sidebar là gì?
- Sidebar sẽ trông ra sao khi đã được hiển thị ra?
- Sidebar sẽ trông ra sao khi đã được ẩn đi?
- Sidebar hiển thị ra như thế nào?
- Sidebar ẩn đi như thế nào?
- Sidebar có nên hiện ra khi trang vừa được load hay không?
Bước thứ 2: tìm cách giải quyết cho từng vấn đề nhỏ. Để tìm ra cách giải quyết, bạn cần có kiến thức về phương thức bạn dùng để giải quyết vấn đề. Trong trường hợp này, Bạn cần nắm được kiến thức về HTML, CSS và Javascript. Đừng lo lắng nếu bạn không biết câu trả lời nào cho từng vấn đề nhỏ trên. Nếu bạn đã chia vấn đề đủ nhỏ, bạn sẽ tìm được trả lời cho chúng qua Google trong vòng vài phút. Cùng trả lời cho từng câu hỏi nào:
- Markup của button này là gì?
Markup này là một thẻ <a> với class .button<a href="#" class="button">Click me</a>
- Nút bấm đó nên nhìn ra sao? Button này có thể có một đoạn CSS như sau:
.btn { display: inline-block; font-size: 2em; padding: 0.75em 1em; background-color: #1ce; color: #fff; text-transform: uppercase; text-decoration: none; }
- Chuyện gì xảy ra khi nút được bấm 1 lần? 2 lần? 3 lần?
Sidebar nên được hiển thị ra khi bấm vào nút lần đầu tiên. Sau đó khi bấm tiếp vào button sidebar nên được ẩn đi. Rồi khi nút được bấm tiếp thì sidebar lại hiển thị ra.
- Markup của sidebar là gì?
Sidebar nên là một thẻ <div> chứa một list những link:
<div class="sidebar"> <ul> <li><a href="#">Link 1</a></li> <li><a href="#">Link 2</a></li> <li><a href="#">Link 3</a></li> <li><a href="#">Link 4</a></li> <li><a href="#">Link 5</a></li> </ul> </div>
- Sidebar sẽ trông ra sao khi đã được hiển thị ra?
Sidebar nên được hiển thị ra bên phải của cửa sổ browser. Nó cần được đặt cố định ở đó để người dùng có thể nhìn thấy. Sidebar này có chiều rộng khoảng 300px. Khi bạn đã trả lời được những câu hỏi, bạn có thể sẽ tìm được một đoạn CSS như sau:
.sidebar { position: fixed; top: 0; bottom: 0; right: 0; width: 300px; background-color: #333; }
.sidebar ul { margin: 0; padding: 0; } .sidebar li { list-style: none; } .sidebar li + li { border-top: 1px solid white; } .sidebar a { display: block; padding: 1em 1.5em; color: #fff; text-decoration: none; }
- Sidebar sẽ trông ra sao khi đã được ẩn đi?
Sidebar có thể được dịch 1 đoạn 300px sang bên phải, vậy là nó đã di chuyển ra khỏi màn hình. Khi bạn đã trà lời câu hỏi như vậy, 2 câu hỏi khác có thể sẽ nảy ra trong đầu bạn: Làm sao để chúng ta biết sidebar đang được hiển thị hay là không?
- Làm sao để bạn đặt style cho sidebar ẩn đi? Để trả lời, ta cần biết sidebar có đang hiển thị hay không
Nếu sidebar đang được đặt class .is-hidden, sidebar sẽ được ẩn đi khỏi giao diện. Nếu không nó sẽ được hiển thị ra. Nó xác định sidebar đang hiển thị, vậy làm sao để bạn đặt style cho nó ẩn đi? Chúng ta có thể dùng thuộc tính translateX để dịch sidebar 300px sang bên phải, thuộc tính transform-translate này là một trong những cách tốt nhất dùng trong animation. CSS cho đoạn này có thể như sau:
.sidebar.is-hidden { transform: translateX(300px); }
- Sidebar hiển thị ra như thế nào? Sidebar sẽ không hiển thị ra ngay lập tức, nó cần di chuyển từ bên phải, nơi mà nó đang được ẩn đi khỏi giao diện, sang bên trái, nơi mà nó được hiển thi. Nếu bạn đã hiểu những đoạn CSS, bạn hoàn toàn có thể sử dụng thuộc tính transition thực hiện việc này. Còn nếu không, đơn giản là hãy hỏi bác Gúc nhé.
.sidebar { /* other properties */ transition: transform 0.3s ease-out; }
- Sidebar ẩn đi như thế nào?
Nó nên được ẩn đi hệt như cách nó hiển thị ra, chỉ là theo chiều ngược lại. Với cách này, bạn sẽ không phải viết thêm một dòng CSS nào nữa.
- Sidebar có nên hiện ra khi trang vừa được load hay không?
Không nên. Với những gì đang có, bạn nên add thêm class .-is-hidden vào markup của sidebar và nó nên ở trạng thái ẩn khi trang của bạn mới được load ra.
<div class="sidebar is-hidden"> <!-- links --> </div>
Vậy là bây giờ chúng ta đã trả lời được hầu hết những câu hỏi, trừ một điều: Chuyện gì sẽ xảy ra khi chúng ta click vào button 1 lần? 2 lần? 3 lần? Câu trả lời bên trên của chúng ta còn quá mơ hồ. Chúng ta biết là sidebar sẽ hiển thị ra khi chúng ta click vào button, nhưng làm thế nào? Và sidebar sẽ ẩn đi khi chúng ta click vào button thêm lần nữa, và chúng ta cũng nên làm điều đó như thế nào? Ở điểm này, chúng ta có thể tiếp tục chia nhỏ câu hỏi ra những vấn đề chi tiết hơn nữa. Nhưng trước khi làm vậy, làm sao để bạn biết khi nào thì bạn vừa click vào 1 button?
- Làm sao để biết bạn vừa click vào button? Nếu bạn đã có đủ kiến thức Javascript, bạn có thể add thêm event listener vào button để lắng nghe sự kiện click. Còn nếu không, chúng ta lại Google tiếp câu trả lời thôi.
Trước khi bạn add thêm một event listener, bạn cần lọc ra được chính xác button mà bạn định bấm vào nhờ querySelector.
const button = document.querySelector('.btn')
button.addEventListener('click', function() {
console.log('button is clicked!')
})
Khi button được click lần đầu tiên, chúng ta có thể bỏ class .is-hidden của sidebar để nó hiển thị ra. Để bỏ một class trong Javascript, chúng ta có thể sử dụng câu lệnh Element.classList.remove. Điều này cần bạn phải lọc ra sidebar trước đã.
const button = document.querySelector('.btn') const sidebar = document.querySelector('.sidebar')
button.addEventListener('click', function() { sidebar.classList.remove('is-hidden') })
- Chuyện gì sẽ xảy ra nếu button được click lần thứ 2?
Nếu button được click thêm một lần nữa, chúng ta có thể add trở lại class .is-hidden vào sidebar và nó sẽ ẩn đi. Khi nói click lần 1, lần 2, lần 3 như vậy có thể bạn sẽ nghĩ đến việc tạo một biến đếm số lần click khi lắng nghe sự kiện. Nhưng cách tốt nhất để xử lí những chỗ như thế này là bạn check xem sidebar có đang mang class .is-hidden hay không, nếu có ta sẽ bỏ nó đi, còn nếu không, thì sẽ add thêm nó vào.
const button = document.querySelector('.btn') const sidebar = document.querySelector('.sidebar')
button.addEventListener('click', function() { if (sidebar.classList.contains('is-hidden')) { sidebar.classList.remove('is-hidden') } else { sidebar.classList.add('is-hidden') } })
- Refactor code và cải tiến.
Chúng ta đã đi qua bước thứ 3, lắp ghép lại các giải pháp mà chúng ta tìm được trên đường đi một cách mạch lạc. Giờ là bước cuối cùng khi chúng ta cần refactor code. Bước này có thể không có ý nghĩa với bạn ngay lúc này, nó cần sự nỗ lực và rèn luyện trước khi bạn có thể nói rằng code của bạn có thể được cải tiến và hoàn thiện hơn. Dù sao thì chúng ta cũng đã qua bước thứ 3, hít sâu một hơi và thư giãn đầu óc chút đã. Khi bạn đã nâng cao trình độ hơn với Javascript, bạn có thể phát hiện ra vài hạt sạn nhỏ khi bạn đọc lại code cũ. Trong ví dụ vừa rồi, bạn có thể trả lời thêm vài câu hỏi:
- Làm sao để sidebar này có thể tiếp cận được với người dùng có khiếm khuyết về thị giác?
- Làm sao để sidebar này có thể tiện dụng hơn với người dùng bàn phím?
- Bạn có thể cải tiến code của mình bằng cách nào đó?
Ở câu hỏi thứ 3 này, nếu bạn google kỹ hơn một chút, bạn có thể tìm ra rằng với method toggle, nó sẽ bỏ đi class nếu đã có hoặc thêm vào nếu chưa có. Dùng method toggle vào đoạn code của chúng ta có thể được viết như sau:
const button = document.querySelector('.btn') const sidebar = document.querySelector('.sidebar')
button.addEventListener('click', function() { sidebar.classList.toggle('is-hidden') })
_Tổng kết_
Tu duy như một lập trình viên là một việc không quá khó. Điểm mấu chốt là bạn phải biết cách chia nhỏ bài toán thành những vấn đề nhỏ hơn. Khi bạn đã chia nhỏ được bài toán, hãy tìm cách giải quyết cho từng vấn đề nhỏ đó và code nó ra. Trên đường bạn cũng có thể gặp những vấn đề mà bạn thậm chí còn chưa từng nghĩ đến, thì cũng hãy giải quyết nó theo cách tương tự. Khi bạn đã viết xong phần giải quyết cho từng ván đề nhỏ, bạn sẽ có câu trả lời cho cả bài toán. Nhưng còn một điều nữa phải nhớ là hãy lắp ghép từng mảnh nhỏ đó lại với nhau thật mạch lạc. Cuối cùng, mọi việc vấn chưa hoàn tất khi bạn vừa mới giải quyết được bài toán.
Ngoài kia luôn có cách tốt hơn để cải tiến cho vấn đề của bạn. Dù sao thì bạn có thể chưa tìm ra cách cải tiến ngay bây giờ, nhưng hãy cứ giải lao một chút, có thể bạn sẽ tìm ra cách tốt hơn khi quay lại 1 thời gian sau khi quay lại, với trình độ đã phát triển hơn và một câu hỏi đã cũ.
Dù sao thì nếu bạn muốn học Javascript nhưng vẫn chưa biết bắt đầu ở đâu? Hãy thử với khóa học CODE INTENSIVE của Techkids để nâng cao trình code JAVA, cũng như phát triển tư duy xây dựng sản phẩm của mình.
Nguồn: FreeCodeCamp