BTI220 notes – Thu Jul 04

JavaScript language elements will be discussed, including the Number, String, and Date objects. Then, we’ll introduce the two “big ideas” in JavaScript that you must become comfortable with in this course – functions, and inheritance.

.

Prepare for today’s session

Continue working through the JavaScript Guide.

Plan to complete sections 4, 5, and 7, by trying all the examples in the Firefox Scratchpad.

.

Quiz discussion, etc.

Quiz 1 will be returned, and the answers discussed.

Follow Crockford’s code conventions when writing JavaScript.

Today’s Quiz 2 has been rescheduled to next Tuesday’s class.

Labs 1 and 2 will be posted by mid-day tomorrow/Friday.

.

JavaScript objects – Number, String, and Date

We’ll use the Mozilla Developer Network JavaScript reference documentation to learn more about Number, String, and Date.

.

How to use API documentation effectively

You have read documents that use the “tutorial” and “getting started” styles in the past few days. Now, let’s use application programming interface (API) reference documentation. To be an effective web programmer, you’ll often have to use the reference docs as a primary source, for a number of reasons.

Let’s look at the documentation for the following JavaScript objects:

.

True and false, and truthy and falsy 

We know that the value true is true, and that the value of false is false. What about other values?

First, let’s look at falsy values. They include:

  • false
  • null
  • undefined
  • an empty string
  • the number 0 (zero)
  • the number NaN (not a number)

Truthy values include:

  • true
  • the string ‘false’
  • all objects

.

JavaScript reserved words 

There’s a short list of names that are reserved in JavaScript. You can’t use them as variable identifiers etc. See Crockford or MDN for a complete list, and for the rules.

.

The importance of scope in JavaScript 

JavaScript’s execution environment enables you to work with its objects (Number, String, Boolean, Object, Array, etc.) easily and without any coding ceremony. That’s because these objects are in the global scope.

When JavaScript is hosted in a browser, a few additional objects are available, including console, which you’ve used in the Firefox Scratchpad.

The console object is actually a property of the browser’s top-level window object. Its fully-qualified name is window.console. However, when you’ve used the Firefox Scratchpad, you have simply used “console”, for example:
console.log(‘Hello, world!’);

Why does this matter? It’s too easy to create a problem by overwriting an object in global scope. For example, you can try this:

console.log('this will work OK');
var console = 'whatever';
console.log('this will not work');
// because you overwrote the console object

You can prevent problems related to the global scope by writing functions.

.

JavaScript functions discussion

Functions are one of the “big ideas” that we’ll work through in JavaScript.

Sources of information include:

  • MDN documentation
  • Crockford writings
  • Others, including Wikipedia, WebPlatform.org, etc.

.

Function syntax 

We will ALWAYS (well, almost always) use this general syntax form when declaring and writing a function:

var functionName = function(arg1, arg2) {
// statements
}

The “functionName” word is simply your name for the function – whatever you decide.

Points to know about a JavaScript function:

It’s an object – just like a Number, a String, an Object, or an Array.

Not all functions need a name (identifier) – if a function doesn’t have a name, it’s an anonymous function (also on MDN here, here, and here) – enables you to use a function as an expression.

Functions are used to specify the behaviour of objects. When a function is a property of an object, it’s called a method.

Functions are special (in JavaScript) because they can be invoked (executed). So, as an object, it has a (hidden) property for the function’s code, and a (hidden) property that holds the function’s context/environment.

If you want to return the result of a function (instead of the function object itself), add ( ) after the code block’s closing brace } , and enclose all of this in ( ) parentheses – this is an immediately-invoked function expression.

Variables declared in a function are scoped to that function (and are not visible outside) – so, declare the function’s variables at the beginning of the function.

A function can support recursion – calling itself – but make sure there’s a natural termination condition.

Functions can be defined inside of other functions. This is known as closure. The inner function has access to the vars and parameters of the outer function. Closure enables state persistence and information hiding.

.

Closure

One of the best parts of JavaScript is its functions. One of the best parts of JavaScript functions is closures. So, closures are best-of-the-best.

Douglas Crockford introduces closures in this video. Watch the segment that runs from 11:30 through to 15:00 (about 3 1/2 minutes).

This post has a detailed treatment of closure – study it.

.

.

.

Advertisements
  1. No comments yet.
  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: