JavaScript Basics: Types

Primary Data Types

• Boolean
• String
• Number

Composite Data Types

• Object
• Array

Special Data Types

• Undefined
• Null

As you might expect, Boolean can have one of two values: true or false.

String is one or more unicode values strung together.

JavaScript does not make a distinction between integer and floating-point values. Number includes positive and negative integers and 0. Values can be represented in decimal, hexadecimal, and base 8. The special value of NaN is the result of a conversion that does not produce a meaningful number.

Undefined has a single value - undefined. If a variable has been declared but has no value or an object property that does not exists will return undefined.

The Null data type can have only one value - null. Null is used to refer to the absence of value or an object. Assigning null to a variable means that the variable holds no valid Boolean, String, Number, Object, or Array. You can assign null to a variable in the case you intend for it to have to value. Note that the typeof operator in JavaScript will report a variable with value of null to be of type Object, and not of type null. This is legacy functionality that is present for backwards compatibility.

The skinny on undefined  and null is this: If you declare a variable without assigning a value, the value of that variable is undefined. Null is explicitly assigned to designate the absence of a value or object.

var foo;
console.log( foo )// undefined

foo = null; //explicitly assign null to designate an absence of value or object assignment

The typeof operator is an introspective feature of the JavaScript language. It is useful in determining the type of a variable. A confusing caveat to typeof: Variables of type null will be come back as type object.

var myVar = "Wherever you go...";
typeof( myVar ); // prints "string"

Notes:

Chapter 8, Ecma-262

http://www.ecma-international.org/publications/files/ECMA-ST/Ecma-262.pdf

http://msdn.microsoft.com/en-us/library/7wkd9z69(v=vs.94).aspx

http://jibbering.com/faq/notes/type-conversion/

Micro Controlling Your Views Using State Machines

Recently, in the course of creating an media asset manager for my day job, I ran across a very useful micro framework.

https://github.com/jakesgordon/javascript-state-machine/

The author is Jake Gordon. He has a blog, http://codeincomplete.com.

A finite state machine is a common paradigm that's been around in computer science at least since Mealy and Moore. It's defined as an abstract machine that can be in one of a number of finite states.

Think of a stop light. Red, yellow, green. It can only be one of these states at a time. The machine is restricted in regards to which state(s) it can transition to and from. It can move from red to green, but not red to yellow. Green to yellow, but not green to red. Yellow to red but not yellow to green.

The following is a simple programmatic example. Open your developer's console to see messages and errors.
http://www.oonn.us/statemachine-minimalist.html

What state machines are NOT good for. State machines don't replace routes.

I've been building apps at my day job with Backbone.js . A route in Backbone is hash-masrked string in the URL and points to a resource. For example, www.mydomain.com/myapp#comment/1234 would present a view of the comment with the id 1234. Everything after the # is the route - a path to the resource.

Other routes might be
/comments ( a list of all the comments in the app )
/comment/4321 ( displays comment with id of 4321 )
or
/comment/new ( a form to create a new comment )

State machines don't replace routes and describing resources in a RESTful way.

So what are state machines good for?

What I've found is that I often have screens that are to be viewed in sequence. Think of a uploading an image. The initial screen might be an input field that allows the user to choose a file from their computer. Once they hit submit, the upload process begins, and the screen presents a loading bar or indeterminate loader. Once loading has completed, the user gets the message 'Your upload is complete! Upload another!'

So here we have three states:
A. Choosing a file
B.  Uploading
C. Upload Complete

and three events that would drive the changes in state:

1. User chooses a file.
2. File is completely uploaded.
3. The user clicks to upload a file.

The initial state is ( A.  Choosing a file ). Once the event ( 1.  User chooses a file ) occurs the state machine transitions from finite state ( A. ) to ( B. ). And when event ( 2. ) is fired, the state transitions to ( C. ). If event ( 3. ) is initiated by the user, the state machine transitions back to state ( A. ).

Using Jake Gordon's code, the state machine would be initiated something like this:

var fsm = StateMachine.create({

initial: 'chooseFile',

events:[
{ name: 'fileChosen', from: 'chooseFile', to: 'uploading' },
{ name: 'fileUploaded', from: 'uploading', to: 'uploadComplete' },
{ name:'uploadFile', from:'uploadComplete', to: 'chooseFile'}
]
}

As you can see, the constructor takes an array named 'events'. Those events have a 'name', 'from', and 'to' properties. When you need to change the state of your view, you invoke fsm.fileChosen() , for instance. If and only if you are in the state chooseFile will the state machine transition to uploading. In any other state, an error will be thrown.

I'll leave it to you to look at my minimalist example and Jake Gordon's README on github to find out how this can be useful to you.

https://github.com/jakesgordon/javascript-state-machine/blob/master/README.md

https://github.com/jwaggener/State-Machines

The takeaway here is:

• Finite State Machines are great for organizing and controlling your views.
• State machines don't replace routing and describing resources in a RESTful way.
• There's a free state machine for javascript ready to go - https://github.com/jakesgordon/javascript-state-machine/ - so take advantage of it.

Notes:

Stop Light code on github:

https://github.com/jwaggener/State-Machines

Jake Gordon's state machine:

https://github.com/jakesgordon/javascript-state-machine/

JavaScript Basics: Rebinding

Here's a simple test:

var foo = 24;
var bar = foo;
foo = 34;

What is the value of bar?

When foo is created it is bound to a value. foo is simply an identifier that is bound to the value 24. When we say that bar = foo, bar is being pointed to the value 24 as well. When we then assign the value of 34 to foo, foo points to 34. However, bar is still pointing to 24. The block of memory to which it is pointing has not changed.

So, in the example of above, the value of bar is 24.

Often rebinding is confused with assignment by reference. One might have incorrectly assumed that the value of bar was 34. After all, it pointed to foo and foo now pointed to the value 34. But this would be an example of assignment by reference, when what we are doing is taking identifiers and binding to values - blocks of memory.

A graphic representation of Rebinding:

Reference:
http://dmitrysoshnikov.com/ecmascript/es5-chapter-3-1-lexical-environments-common-theory/#rebinding

MARIE LAVEAU, CY TWOMBLY, XXX

On a recent trip to New Orleans, Maria and I visited St. Louis Cemetery #1, the oldest cemetery in the city, dating from 1789. Truly a fascinating place, this city of the dead, with above ground tombs - some bright white and brand new in shapes of pyramids and obelisks, many old and repaired, and many in disrepair, possibly forgotten by time. ( The crypts are not kept up unless a continuing care package is maintained ).

We saw the grave of Marie Laveau - or the supposed grave, it wouldn't be a surprise if the identity of its true occupant were lost to time as well. Laveau and her daughter, Laveau II were famous Voodoo practitioners in Crescent City in the 19th century. Voodoo practitioners were not taken lightly in the eclectic and ever-unique city of New Orleans and achieved considerable clout and fame.

The grave attracts tourists and fans, many of whom mark three X's (xxx) on the grave in the hopes that the spirit of Laveau will grant them a wish.

The result is something really lovely, which I compare here to a Cy Twombly ( or rather, the other way round ) - an old grave, a shrine to Laveau and a place for a small act.

Recently, I've been interested in the small act. Is this wishing an act of fancy, a small act of grace or art or aesthetics? Collectively, the XXX's and the xxx's and those inbetween take on a meaning that's full of tension and intrigue. And beautiful - physically and in what it represents - the wishes of dozens of strangers, the anointment of a location as a place of significnce for these acts.

Can this be reproduced? And how small of an act can have meaning and aesthetic value?

What's the smallest artistic act?

xxx

THE HUMAN FACE, RENDERED

Naturalistic human facial expression is becoming more convincing as the technology evolves and the creators of these analogs build in more detail - the muscles of the brow and around the corners of the mouth are represented more fully and faithfully. Like this video of a Japanese humanoid that has been floating around the internet recently:

http://www.youtube.com/watch?v=I7tYwnqot6M


There's that Uncanny Valley, where if something looks like a human but not quite like a human the representation leaves you cold, even a little queasy in my case.

3d graphic representations of people have, up until recently, always landed in the Valley for me. No matter the skill of the texturing of the skin and drapping of flesh on structure, they often seem hollow, moving but without a soul and maybe without internal organs. The Tom Hanks character in the Polar Express I found particularly grotesque because the empty humanoid emanated such a familiar and everyman voice.

It's instructive to go back to the early days of a medium and see the creators just beginning to manipulate a form that in retrospect, feels an inevitable evolution that is now familiar.

I ran across this video of early 3D modeling of the human head.

http://www.youtube.com/watch?v=SPMFhcC4SvQ&feature=related


The video is really creepy, and sometime playful, like around 2:17 where the animator distorts the features beyond the boundaries as a show of technical prowess. It's also a little surprising how advanced this head is for 1974. They could do that in 1974? I wasn't even born!

Of course, people - artists and actors - have been depicting and manipulating the human visage since the dawn of art. Here is one of the most powerful examples in human history -
http://en.wikipedia.org/wiki/File:Caravaggio_-_David_con_la_testa_di_Golia.jpg

The young warrior David, having slain the giant Goliath, looks at the work he holds in his hand with a subtle expression. Maybe it is sympathy or concern or a bittersweet reflection on what's required in conflict. Goliath's head is a grotesque and humanized monster, the brow tensed and palpable as a real human brow would be. But this depiction created with the not-so-simple tools of canvas, pigment, medium, adhesive.

What will be the next generation of depictions and analogues of the human face?

OONN.us

Today I launched OONN - a site to keep track of and share small experiments with code. It's simple and the homepage is homely, but I hope to find it useful and I hope others find it useful. The first code example I post is an approach to using Backbone.js with Mr Doob's Three.js. The question I am trying to answer, is how to make interactive Backbone.js View classes that can correspond to one or more 3d objects. How do I listen for click events on 3d objects for example. (That IS the example I use ). What is the best wat to make a Three 3d object an interactive object? I'd love to know the best answer.

Show at Carroll Street Cafe