Sarah DyeIt is time to start phase one of Skillcrush 102. The second lesson of Skillcrush 102 is the beginning of phase one of the course. Phase one is all about learning computer science fundamentals and planning the logic for the course projects.
Up first is computational thinking. Computational thinking means thinking like a computer. It might sound like an odd topic to open this phase of Skillcrush 102, but understanding how computers work and think is going to help you write JavaScript code later.
Today's post is going to go into more detail about computational thinking. I'll be reviewing the four principles of computational thinking and examples of how these principles work. By the end of this post, you will be familiar with these principles so you will be able to plan and organize your logic when you build projects in the future.
Computational thinking is more than just thinking like a computer.
It is a universal truth that computers are powerful yet very simple devices. While computers are capable of doing many things, there are limits to what they can do. So when it comes to building things for a computer, it is important to know as everything as possible about how computers work so you know what you are working with.
This includes the capabilities and limitations. Computational thinking is just that. The concept of computational thinking is being aware of everything can and can't do to solve problems.
One of the things that limit computers is language. Computers love numbers. So the languages they use are combinations of numbers that create different meanings.
This is different from how humans think so computational thinking helps developers change the way they think so they can best communicate to the computer. That is where programming languages come in. They serve as bridges between human thought and what computers think.
5 Stages of Communicating with a Computer
There are five stages of how people speak to computers. Although there won't be any coding happening, this is the process people take to learn how to think like a computer. Right now, you are at stage one, but we are in the middle of transitioning to stage two.
When you move from stage two to three, you will begin turning the logic we write into JavaScript code that tells the computer what we want it to do.
- The person thinks big, complex thoughts.
- Computational thinking comes into play here. The person learns to think like a computer.
- The person translates computational thinking into a programming language.
- The computer translates programming language into 0's and 1's for the computer to read.
- The computer receives the message and runs the program based on the instructions it is given.
4 Principles of Computational Thinking
So how do you simplify your thinking? There are four principles of computational thinking which will help you accomplish this. These principles will help you get in the mindset of how a computer reads and processes information so you know how to write code the computer will be able to understand.
There is no order in how to use these principles. The goal is to be familiar with each principle and how it works in action. In addition to a brief description of each principle, there are two examples of how these principles are being applied.
One is a programming example where a developer is building an e-commerce website. The other is a real-life example where a person is trying to plan a party.
Decomposition
This principle is similar to changing one's mindset about the problem that needs to be solved. Decomposition is where developers take the big problem they are working on and break it down into smaller problems. It might seem odd for a developer to do this, but problems don't mean something bad in programming.
A challenge or issue just means it is something that developers haven't solved yet. Decomposition is very similar to how I learned how to solve word problems in math class. Several math teachers taught this principle since it made problems easier to solve.
Breaking a problem into smaller problems allows you to solve each problem one at a time. This results in the overall big problem being solved.
Party Example
Let's say you are planning a party in real life. Planning a party is the big problem in this example. If I want to make this problem even smaller, I need to identify all the small problems within this problem.
Some examples of smaller problems would be the guest list, the kind of invitations that you would use, and how the invitations would be assembled. I can make these problems even smaller if I want to. For example, I want to make the invitation problem even smaller. I can do this by identifying smaller problems such as color and fonts I'd use for the invitation.
E-commerce Website
In this example, a developer is building an e-commerce website. The website itself is a big problem. If a developer wanted to use this principle to break the website into smaller problems, the developer would need to think about all the features and functions the website would need and then break those items down into even smaller problems.
For example, an e-commerce website for a boutique needs a feature for sorting items, a custom checkout page, pop-ups for all the specials, and slide shows for product pages. These are examples of smaller problems within the overall big problem of building this website. So how can we make these problems even smaller?
Let's say a developer wants to break down the sorting items feature into small problems. The developer can break this problem down even smaller by thinking about what the feature can specifically sort for. So smaller problems for the sort feature include sorting by type, size, color, and price.
Abstraction
Abstraction is all about prioritizing and organizing the problems you need to solve. In this principle, one takes a deeper look at the problem to solve and decides what is needed to solve it. So when you use this principle, it is you are breaking down the problem into something you can solve easily.
The goal is to narrow down the most important items you need and ignore the stuff that isn't. In programming, less is often more on websites.
Party Example
Let's concentrate on the invitations for the party. Now that we have broken down the problem as small as we can, the goal is to make this step as simple as possible. To do this, you will need to identify the details you need to know to send out the invites. Your invitations will need the date, time, location, and RSVP option. Everything else isn't necessary.
E-commerce Website
You have broken down the problems on the e-commerce site. Let's focus on the sorting feature on this site. There are a lot of things you need to consider for this feature.
Some of the things you need to think about are what items you want to show at the same time to how they sort certain items. These thoughts can easily overwhelm someone. In this situation, a developer would organize everything and prioritize what the client wants to be done.
This is the bare minimum of what you'll need to be accomplished. So when you work on websites, identify the essentials and start there. This will keep things from getting complicated and messy.
Pattern Recognition
Patterns are so important in programming. In the pattern recognition principle, this is your chance to identify these patterns among the problems you are trying to solve. These similarities offer clues of what code these problems might share or have in common to get a certain solution. So as you evaluate your smaller problems, you will want to think about if there is anything in common with the solutions to these problems and if the methods being used are similar to each other.
Party Example
Now that you have figured out what important information is, it is time to send out a test invitation. Before you send an invitation to everyone on your list, you might send a test invite to see how everything looks and make changes before the final one gets sent out. This can sound odd, but the test invite will help you spot any glitches that come with sending your invites.
Some of these issues can be the service, how long it takes invitations to be prepared, and even issues sending out the invitations. So treat this test invitation not only as a preview of the process but as a way to put yourself in the shoes of your guest. This test will help you see what is the best way to send things to other people.
E-commerce Example
It is going to be a bigger challenge finding patterns on this site since there are so many things that make up a website. This will make it impossible to do everything you want on this site. Instead of trying to do everything on a site, pattern recognition is going to be looking at each of the properties on the site and seeing what patterns you can find.
Looking at one property at a time is going to help you later down the road since you'll be able to see what properties overlap with each other. For example, a developer might start with the color property and then move to the size property. As they work their way through each property, they will see how these filters overlap with each other.
Algorithm Writing
The last principle is algorithm writing. Now that you have sorted the small problems and identified the similarities, it is time to write algorithms. Algorithms can sound intimidating.
They certainly did when I started learning how to code. However, algorithms are just another way of saying it is a series of instructions. These instructions explain how one can solve a problem.
Algorithms are often used in programming so you'll see them very often as you continue learning how to code. You will also see them in real life too as well as writing them yourself. Some real-life algorithms you use are recipes, craft patterns, and instruction manuals.
Party Example
Once you are happy with your test invitation, it is time to send your invitations to your guests. Algorithm writing for this example would be using a platform like Evite to send your Evites since you can send out lots of invitations to all your guests at the same time. When you write your algorithm, you will need the following items.
- Guest list. This list would just need the name and email but if you are sending ones in the mail you might include an address and phone number.
- Date, time, and venue address.
- Design that suits the theme of the party.
Add all this information to your Evite. Then configure all the settings to make sure everything is set out for your guests. After one final check, send out your Evites. When this happens, the algorithm will go through the entire guest list you set up and send them an Evite with all the information you set up.
E-Commerce Website
It is time to write an algorithm to sort colors on a website. The algorithm you will be using is going to come in extra handy since it will allow users to apply a variety of different filters on the website. When it comes to algorithms for coding, developers like to write out the instructions first of what they want to do. Below is an example of written instructions a developer might write for the color filter.
//color options: black, red, white
//when a user picks a color option, the page displays all the items tagged with these colors.
Once all the instructions are written out, now you can start writing code. Developers take the instructions they have just written and replace them with code. So if a developer wanted to turn the instructions above and turn them into JavaScript code, the code would look like this below.
After the code is written, developers take time to test and debug their code before they add it to a website.
var colorSelector = document.getElementById("colorSelector");
var blackCheckbox = document.getElementById("blackCheckbox");
var redCheckbox = document.getElementById("redCheckbox");
var whiteCheckbox = document.getElementById("whiteCheckbox");
colorSelector.addEventListener("click", filterColor);
//This array holds information for all the items in the boutique
var allItems = [...];
//This array holds information for all the items that are being shown on screen.
var items = [];
function filterColor() {
//clear current filtered items if any
items = []
//for all items in the inventory
for (var i = 0; i < allItems.length; i++) {
//if the checkbox for the color black is checked, and the color of the item is black, add it to the screen. The same logic applies to the rest of the colors.
if (blackCheckbox.checked === true) {
if (allItems[i].color == 'black') {
items.push(allItems[i]);
}
}
if (redCheckbox.checked === true) {
if (allItems[i].color == 'red') {
items.push(allItems[i]);
}
}
if (whiteCheckbox.checked === true) {
if (allItems[i].color == 'white') {
items.push(allItems[i]);
}
}
}
};
It is 100% ok to read the code above and not know what is happening. You'll be learning more about JavaScript later in this course. The goal of reading this sample code is to see how developers turn the written instructions into code.
Conclusion
That's a wrap on this lesson! You know the 4 principles of computational thinking. These principles are going to make solving programming problems easier to solve and less intimidating.
We are going to start applying these principles in this phase of the course as we begin planning our projects for Skillcrush 102. The next lesson of Skillcrush 102 is going to be your chance to apply these principles in action. This lesson is your first challenge in the course where you'll be writing instructions for the computer to make peanut butter and jelly sandwiches. The next post is going to walk you through the steps to writing these instructions using the 4 principles of computational thinking.
This post was originally published on December 19, 2020 on the blog BritishPandaChick Codes as 4 Principles to Computational Thinking. I made minor changes to the original post to work here on DEV.
