Learning Basic Javascript Flow for Babies Beginners
As an adult, we take for granted basic skills like walking, talking, eating, etc. You don't think about placing one foot in front of the other, you don't think about balancing yourself. You just walk. But as a baby, these “small steps” are markers of growth. You have just started recognizing you have limbs, you are learning to crawl, hold on to things, and develop hand-eye coordination. All these little milestones must be achieved before you can walk. It’s the same in JavaScript for beginners there are many steps you need to learn to complete a simple task. I’ve watched my instructor say “I need to create a button that submits something that is added to the page.” and then he does it so effortlessly.
There are so many steps I have had to think through when the task is “Add functionality to a button”. I am pretty sure an experienced coder thinks through the same process subconsciously. Needless to say, I struggled with my JavaScript project because I failed to break down the steps into manageable milestones. While working through the course material I feel too learn the flow of JavaScript. I had to go back to the beginning and review the first several weeks just to understand know why something had to be done a specific way. After working through this project, Here are some questions I would ask myself before working on a simple task.
- What am I trying to do?
- What element/class/object am I operating on?
- Where does this need to go?
- How do I accomplish this task?
- When does this task need to be completed?
Example Task for A HorsePower Converter: Display all the conversions in the database.
What am I trying to do?
-I want to retrieve all the conversions from the database and create objects using a JavaScript Class constructor.
-I want to store them to a variable and then display all of them to a page that the user can see once they click on a link called “Conversions”
What element/class/object am I operating on?
-I am operating on a collection of conversion objects.
Where does this need to go?
-They need to be added to an HTML div I created with the class of Main Display, which removes the previous contents and adds new information I am creating.
-I also want to keep adding to this list so need to make sure I don’t overwrite content I need displayed
How do I accomplish this task?
-Create a variable that selects the document object I am operating on.
-Create a document listener that looks for a user-triggered event and runs a function
-Create a function that displays each conversion and appends it to that specific page. Maybe even a separate function that displays a single function and is called to do something to each element
When does this task need to be completed?
-This task needs to be completed when a user clicks on a link so it displays everytime they click on it and disappears when they click on something else.
Some of this may seem over-the-top but I found that it is necessary to think through every single step in order to complete a simple task what displaying a list of objects on a page. Certainly there are different questions to ask depending on the problem you are trying to solve. But this is the basic flow I've learned to follow to help me as a code this project.