I’ve Cracked the Code, Please Call Tech Support- Episode 4: A New HTML

Two weeks in, and we’re still rolling! After going down a couple of mistaken paths when building, I think I’m starting to better understand the value of how these websites are built. Mostly I’m realizing that these pages are smarter than me, but we knew this going in.

  1. How is JavaScript different from CSS? In what ways? How are they similar?

So this is both an easy and hard question. Both CSS and JavaScript are programming languages designed to work with the DOM (Document Object Model) in HTML (Hyper Text Markup Language, where the website’s content is written) in order to make it more functional. The differences are pretty stark.

CSS (Cascading Style Sheets) helps us to make the website look the way that we want. We can change colors, fonts, arrange our content in columns and rows…the list goes on and on. If the design looks nice? You can almost always chalk that up to the CSS code.

JavaScript on the other hand (not to be confused with Java, which is completely different, turns out) is a programming language that is used to control and change the behavior of elements within the page. This is where the interactivity comes into play. Any form that you’ve filled out on a webpage? JavaScript is collating that data.

2. How do you map the many different DOM methods and properties in your mind? How would you describe them to a non-developer?

We’ve spoken about the DOM previously, and about how it’s the blueprint we follow in order to guide ourselves through the webpage. But, come to find out, there are also a ton of properties built into the DOM right out of the gate, without having to code them yourself! Pretty cool, right?

Webpages are built out of a series of elements (sections, paragraphs, articles, that sort of stuff), and the DOM properties help us further define them. Some of these properties include element.innerHTML (the inner text-value of the element), element.nodeName (the element’s name), element.nodeValue, etc. So, neat. Now what can we do with those?

That’s where the DOM methods come in. Let’s say that we want to replace what’s written on the page with secret message when the user clicks a button. JavaScript has got you covered.

Let’s say our initial paragraph says “The button below reveals a secret!”. In HTML we can identify that paragraph as “example” (id=“example”). This is the key!

To make our secret-revealing button, we just need to tell it where to look and what to do. With JavaScript we would write this out like:

onclick=‘document.getElementById(“example”).innerHTML = “I’m a secret!”’

It looks weird and confusing at first, I know, but let’s break it down.

First, we see “onclick”. This is a command that tells our button “When you get clicked, do the thing”. The equals next to it is what we want it to do when clicked.

Now we tell it where to look. This is “document”, because that’s where our content is written. Then, we tell it to .getElementById. This method tells the button to seek out the element with the Id we specified. In this instance, the “example”.

Next we see .innerHTML. This is the super-specific property that we want the button to adjust, and is the text within our “example” paragraph. So, to recap: onclick, the button needs to look into the document, get an element by the Id “example”, and grab it’s inner HTML.

Finally, we see = “I’m a secret”. This is the last piece of our puzzle, and it tells the button to change the text of our “example” paragraph to “I’m a secret” when it’s clicked.

Looks like a lot when it’s all broken down, eh? You’re right, but there is a logic here when we go through, bit by bit. We just have to hold the computer’s hand the whole way, tell it exactly where to look, and what to do when.

3. What do you find surprising about coding so far? Do you find anything easy? What? Why?

Honestly, almost everything about coding has been surprising to me thus far. Probably the most surprising thing is how much I’m enjoying figuring it out. Don’t get me wrong, 99% of the time it feels like I’m waving in the dark, but when that lightbulb moment happens? It’s the best feeling.

As far as something I find easy, it’s probably been animations. Not that they are super easy (not at all), but working in that kind of space, figuring out how to adjust those properties with keyframes was a very fun and oddly natural thing. I can visualize how the elements will interact based on the frame, which really helps. And I can make stuff bounce! How fun is that?

4. What’s difficult about coding for you? Why?

Conversely, I’ve been having a tough time wrapping my head around flexibility and reactivity within my page designs. I think this comes down to two major factors: inexperience, and OCD.

Inexperience is a factor in all learning, so that’s not too surprising. Learning how all this stuff works is why I signed on in the first place. Now the OCD, that’s a different beast.

Obsessive Compulsive Disorder affects a lot more people than you might think, and I happen to be one of those people. We don’t really get to decide what we click into, and having exacting control over how things look is a pretty common symptom. The need for things to be “just right”. Turns out this has been reflected in my code as well: wanting to have exact measurements on every little thing.

This kind of defeats the purpose of a lot of the structure that’s been built into HTML. Even grid structures can (and should) be flexible, allowing the content to be usable across any platform, regardless of size or form factor. I’m hoping that this can be an opportunity to retrain by brain: it doesn’t have to be perfect in order to be good.

5. What’s cool about Event Listeners? Why are they useful and what more would you like to learn about them?

Event Listeners are fun! They allow us to add user functionality to a part of our website. So, if we have a button on our site, the Event Listener is what tells it to perform when clicked.

They are useful because they drive engagement, and make the user feel more involved. I get to click the button? Rad.

I’d like to learn more about how to add more actions per function. Like, ok, clicking the button will submit the form. Neat. But can I also make it shoot fireworks while making a little party blower sound?

6. Why are you motivated? Why are you in class?

I have a driving need to know how things work. This comes from a variety of factors, but I am most happy when I am building or breaking something down: what pieces go where, why, can I improve it?

I just like to make things.