Closing out Knockoutjs Adventure

I have been involved with a knockout project the past few months. I learned alot over the course of the coding journey. The Knockout simplifies your code and works well in tandem with Jquery. Along the way, I got to use JQuery Tabs, KnockoutJS templates, Knockout observable arrays, and much more

Here are some of the great sites  and links I found along the way.

• http://techomaha.com/2012/09/knockoutjs-barcamp-omaha/
• http://www.syncfusion.com/Content/downloads/ebook/Knockoutjs_Succinctly.pdf
• knockout example of item select from a pulldown
• knockout group forum
• knockout dirty model example
• knockout subscribe vs event example
• Knockout principles to know
• knockout details for observable arrays
• Knockout clear selection dropdown
• knockout selection items in json
• knockout editable grid
• knockoutjs event binding documentation
• savings goal full blown knockout example
• knockout options for radio input
• knockout search/list example
• knockout clearing observable array
• Knocout passing parameters with bind
• knockout checkbox example with json
• Knockout writeup on memory and javscript techniques
• Javscript shootout podcast knockout
• Javscript libraries compared
• knockout tabs
• knockout tabs 2
• knockout tabs 3
• knockout tabs
• knockout impressive example components
• knockout plain tabs
• knockout removeable tabs
• knockout templates
• knockout template article
• ToDo Knockout example
• knockoutjs custom buttons 
• knockout questionire example
• knockout performance gotchas

Advertisements

CSS Style

The format of a selector is as follows

Selector {property : value}

Type selector – targets selector by element name, can have comma and wild card *

Contextual Selectors – apply style to properties based on context or relation to another element

• Descendant selector:  descendants of another element, list separated by space starting with the higher level element, can have commas separating multiple entries, and can be specified several levels deep
• Child selector: like a descendant but specified by a specific parent of an element, indicated as child with greater than sign between elements >
• Adjacent selector: elements that comes directly after a certain  element with same parent, indicated with plus sign +

Class and Id selectors: specified in regard to specific elements which are a class or a specific ids specified by user.

• For class you define it in terms of class in regards to a specific type selector with a dot  separator  .
• To specify class selector to all elements within a class you can leave out the type selector
• id selector target a single element and work like class selector except indicated with a #

Attribute selectors – targets specific attribute names or values

• Simple attribute: specified for an attribute for an element, indicated as element[attribute]
• Exact attribute value : specified as element[attribute=”myvalue”]
• Partial attribute value: doesnt match whole word but search value within attribute value , specified as element[attribute~=”myvalue”]
• hyphen separated value : used for case where you look for value of ‘myvalue’ or starting with ‘myvalue-‘ , indictaed with |=

Pseudeoclass selector  :  targets a group of elements such as an anchor.  has a colon : after the anchor followed with the attribute kind (i.e. link, or name)

• there are others supported other than the anchor tag . i.e. :first-chld, :first-line, :first-letter,:before, :after

How you reference style sheets:

<link rel=style sheet href=file.css type=text/CSS />

or

@import url();

Document structure and inheritance
– parent child relationships
– sibling relationships
– descendants
Inheritance – styles passed down to desndants
Overriding styles by nodes higher in hierarchy
Can get presentation rules from several sources and conflicts
Passed down until overridden by command with more weight
Resolve rules from competing style sheets
When user agent (ie browser) encounters element looks for all style rules that may apply
Sorts out this out based on
Style sheet origin
Least weight to greatest
1 User agent style sheet 2 reader style sheet 3 authorsyle sheets 4 !Important marked
External file sheets further down document greater precedence
Imported styles sheets override linked ones
Embedded styles sheets override external ones
Inline styles override other references

Selector
More specific the selector the more priority it gets
Least to most priority for selectors follow
Individual element to pseudo element selector
Contextual selectors
Class selectors
Id selectors
rule order
Last one wins

Display roles
Block level elements – line breaks before and after it  and fills in width of the parent that contains it
Paragraph
Headings
Lists
Divs

Inline – no line breaks
Emphasized text
Anchors

None – Wont display

List-item
Run-in

Box model : Element box around it
Border
Margin
Background

Inner edge
Border
Margin
Outer edge

Unit measures
Pixel
Pts
Pc
Em
Ex
In
Mm
Cm

Color value
% values

 

Spring Web Services

