DOM Introduction Slides

Today we covered javascript DOM in the class, here is the slide we used today.

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.

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

TSG HTML5 Class Part 3

Today's our talk is focusing on CSS3, and here is the slide we have used in the class.

Readings

For those of you who wants a brush up on your css, you can take a look of this site -  http://www.htmldog.com/guides/cssbeginner/ , they have beginner, intermediate and advance level topics on html and css.

Samples
Here are some samples we've used in the class, feel free to change anything you want

• http://cssdesk.com/4GQxd
• http://cssdesk.com/suXVw

Note
Some people asked how come in chrome and firefox the animation is reversed?
That's because of the vendor prefix, I hope you all remembered.  You can make different browser use different css3 by using the vendor prefix.

• -moz-    (firefox)
• -webkit- (chrome)
• -o- (opera)
• ... etc

We have introduced another tool yesterday, it is http://jsfiddle.net/ , it is similar to cssdesk, but it will let you do javascript also and it is a good tool for developer to write testing code and play around with stuff.

There is a good link Edward has mentioned, take your time to take a brief look even though it's a little bit lengthy - http://html5center.sourceforge.net/building-apps-in-html5

Next Tuesday is our field trip to Linkedin, no class next week.
How to Make Your JavaScript Fast ( Linkedin Campus )
http://www.meetup.com/SF-Web-Performance-Group/events/37966322/

Homework! Homework!
Since we have quite a long time in between until the next class, and thus I have changed my mind and assign you some homework.

Your homework is - without using the cssdesk, try to create a simple page from scratch using HTML and CSS.  You can do whatever you want with only one limitation, your css must be less than 150 lines of code.

Feel free to ask any questions in the email thread or through the blog. Thanks and enjoy :)

One handsome guy

Thanks Pojen for sending me those pictures, I think I look handsome in there :)

TSG HTML5 Class Part 2

Today's our talk is focusing on web forms. Hopefully it is not too hard for you all. Please feel free to send me email or leave comments in the blog for any questions you have.

Today's Presentation
http://www.standardista.com/forms/
...

The following is the Linkedin talk I mentioned in the class, you need to signup first if you plan to go.  But it is optional, only go if you are interested, it is a field trip for our class.

How to Make Your JavaScript Fast ( Linkedin Campus )
http://www.meetup.com/SF-Web-Performance-Group/events/37966322/
...
Q&A
Someone asked in the class
"How do I know which browser support what?"

Ok, now below are some cool tools for your reference

• http://caniuse.com/  - Compatibility tables for support of HTML5, CSS3, SVG and more in desktop and mobile browsers.
• http://html5demos.com/ - HTML5demos will let you know instantly which property can be used on a specific browser.
• http://www.standardista.com/html5/html5-web-forms/

Also, someone asked this in the class

"Can we use the HTML5 form now? But not all the browser supports it?"

Well, yes, you can use it now.  For those browser that doesn't support the new form attribute will fall back to "text", and you will need extra javascript to do the validation and extra css for styling.  Meanwhile, there are already written tools to make HTML5 form cross browser and so you don't need to recreate the wheel again - http://code.google.com/p/webforms2/

...

Reading for this week
http://www.catswhocode.com/blog/enhance-your-web-forms-with-new-html5features

...

Homework
Create as many web forms as you would like and test different features.   ( Note: you don't have to use cssdesk, that's just a handy tool only. )

For your homework, here is a good example for you to take a look - http://www.useragentman.com/tests/html5Widgets/bradshawenterprises.com/index.html

And if you would like to explore more about how people do HTML5 in the industry, you can this tool to generate your own HTML5 template, just trial and error and play around with it - http://switchtohtml5.com/

See you all next week in the class.

TSG HTML5 Class Part 1

Thanks everyone for attending the TSG HTML5 Class Part 1.

Here is the link to the presentation tonight

https://docs.google.com/present/edit?id=0AbJjnup-9j6yZGQ4Y3Q3OTlfMTg5bmNxOTg3aDQ

If you want to read more about HTML5 new elements, here is the link

http://www.w3schools.com/html5/html5_new_elements.asp

[ Reading for this week if you have time ]
Difference between DIV, SECTION and ARTICLE

http://boblet.tumblr.com/post/130610820/html5-structure1

Please finish your homework if possible, see you all next week!

Feel free to ask any question either in email list or in this blog post.