“Tôi không hiểu lắm về Javascript. Tôi không thể tạo components ngay từ đâu. Tâm trí tôi quên khoáy hết mọi thứ khi nhìn vào 1 file Javascript trống trơn nào đó. Tôi tự thấy mình không thể lập trình được vì tôi không biết suy nghĩ như 1 programmer“.
Nghe quen không? Bạn không cô đơn đâu. Rất nhiều người chọn Javascript làm ngôn ngữ lập trình đầu tiên cũng đối mặt với vấn đề tương tự.
Thậm chí các developer code với ngôn ngữ khác cũng gặp trường hợp như thế. Thay vì nghĩ rằng “Tôi không thể tư duy như 1 programmer”, họ nên nói là: “Tôi không thể tư duy theo Javascript”
Đừng lo, hôm nay tôi sẽ giúp bạn giải quyết chuyện này.
Bạn thực ra đã tư duy như 1 programmer rồi
Bạn đã từng thử làm 1 số bài tập đơn giản về Javascript trên freeCodeCamp, Code Academy hay Code Wars?
Nếu đã từng thì bạn ắt hẳn sẽ hiểu rõ cách thức để suy nghĩ như 1 programmer.
Lý do thực sự khiến đầu óc của bạn hoàn toàn trống rỗng khi đối diện với file Javascript nhiều khả năng xuất phát từ thứ gọi là coder’s block – rào cản của coder. Bạn sợ sẽ viết những những dòng code Javascript không chạy. Bạn sẽ đối mặt với các lỗi. Bạn không biết nên bắt đầu từ đâu.
Vượt qua rào cản này khá đơn giản, chỉ cần theo 4 bước sau:
- Chia nhỏ vấn đề thành các vấn đề nhỏ
- Tìm kiếm các giải pháp cho các vấn đề nhỏ hơn này
- Kết nối các giải pháp thật mạch lạc
- Cấu trúc lại và hoàn thiện
Cùng đi sâu vào từng bước.
Bước 1: Chia nhỏ vấn đề thành các vấn đề nhỏ hơn
Làm thế nào để bỏ con voi vào tủ lạnh?
Đây là cách mà hầu hết mọi người sẽ trả lời:
- Mở cửa tủ lạnh
- Đặt con voi vào
- Đóng cửa tủ lạnh
Vấn đề đã được giải quyết.
Câu trả lời này là ví dụ kinh điển nhất lý giải tại sao bạn lại trở nên bế tắc khi gặp phải 1 file Javascript trống trơn. Vì câu trả lời đã bỏ qua các bước quan trọng.
Nếu suy nghĩ 1 cách logic thì bạn ắt hẳn sẽ gặp 1 số vấn đề hiển nhiên không có câu trả lời:
- Loại tủ lạnh mà chúng ta đang nói đến là hiệu gì?
- Con voi này là con voi gì?
- Nếu con voi quá lớn không thể nhét vừa tủ lạnh thì phải làm sao?
- Bạn tìm thấy con voi ở đầu trước tiên?
- Làm thế nào để chuyển con voi vào tủ lạnh?
Khi code, bạn cần phải trả lời hết từng câu hỏi nhỏ mà bạn nghĩ đến. Đó là lý do tại sao bước đầu tiên là chia nhỏ vấn đề thành những mảng nhỏ hơn.
Bước 2: Tìm kiếm giải pháp cho những vấn đề nhỏ hơn
Bước thứ 2 là tìm kiếm giải pháp cho từng vấn đề nhỏ hơn và quan trọng là cần càng chi tiết càng tốt.
- Loại tủ lạnh nào? — tủ lạnh trong nhà bếp của bạn
- Loại voi nào? — voi đồng cỏ Châu Phi
- Chuyện gì sẽ xảy ra nếu con voi quá lớn? — Dùng shrink gun – súng thu nhỏ để thu nhỏ con voi.
- Bạn tìm con voi này ở đâu? — Châu Phi
- Bạn vận chuyển con voi này như thế nào?— Đặt nó vào túi sau khi thu nhỏ rồi mang lên máy bay đem về nhà.
Thỉnh thoảng, bạn cần phải đào sâu thêm vài lớp để có được câu trả lời bạn cần. Trong ví dụ ở trên, bạn cần phải khai thác kĩ câu số 3 hoặc số 4.
- Bạn lấy súng thu nhỏ ở đâu? – Mượn từ nhà khoa học điên loạn nào đấy gần nhà
- Bạn có thể tìm con voi ở đâu của Châu Phi? - Công viên Addo Elephant ở Châu Phi.
Một khi bạn có câu trả lời cho tất cả các vấn đề nhỏ hơn, bạn gắn kết chúng lại để giải quyết vấn đề lớn.
Bước 3: Kết nối các giải pháp 1 cách liền mạch
Trong ví dụ đặt-voi-vào-tủ lạnh trên, bạn có thể theo các bước sau:
- Lấy súng thu nhỏ từ nhà khoa học cạnh nhà
- Bay đến Châu Phi
- Di chuyển đến Công viên Addo Elephant
- Tìm 1 con voi trong công viên
- Bắn voi bằng súng thu nhỏ
- Đặt con voi đã được thu nhỏ vào túi xách
- Di chuyển đến sân bay
- Bay trở về nước
- Đi đến nhà
- Đặt voi vào tủ lạnh
Vấn đề được giải quyết.
Hãy xem 1 ví dụ thực tế
Giả dụ bạn muốn tạo 1 button để khi click vào, sẽ hiển thị 1 sidebar.
Bước 1—chia nhỏ vấn đề
Chia component thành các phần nhỏ hơn. Và đây là 1 số vấn đề cần xác định:
- Markup của button là gì?
- Giao diện của button như thế nào?
- Chuyện gì sẽ xảy ra khi button được click 1 lần?
- Chuyện gì sẽ xảy ra khi button được click 1 lần nữa?
- Chuyện gì sẽ xảy ra khi button được click lần thứ 3?
- Markup của sidebar này là gì?
- Sidebar trông như thế nào khi nó được hiển thị?
- Sidebar trông như thế nào khi nó được ẩn đi?
- Sidebar sẽ được hiển thị như thế nào?
- Sidebar sẽ biến mất như thế nào?
- Sidebar có nên hiển thị khi page đang tải không?
Bước 2 —tìm kiếm giải pháp cho các vấn đề
Để tìm được giải pháp, bạn cần ohari có kiến thức về tình huống đang gặp. Trong trường hợp này, bạn cần phải biết đủ về HTML, CSS và Javascript.
Đừng quá lo lắng nếu bạn không có câu trả lời cho bất kì câu hỏi nào. Nếu bạn phân nhỏ câu hỏi đủ tốt, bạn có thể tìm ngay câu trả lời trên Google trong 5 phút.
Hãy trả lời từng câu hỏi sau:
Markup của button này là gì?
Markup là 1 tag <a> với class của .button.
<a href="#" class="button">Click me</a>Giao diện của button này trông như thế nào?
Button này cần có 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 nếu button được click 1 lần? 2 lần? 3 lần?
Sidebar nên hiển thị khi button được click 1 lần. Sau đó, sidebar sẽ biến mất khi button được click lần nữa. Sidebar sẽ hiển thị lại khi button được click lần nữa.
Markup của sidebar này là gì?
Sidebar sẽ là <div> gồm 1 dãy các links:
<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>Giao diện của sidebar khi sidebar được hiển thị?
Sidebar nên được đặt bên phải của cửa sổ và cần được cố định để user nhìn thấy. Sidebar rộng 300px.
Khi giải quyết xong vấn đề, bạn sẽ có được CSS tương tự 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 như thế nào khi được ẩn đi?
Sidebar nên được chuyển khoảng 300px sang phải để ra khỏi màn hình hiển thị.
Khi trả lời câu hỏi này, sẽ có 2 câu hỏi khác phát sinh:
- Làm thế nào để biết được liệu sidebar nên được hiển thị hay nên được ẩn đi?
- Làm thế nào để thiết kế sidebar ẩn?
Hãy cùng trả lời hết các câu hỏi này.
Làm thế nào để biết được liệu sidebar nên được hiển thị hay nên được ẩn đi?
Nếu sidebar có 1 class .is-hidden, sidebar nên được ẩn khỏi view. Ngược lại, vẫn thấy được sidebar.
Làm thế nào để thiết kế sidebar ẩn?
Hãy sử dụng translateX để chuyển sidebar 300px sang phải vì transform là 1 trong những properties để animation tốt hơn. Styles của bạn sẽ trở thành như này:
.sidebar.is-hidden {
transform: translateX(300px);
}Side hiển thị như thế nào?
Sidebar không thể xuất hiện ngay lập tức mà cần phải di chuyển từ bên phải (nơi sidebar được ẩn khỏi view) rồi sang trái (nơi sidebar được nhìn thấy).
Nếu đã rõ CSS của mình, bạn có thể sử dụng property transition Nếu chưa, có thể tìm câu trả lời trên Google.
.sidebar {
/* other properties */
transition: transform 0.3s ease-out;
}Sidebar biến mất như thế nào?
Sidebar nên biến mất tương tự như lúc xuất hiện, ở hướng đối diện. Như vậy, bạn sẽ không cần viết thêm bất kì dòng code CSS nào.
Sidebar có nên hiển thị khi trang đang tải?
Không. Chúng ta có class is-hidden trong sidebar markup và sidebar vẫn giữ ở trạng thái ẩn.
<div class="sidebar is-hidden">
<!-- links -->
</div>Bây giờ hầu hết mọi câu hỏi đều đã được trả lời, ngoại trừ 1 câu – chuyện gì xảy ra khi button được click 1 lần? 2 lần? 3 lần?
Câu trả lời kia vẫn còn khá mơ hồ. Chúng ta biết sidebar nên xuất hiện khi người dùng click vào, nhưng làm cách nào? Sidebar nên biến mất khi được click vào lần nữa nhưng theo cách nào?
Và làm thế nào để biết được khi nào bạn nên click vào button?
Làm thế nào để biết khi nào bạn click vào button?
Nếu đã nắm rõ Javascript, bạn sẽ biết là có thể thêm 1 event listener vào button và chờ đợi click event. Nếu không biết điều này, bạn có thể Google.
Trước khi thêm event listener, bạn cần tìm button từ markup với querySelector.
const button = document.querySelector('.btn')
button.addEventListener('click', function() {
console.log('button is clicked!')
})Chuyện gì sẽ xảy ra khi button được click 1 lần?
Khi button được click 1 lần, chúng ta nên loại bỏ class is-hidden để button hiển thị. Để bỏ class trong Javascript, chúng ta chọn sidebar rồi dùng Element.classList.remove.
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 khi button được click 2 lần?
Khi button được click lần nữa, chúng ta nên thêm class is-hidden vào lại sidebar để nó biến mất.
Thật không may, chúng ta không thể detect số lần button được click với event listener. Cách tốt nhất là kiểm tra xem liệu class is-hidden đã hiện diện trên sidebar chưa. Nếu rồi thì remove. Nếu chưa thì thêm 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')
}
})Từ đây, bạn sẽ có được prototype ban đầu của component.
https://codepen.io/zellwk/pen/zdqmLe/
Bước 4— refactor và hoàn thiện
Bước này sẽ không tự nhiên đến với bạn ngay, nó đòi hỏi nỗ lực, sự luyện tập, nhờ đó bạn mới có thể nhận ra liệu code của mình có hoàn thiện, có tiến bộ hay chưa.
Khi bạn đã hoàn thành 3 bước trên, hãy thư giãn và làm việc khác đi. Khi dần tiến bộ với Javascript rồi, bạn sẽ nhận ra những thứ bản thân còn thiếu sót khi xem lại những gì đã làm.
Trong ví dụ trên, bạn có thể đặt ra thêm vài câu hỏi nữa:
- Làm thế nào để component sidebar này tiếp cận được đến người dùng khi họ gặp vấn đề về thị giác?
- Làm thế nào để những người dùng bàn phím sử dụng component sidebar dễ dàng hơn?
- Có cách nào để cải thiện code không?
Với câu số 3, nếu Google 1 chút, bạn sẽ biết có method toggle để loại bỏ class nếu có. Nếu không có class, method toggle sẽ thêm vào:
const button = document.querySelector('.btn')
const sidebar = document.querySelector('.sidebar')
button.addEventListener('click', function() {
sidebar.classList.toggle('is-hidden')
})Lời cuối
Tư duy như 1 programmer thật ra đơn giản thôi, quan trọng là bạn phải biết làm sao chia nhỏ vấn đề thành những vấn đề nhỏ hơn.
Khi đã trả lời được hết những vấn đề nhỏ hơn đó, bạn sẽ phải tìm câu giải đáp cho vấn đề lớn.
Tuyhông thể nhận ra những tiến bộ của mình ngay bây giờ nhưng cứ bình tĩnh, làm việc gì đó khác và xem xét lại sau. Lúc này, bạn sẽ nhận ra mình có thể đặt được nhiều câu hỏi tốt hơn nữa.
Nguồn: medium.freecodecamp.com
