"Tôi không biết Javascript. Tôi không biết làm sao để tạo ra một component. Đầu óc tôi trống rỗng khi tôi nhìn vào một file Javascript. Tôi cho rằng mình không thể tiếp tục vì tôi không biết cách suy nghĩ như một lập trình viên."

Bạn đã gặp hoàn cảnh trên rồi phải không? Yên tâm đi, không chỉ mình bạn gặp chuyện đó đâu. Rất nhiều người khi bắt đầu tiếp xúc với lập trình bằng ngôn ngữ Javascript đều từng đối mặt với vấn đề giống như bạn.

Thậm chí, kể cả các lập trình viên đã từng làm việc trong các lĩnh vực khác cũng gặp vấn đề tương tự với Javascript. Thay vì "Tôi không thể suy nghĩ như một lập trình viên", họ nói rằng "Tôi không thể suy nghĩ như Javascript."

Chúng ta sẽ không như vậy nữa, hãy cùng biến ngày hôm nay trở thành ngày bạn biết được cách tư duy như một lập trình viên thực thụ. 

Bạn có thể đã có tư duy của lập trình viên rồi.

Bạn đã từng thử giải quyết những bài tập cơ bản về Javascript trên những website học tập như Freecodecamp, Codecademy hay Codewars chưa ?

Nếu đã từng, có thể bạn thực sự đã có tư duy của một lập trình viên rồi đó.

Thật ra, lý do chính mà bạn cảm thấy trống rỗng phần lớn xuất phát từ những nỗi lo lắng. Bạn sợ những đoạn mã Javascript mình viết sẽ không hoạt động, sợ phải đối mặt với các lỗi (errors), vì vậy bạn chẳng biết bắt đầu như thế nào.

Vấn đề này khá là đơn giản thôi. Bạn có thể làm theo bốn bước sau.

  1. Chia nhỏ bài toán thành những vấn đề nhỏ hơn.
  2. Tìm những giải pháp cho những vấn đề nhỏ hơn ở trên.
  3. Tập hợp những giải pháp trên một cách rõ ràng.
  4. Cấu trúc lại và cải tiến chương trình.

Hãy cùng nhau làm rõ hơn một chút nhé.

Bước 1: Chia nhỏ bài toán thành những vấn đề nhỏ hơn.

Làm sao để bỏ con voi vào trong tủ lạnh?

  1. Mở tủ lạnh.
  2. Cho con voi vào.
  3. Đóng lại.

Vấn đề được giải quyết.

Câu trả lời trên giải thích lý do bạn gặp rắc rối khi đối mặt với một bài toán Javascript. Vì nó bỏ qua hoàn toàn các bước giải quyết chi tiết.

Nếu bạn suy nghĩ kĩ hơn về câu hỏi, bạn sẽ thấy một vài vấn đề rõ ràng là chưa hề được trả lời.

  1. Chúng ta đang nói về cái tủ lạnh nào?
  2. Chúng ta đang nói về con voi nào?
  3. Nếu con voi quá to so với cái tủ lạnh thì phải làm sao?
  4. Mà phải tìm con voi ở đâu nhỉ?
  5. Làm sao để vận chuyển con voi đến chỗ cái tủ lạnh?

Khi lập trình, bạn cần tìm ra câu trả lời cho mỗi vấn đề nhỏ mình có thể nghĩ đến. Đó là lý do tại sao bước đầu tiên của chúng ta là việc chia nhỏ bài toán thành những "miếng" nhỏ.

Bước 2: Tìm giải pháp cho mỗi vấn đề nhỏ.

Bước thứ hai là tìm kiếm giải pháp cho từng vấn đề nhỏ mà chúng ta đã liệt kê ra. Ở bước này, mọi thứ cần được trình bày theo cách chi tiết nhất có thể.

  1. Cái tủ lạnh nào? - Cái tủ lạnh vừa với bếp nhà bạn.
  2. Con voi nào? - Một con voi châu Phi.
  3. Nếu con voi quá to thì sao? - Lấy một khẩu súng thu nhỏ để thu bé con voi lại.
  4. Tìm con voi ở đâu? - Châu Phi.
  5. Làm sao để vận chuyển con voi? - Cho vào cái túi sau khi đã thu nhỏ lại, rồi bay về nhà.

Đôi khi, bạn cần đào sâu xuống thêm một vài lớp nữa mới tìm được câu trả lời. Trong ví dụ trên, chúng ta có thể xem xét câu 3 và câu 4.

  1. Tìm khẩu súng thu nhỏ ở đâu? - Mượn từ một nhà khoa học điên ở nhà bên.
  2. Tìm voi ở địa điểm nào ở Châu Phi? - Công viên Addo, Nam Phi.

Một khi đã có tất cả câu trả lời cần thiết, bạn sẽ tập hợp chúng lại để có câu trả lời cho bài toán ban đầu.

Bước 3: Tập hợp các giải pháp lại một cách rõ ràng.

Vậy là, bài toán nhét con voi vào tủ lạnh có thể được giải quyết theo những bước sau:

  1. Mượn một khẩu súng thu nhỏ từ nhà khoa học hàng xóm.
  2. Bay tới Nam Phi.
  3. Đi tới công viên Addo.
  4. Tìm một con voi trong công viên.
  5. Bắn con voi bằng khẩu súng.
  6. Cho con voi tí hon vào túi.
  7. Quay trở lại sân bay.
  8. Bay về đất nước của bạn.
  9. Đi về nhà.
  10. Cho con voi vào tủ lạnh.

Vấn đề đã được giải quyết!

Tuy nhiên, bạn chắc chắn không thể bắt con voi và cho vào tủ lạnh với Javascript.

Hãy áp dụng các phương pháp trên cho một ví dụ cụ thể.

Bạn muốn tạo ra một button, khi bạn click vào button đó, hiện ra một menubar.

Bước 1: Chia nhỏ vấn đề.

Chia nhỏ component thành những mảnh nhỏ hơn. Đây là một vài vấn đề bạn cần nhận định:

  1. Thẻ đánh dấu của button là gì?
  2. Button sẽ trông ra sao?
  3. Điều gì xảy ra khi button được click lần đầu.
  4. Điều gì xảy ra khi button được click lần thứ hai.
  5. Điều gì xảy ra khi button được click lần thứ ba.
  6. Thẻ đánh dấu của menubar là gì?
  7. Menubar trông ra sao khi được hiện ra.
  8. Menubar trông ra sao khi bị ẩn đi.
  9. Làm sao để menubar hiện ra.
  10. Làm sao để menubar đóng lại.
  11. Menubar có hiện ra khi load trang không.

Bước 2: tìm kiếm giải pháp cho các vấn đề.

Để tìm kiếm những giải pháp, bạn cần có kiến thức về những công cụ mình sẽ sử dụng. Trong trường hợp này, bạn cần biết về HTML, CSS và Javascript.

Đừng lo lắng nếu bạn không biết câu trả lời cho những câu hỏi trên. Nếu bạn tách vấn đề ra đủ nhỏ, bạn sẽ có thể tìm được từng câu trả lời trên Google chỉ trong 5 phút.

Hãy cùng giải quyết vấn đề

Thẻ đánh dấu button

Sẽ là một thẻ <a> với một class .button

<a href="#" class="button" >Click me</a>

Button sẽ trông ra sao?

Button này sẽ được style bằng CSS như sau:

.button {
    display: inline-block;
    font-size: 2em;
    padding: 0.75em 1em;
    background-color: #1ce;
    color: #fff;
    text-transform: uppercase;
    text-decoration: none;
}

Điều gì xảy ra khi button được click một, hai, ba lần?

Menubar sẽ hiện ra khi button được click lần đầu. Menubar sau đó biến mất khi button được click lần thứ hai. Nó sẽ hiện ra lần nữa khi button được click lần thứ ba.

Thẻ đánh dấu menubar

Menubar sẽ được bao bọc trong một thẻ <div>

<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>

 

Menu sẽ ra sao khi nó hiện ra?

Menubar sẽ được ẩn ở bên phải của trang. Nó cần phải cố định vị trí để người dùng có thể nhìn thấy và sẽ có chiều rộng là 300px.  

.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;
}

Menubar sẽ ra sao khi nó được ẩn đi?

Menubar sẽ dịch duyển 300px sang bên phải, nó sẽ ẩn khỏi màn hình.

Khi bạn giải đáp được câu hỏi này, hai câu hỏi khác sẽ nảy ra trong đầu bạn.

  1. Làm sao bạn biết menubar đang hiện ra hay ẩn đi?
  2. Làm sao để css ẩn menubar đi?

Hãy cùng giải quyết tiếp nào.

Làm sao để biết menubar đang hiện ra hay ẩn đi?

Nếu sidebar có một class .is-hidden, menubar sẽ ẩn đi. Mặt khác, nó sẽ hiện ra.

CSS cho menubar ẩn đi:

Chúng ta sử dụng translateX để rời menubar 300px sang bên phải vì transform là một thuộc tính tốt cho tác vụ này. 

.sidebar .is-hidden {
    transform : translateX(300px);
}

Làm sao để menubar hiện ra?

Menubar không thể hiện ra ngay lập tức. Nó cần hiện ra từ phải sang trái.

Nếu nắm rõ CSS, bạn có thể sử dụng transition. Nếu không, hãy tìm thấy câu trả lời trên Google ý.

.sidebar{
    transition : transform 0.3s ease-out;
}

Menubar sẽ ẩn đi bằng cách nào?

Nó sẽ ẩn đi giống như cách mà nó xuất hiện, theo hướng ngược lại. Bạn sẽ không cần viết thêm CSS.

Menubar có nên xuất hiện khi load trang?

Không. Theo những gì đang có, chúng ta sẽ thêm một class is-hidden vào menubar và menubar sẽ ẩn đi.

<div class="sidebar is-hidden">
  <!-- links -->
</div>

Bây giờ, chúng ta đã giải quyết gần như mọi vấn đề, chỉ còn lại câu hỏi đặt ra là: Điều gì xảy ra khi click button một, hai rồi ba lần?

Những giải pháp ở trên khá mơ hồ. Chúng ta biết menubar sẽ xuất hiện khi click, nhưng bằng cách nào?

Lúc này, chúng ta có thể trả lời câu hỏi này một cách chi tiết hơn. Nhưng trước đó, làm sao biết được khi nào button được click?

Làm sao để xác định khi nào button được click?

Nếu bạn biết Javascript, bạn có thể thêm một event listener vào button và lắng nghe sự kiện click. Nếu bạn chưa biết, hãy hỏi Google.

Trước khi thêm vào event listener, bạn cần tham chiếu tới button với querySelector.

const button = document.querySelector('.btn')

button.addEventListener('click', function() {
  console.log('button is clicked!')
})

Button được click lần đầu tiên.

Khi button được click lần một, chúng ta sẽ loại bỏ class .is-hidden để menubar hiện ra. Để loại bỏ class trong Javascript, chúng ta dùng Element.classList.remove. Điều này có nghĩa chúng ta cần chọn đến menubar trước.

const button = document.querySelector('.btn')
const sidebar = document.querySelector('.sidebar')

button.addEventListener('click', function() {
  sidebar.classList.remove('is-hidden')
})

Button được click lần thứ hai

Khi button được click lần nữa, chúng ta sẽ thêm class .is-hidden trở lại menubar để nó ẩn đi.

Không may là, chúng ta chẳng thể biết xác định button được click bao nhiêu lần với một event listener. Cách tốt nhất là kiểm tra class .is-hidden đã xuất hiện ở menubar hay chưa. Nếu có rồi thì loại bỏ, chưa có 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')
  }
})

Bước 4: Tái cấu trúc và cải tiến chương trình.

Sau khi hoàn thành bước thứ ba: Sắp xếp mạch lạc các giải pháp. Bước cuối cùng là tái cấu trúc và cải tiến mã code của bạn. Bước này có thể không dễ hiểu ngay bây giờ. Nó đòi hỏi nhiều cố gắng và kinh nghiệm trước khi bạn có thể xác định rằng mã code của bạn có thể được cải tiến.

Vì vậy, một khi bạn hoàn thành cả ba bước trên, hãy chuyển sang làm một cái gì đó khác. Khi hiểu Javascript tốt hơn và dành thời gian xem lại, bạn sẽ nhận ra rằng bạn bỏ quên một vài thứ gì đó.

Trong ví dụ trên, bạn có thể thắc mắc một vài vấn đề:

  1. Làm sao để chương trình có thể hoạt động với bàn phím?
  2. Có cách nào cải tiến mã code không?

Với câu hỏi số hai, nếu bạn Google thêm một chút, bạn sẽ chú ý rằng có một phương thức toggle loại bỏ class nếu nó tồn tại. Nếu class không tồn tại thì nó sẽ thêm class đó vào.

const button = document.querySelector('.btn')
const sidebar = document.querySelector('.sidebar')

button.addEventListener('click', function() {
  sidebar.classList.toggle('is-hidden')
})

Tóm tắt.

Tư duy như một lập trình viên khá là đơn giản. Hãy chia nhỏ vấn đề thành những vấn đề nhỏ hơn.

Khi bạn đã hoàn thành việc chia nhỏ vấn đề, tìm kiếm những giải pháp cho những vấn đề nhỏ đó và xử lý chúng. Theo con đường đó, bạn sẽ tìm ra nhiều vấn đề nhỏ mà bạn chưa nghĩ tới. Hãy giải quyết cả những vấn đề đó nữa.

Khi bạn đã hoàn thành việc viết giải pháp cho mỗi vấn đề nhỏ, bạn sẽ có câu trả lời cho vấn đề lớn đặt ra ban đầu. Đôi khi, bạn có thể mất nhiều thời gian để ghép nối các giải pháp bạn đã viết ra cho các vấn đề nhỏ hơn của mình.

Cuối cùng, công việc chưa hoàn toàn xong khi bạn tạo ra giải pháp đầu tiên. Luôn luôn cần có chỗ cho sự cải tiến. Tuy nhiên, bạn gần như sẽ chưa thấy được hướng cải tiến ngay lúc này. Hãy tạm thời bỏ qua nó, giải quyết một vài bài toán khác và quay lại sau. Khi đó chắc chắn bạn sẽ nhìn nhận vấn đề một cách xác đáng hơn.

Bài viết được dịch từ https://medium.freecodecamp.org/how-to-think-like-a-programmer-3ae955d414cd