Thanks for sharing :-)Google+StumbleUponFacebookRedditTwitterEmailtumblrbufferLinkedInDiggPinterest

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.

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.

Thank you for reading JavaScript Code StructurePlease do share using the buttons below!

Thanks for sharing :-)Google+StumbleUponFacebookRedditTwitterEmailtumblrbufferLinkedInDiggPinterest
Thanks for sharing :-)Google+StumbleUponFacebookRedditTwitterEmailtumblrbufferLinkedInDiggPinterest

JavaScript is the programming language of the web, designed for the web to add behavior and interactivity to web pages. In this episode we’ll take a look at the very basics of the language. We’ll look at the core syntax of the language, where to place your JavaScript, what you can do with JavaScript, and what tools you will want to make use of in your JavaScript learning and programming. JavaScript used to be the frowned upon toy language of the world, but things have changed! Today with modern JavaScript frameworks and best practices, JavaScript is a bona fide enterprise level tool being put to use by the very most humble websites on up to super complex applications from the likes of the Google and Yahoo engineering teams.


Platform Agnostic

Any time we work with a programming language, we have a sense of the development environment in use. For example if your application is an iOS app, your development environment probably consists of the Objective C language, being written on an Apple Computer, using the Xcode IDE. Contrast this with .NET application that would be aligned with the C# language, on a Windows PC, using the Visual Studio IDE. JavaScript on the other hand is not really tied to a platform environment. If you want notepad.exe to be your IDE of choice, you can do that!


What Should I Write JavaScript With?

Since JavaScript is so platform independent, you can use any of the wonderful IDE’s available to you today. Some favorites include Eclipse, VIM, Aptana, Dreamweaver, Brackets, Sublime Text, and more. Like we mentioned earlier, if you are more of the no frills type of developer, you can keep it as simple as using something like notepad to create your JavaScript files. Whatever feels comfortable to you. Personally, I do enjoy some amount of syntax highlighting and code beautification from my IDE, so I will usually use one of the more advanced tools to provide this function.


Powerful Browser Tools

There are a large number of browsers, but for all intents and purposes, Microsoft Explorer, Mozilla Firefox, Google Chrome, and Apple’s Safari are the main ones to focus on. To focus this even further, most web developers make use of Google Chrome and it’s developer tools, or Mozilla Firefox and the excellent Firebug extension for writing and testing the JavaScript they will make use of. For this tutorial we’ll be making heavy use of Mozilla Firefox and the Firebug extension, so if you’d like to follow along, by all means get yourself a copy of each at those links if you do not already have them installed!

Benefits of Firebug

The benefits of Firebug are many, here are some of the key features that are really helpful.

Easy to Launch and Use

Firebug maintains a simple icon in the browser once it is installed. You can easily enable or disable the service, arrange the console to your liking, and configure which websites you want it to run for.

HTML Inspection and Editing

Firebug makes it easy to inspect the HTML source of a webpage, or even edit it live and on the fly. The DOM and webpage will update in the browser in real time as you make changes. This is a super slick and valuable testing feature.

Debug CSS Designs

It’s easy to see exactly what CSS is affecting which elements on the webpage with Firebug. Being able to isolate CSS in this way will save you hours of time and frustration.

JavaScript Debug and Profiling

In firebug you can set breakpoints and step through the JavaScript code in real time. It makes debugging and troubleshooting much easier, as it allows you a window into the actual workings of the code. The profiler will narrow down any spots in the script that might be slowing your app down.

Simple JavaScript Testing

This is my favorite feature of Firebug. If you’re used to programming in PHP or another language, you’ll know that many times in testing, it is a tiring process of edit file, save file, refresh browser, observe result. Wash, rinse, repeat. With the Firebug command line, we can simply type some lines of JavaScript and then click, Run. Poof! The JavaScript executes, and we smile :-)

Here is our first line of JavaScript and we can run it right in the Firebug console with ease!

getting started with javascript programming


Web Concepts

JavaScript is often referred to as one of the 3 core components of web pages.

  • HTML The HTML is the markup language of the web page which envelopes our content. HTML files may be hand written, or dynamically created via a server side programming language such as PHP. Worth noting is that JavaScript can work on the server as well in the form of node.js, however that will be for another tutorial.
  • CSS CSS is the design language of our web pages. When we have the markup in place, there needs to be a way to add some style to that markup, lest we have a majorly bland design. Cascading Style Sheets are what do this for us.
  • JavaScript JavaScript is what we’ll be focusing on here. It is what gives the ability to add interactivity and behavior to a web page. The beginning concepts of JavaScript are very easy to understand, but as we get into the more advanced features of the language such as Object Prototypes and such, we’ll see the mind bending abilities of JavaScript.

JavaScript is not a General Purpose Language

Other languages like C++, Java, C, or C#, are more general purpose programming languages that allow full access to memory and file systems. JavaScript is also not Java, in fact it’s about as opposite from Java as it could be! At the time of ECMAScripts creation, Java had a lot of momentum, so it is theorized that JavaScript borrowed its name from this craze for Java. JavaScript is designed and used inside the Web Browser. That is where it works best and excels.

In Coming lessons we’ll start digging into the syntax of the language and begin creating some simple programs. We’ll take a look at operators, structure, loops, functions, variables, conditionals, comments, and more.

Thank you for reading Getting Started With JavaScript ProgrammingPlease do share using the buttons below!

Thanks for sharing :-)Google+StumbleUponFacebookRedditTwitterEmailtumblrbufferLinkedInDiggPinterest