In case you haven't heard.. JAVASCRIPT IS MAKING A COME BACK!! And it is not the same JavaScript you fiddled around with in the pre-AJAX era. It has become reborn with the help of HTML5, mobile, and even Windows 8 (see Create your first Metro style app using JavaScript). Understanding JavaScript is becoming essential and can no longer be dismissed as a "weakly-typed, toy language with no compilation checks," but instead as a versatile, dynamic, cross-platform language.
Before jumping into code and learning JavaScript, I want to give some background of its purpose. It is important to know that HTML, CSS, and JavaScript are intertwined. Without HTML, JavaScript is nothing. And without CSS, HTML is nothing. Together, these 3 languages are one realm. An advancement in any one of these technologies is an advanced to the other two.
Now for our tools, we will be using jsFiddle: "an online editor for snippets built from HTML, CSS and JavaScript." This way, we can run JavaScript snippets any time without firing up a bloated IDE or finding a port to use on your web server. Just paste and run. Let's try it!
Type "alert('This is a JavaScript alert!')" into the "JavaScript" area and then click "Run". You should see a browser alert. Congratulations, you have just executed JavaScript!
Now let us take this even further. In the "HTML" area, type:
<div id="my-id">Some random text on the page.</div>
Then in the "JavaScript" area, update the alert to this:
var elm = document.getElementById('my-id');
alert(elm.innerHTML);
You should now see the alert with the text of the HTML div container:
This time, put an input and a button on the page. We will wire the button click to take the value of the text input and update the HTML with the value.
In the "HTML" area, type:
<div id="my-id">Some random text on the page.</div>
<input type="text" id="my-input" />
<input type="button" value="Update Text" onclick="updateDiv()">
Then in the "JavaScript" area, update the code to this:
function updateDiv() {
var elm = document.getElementById('my-id');
var input = document.getElementById('my-input');
elm.innerHTML = input.value;
}
Click "Run" and you should see the below screenshot. You can see a live working example here: http://jsfiddle.net/hBL3X/)
Do you see what is happening here? You enter any text in the input and click the "Update Text" button. This will take your input value and update the div container. The lessons learned from these 3 lines are big!
First understand that you can easily wire HTML elements to JavaScript by using the "onclick" attribute of the element. Simply add the JavaScript function name in there (or inline JavaScript if you like) and when that element is clicked, it will execute the code. It does not even have to be a button. You can attach an on click to a link, paragraph, div, etc!
Next thing to notice is that JavaScript can get a reference to any HTML element on the page by using "getElementById" and passing in the id of the element. This will return a STRONGLY typed object in the "elm" and "input" variables. We see how these are strongly typed because "innerHTML" is used to get the value of the div's text and "value" is for getting the input's value.
Let us dig even deeper as to what is going on here by using the browser's debugger. I prefer Chrome since it is so aesthetic and the built-in developer tool is pretty awesome.
Go to the wrench icon in Chrome, then Tools > Developer Tools. You should get a new window that is showing all the HTML, CSS, JavaScript, and lots of other info for the web page. Click on the "Scripts" tab and click the drop down and select "_display" to show the code we have entered into jsFiddle.
Now put a breakpoint at "elm.innerHTML = input.value". Go back into jsFiddle and click the "Update Text" button again. Notice that the debugger paused at your breakpoint and now you get all the scope variables and call stack. Look at the "elm" and "input" variables under "Scope Variables". You can see the objects, their types, and all its properties! Open the "input" tree and take a look at the "value" property. It has the exact text you entered into the input. Look at all those other properties of the input object too. Image what you can do with that using JavaScript!
A picture is worth a thousand words:
Conclusion
I hope this simple yet powerful example gives you the foundation to think of new uses for JavaScript. We barely scratched the surface. For example, JavaScript is a language by reference. Also you need to handle scoping well in JavaScript and avoid global variables. When you finally get the basics down, you can start rapid developing using JavaScript libraries like jQuery or frameworks like Kendo UI or Ext JS. This will help you breeze through cross-browser compatibility issues, AJAX capabilities, and a whole world wide web of goodies.
Happy Coding!
Further Reading