- Part 1: Introduction and Basics (this post)
- Part 2: Deploy & Activate *
- Part 3: The Client Side Object Model *
- Part 4: Functions, Objects and Classes
- Part 5: Avoid the Global Namespace *
- Part 5: Download & Caching *
- Part 6: Efficiency & Performance*
- Part 7: Testing *
- Part 9: Error Handling *
- Part 10: Advanced Topics *
- Part 11: Security *
- Part 12: Implementing Business Logic *
- Part 13: Tools and Resources *
- Part 14: Wrap-Up *
*: Coming Soon…
Another easy one. Just about any UI manipulation we care to write the code for. This can range from pure eye-candy to something that provides actual business value. The only times you can’t manipulate the UI are:
Anything else is fair game, and that is both boon and bane.
When you are manipulating the user interface, you are doing what is called DOM scripting or DOM manipulation. DOM stands for Document Object Model and it is the hierarchical representation of the HTML markup that the browser uses to render your page. Every object shown on the page (and also those not visible) are represented by a node nested inside the DOM. Changing the characteristics of those nodes, adding nodes and removing nodes all result in a changed interface being shown to the user – changed, that is, from what the server originally sent down to the browser.
What You Need to Know
Enough introductory drivel. Let’s write some code. Fire up your browser of choice and navigate to any website. Assuming that you’re using a relatively modern browser (IE 7 or later , Firefox or Chrome) open up the developer tools: in IE and Chrome, simply hit the F12 key. In FF, hold down Ctrl and Shift and hit the K key.
In IE: Click the Script tag and then the Console button below it:
In Chrome, click the Console button:
In FF you don’t need to do anything, the Console is automatically shown:
Now hit enter. You should see a small dialog box pop up that shows your message. Click OK to close the dialog box.
It’s time to get a little more advanced (but just a little).
You can type that in the same Console and you should get the same results. The variable declaration (“var myVariable=”HelloWorld”) defines a variable which is then referenced in the following alert statement. At that point the value of the variable (in this case “Hello World”) is used by the alert. Go ahead and give it a try.
There are a few things that can get tricky about variables, but we’ll cover those later. For now, here are a couple of rules to remember:
- var is your friend. 99% of the time, you always want to preface your variable declarations with the var keyword. This declares the variable as local to your current scope. We’ll talk about this more later in part 5. For now, and until you understand the implications of not doing so, always use var
- Null – variables are null if it contains an unknown value, which is not the same thing as undefined.
Passing a parameter to the function is equally simple:
We’ll touch on some advanced function declarations and usage in part 4.