Category Archives: JavaScript

Programming Languages are Only the Beginning

Programming languages are tools to express programmer intentions. Why, then, do we suffer the indignities of inelegant notation when we might, instead, bend the language to capture our meaning better?

If you’ve written code, you’ve likely accessed the first and last elements of an array:

var grades = [80, 90, 85];
grades[0]; // 80
grades[grades.length - 1]; // 85

How many times have you written [0]? [arr.length - 1]? Or worse, [arr.length], resulting in an off-by-1 error?

What we mean here is “the first element” and “the last element”. Unfortunately, JavaScript doesn’t provide a method on Array objects to extract the first or last elements.

> grades.first()
< TypeError: grades.first is not a function. (In 'grades.first()', 'grades.first' is undefined)

So let’s update the language to clarify that meaning. JavaScript is a prototypal language: There is an Array prototype which all instances of arrays are based on. By adding methods to the Array prototype, we immediately add those methods to every instance of an array.

Array.prototype.first = function() { return(this[0]); }
Array.prototype.last = function() { return(this[ this.length - 1 ]); }

Now, we can easily and without fear of off-by-1 errors access the first and last elements:

> grades.first()
< 80
> grades.last()
< 85

But let’s not stop there… what other functions might it be useful to have? How would you enhance the language to provide those functions?

Any function you write provides an opportunity to make your intentions clearer and to create a domain specific language that allows you to express solutions to problems that interest you more naturally. Use it to your advantage.

FizzBuzz in JavaScript

Functions are first class objects. Functions establish closures.

Problem: Given a range of positive, non-zero integers, output “Fizz” if the number is evenly divisible by 3, output “Buzz” is the number is evenly divisible by 5, and output “FizzBuzz” if the number is evenly divisible by both 3 and 5; otherwise, output the number.

divisor = function(number, string) {
  return(function(d) {
    if (d % number === 0) {return(string)} else {return("")};
  });
}

mod3er = divisor(3, "Fizz");
mod5er = divisor(5, "Buzz");

for(i = 1; i <= 100; i = i + 1) {
    res = mod3er(i) + mod5er(i);
    console.log(res === "" ? i : res);
}

iPhone Web App Development

This 4-week workshop, hosted by CreativeTechs and O’Reilly Media is an excellent introduction to how to create website-based applications for use on the iPhone. Website-based apps don’t need to go through the notorious Apple review process for applications, since they are essentially web pages built using standard HTML, CSS, and JavaScript tools and are accessed using Mobile Safari. Once on your app page, users can choose to add the page to their iPhone apps list as an icon, which allows the page to appear without the browser’s chrome (the standard widgets that appear in a web browser: address bar, back/forward buttons, etc.).

Led by Elisabeth Robson, coauthor of Head First HTML with CSS & XHTML, these sessions have been wonderful and are well worth your time. Until 2010 February 5, the entire set of recorded sessions + sample book chapters + sample code can be purchased either from Creative Techs or O’Reilly for just 35$.

KUIT245: Web Development

Location: Kaplan University, Online
Terms: 3
Class size: ~ 20 students/term

Students in IT245 create websites using standards-compliant technologies: XHTML, CSS, and JavaScript. Students learn about site planning, page design, site development, and workflow control. They also implement basic forms processing using hosted forms solutions.

Reading Materials

  • Adobe Systems. (2009). Adobe Dreamweaver CS4: Classroom in a book. Berkeley, CA: Adobe Press.