JavaScript takes on increased importance in app
development. Therefore, this section presents a brief overview of the
JavaScript language and its key characteristics from the perspective of
an experienced SharePoint programmer. Although you have probably
written some JavaScript, you might not have spent time to understand
JavaScript at the level necessary to be successful writing SharePoint
apps. If you are a JavaScript expert, you can certainly skip this
section.
Understanding JavaScript namespaces
As a SharePoint developer, you have probably written at least some
JavaScript in a webpage; thus, you understand that JavaScript code is
comprised of functions. These functions can be written directly into
the webpage by using script tags or referenced in separate library
files. If you are more of a casual JavaScript developer, however, you
might not be aware that simply writing a named function places that
function in the global namespace. The global namespace is the container into which all variables and functions are placed by default. In the browser, this container is the window object. Cluttering the global namespace with functions can easily lead to naming conflicts and “spaghetti” code.
In addition to the global namespace, you can define your own custom
namespaces. Namespaces in JavaScript are essentially just containing
objects defined within the global namespace. By using custom
namespaces, you can isolate your code from other JavaScript in the
page. This is essential for preventing naming conflicts. Custom
namespaces are one of the few things that should be defined within the
global namespace. Most variables and functions are generally defined
within a custom namespace. The following code shows how to define a
custom namespace:
var Wingtip = window.Wingtip || {};
The sample code sets a global variable named Wingtip
to reference either an existing global variable or creates a new one if
it does not exist already. This is the standard approach to creating
namespaces because this line of code can exist in several different
libraries without causing a naming conflict. The first library loaded
with this code present establishes the namespace definition for those
loaded later.
Understanding JavaScript variables
Variables in JavaScript can be declared either in a namespace or
within a function. Unlike C#, JavaScript variables are not declared by
using a data type keyword. Instead, JavaScript uses the var keyword to define a variable. Although not strictly required, variables should always be declared by using the var
keyword. This is important because when it is not used, the variable is
automatically defined within the global namespace. When the var
keyword is used outside of a function, the associated variable is
always defined within the global namespace. When it is used within a
function, the associated variable is scoped to the function only. The
following code shows an example of a global variable, global function,
and local variable:
<script type="text/JavaScript">
var myGlobalVar = "This is a global variable";
function myGlobalFunction() {
alert("This function is defined in the global namespace");
for (var i=0; i<5; i++) {
alert("This variable is local to the function: " + i);
}
}
</script>
Variables can be
defined within a custom namespace by simply referencing the namespace
when using the variable. The code that follows shows how to create a
variable within a custom namespace.
var Wingtip = window.Wingtip || {};
var window.Wingtip.myNamespaceVar = "This is a variable defined within a namespace";
Although JavaScript does not have specific data type keywords,
declared variables do have a type based on the value they hold.
Variable types can be examined by using the typeof operator. The typeof operator returns one of the following values when applied to a variable or function parameter:
-
undefined
-
string
-
number
-
Boolean
-
function
-
object
Because JavaScript is very loose with rules concerning variable and object definitions, you should be sure to always use strict JavaScript in your apps. Strict JavaScript is an improved version of JavaScript. You can enable it by adding the line “use strict”
at the top of any library or function. Strict JavaScript will prevent
you from making many common mistakes in your code. The following lists
some of the key restrictions enabled by strict JavaScript:
-
Cannot use a variable without declaring it
-
Cannot write to a read-only property
-
Cannot add properties to non-extensible objects
-
Cannot illegally delete functions and variables
-
Cannot define a property more than once in an object literal
-
Cannot use a parameter name more than once in a function
-
Cannot use reserved words, eval, or arguments, as names for functions and variables
-
The value of this in a function is no longer the window object
-
Cannot declare functions inside of statements
-
Cannot change the members of the arguments array
