#2 Learning the basics of JavaScript: the DOM, syntax, nodes  

This is the second part to my previous article, #1 Learning the basics of JavaScript: variables, arrays, conditional statements and functions.

JavaScript is used to create interactive experiences for web users, in contrast to static HTML pages that only display information. All of my JavaScript education so far has been about writing code to execute particular functions under certain conditions.

In contrast, when I learned HTML and CSS, it just building web pages that looked semi-nice. They didn’t do much.

The modern web is awash with JavaScript and other dynamic languages. It’s now all about creating experiences for users, and enabling them to perform many tasks online.

A language like JavaScript is useful in creating dynamic applications built for a purpose. JavaScript is how you manipulate the HTML and CSS elements on a web page.

Why learn JavaScript?

Compared to the internet in the noughties (when I was growing up), there are now so many online games, courses and social media platforms to choose from.

Most of them require some kind of interaction from their users. You might post a text and image-based social media update, or play a new language game online.

Of course, there are other useful programming languages, such as Ruby, Java or Python. You can use any of these depending on the platform, operating system and the end purpose that you’re developing for.

Despite the other options available, JavaScript has staying power. As with learning any programming language, the principles of JavaScript are also transferrable.

A new way to learn code

Learning the principles of computer science is difficult to say the least, and especially in the context of software development. It’s such a new field that is developing rapidly, a Wild West of technology. And that’s why people love it so much.

And yet, it’s all very well learning what variables and strings are, but if you’re completely new to the game, what does it even matter? You’ll forget it all in a week, unless you understand why.

pexels-photo-267684

Software development theory

I come from an arts and humanities background. I can pretty much learn any humanities discipline with ease. It’s all about contextual understanding and subjective interpretation.

But there’s a big difference between learning in the arts, and learning in the sciences. With the latter, you’re absorbing and coming to terms with a pre-existing system defined by others. There is no room for debate in how the system is put together. It just is.

The foundation of all science and engineering is that individual creators should be able to work together, and create technology in a way that is compatible with others in the system. They learn and use a common language to work with what already exists and build upon it. You must understand this principle when you dive into the world of programming.

With the arts, in contrast, everyone is largely working in silos on their own magnificent creations and using their sense of subjective understanding. It’s not important whether it’s compatible within a larger framework because it’s dependent on the individual to interpret the work. (Yeah, it’s not that compatible with the world of employment).

Now, on to some JavaScript.

The DOM

We’ll start with the DOM. This is the Document Object Model.

I really had no idea what this was when I started learning JavaScript, but, according to Jeremy Keith, the DOM:

“Represents the web page that’s currently loaded in the browser window. The browser provides a map (or model) of the page. You can use JavaScript to read this map.”

pexels-photo-38136

This model is structured like a tree, with the branches representing the elements. It represents the HTML of the website.

And, according to the W3 (an important web standards body), “The DOM is designed to be used with any programming language.”

This is key, because it means that there can be standardisation in programming and across the web, so it will be easier for different languages to communicate with each other.

Nodes

Now we’ll look at nodes in JavaScript. This is a concept that can be applied to other programming languages, too.

Every element within the HTML tree of the DOM is a node. So, for example, a paragraph <p> is a node. So is a list item <li>.

Higher-up branch nodes are ‘parents’, adjacent branch nodes are ‘siblings’, and lower-down nodes are ‘children’ of their ‘parent’ nodes. When you use your code to act upon any element, the same code will also affect any child elements.

Syntax

Syntax! What is JavaScript syntax? In linguistics, syntax is the structure of the words and sentences of a language, such as in English.

According to Dictionary.com:

“the study of the rules for the formation of grammatical sentences in a language.”

But how does this relate to JavaScript? All programming languages have their own syntax, and again, according to Dictionary.com:

“the grammatical rules and structural patterns governing the ordered use of appropriate words and symbols for issuing commands, writing code, etc., in a particular software application or programming language.”

For example, a piece of JavaScript syntax is separating your code statements with semicolons, like this:

var x, y, z;
x = 5;

If you don’t follow syntax rules when writing your JavaScript, the code won’t work. Another one is closing off all your brackets every time you use them.

[NOTE: A kind reader told me that semi colons are not 100% necessary in JavaScript, but they are in some other programming languages. They are a convention in modern JavaScript, rather than hard and fast syntax.]

So we can interpret JavaScript syntax to mean how we write the code in order to create software that works. Others have previously agreed this is how we will do it, so that’s what you do. The concept of programming syntax will also be broadly applicable to other languages, so once you’ve learned it, it will come in handy in many future contexts.

Conclusion

I didn’t become good at writing because I enjoyed how words fit together and coming up with different combinations. I fell in love with the beauty of shared meaning, and telling stories with language.

For women today, it’s not enough to just learn little bits of code, and expect to understand software programming. As someone who just missed out on being a digital native, I need to learn the theoretical models behind computer science, and history of the web itself. So I’m continually learning how it all works as a whole.

Many people, especially women, lack a good understanding of the technologies that have taken over our lives. They’re not familiar with the concept of engineering, and are continuously told they’re not smart enough to understand anyway. Just leave it to the men, people imply.

Plus, it’s very fashionable to learn coding at the moment, and it’s easy to jump straight in without having an end goal in mind. Better yet, in order to become the creators, engineers and designers of future web technologies, you need to gain a thorough introduction to the principles of software development before you learn to code.

Did you enjoy this article? Contact me at catherine@awaywithwords.co to commission me to write content for your company blog.

 

 

 

About the author

Catherine Heath

Catherine is a freelance writer based in Manchester. Blogs. Copy. Documentation. Let's ditch the jargon – just give her plain writing.

View all posts

Leave a Reply

Your email address will not be published. Required fields are marked *