Debug JS
Before we actually see some JS code let's talk about a bit of what is happening with it today.
It's important that you don't misunderstand Java with JavaScript. They are different languages in design and concept. It's commonly said that JavaScript was invented in 1995 by Brendan Eich, version number six it's currently running. It was released in June 2015.
I'd like to express my thoughts clearly. If Flash is sentenced to death by Apple, by Google and many others, JavaScript is the logical solution to the problem Flash brought. It was really difficult to sustain that black mystery box Flash had turned into. Nobody actually knew what was in it. JavaScript is making all the code visible again! The code that makes our Websites moves. Something that we love about today's Website, for sure. So, you can access to all JS code that runs on any site just by going to Chrome Developer Tools. I suggest you open them right now. There's a shortcut at the right top corner of the browser. Go to More tools - Developer tools. You will see a folder called js. Open it please, there you will find two .js files. One is a IE10 viewport hack for Surface/desktop Windows 8 bug and the other is the main Bootstrap.js file that's allowing this site to react when a certain event occurs. Another tremendous work from Bootstrap. These guys are building an awesome library, a very complete one. Take a visit to their site, you won't regret it.
Going back to the events, in this site, for example, when the home page finishes loading you will see that the overool starts moving. In this case, we can say the event that called that particular function was specifically that the browser has completed the action of loading the page, reading all the .html, .css and .js files available. If you like how it works you can watch the code, copy it and save it in your computer. Other functions can be activated directly by the users.
For example, when you see this:
Having a complete code accessible to anyone, anywhere is not a triviality. Same as with CSS, all the modifications you do to the code can have an effect on what the browser shows you. And you can get it almost in real time (it can take some seconds to apply). People from everywhere can see how these three program languages are interacting smoothly. If they can manipulate the code, eventually they will be able to write their own code, too.
The Developer tools will catch some errors in the JS code and will suggest a way to fix these errors. Therefore, the Developer tool is our very fundamental weapon in debugging our own code. Other tools that I recommend you use for debugging JavaScript are JSHint and JSLint. Both can be freely use online. Plus JSHint can be installed to your Sublime Text and you will get a visible yellow signal every time any error or any warning is scanned in an opened JS code.
JSHint will also suggest a way to fix any error or any warning. In the example above JSHint is telling us that there's a missing semicolon. We just need to add it, and we won't see that warning any more.
It's a very good practice that you write your JS code with your Debug mode selected while you are using Sublime Text. That's the way you can see any of this signs and correct it immediately wile you are coding.
One of the coolest things about JS has to do with the way it's structured. It's a language built to left data incomplete and continue running. You can use many features for these. You can create an empty array. You can use undefined values, and that is why it's a great language for interacting with the users. Most of today's JavaScript codes ask for the user to do something with it. What makes it really awesome is that you can leave a box in your code that will be full filled afterwards. Many people complain about JS typing redundancy. I think it wouldn't be son permeable if it wasn't so redundant.
We are talking about real flexibility. I mean, you can declare a variable after it has been used!! So the compiler can see what this function does, how it works, and we all leave happy with the fact that no value has been assigned in the function yet, it's just a written procedure, a map. The rest can be complete by the user, by other pieces of code, by any event that can happen in the future. 'Cause JS also allows you to make variables jump from an external scope to a local scope. This is called a closure. A closure can easily grant the creation of many similar functions at high speed. Complete blocks of content belonging to one or more inner function will be available outside some outermost function.