|

JavaScript Code Structure

JavaScript Code Structure

We’re moving into the wild and wonderful world of JavaScript programming. Before we start trying to be a skilled Ninja, we need to first spend some time in the dojo to hone our techniques. In other words, we won’t try to run before we first learn to walk. In this episode, we’ll take a look at the structure of the JavaScript language. Let’s jump right in!


JavaScript is written in Plain Text

Much like you understand already from writing HTML and CSS, JavaScript is simply written in plain text. This would be perfectly valid JavaScript in an HTML page:

javascript structure


JavaScript is an Interpreted Language

That’s right folks, it’s interpreted, not compiled. This does not make it any less of a programming language much to the chagrin of some of the embedded machine code engineers of the world! Unlike a language like C which must make use of an intermediate program called a compiler to transform high level syntax into machine level code, JavaScript is simply interpreted by the JavaScript engine of the browser at runtime. Modern day JavaScript engines are works of genius, allowing extremely fast and accurate execution of JavaScript code. Therefore, there is no need to worry about JavaScript’s interpreted nature.


JS is Case Sensitive

In working with technology, us web developers are exposed to numerous different languages and syntax. Some of the languages we encounter are case insensitive, but JavaScript is case sensitive so make sure to keep this in mind. You will find things breaking and not working with simple case errors. For example alert(‘I am the JavaScript Victim’); works fine whereas Alert(‘I am the JavaScript Victim’); will fail in spectacular fashion. Actually, it won’t be all that spectacular, in fact the only thing that would tip you off that something went wrong is, nothing would happen. Such is the nature of JavaScript, it is a tricky language to debug, but more on that in a later lesson.


JavaScript Runs on Statements

Just like other languages, JavaScript runs one statement at a time. A statement is a group of executable language components terminated by a semi colon. Statements are usually executed in order from top to bottom. The order of execution can be changed by conditional statements such as if and switch, by looping statements such as while, for, and do, and by disruptive statements like break, return, and throw. Function execution also can change the top to bottom nature of statement execution.


JavaScript’s Forgiving Nature is a Weakness

JavaScript is a powerful and capable language. It does have some shortcomings that were actually meant to be helpful features when the language was first conceived. The most popular of them all is the highly infamous semicolon insertion. Built into JavaScript is the capability to detect poor syntax and automatically insert missing semicolons. Sounds like a good idea, right? Wrong. Should you forget to manually insert semicolons at the proper location in your code, Chuck Norris will unleash a fury of karate kicks and nun chuck whipping upon you. Well, maybe that won’t happen, but your scripts will be riddled with bugs that you will have almost no hope of finding, so make sure to just insert your semicolons so that everybody, including yourself, will stay happy.


Whitespace is Semi Insensitive in JavaScript

What? What the heck is semi insensitive? Well, for the most part, whitespace does not matter in JavaScript. This is why you see such widespread use of minification tools that take human readable JavaScript syntax code and strip out mostly all of the whitespace, leading to one long string of JavaScript that looks like some strange form of hieroglyphics. There are instances where whitespace does matter. For example:

The space between var and chimmy is actually needed here for the script to work properly. Or consider:

Whitespace contained within a string also cannot be removed.


Comments in JavaScript

JavaScript comments work just like they do in most other C based languages. You can make use of the well known multi line and or single line comment techniques. As you likely know, /* */ handles the multi line commenting while // can be used line by line, or at the end of a line to add a comment.

The Order of Code Execution Matters
As we mentioned earlier, when a web browser begins it’s interpretation of a web page, it starts at the top and goes line by line downward through the DOM. This includes the HTML, CSS, and JavaScript in the page. In our first little snippet of JavaScript, we made use of the oh so loved alert box to let the visitor know that we are a victim of JavaScript. Note that the HTML is rendered in the background, and page execution has halted once the alert message popped. The user must click ok to finish the program. Let’s make a very minor modification to that web page. We will simply move our script from the body to the head portion of the page. Let’s see what happens.

javascript structure 2

Note that we get the same JavaScript alert on that page. Do you notice something different though? That’s right, if you look at the background, absolutely no HTML has been rendered yet, and we are frozen in this state until we click ok. This shows that the order of execution is indeed important. This is an overly simple example, but you would be surprised as you move along in your JavaScript journey when you are debugging tricky problems to find out that simply moving your code up or down in the hierarchy of the DOM may solve your issue. It may seem trivial, but it does make a difference.


Where To Place JavaScript

  • Inline You can place JavaScript right into the HTML page using the script tags. This is good for very small sites and testing only. The inline approach does not scale well, leads to poor organization, and code duplication.
  • External File A better approach is to place JavaScript into separate files and link to them from the HTML page. This way a single script can be included across thousands of HTML pages, and you only have one place to edit your JavaScript code. This approach is also much easier to maintain, write, and debug.

Use of the Script Tag

In the past, we had to worry about specifying many attributes for the script tag. With the onset of HTML5 and modern browsers, simply including the src attribute is enough.

Where should I place the Script Tags?

The script tags can go anywhere in the page, but as a best practice, many developers will place it just before the closing body tag on the HTML page. This provides faster speed load times for your web page.

Conclusion

This was a very gentle primer of what’s to come. It has been helpful to review some of the key points and overview of the language.