That voice in your head
Is this for me?
Can I do this?
I’m not good at this.
It’s natural to have doubts. But what are doubts? Do doubts really exist? Or, are doubts simply beliefs you have developed about yourself?
Perhaps, these beliefs are based on a past experience with a similar topic with which you have struggled. Don’t internalize past struggles, or even failures. Those are not indicators of your capabilities.
Accept that you have struggled with something. Accept that as an event in your past but don’t let the memory, the feeling, of that struggle define you. A doubt is a feeling.
You are an intelligent person
Even when based on a real experience, the doubt is not who you are as a person. You are a person with intelligence. Forget about that past moment. Maybe you had a bad teacher, maybe the instructions were not clear. Maybe that moment in your life simply was not the time for you to learn that topic. Now is another time, now is another moment in your life. And if you struggle today, then tomorrow will be another new moment, a new time to start.
People approach coding as it’s full of arcane mysteries impenetrable to all but a select kind. You doubt you are part of that select kind. Yet, that’s a false belief. There is no special kind of person who is “good” at coding. If you can tie your shoelaces, you can learn to code. Or, even better, if you can put on a pair of flip flops, you can learn to code.
You can learn anything if you believe you can.
Of course, everyone starts at a different point, prepared with a different set of background knowledge. But forget about that. Coding is not a competition. Learning is not a competition. That’s the problem with grades. It sets up a competitive mindset that should have no place in education.
Focus on yourself, your mindset. Forget about any negative of the past and the tell yourself, “I can do this.”
You just need to make the commitment. Make the commitment to yourself. Recognize that your mind is an incredibly powerful computer. In learning to code you are simply feeding your mind a new set of instructions: a set of instructions called computational thinking.
You are activating, pressing the power button, that part of your brain that is made to understand coding. Don’t let that other part of your brain, those negative thoughts, bad feelings and doubts defeat you.
We all struggle everyday with regulating our emotions and we all struggle everyday to focus on work, learning, and productivity. Don’t let doubt defeat you.
Take a moment and look at the computer closest to you. It could be a laptop or even a phone. Think about what it is. What is it? It’s a metal box. It has a battery, or some source of external power. The interior of the box is engineered with circuits that pass along electrical charges that paint images onto a screen.
The computer has similarities to the human brain. Our brains have millions of neurons transmitting electrical charges forming thoughts, emotions, images, actions. The computer, unlike our minds, does not get distracted by all those thoughts and emotions.
Every application on a computer, everything a computer does, has been programmed by a human. The computer does what it has been told. An app is a set of instructions.
In learning to code, you are learning how to give instructions to a computer, you are learning how to teach a computer about your imagination.
Okay, maybe, you’re saying, “Okay, that’s a good concept. I get it. But how do I really code? How do I program something? Everything seems so arcane. The syntax is confusing. I’m getting frustrated with the simplest mistakes. Is a freakin’ semi-colon really that important?!”
Congratulations. The first step in coding is your mind casting away any doubt that you can do this. And these doubts will creep in every time you make an error in your code. We all make mistakes in coding everyday, even those of us with over 25 years of experience.
The difference: programmers are confident that they can resolve a problem. They recognize that there are mental strategies for thinking about a problem and that there are many resources for learning how to solve the problem. And they dive into that challenge and figure out what they do not know.
Here’s a mental strategy
* Take a breath. Take another deep breath.
* Say to yourself, “I can do this.”
* Look at the problem. Break down the complexity into small, discrete steps that you can figure out.
But what if you don’t know where to start. You are in the fog of unknowing. Look for what is closest to you, reach out to what you do understand.
Let’s go through an example.
Say, I have this web page.
I want to change the background-color, the creamy yellow. You’ve already learned an essential question, “Can the background color change?”
You know there’s a bit of code for that. You know it’s CSS because you’ve learned that CSS is the set of instructions that control the style and design of a web page. You cannot remember the exact command. You get confused: is it color? or, no background-color? You google for the answer. You’ve learned that programmers google all the time. Sure, a lot of things they have remembered over time. Some things become part of your memory when you do it a lot. But the internet is always there as a reference source for figuring out how to do something. But you do need to know how to evaluate the sources that you find. Many sources on the Internet have become outdated or, perhaps, are even more confusing than necessary.
Back to our example. You know there is a code to specify color. You remember the term hex. But there is no way that anyone can remember the millions of hex codes. You look it up. You’ve learned how to do that. Let’s change it from creamy yellow (#F0F3BD) to a bluish sapphire (#05668D).
You realize that in the CSS you set the hex code on the HTML body element to change the background color of the page.
body {
background-color: #F0F3BD;
margin: 0;
padding: 0;
font-family: Georgia, serif;
}Changing background-color on the body element from #F0F3BD to #05668D changes the background color of the page.
You may be wondering why the top section is still teal green. Let’s look at that part of the HTML:
<section id="top">
<h1>Hey, You, Welcome to My World</h1>
</section>Note the ID #top on the section. And the corresponding CSS:
body {
background-color: #05668D;
margin: 0;
padding: 0;
font-family: Georgia, serif;
}
#top {
background-color: #00A896;
padding-top: 10rem;
padding-bottom: 10rem;
}
Be sure you understand what is happening in that CSS code.
Let’s go further. Let’s look at your web page. You have two sections labeled “top” and “bottom”. Now, we want the bottom section to change color when the mouse moves into that section. (“Let’s set aside whether that’s a good idea or not.”)
You think, “How do I…?” Now, don’t go immediately to google and type in the question that you have. That’s not computational thinking. Do not doubt your ability to think up a possible solution.
Let’s think about this.
We know that a web page consists of HTML elements. Those elements can be styled with CSS. And we also know that those HTML elements can be further styled with class names and ID names. That is a core set of knowledge about HTML and CSS that has not changed for decades. And it’s not going to change in the future.
What do we know about JavaScript?
Based on what you know, you know that JavaScript controls the behavior of a page. But you also know that you can use CSS to change the color of an element on hover. Remember, how a link color can change when you hover over it with a mouse? You should ask yourself, “Can I use CSS for doing that or do I need to use JavaScript?”
In programming, there are usually more than one way to do something. One way may be more efficient. Another way may be easier. One way might present more problems down the road. While there is usually a best practice for each technique, as a beginner, you do not want to get stuck on figuring out the most optimal way of doing something. Many people would disagree with me on that. But when you are learning something new, you don’t want to get paralyzed by perfection. The same way is true when you are developing a prototype or a small project. Don’t get paralyzed by perfection. And remember: what you are developing at this stage is unlikely to be used by millions of people. It does not need to be so highly optimized that it can process thousands of hits per second. You are learning. Focus on getting something to work. Later is the process of refactoring, of improving the code.
How can we programmatically control the behavior of a web page.
Let’s further define “programmatically”:
You know that a program, code, is a set of instructions. It’s a set of instructions written in a specific programming language. In this case, we are using JavaScript because JavaScript is a specific language with the specific function of working within an application called a browser, like Chrome or Safari or Firefox. There are a lot of other programming languages, but we’re not going to go over those now. Most importantly, do not confuse JavaScript with Java, which is an entirely different programming language. Other than having similar names, the two languages are not the same. If you are talking with an experienced developer and you say, Java, when you should be talking about JavaScript, then you will lose all credibility. Be sure you know the difference.
How do you use JavaScript programmatically? What is really happening?
The browser is an app, though we often don’t think of it that way. It’s an app that downloads HTML documents and presents those documents onto a screen (within the browser). The app also downloads and reads a CSS file to determine the layout and appearance of the document. Built inside of every browser is JavaScript. JavaScript can interpret your code, your set of instructions. JavaScript has the capabilities for processing a script to change the appearance or behavior of a web page.
Let’s go back to our example of changing the background color for the bottom section when the mouse hovers into that section.
The browser, like any app, is smart. It was programmed to do certain things. In addition to download and styling documents, the browser keeps track of a lot of information that is happening. The browser stores all that information as “properties”. The values of those properties can be accessed programmatically, in other words, by your code.
Let’s look at some these properties. A browser gives us a console to view parts of the code. You are already familiar with the Inspect element of Chrome. In Chrome, open up the Inspect tool by right clicking on the web page. Once you have the Inspect tool open, click on the word Console to display the console box.
The console box is an interactive in which you can view and run JS commands. The console is really valuable in debugging (i.e., troubleshooting) your JS code since it can give you clues as to what is (and is not) happening in your code.
One of the most important aspects of JavaScript is that the browser makes available all sorts of properties that can be manipulated with JS. We’re going to look at a few properties as examples. Be sure to have the https://jeffreybarry.github.io/easygithubsite/ web page open in Chrome, and have the Inspect tool open to the Console.
Exploring the DOM
The Document Object Model (DOM) is the most important part of understanding how JS manipulates the behavior of a web page. Using the console, we will walk through some examples of how JS examines the DOM. At this point, the goal is for you to grasp the concepts behind how JS accesses different parts of a web document. Keep in mind: if JS can access a specific property of a web document, then JS can change that property. The change in the property can have a visual effect on the screen.
My recommendation is that you read through this section, try the examples in a console on your own laptop, and then later come back to this section as reference material when needed.
In the console box is a prompt, as indicated by the greater than (>) sign. You type commands into the console box at the prompt and then hit enter/return to run the command.
Type the word “document” and hit return. You should get something like the following:
The document command has returned the document object. You can reveal the contents of the document object by clicking on the triangle next to #document. When you do that, you will see the HTML document:
Now you know that every time you see one of those little triangles, then you can click to reveal further details. Click on the triangles next to head and body to reveal the full HTML document.
Most often, you will only be accessing a specific part of a document. JS has many valuable ways of doing that. We’re just going to start touching on a couple of methods here. Let’s get just the body element. In that case, simply type document.body in the console and press return:
Remember that the body element contains the visible parts of the web page. But, more often, you will want to get a very specific part of the body. Notice how the HTML elements are structured in a hierarchy. That tree-like hierarchy allows you to drill down and retrieve specific elements. Let’s say that we just wanted to get the section with the ID bottom. Take a look at the following screenshot of the console, and see if you can understand what’s happening:
The command to get the bottom section is document.getElementByID(“bottom”); remember, we are only using the word “bottom” in the command because that is the actual ID name. If the ID was named something else (like “panel”), then we would use the word “panel” instead of “bottom” in the command. Make sure you understand that. For practice, in the console try, getting various elements by ID from the web page.
In addition to document.getElementByID, there are several other handy methods for retrieving parts of an HTML document object, such as
- getElementsByTagName
- getElementsByClassName
Storing values in variables
Every programming language has the concept of a variable, which allows you to store a value. Storing values in variables makes it easier to do things with those values. For instance, we can store the section “bottom” from our previous example in a variable named bottom. (There are several ways of declaring variables as well as best practices and rules for naming variables. We’ll talk about those later.) Here, we are just introducing the concept. And you can try this in the console:
(When you press enter, you will get back “undefined” but don’t worry about that, for now.)
The variable makes it easier for writing code. All HTML elements have many properties, and those properties can be accessed via JS. For instance, all the CSS settings of an element can be accessed through JS. You access the CSS styles of an element through the adding .style to the end of an element variable in JS. For instance, to see the property styles for the variable we named “bottom”, simply type in the console: bottom.style
The screenshot only shows a partial list of the dozens of style properties accessible via JS. Note that you are only seeing the style property names. You are not seeing the values of the style properties because the JS is not actually reading the CSS stylesheet. (We’ll come back to that in a later lesson.) Meanwhile, you can experiment with changing the background color for the bottom section by typing:
bottom.style.backgroundColor = "red"You also can use a hex code in place of “red”. For simplicity, I simply used a common color value. As you can see in the screenshot below, the background color for the bottom section has changed to red.
It’s important to note that any changes you make via the console are not permanently applied to the document. Console changes only take place on the computer’s display. When you refresh the page, the change will disappear unless you add it to the actual code.
The takeaway so far is that we have learned that the console can be used for debugging and quick testing. Now, let’s look at how we make an actual change to the code using JS that will transition the background color to red when a user hovers a mouse over the bottom section of that page.
User Interface Events
The concept of events happening in the user interface is another very important aspect of JS. We’ll go over this in more detail but, for now, here’s a brief introduction.
An event is when something happens inside the user interface of a web page. For our example, the event we’re listening for is when the mouse hovers over the bottom section. When that event occurs, then we are going to code an action to take place. That action will be to change the background color of the section.
Linking HTML to a JS file
Just as with CSS, we want to put our JS code into an external file. JS code files have the extension .js. Also, there should be no spaces in the filenames. Additionally, I prefer to group all my .js files for a site into a subfolder named “js” for JavaScript. The links to JS files are placed inside the body element of an HTML document and just before the closing body tag:
Pay attention to the structure and format of the script tag and the link to the JS file. Your JS file may have any name. In this example, I used “main”.
What’s in a JS file?
A JavaScript file is just a regular file, just like HTML and CSS are regular text files. To start, just create a new file in your code editor and give it a filename with a .js extension. Then we add the code:
var bottom = document.getElementById('bottom');
bottom.onmouseover = changeBackgroundColor;
function changeBackgroundColor() {
bottom.style.backgroundColor = "red";
}That’s it. That’s our complete JS file for changing the background color of the bottom section to red when the mouse moves over that section. Of course, this is a very simplistic example. We will be breaking down more complex examples in further detail.