BTI220 notes – Tue Jul 09

Ask your questions about functions and closures at the beginning of the session. Then, we’ll look at regular expressions in JavaScript. After that, we’ll discuss the second (of two) “big ideas” in JavaScript programming, inheritance.

.

Prepare for today’s session

Make sure you’ve reviewed last week’s notes, and practiced the code examples.

Then, read/skim today’s notes.

.

Functions wrap-up

Although we’ll “wrap up” our initial coverage of functions, it doesn’t mean that we’re finished with them. Functions are a JavaScript building block, so most of your JavaScript programming will involve functions.

Ask your questions about functions and closures in this part of today’s class.

Now that you’ve had some experience with JavaScript functions, you can study this MDN article on functions and function scope.

.

Regular expressions in JavaScript

In this Software Development program, you first learned something about regular expressions in BTO120. They’re useful for pattern-matching, as well as text transformations.

You’re learning JavaScript in this course in the context of web client programming. As a result, we’ll look at how regular expressions can help in this context, notably for pattern-matching as it applies to input data validation.

With this BTI220 course refresh in January 2013, we are using HTML5 technologies. That means that the browsers can perform many input data validation tasks that we used to do (in the “old days”!) with regular expressions.

For example, the HTML input element has many “new” input types:

  • date, and datetime-local – users select a date from a calendar, and enter times in a valid and correct manner
  • email – for a valid email address
  • number – for integer and decimal numbers
  • tel – for telephone numbers; combine with a “pattern” formatting attribute
  • url – for a valid URL

In addition, the HTML input element supports a number of “new” attributes, some of which used to require a regular expression to implement:

  • required – user must provide entry
  • min and max – for numbers
  • pattern (mentioned above) – a regular expression
  • placeholder – shows help/prompt/info text in the element
  • focus – sets the cursor in the field automatically

This is great news for web programmers.

Do we still need regular expressions? Yes.

There are many input data tasks that aren’t standardized (in a browser), but the concept and design approach is somewhat standard. For example, we have our own per-app or per-organization standards for:

  • the format of a user name – length, allowed characters, and so on
  • the format of a password – sufficient complexity, good security
  • your nine-digit Seneca student identification number, which begins with a zero (0)
  • a typical Seneca subject code, formatted as AAA999
  • a typical North American phone number

.

Getting started with JavaScript regular expressions

Create a RegExp object to hold a regular expression. The most appropriate (and recommended) way is to use a regular expression literal.

var re = /hello/;

The example above creates a must-match regexp for the text “hello”. It should be obvious from the syntax that JavaScript requires slash delimiters. Between the slashes, you write your regexp. Here’s a brief summary of some getting-started metacharacters and matches:

String begin ^
String end $

Match – one character .
Match – zero or one ? (preceding character)
Match – zero or more *
Match – one or more +

Character sets delimiters [ ]

Character classes
\d – numbers
\w – alphanumeric
\s – whitespace

In Lab 2, you will get some practice with JavaScript regular expressions. Then, you’ll be able to apply your knowledge later in the course on HTML Forms.

.

Another quiz

We’ll do our second (and last) quiz today, before we move on to the inheritance topic.

.

JavaScript prototypal inheritance

As noted and previewed, inheritance is the second of two “big ideas” that we’ll discuss in the JavaScript part of this course.

In JavaScript, objects are not based on classes. JavaScript does not use the classical inheritance paradigm that is found in C++, Java, and C#.

Instead, the recommended approach to is to use prototypal inheritance.

A new object can inherit the properties and methods of an existing object. (In essence, the existing object is the prototype for the new object. Another crude analogy is that the new object is a clone of the existing object.)

In summary, objects inherit from objects.

Remember that an object is a data structure which includes data (state) and behaviour. The data/state members are called properties, and the behaviour members are called methods.

Study (and work through) the following examples, which will introduce the concept and technique. Then, go through the MDN reference topics linked below.

.

First example – subjects

