Hình thành cách tư duy như một lập trình viên

Làm thế nào để có tư duy như một lập trình viên?

Nga Bùi

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

Bạn nghe có quen không? Bạn đã từng gặp phải hoàn cảnh này rồi phải không? Yên tâm đi, không chỉ riêng bạn gặp chuyện đó đâu. 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.

Hình thành cách tư duy như một lập trình viê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".

Đừng suy nghĩ nhiều! 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ụ nhé.

Bạn có thể tư duy như một lập trình viên rồi.

Để làm nghề lập trình, trước hết bạn phải hiểu lập trình viên là gì? Lập trình viên là người thiết kế, xây dựng và bảo trì các chương trình phần mềm máy tính. Bằng cách thao tác các đoạn mã trên công cụ lập trình, họ có thể tạo ra các chương trình mới, sửa lỗi hay nâng cấp chương trình để đạt tăng hiệu quả của việc sử dụng máy tính.

Lập trình viên có thể làm việc trên nhiều ngôn ngữ lập trình, chủ yếu là lập trình web Java, C++, php, Asp, ASP.Net, Visual Basic.Net và C#.

Bạn đã biết 15 ngôn ngữ lập trình hot nhất trên GitHub này chưa?

Để tạo ra một phần mềm, trước hết phải tạo ra một “bản thiết kế”, mỗi lập trình viên đảm nhiệm một phần việc, sau đó các phần được kết nối lại tạo thành một sản phẩm hoàn chỉnh. Lập trình viên được ví như thợ “coding” - người ngồi gõ những dòng lệnh (code) trên máy tính, làm ra các phần mềm hoặc chỉnh sửa, phát triển nó dựa trên các công cụ lập trình.

Nghề lập trình đòi hỏi sự sáng tạo cũng như các kỹ năng đánh giá, phân tích yêu cầu của dự án, đưa ra các giải pháp thiết kế hoặc cách tiếp cận công nghệ mới khi gặp các "framework - bản thiết kế" chưa kỹ hoặc công nghệ thay đổi.

Làm thế nào để có tư duy như một lập trình viên?

Đã bao giờ bạn từng cố gắng 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, Code Academy hay Code Wars 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ực ra lý do chính khiến bạn cảm thấy trống rỗng phần lớn xuất phát từ nỗi lo lắng khi đối mặt với tệp JavaScript của mình, có thể là do khối mã của người tạo mã. Bạn sợ những đoạn mã JavaScript mình viết sẽ không hoạt động. Bạn sợ phải đối mặt với các lỗi (errors). Vì vậy, bạn chẳng biết làm thế nào để bắt đầu.

Vấn đề này khá là đơn giản. 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 các giải pháp cho những vấn đề nhỏ hơn ở trên.

3. Tập hợp lại các 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 thế nào để bỏ được một con voi vào trong tủ lạnh?

Đây chính là câu trả lời mà hầu hết mọi người thường đưa ra:

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

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

Tuy nhiên, chính câu trả lời trên là một ví dụ rõ ràng nhất để giải thích rằng tại sao bạn lại gặp rắc rối khi đối mặt với một bài toán JavaScript. Vì bạn thường bỏ qua hoàn toàn các bước giải quyết chi tiết.

Nếu 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.

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

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

Chia nhỏ bài toán thành những vấn đề nhỏ hơn

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

Cái tủ lạnh nào? - Cái tủ lạnh nằm trong bếp nhà bạn.
Con voi nào? - Một con voi ở châu Phi.
Nếu con voi quá to thì phải làm thế nào? - Lấy một khẩu súng thu nhỏ để thu bé con voi đó lại.
Tìm con voi ở đâu? - Châu Phi.
Vận chuyển con voi đến chỗ tủ lạnh như thế nào? - Cho vào túi sau khi đã thu nhỏ lại, rồi bay về nhà.

Đôi khi, bạn cần đào sâu 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 kỹ hơn ở câu hỏi số 3 và câu hỏi số 4.

Tìm khẩu súng thu nhỏ ở đâu? - Mượn từ một nhà khoa học “không bình thường” ở nhà bên.
Tìm con voi ở đâu tại châu Phi? - Công viên Addo, Nam Phi.

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 lại các giải pháp 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 các bước sau:

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

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

Tập hợp lại các giải pháp một cách rõ ràng

Điều này nghe có vẻ đơn giản nhưng chắc chắn bạn không thể bắt con voi cho vào tủ lạnh với JavaScript được đúng không?

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

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

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 rõ ràng:

Thẻ đánh dấu của button này là gì?
Button sẽ trông như thế nào?
Điều gì sẽ xảy ra khi button được click lần đầu tiên?
Điều gì sẽ xảy ra khi button được click lần thứ hai?
Điều gì sẽ xảy ra khi button được click lần thứ ba?
Thẻ đánh dấu của menubar là gì?
Menubar trông ra sao khi được hiện ra?
Menubar trông ra sao khi bị ẩn đi?
Làm sao để menubar hiện ra?
Làm sao để menubar đóng lại?
Menubar có hiện ra khi load trang hay không?

2. Tìm kiếm giải pháp cho các vấn đề

Để tìm kiếm giải pháp, bạn cần có kiến thức về 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 có thể sẽ tìm ra câu trả lời cho từng vấn đề trên Google chỉ trong vòng 5 phút.

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

Thẻ đánh dấu button này là gì?

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

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

Button này sẽ trông sẽ như thế nào?

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ì sẽ xảy ra khi button được click một lần, hai lần và 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 của menubar là gì?

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

Menubar sẽ trông như thế nào khi xuất hiện?

Menubar sẽ được ẩn ở bên phải của trang. Nó cần 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 trông sẽ ra sao khi bị ẩn đi?

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

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

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

Hãy cùng giải quyết tiếp:

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

Nếu sidebar có một class .is-hidden, menubar sẽ ẩn. 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.

Hiện 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 dường như khá mơ hồ. Chúng ta biết menubar sẽ xuất hiện khi click, nhưng bằng cách nào?

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 chứ?

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

Nếu có chút kiến thức về JavaScript, bạn có thể thêm một event listener vào button và click vào event listener. Nếu bạn chưa biết, hãy hỏi bác 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 đầu tiên, 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 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 thứ hai, chúng ta sẽ thêm class .is-hidden trở lại menubar để ẩn đi.

Nhưng thật không may, chúng ta chẳng thể biết chính xác 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ỏ, còn 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. Ngay bây giờ bước này có thể khó hiểu bởi nó đòi hỏi nhiều cố gắng và kinh nghiệm trước khi 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. Đến lúc nào 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ì đó.

Chẳng hạn như ví dụ trên, bạn có thể thắc mắc một vài vấn đề:

Làm sao để chương trình có thể tiếp cận đến người sử dụng bị khiếm khuyết thị giác?
Làm sao để chương trình có thể hoạt động dễ dàng hơn với bàn phím?
Có cách nào cải tiến mã code không?

Với câu hỏi số ba, nếu bạn dành thời gian search Google 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ì phương thức toggle 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')
})

Kết luận

Tư duy như một lập trình viên khá đơ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 đề, hãy 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 thân chưa hề 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 đã viết ra cho các vấn đề nhỏ hơn của mình.

Sau 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 cần có chỗ cho sự cải tiến. Tuy nhiên, bạn gần như chưa thấy được hướng cải tiến ngay lúc nà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.

Tham khảo thêm một số bài viết:

Chúc các bạn vui vẻ!

Thứ Năm, 14/12/2017 16:02

5 ★ 3 👨 2.537