Tag Archives: DOM

An Introduction to JavaScript

Series Contents

  • Part 1: Introduction and Basics (this post)
  • Part 2: Deploy & Download
  • 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 8: Professional JavaScript Development *
  • 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 *
  • Bonus: JavaScript in SharePoint 2013 *

*: Coming Soon…

Introduction

As the title of this post states, this is an introduction to JavaScript and using it in SharePoint.  It has some good information in it for any JavaScript developer, but it is very basic.  If you are already familiar with JavaScript, go ahead and skim this post or skip it entirely.  There likely won’t be a lot of new material here for you.  If, however, you are just getting started with JavaScript, read on.  You’ll probably learn a thing or two.

JavaScript is not a new technology, and yet it appears to be new to a lot of SharePoint developers.  I honestly don’t know why.  This series is going to take a look at JavaScript from a dev’s point of view and attempt to explain how it can be a very powerful tool in our toolbox.  I’m going to repeat one point there just to make sure you got it: this is a developer’s point of view.  That means no Content Editor Web Part (CEWP, the root of all evil).  It also means Visual Studio, deploying Solution Packages, and generally approaching JavaScript as a coding language (which, after all, is what it is).  If all you want to do is grab a script and toss it into a CEWP, this is not the right place for you.  Please move along.  We’re talking professional developer stuff here.  :-)

Starting right at the beginning – why would we use JavaScript in our SharePoint code when we have a rich server-side API available to us?  That’s an easy one – because not everything can or should be done on the server.  That’s not to say that the server side API is useless.  Quite the contrary – both are necessary to deliver an effective, modern application (whether on SharePoint or not.)  Despite what you may think, and what you may read elsewhere, neither JavaScript nor the server API can solve 100% of the business problems we face.  Too, SharePoint is just a great big ASP.Net application so using JavaScript is not going out on the limb of unsupportability.

In recent years, JavaScript has grown up considerably.  The addition of libraries such as JQuery, Dojo and MooTools have helped make JavaScript to become more popular.  In the SharePoint world, SharePoint’s JavaScript Object Model has brought JavaScript to the foreground.

One quick point here about JQuery.  Nobody anywhere has ever written a single line of JQuery.  There is no such thing.  JavaScript is a language.  JQuery is a library.  We use JQuery to make JavaScript easier to work with, but we don’t write JQuery.  This may seem like a pedantic nit, but it is an important distinction for one reason: there is a wealth of JavaScript material on the web that you ignore at your peril.  If you always look for a JQuery solution, you are almost certainly making your life harder.  That’s not to say that JQuery isn’t a great library; it is.  It’s just not always the answer.  Sometimes a few well-crafted lines of JavaScript are all that is necessary.  There’s not always a need to fall back on JQuery and it’s library of plug-ins.

What Can We DO With JavaScript in SharePoint?

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:

  • Content delivered via a plug-in of some type (Silverlight, Flash, ActiveX, etc) (Although, some of these do offer a limited ability to manipulate them via JavaScript )
  • If JavaScript is turned off in the user’s browser

Anything else is fair game, and that is both boon and bane.

DOM Scripting

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

At a very basic level, there are a few important things to know about using JavaScript:

  1. JavaScript is an interpreted language and so there are no DLLs that need to be deployed to the server
  2. JavaScript is downloaded to the user’s machine and parsed /executed there.
  3. JavaScript is downloaded in clear-text (though it may be somewhat obfuscated).  This is potentially a big deal as we’ll discuss in Part 12.
  4. Although there is a standard definition of JavaScript (ECMA-262, version 5.1), different browsers will interpret your JavaScript code slightly differently.  This has an impact on testing, as we’ll discuss in Part 8.
  5. Once downloaded, JavaScript files are cached on the user’s machine to improve performance.
  6. JavaScript is case-sensitiveHELLO is not the same as hello and not the same as Hello.
Another pedantic nit here: JavaScript is neither Java nor Java-lite.  Other than some semantic similarities, it has nothing to do with Java.

Your First JavaScript Program

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:

In the browser/JavaScript console (where indicated in the above screenshots for your browser), type the following code:

alert("Hello World");

Now hit enter.  You should see a small dialog box pop up that shows your message.  Click OK to close the dialog box.

Congratulations, you’ve written your first JavaScript program.  (We’ll revisit each of those Console windows later on in this series).

It’s time to get a little more advanced (but just a little).

Variables

Like any programming language worth it’s salt, JavaScript has variables.  Declaring and using variables is easy:

var myVariable="Hello World";

alert(myVariable);

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:

  • JavaScript variables are not typed.  In other words, you don’t declare the data type that the variable will store when you declare the variable, and changing data types is perfectly OK.  The following is perfectly valid, although perhaps not a great practice:
var myVariable="Hello World";

alert(myVariable);  //outputs Hello World, myVariable holds a string

myVariable=345;

alert (myVariable);  //outputs 345, myVariable holds an integer

  • 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.
  • Undefinedundefined is a special value in JavaScript.  It means the variable has not been declared (in the current scope – more on that in part 5), or has been declared but has not been given a value.

Functions

JavaScript is organized into functions.  A function is a group of statements organized together in what essentially amounts to a named container.  Here is an example of a function declaration and usage:

//declare the function:

function sayHello(){

    alert("Hello World");

}


//call the function:

sayHello();


 

Passing a parameter to the function is equally simple:

//declare the function with a parameter:

function saySomething(thingToSay){

    alert(thingToSay);

}


//call the function and pass in a parameter:

saySomething("Hello World");

We’ll touch on some advanced function declarations and usage in part 4.

Wrap Up

That’s a quick, high-level tour of the basic stuff you need to know to begin operating in a JavaScript world.  There is obviously a lot more that needs to be covered – or else I wouldn’t have 14 more sections planned :-).  We’ll get to all of that in later sections of this series.  Hopefully this has gotten everyone on the same page.  We’re pretty quickly going to move into the deep-end, so buckle up…