Contract First Web Services tutorial: When using contract-first, you start with the WSDL contract, and use Java to implement said contract.  Spring-WS only supports the contract-first development style.

3.5. Creating the project

src/main/webapp/WEB-INF/

spring-ws-servlet.html

<?xml version=”1.0″ encoding=”UTF-8″?>
<beans xmlns=”http://www.springframework.org/schema/beans&#8221;
xmlns:xsi=”http://www.w3.org/2001/XMLSchema-instance&#8221;
xmlns:context=”http://www.springframework.org/schema/context&#8221;
xmlns:sws=”http://www.springframework.org/schema/web-services&#8221;
xsi:schemaLocation=”http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans-3.0.xsd
http://www.springframework.org/schema/web-services http://www.springframework.org/schema/web-services/web-services-2.0.xsd”&gt;

<sws:annotation-driven/>
</beans>

a) add this line to above file <context:component-scan base-package=”com.mycompany.hr”/>

b) Create java package com.mycompany.hr.ws

web.xml:

<?xml version=”1.0″ encoding=”UTF-8″?>
<web-app xmlns=”http://java.sun.com/xml/ns/j2ee&#8221; xmlns:xsi=”http://www.w3.org/2001/XMLSchema-instance&#8221;
xsi:schemaLocation=”http://java.sun.com/xml/ns/j2ee http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd&#8221;
version=”2.4″>
<display-name>Archetype Created Web Application</display-name>
<servlet>
<servlet-name>spring-ws</servlet-name>
<servlet-class>org.springframework.ws.transport.http.MessageDispatcherServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>spring-ws</servlet-name>
<url-pattern>/*</url-pattern>
</servlet-mapping>
</web-app>

Spring-WS, you will implement Endpoints to handle incoming XML messages. An endpoint is typically created by annotating a class with the @Endpoint annotation.

you will create one or more methods that handle incoming request.

3.6.1. Handling the XML Message

use JDom to handle the XML message. We are also using XPath, because it allows us to select particular parts of the XML JDOM tree,

New class HolidayEndpoint

package com.mycompany.hr.ws;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.ws.server.endpoint.annotation.Endpoint;
import org.springframework.ws.server.endpoint.annotation.PayloadRoot;
import org.springframework.ws.server.endpoint.annotation.RequestPayload;
import com.mycompany.hr.service.HumanResourceService;
import org.jdom.Element;
import org.jdom.JDOMException;
import org.jdom.Namespace;
import org.jdom.xpath.XPath;

@Endpoint                                                                                
public class HolidayEndpoint {

private static final String NAMESPACE_URI = “http://mycompany.com/hr/schemas&#8221;;

//The HolidayEndpoint requires the HumanResourceService business service to operate, so we inject the dependency via the constructor and annotate it with @Autowired

@Autowired
public HolidayEndpoint(HumanResourceService humanResourceService)
throws JDOMException {
this.humanResourceService = humanResourceService;
Namespace namespace = Namespace.getNamespace(“hr”, NAMESPACE_URI);
startDateExpression = XPath.newInstance(“//hr:StartDate”);
startDateExpression.addNamespace(namespace);
endDateExpression = XPath.newInstance(“//hr:EndDate”);
endDateExpression.addNamespace(namespace);
nameExpression = XPath.newInstance(“concat(//hr:FirstName,’ ‘,//hr:LastName)”);
nameExpression.addNamespace(namespace);
}

//The @PayloadRoot annotation tells Spring-WS that the handleHolidayRequest method is suitable for handling XML messages.
//In this case, it can handle XML elements that have the HolidayRequest local part and the http://mycompany.com/hr/schemas namespace
//gets passed with the <HolidayRequest/> element from the incoming XML message.
// The @RequestPayload annotation indicates that the holidayRequest parameter should be mapped to the payload of the request message

@PayloadRoot(namespace = NAMESPACE_URI, localPart = “HolidayRequest”)         
public void handleHolidayRequest(@RequestPayload Element holidayRequest)
throws Exception {
SimpleDateFormat dateFormat = new SimpleDateFormat(“yyyy-MM-dd”);
Date startDate = dateFormat.parse(startDateExpression.valueOf(holidayRequest));
Date endDate = dateFormat.parse(endDateExpression.valueOf(holidayRequest));
String name = nameExpression.valueOf(holidayRequest);
humanResourceService.bookHoliday(startDate, endDate, name);
}

We skipped the Schema and WSDL, but they follow here (Note that Spring WS will create the WSDL, but here it is for getting to know it):

Schema………………………………………………………………………………………..
<xs:schema xmlns:xs=”http://www.w3.org/2001/XMLSchema&#8221;
xmlns:hr=”http://mycompany.com/hr/schemas&#8221;
elementFormDefault=”qualified”
targetNamespace=”http://mycompany.com/hr/schemas”&gt;
<xs:element name=”HolidayRequest”>
<xs:complexType>
<xs:all>
<xs:element name=”Holiday” type=”hr:HolidayType”/>
<xs:element name=”Employee” type=”hr:EmployeeType”/>
</xs:all>
</xs:complexType>
</xs:element>
<xs:complexType name=”HolidayType”>
<xs:sequence>
<xs:element name=”StartDate” type=”xs:date”/>
<xs:element name=”EndDate” type=”xs:date”/>
</xs:sequence>
</xs:complexType>
<xs:complexType name=”EmployeeType”>
<xs:sequence>
<xs:element name=”Number” type=”xs:integer”/>
<xs:element name=”FirstName” type=”xs:string”/>
<xs:element name=”LastName” type=”xs:string”/>
</xs:sequence>
</xs:complexType>
</xs:schema>

Note: Save this schema as hr.xsd in WEB-INF

WSDL………………………………………………………………………..
<wsdl:definitions xmlns:wsdl=”http://schemas.xmlsoap.org/wsdl/&#8221;
xmlns:soap=”http://schemas.xmlsoap.org/wsdl/soap/&#8221;
xmlns:schema=”http://mycompany.com/hr/schemas&#8221;
xmlns:tns=”http://mycompany.com/hr/definitions&#8221;
targetNamespace=”http://mycompany.com/hr/definitions”&gt;
<!–SCHEMA REFERENCE–>
<wsdl:types>
<xsd:schema xmlns:xsd=”http://www.w3.org/2001/XMLSchema”&gt;
<xsd:import namespace=”http://mycompany.com/hr/schemas&#8221;
schemaLocation=”hr.xsd”/>
</xsd:schema>
</wsdl:types>

<!–MESSAGE HolidayRequest–>
<wsdl:message name=”HolidayRequest”>
<wsdl:part element=”schema:HolidayRequest” name=”HolidayRequest”/>
</wsdl:message>
<!–MESSAGE Holiday Request to port type Human Resource as operation–>
<wsdl:portType name=”HumanResource”>
<wsdl:operation name=”Holiday”>
<wsdl:input message=”tns:HolidayRequest” name=”HolidayRequest”/>
                  </wsdl:operation>

       </wsdl:portType>

<!-Binding which tells the client how to invoke the operations just defined and service which tells where to invoke it->

<wsdl:binding name=”HumanResourceBinding” type=”tns:HumanResource”>
<soap:binding style=”document”
transport=”http://schemas.xmlsoap.org/soap/http”/&gt;
<wsdl:operation name=”Holiday”>
<soap:operation soapAction=”http://mycompany.com/RequestHoliday”/&gt;
<wsdl:input name=”HolidayRequest”>
<soap:body use=”literal”/>
</wsdl:input>
</wsdl:operation>
</wsdl:binding>
<wsdl:service name=”HumanResourceService”>
<wsdl:port binding=”tns:HumanResourceBinding” name=”HumanResourcePort”>
<soap:address location=”http://localhost:8080/holidayService/”/&gt;
</wsdl:port>
</wsdl:service>
</wsdl:definitions>

To generate the WSDL by spring ws add the following to spring-ws-servlet.html:

<sws:dynamic-wsdl id=”holiday”
portTypeName=”HumanResource”
locationUri=”/holidayService/”
targetNamespace=”http://mycompany.com/hr/definitions”&gt;
<sws:xsd location=”/WEB-INF/hr.xsd”/>
</sws:dynamic-wsdl>

The web.xml file is modified as follows:

<servlet>
<servlet-name>spring-ws</servlet-name>
<servlet-class>org.springframework.ws.transport.http.MessageDispatcherServlet</servlet-class>
<init-param>
<param-name>transformWsdlLocations</param-name>
  <param-value>true</param-value>
</init-param>
</servlet>

http://localhost:8080/holidayService/holiday.wsdl

http://static.springsource.org/spring-ws/sites/2.0/faq.html

http://www.springbyexample.org/examples/simple-spring-web-services.html

Spring WS+JAXB

Reference to JAXB Plugin

http://aigloss.blogspot.com/2011/07/creating-spring-web-services-with.html?m=1

http://krams915.blogspot.com/2010/12/spring-ws-2-and-spring-3-mvc.html?m=1

http://javaclue.blogspot.com/2012/05/soap-web-service-using-spring-ws-20.html?m=1

http://www.disasterarea.co.uk/blog/?tag=spring-ws

Twitter bs (Bootstrap)

what-is-bootstrap “is an open-source Javascript framework developed by the team at Twitter. It is a combination of HTML, CSS, and Javascript code designed to help build user interface components. Bootstrap was also programmed to support both HTML5 and CSS3.”

<script src=”js/bootstrap-transition.js”></script>
<script src=”js/bootstrap-alert.js”></script>
<script src=”js/bootstrap-modal.js”></script>
<script src=”js/bootstrap-dropdown.js”></script>
<script src=”js/bootstrap-scrollspy.js”></script>
<script src=”js/bootstrap-tab.js”></script>
<script src=”js/bootstrap-tooltip.js”></script>
<script src=”js/bootstrap-popover.js”></script>
<script src=”js/bootstrap-button.js”></script>
<script src=”js/bootstrap-collapse.js”></script>
<script src=”js/bootstrap-carousel.js”></script>
<script src=”js/bootstrap-typeahead.js”></script>

or

<script src=”js/bootstrap.min.js”></script>

Style code:

< link href=”css/bootstrap.css” rel=”stylesheet” >

< link href=”css/bootstrap-responsive.css” rel=”stylesheet” >

 

bootstrap and less css “At its core, Bootstrap is just CSS, but it’s built with Less, a flexible pre-processor that offers much more power and flexibility than regular CSS. With Less, we gain a range of features like nested declarations, variables, mixins, operations, and color functions.”

http://tuts.wtfdiary.com/2012/07/bootstrap-tutorial-to-design-blog.html  : “top navigation bar, DropDown Menu in the navigation bar, Search Box too in the navigation bar

http://www.mrgeek.me/technology/tutorials/web-design/getting-started-with-bootstrap-part-1-of-series/ : ” the grid system allows you to quickly create a design by calling the required classes, which are pre-written for you in the stylesheet provided with Bootstrap. This doesn’t mean you don’t have to write a line of CSS ever again, but it certainly means you won’t have to write much of the CSS as far as design the skeleton of the web page is concerned”

http://roy-barber.co.uk/bootstrap/

LESS extends CSS with dynamic behavior such as variables, mixins, operations and functions.

More references:

• UIFrameworks
• twitter-bootstrap-lessjs
• What-are-good-alternatives-to-Twitter-Bootstrap
• Using-the-Twitter-Bootstrap-Framework-to-build-a-responsive-Joomla-Template-from-Scratch
• sample-app-with-backbone-js-and-twitter-bootstrap/

Spring MVC Refresher II

web.xml

browsers currently only support GET and POST, a common technique – is to use a normal POST with an additional hidden form field  (_method) to pass the “real” HTTP method.

< filter >
< filter-name >httpMethodFilter </  filter-name >
< filter-class >org.springframework.web.filter.HiddenHttpMethodFilter < /  filter-class >
< / filter >

accounts-servlet-config.xml:

< context:component-scan base-package=”accounts.web” />

< mvc:annotation-driven/ >

An interceptor which keeps a hibernate session open to allow lazy loading of backing object
< mvc:interceptors >
< bean class=”org.springframework.orm.hibernate3.support.OpenSessionInViewInterceptor” >
< property name=”sessionFactory” ref=”sessionFactory”/ >
< /bean >
< /mvc:interceptors >
< bean class=”org.springframework.web.servlet.view.InternalResourceViewResolver” >
< property name=”prefix” value=”/WEB-INF/views/”/ >
< property name=”suffix” value=”.jsp”/ >
< /bean >

When you use a ContentNegotiatingViewResolver your web controllers return ModelAndViews or view names and the ContentNegotiatingViewResolver will, based on various criteria, choose the right data representation strategy, Here for JSON Use Jackson Java JSON-processor

< bean class=”org.springframework.web.servlet.view.ContentNegotiatingViewResolver” >
< property name=”mediaTypes” >
< map >
< entry key=”json” value=”application/json”/ >
< /map >
< /property >
< property name=”defaultViews” >
< bean class=”org.springframework.web.servlet.view.json.MappingJacksonJsonView”/ >
< /property >
< /bean >

Note: if had not have used component scanning would have had to wire up the controller

A Spring MVC @Controller

imports:

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;

package accounts.web;

@Controller
public class AccountController {

private AccountManager accountManager;

@ Autowired
public AccountController(AccountManager accountManager) {
this.accountManager = accountManager;
}

The method does not explicitly select a view name because the default
view name selected by Spring MVC matches to the incoming URL accountDetails.jsp
@ param id the id of the account
@ param model the “implicit” model created by Spring MVC

@ RequestMapping(value=”/accounts/{accountId}”,  method=RequestMethod.GET)
public void accountDetails(@PathVariable(“accountId”) int id, Model model) {
model.addAttribute(“account”, accountManager.getAccount(id)); return “accountDetails”;
}

The method does not explicitly select a view name because the default
view name selected by Spring MVC matches to the incoming URL accountSummary.jsp

@ param model the “implicit” model created by Spring MVC

@ RequestMapping(value=”/accounts”, method=RequestMethod.GET)
public void accountSummary(Model model) {
model.addAttribute(“accounts”, accountManager.getAllAccounts());return “accountSummary”;
}

index.html:

< a href=”app/accounts” >View Account Summary< /a >

http://localhost:8080/ss/app/accounts

Then on the listing page you click on one of the entries to get details

http://localhost:8080/ss/app/accounts/6

This uses the Path Variable

@ RequestMapping(value=”/accounts/{accountId}”,  method=RequestMethod.GET)
public void accountDetails(@PathVariable(“accountId”) int id, Model model) {

Spring MVC refresher

web.xml:

application context Beans makeup the configuration of the root web application context
< context-param >
< param-name >contextConfigLocation< /param-name >
< param-value >/WEB-INF/accounts-application-config.xml< /param-value >
< /context-param >

Bootstraps the root web application context before servlet initialization
< listener >
< listener-class >org.springframework.web.context.ContextLoaderListener< /listener-class >
< /listener >

Deploys the dispatcher servlet along with its configuration
< servlet >
< servlet-name >accounts< /servlet-name >
< servlet-class >org.springframework.web.servlet.DispatcherServlet< /servlet-class >
< init-param >
< param-name >contextConfigLocation< /param-name >
< param-value >/WEB-INF/accounts-servlet-config.xml< /param-value >
< /init-param >
< /servlet >
accounts-servlet-config.xml:

< context:component-scan base-package=”accounts.web” />

< mvc:annotation-driven/ >

An interceptor which keeps a hibernate session open to allow lazy loading of backing object
< mvc:interceptors >
< bean class=”org.springframework.orm.hibernate3.support.OpenSessionInViewInterceptor” >
< property name=”sessionFactory” ref=”sessionFactory”/ >
< /bean >
< /mvc:interceptors >
< bean class=”org.springframework.web.servlet.view.InternalResourceViewResolver” >
< property name=”prefix” value=”/WEB-INF/views/”/ >
< property name=”suffix” value=”.jsp”/ >
< /bean >

Note: if had not have used component scanning would have had to wire up the controller

A Spring MVC @Controller

imports:
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;

package accounts.web;

@Controller
public class AccountController {

private AccountManager accountManager;

@ Autowired
public AccountController(AccountManager accountManager) {
this.accountManager = accountManager;
}

The method does not explicitly select a view name because the default
view name selected by Spring MVC matches to the incoming URL accountDetails.jsp
@ param id the id of the account
@ param model the “implicit” model created by Spring MVC

@ RequestMapping(“/accountDetails”)
public void accountDetails(@RequestParam(“entityId”) int id, Model model) {
model.addAttribute(“account”, accountManager.getAccount(id));
}

The method does not explicitly select a view name because the default
view name selected by Spring MVC matches to the incoming URL accountSummary.jsp

@ param model the “implicit” model created by Spring MVC

@ RequestMapping(“/accountSummary”)
public void accountSummary(Model model) {
model.addAttribute(“accounts”, accountManager.getAllAccounts());
}
}

index.html:

< a href=”accounts/accountSummary” >View Account Summary< /a >

http://localhost:8080/ss/accounts/accountSummary

Click on one of the listing entries

http://localhost:8080/ss/accounts/accountDetails?entityId=7

Again, this uses RequestParamin the nethod signature

public void accountDetails(@RequestParam(“entityId”) int id, Model model)

iPhone5 w iOS6 launch

Wow factor? 4 ” screen, 4G LTE, new chargers needed, sleeker, no wireless charging, no NFC Wallet, A6. Sold 20x faster

Meanwhile, that new dock connector was so thoroughly leaked that it’s unlikely to put the wind up the burgeoning “appcessories” industry (yes, a word used seriously by real companies).

The Dev Center – https://developer.apple.com/technologies/ios6/

http://techcrunch.com/2012/09/12/the-loops-jim-dalrymple-apple-got-a-decade-head-start-on-most-people/

Very lightweight, more usable real estate, can operate with one hand, panoramic effect on side vertical view, fits in pocket

sweet spot on market with one device, upgraded components , a6, re-engineering camera, smaller camera, LTE,

Apple chose no NFC for now or step fwd on mobile payment system – punted for now. New passbook

iOS6 – developer pure performance, console quality graphics, google kicked out of platform, Map stuff is apple and google data is gone when upgraded, apple video instead of youtube.

iphone launch

Apple is not and will not change things just for the sake of change. And while some may now be clamoring for this change, the paradox is that if Apple did make some big changes, many of the same people would bitch and moan about them

 

FOUC! (Flash of Unstyled Content)

It occurs when applying styles with JavaScript on page load.

The problem is most evident when there is some content that needs to be hidden initially and when the document is large or complex.

< ul id=”flash” >

In the On Ready function , you would apply :

$ (‘#flash’).hide();

A whole lot of document that has to be ready before anything inside the ready() function can be executed.

Putting the tags just inside the closing  body tag doesn’t help either

http://www.learningjquery.com/2008/10/1-way-to-avoid-the-flash-of-unstyled-content

Fluff 2012 August Notes on Next Gen Framework

Framework worth a look Spring Social

@Habuma : “Need to fix it if you don’t  know JS ”

spinejs , spine mobile : based on coffee script http://www.coffeescriptlove.com/2011/11/why-is-spine-in-coffeescript.html

– tool to generate a project spine.app

– spine mobile GFX library under covers

web hosting – cloudfoundry , red hat open shift

oauth2 – mention of harsh comments by http://hueniverse.com/2012/07/oauth-2-0-and-the-road-to-hell/

zepto a jquery like library for mobile, jquery good beacuse it handles all browser types

Next-Gen “Stack”:

Database : Neo4j with Spring Data
REST API : Spring MVC
OAuth 2 : Spring Security for OAuth
Client : Spine.js and Spine Mobile
Mobile : PhoneGap/Apache Cordova

Asked him about knockoutjs and said it was great for data binding but you need to pair it with a routing js framework.

Fluff 2012 August Notes on Advanced Javascript

I just attended the NFJS Raleigh tour stop. This was my third time at this great event and my focus of the sessions was javascript and mobile.

Here begins my notes:

Suggested Book: Seven Languages in Seven weeks by Bruce Tate

Prototypes – IO, LUA, SELF : access to class , define on the fly, manipulate class after you define it.

Functional JS vs OO JS

http://joda-time.sourceforge.net/ – spring data

Everything in javascript is an object but primitives.  Objects consist of key value pairs + prototype

javascript function is pass by reference not by copy.

Dynamic typed language

hoisting –  Only functions create a new scope.

propertyIsEnumerable : higher within prototype

passing functions to a function desirable for reuse

associative array {name: ‘fred’}

two scopes: global and function level scope

this – scope you are in

null == undefined

parasitic inheritance is like composition

CommonJS – use of require

Underscore.js

Date.js

Sugar.js

Backbone.js

Testing- Jasmine

https://developer.mozilla.org/en-US/docs/JavaScript/Guide/Working_with_Objects