Wednesday, March 28, 2012

Javascript Date return NaN in IE 8

Well, UTC suppose to be universal date-time format, but when I do Date.parse() or new Date() with UTC string in IE8, it returns null / NaN  ( while all the browser, including IE9, works ).  Well, it turns out that IE 6 - 8 doesn't understand UTC date-time format :)  Not surprise though, it is IE after-all.

This website has a metrics of javascript Date support for all browsers, pretty handy.
http://dygraphs.com/date-formats.html

One of the solutions is to override Date.parse() when the browser is an IE.

Tuesday, March 27, 2012

Javascript Constructor return rules

Tonight we have a student asked about what if we return a primitive types in a constructor function, like the below:

function Person() {
   this.name = "Roy";
   return "abc";
}

What would be the return if we instantiate this constructor?

var me = new Person();
console.log(me); // what would you expect to see??

The result is you will get an instance of "Person".  Some people may question "the return was a string, how come it still return an instance of Person?"   Well, it is all related to the "new" keyword.

Whenever you instantiate a constructor ( or a Class ) using "new" keyword.  The javascript interpreter will enforce you to return an object.  If you do not return an object ( just like the above ), the javascript interpreter will enforce this rule by returning an instance of a current constructor.

So it will be similar to the following:

function Person() {
   this.name = "Roy";
   return this;
   //return "abc";
}

However, if you define an object at the return, the javascript interpreter won't care about it.

function Person() {
   this.name = "Roy";
   return { name: "Joyce" };
}

The above code works because it is returning an object, but it won't be an instance of Person.

So, remember, if you return a "primitive types" in a constructor, when you instantiate the constructor with a "new" keyword, you will always get the instance of the Constructor back.  However, if you return an object, you won't have any issue.

Wednesday, March 21, 2012

Javascript Garbage Collection

There's a student yesterday asking about garbage collection in Javascript.  And here it is how it works from  a high level perspective.

Memory is allocated to objects when they created and reclaimed by the browser when there are no more reference to it.  A garbage collection is a mechanism that saved developer time or effort from explicitly performing memory management task and its main duty is to  determine when it is safe to reclaim the memory.   Of course, if an item is still being referenced or being used, it won't collect those memory.   It only collects the memory from objects that are no longer reachable or referenced.

But how does that works?  Well, most garbage collection is using different variants of "Mark-and-Sweep" method/algorithm.  In Javascript, it travsed periodically all the variables and objects and mark items that are still being used or referenced. And it follows with the "sweep" step, it sweep any "unmark" items and reclaim the memory back by deallocating those.

Ok, so how does those information help us?  

In Javascript, global scope variables are not garbage collectable and presenting opportunity for a memory leak, and it explains why we need to limit the usage of global variables in our program.  ( There are many reasons why you should limit the use of global variables, this is just one of the reasons ).

Whenever you create an object using a "new" statement, use a delete statement to explicitly destroy it when it is no longer needed.  This step ensures the memory of that object will be available to the garbage collection.

There is a blog post more on this topic:
http://blogs.msdn.com/b/ericlippert/archive/2003/09/17/53038.aspx

Tuesday, March 20, 2012

HTML5 Community Night


5:00 - 6:00 pm      Registration, Demo showcase, Social, food, drink
6:00 - 6:30 pm      Kick off  (Doris Chen, Ann Burkett, Kevin Nilson)
6:30 - 7:10 pm      The Graphical Web - Fostering Creativity (Adobe: Vincent Hardy)
7:10 – 7:50 pm      Dart (Google: Seth Ladd)
7:50 – 8:00 pm      break
8:00 - 8:20  pm     WebFWD (Mozilla: Diane Bisgeier)
8:20 - 9:00  pm     Behind The Scenes of Cut The Rope (Microsoft: Giorgio Sardo)
9:00 - 9:30 pm      Panel Discussion & Q&A (Kevin Neilson, Vincent, Seth, Giorgio)
9:30 - 9:40  pm     Give Away and Wrap

Saturday, February 18, 2012

TSG Javascript Programming - Part I




Title
TSG Javascript Programming - Part I

Prerequisite
This class ( Part I ) does not requires any javascript background, but basic knowledge on HTML and CSS is preferred.

Location
G5 ROLCC -  Please click the logo below for more detail on TSG location.

Cost
$65 Dollars

Date & Time
Time will be 7:30 pm - 9:15 pm
  • 3/06/12 ~ Basic Introduction - Doing Javascript The Right Way
  • 3/13/12 ~ The Building Blocks of Javascript
  • 3/20/12 ~ Array and Functions
  • 3/27/12 ~ Creating Objects 
  • 4/03/12 ~ Document Object Model
  • 4/10/12 ~ Field Trip to HTML5 conference
  • 4/17/12 ~ DOM Interaction Hands on Session / Debugging Javascript






Description
This JavaScript course provides the knowledge necessary to design and develop dynamic Web pages using JavaScript. It introduces participants to JavaScript and how the language can be used to turn static pages into dynamic, interactive Web pages.  Besides learning the syntax of the JavaScript language, other additional topics may include the Document Object Model, form validation, how to create functions, and how to create your own script files.  At the end of this class, participants will have the knowledge necessary to utilize the power of JavaScript to provide dynamic content on their Web sites.  We will reserve 30 minutes each class for hands on session, so please bring your laptop when you come to the class. [Note] Feel free to leave comments or send me email if you have any questions.  Thanks. 


[ Note ]
We don't have an assigned book in this class, but if you are new to javascript, I would recommend this one.
http://www.amazon.com/Simply-JavaScript-Kevin-Yank/dp/0980285801/ref=sr_1_1?ie=UTF8&qid=1331147166&sr=8-1
...
What's Next  (Future Classes)
For Javascript Programming Level II, here is the proposed schedule.
  • Javascript Events
  • Form Handling and Validation
  • Javascript Events II
  • JSON and Ajax
  • Javascript Animation
  • Introduction to JQuery

For Javascript Programming Level III, here is the proposed schedule.
  • Closures
  • Scopes and Prototypes
  • Javascript Object Oriented Programming
  • Javascript Design Pattern - Part I
  • Javascript Design Pattern - Part II
  • Introduction to Events Driven Development
...
There will be one more class as the last of this Javascript Programming Series.  Instead of calling it Javascript Programming Level IV, let's called that "Let's start your Javascript Ninja Road Trip".

Let's start your Javascript Ninja Road Trip, here is the proposed schedule
  • Common mistakes in Javascript development
  • Understand your Javascript Engine
  • Writing high Performance Javascript
  • Dive deeper into Events Driven Development
  • Introduction to Server Side Javascript and Persistent Layer using Javascript
  • Design your custom Javascript Framework