Here’s our first working example. We’ll model some School of ICT subjects.

First, we’ll need a subject object. (It will become the prototype for subject instances.)

var subject = {
    code: "",
    desc: "",
    prog: [],
    info: {}
};

As you can see, it has four properties. All empty for now. (If you needed initial values, you could include them.) Notice also that the prog property is an array, and the info property is an object.

Now, let’s create some subject instances.

To do this, we use the Object.create method.

Notice that we use the subject object as the prototype in the method’s signature.

var bti220 = Object.create(subject);
bti220.code = 'BTI220';
bti220.desc = 'Internet Architecture and Development';
bti220.prog = ['BSD'];
bti220.info = { hours: 4, url:'http://scs.senecac.on.ca/course/bti220' }

var ipc144 = Object.create(subject);
ipc144.code = 'IPC144';
ipc144.desc = 'Introduction to Programming Using C';
ipc144.prog = ['CPD', 'CPA', 'CTY'];
ipc144.info = { hours: 5, url:'http://scs.senecac.on.ca/course/ipc144' }

var btc140 = Object.create(subject);
btc140.code = 'BTC140';
btc140.desc = 'Critical Thinking and Writing';
btc140.prog = ['BSD', 'IFS'];
btc140.info = { hours: 3, url:'http://scs.senecac.on.ca/course/btc140' }

Great – we now have three subject objects.

Let’s dump the contents to the Firefox Web Console.

// Create a collection of all subject objects
var all = [ipc144, btc140, bti220];

// Declare and initialize an accumulator
var totalHours = 0;

// Go through the collection, accumulate hours, dump to the Web Console
for (var i = 0; i < all.length; i++) {
    totalHours += all[i].info.hours;
    console.log(all[i]);
};

// Report the total hours
console.log('Total hours is ' + totalHours);

.

Second example – people

This time, we’ll do a two-level inheritance. We’ll model some School of ICT people.

We create a person object, with some properties that are common to all persons – name, birthday, etc.

Then, we’ll create new objects that are based on the person prototype – student, and teacher. Each of those objects will have distinct properties. Of course, they’ll also have the properties from the prototype.

var person = {
    name: '',
    bday: new Date(),
    mail: '',
    prnt: function () {
        return 'Info for ' + this.name + ', born on ' + this.bday.toLocaleDateString() + ', email ' + this.mail;
    }
};
//

Notice something new (maybe) in person – the prnt property is a function that returns a string.

Now, we’ll use person as the prototype, and define a student object. In the Object.create method call, we’ll add some new properties. Notice the property list format; you ought to provide value, but others can be added if you wish (writable, enumerable, configurable, get, set).

After we’ve defined the student object, we’ll use it as the prototype for student instances.

Finally, send some results to the Web Console.

var student = Object.create(person, { prog: { value: '' }, stid: { value: '' }});

var stu1 = Object.create(student);
stu1.name = 'Stanley';
stu1.bday = new Date(1983, 10, 15);
stu1.mail = 'stan@myseneca.ca';
stu1.prog = 'BSD';
stu1.stid = '012345678';

console.log(stu1);
console.log(stu1.prnt());
//

Next, we’ll use person as the prototype again, and create a teacher object. The teacher object has additional properties that are distinctly different from the additional student properties.

var teacher = Object.create(person, { offc: { value: '' }, web: { value: '' }});

var tch1 = Object.create(teacher);
tch1.name = 'Peter';
tch1.bday = new Date(1966,5,30);
tch1.mail = 'peter@senecacollege.ca';
tch1.offc = 'T2080';
tch1.web = 'http://petermcintyre.com';

console.log(tch1);
console.log(tch1.prnt());
//

.

Reference material:

Inheritance topic in the JavaScript Guide topic “Working with objects”

Details of the object model topic in the JavaScript Guide

.

Summary

This introduction to JavaScript’s prototypal inheritance should have shown you the principles of creating your own objects.

We’ll build upon these foundations in the coming weeks.

.

.

.

  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: