Justin Meyer

Jupiter IT

Present

JavaScript Data Types

Overview

  1. JavaScript != DOM. 1 min
  2. Primitives. 4 min
  3. Object. 10 min
  4. Function. 10 min
  5. Array. 2 min
  6. Date. 2 min
  7. RegExp. 2 min
  8. Object Primitives. 2 min
  9. Conclusion. 1 min

JS != DOM

Don't hate the player. Hate the game.


JavaScript

var square = function(x){return x*x}
var arr = [1,2,3];
for(var i =0; i < arr.length; i++){ ... }

DOM

var out = document.getElementById("out");
out.innerHTML = "Hello world"
out.addEventListener("click", function(){ ... }, false);

Primitives

a datum represented directly at the lowest level of the language implementation


Types


Warning! some primitives have object versions.

Primitives

Undefined

used when a variable has not been assigned a value


Examples:


undefined
({}).some_property
(function(x){
  x
})(x);

Primitives

Null

represents the null, empty, or non-existent reference


Examples:


null
({some_property: null}).some_property

Primitives

Boolean

either true or false


Examples:


true;
false;
Boolean()   // -> false
Boolean(1)  // -> true
Boolean({}) // -> true

Primitives

String

finite ordered sequence of zero or more 16-bit unsigned integer values.


Examples:


""
"ABC"
String(false) // -> "false"
String({})    // -> "[object Object]"

Primitives

String Methods


"abc".charAt(0)       // -> "a"
"abc".charCodeAt(0)    // -> 97
"abc".concat("def")    // -> "abcdef"
"abc".indexOf("b")     // -> 1
"abc".lastIndexOf("b") // -> 1
"abc".match(/a/)       // -> ["a"]
"abc".replace(/a/,"d") // -> "dbc"
"abc".search(/b/)      // -> 1
"abc".slice(1,2)       // -> "b"
"abc".split("b")       // -> ["a","c"]
"abc".substr(1,2)      // -> "bc"
"abc".substring(1,2)   // -> "b"
"aBC".toLowerCase(1,2) // -> "abc"
"aBC".toUpperCase(1,2) // -> "ABC"

Primitives

Number

double-precision 64-bit format IEEE 754 values


Examples:


1 
0.2
Infinity
NaN
Number("10") // -> 10

Object

unordered collection of properties each of which contains a primitive value, object, or function


Examples


var a = new Object();
var b = {};
var c = { some_property : 3};
a.some_property = 1;
b["some_property"]=2
a.some_property       // -> 1
b.some_property       // -> 2
c.some_property       // -> 3

for(var p in c) { print(p) }  // -> "some_property"

Object

Methods + Properties

Only has __proto__ propery.

Object

Methods + Properties

Methods of Object.Prototype object:


({}).toString()                       // -> "[object Object]"

({}).toLocaleString()                 // -> "[object Object]"

({}).valueOf()                        // -> {}

({a: 1}).hasOwnProperty("a")          // -> true

Object.prototype.isPrototypeOf([])    // -> true

({a: 1}).propertyIsEnumerable("a")    // -> true

Function

a block of code you can run


Examples


function square(x){ return x*x; }
square = function(x}{ return x*x;}
square = new Function("x", "return x*x")
this.square = function(x){ return x*x;}

Person = function(name){
   this.name = name;
}
Person.prototype.surname = function(){ return "Lord "+this.name}
var j = new Person("Justin");
j.name    // -> 'Justin'
j.surname() //-> 'Lord Justin'

Function

Methods + Properties

Methods of Function.Prototype object:


(function(){}).constructor("x", "return x*x")(1) // -> 1
(function(x){return x}).apply(null, [1])         // -> 1
(function(x){return this.y+x}).call({y: 2}, 1)   // -> 3

Methods on Function instances:


var f = function(x){this.x =x};
f.length                                         // -> 1
f.prototype.square = function(){ return x*x; }
new f(2).square()                                // -> 4

Array

a list


Examples


[1,2,3]                // -> [1,2,3]
new Array(2)           // -> [undefined,undefined]
arr = new Array(1,2,3) // -> [1,2]


for(var i = 0; i < arr.length; i++){
  print(arr[i]);     // -> 1, 2, 3
}

Array

Methods + Properties


a = new Array() // -> []
a.length        // -> 0
a[1] = 2        // [undefined, 2] -> 2
a.length=1      // [undefined] -> 1
a.pop()         // [] -> undefined
a.concat(1,2)   // -> [1,2]
a.concat([1,2]) // -> [1,2]
a.push(1,3)     // [1,3] -> 2
a.join(",")     // -> '1,3'
a.reverse()     // [3,1] -> [3,1]
a.shift()       // [1] -> 3
a.unshift(4,5)  // [4,5,1] -> 3
a.slice(1,3)    // -> [5,1]

Array

continued .... 

a = [4,5,1]       // -> []
s = function(x,y){ return x-y }
a.sort(s)         //[1, 4, 5] ->  [1, 4, 5]
a.splice(1,1,6,7) //[1, 6, 7, 5] -> [4]

Date

date functionality


Examples


new Date()                     // -> now
new Date(1241067600000)        // -> Apr 30th, 09
new Date("Apr 30, 2009")       // -> Apr 30th, 09
start = new Date(2009,3,30,18,0,0,0 )  // -> Apr 30th, 09

talk_time = new Date() - start;

Date

Methods + Properties


[get|set][UTC]Date,
              Day              //only not 0 based!
              FullYear
              Hours
              MilliSeconds
              Miniutes
              Month
              Seconds
              Time
              TimezoneOffset
toDateString
toGMTString
toLocaleDateString
toUTCString
toTimeString

RegExp

string pattern matching


Examples


var regex = new RegExp("js.chi" , "g");
var literal = /js.chi/i;

regex.test("js.chi")          // -> true
literal.exec("js Chicago")   // -> ["js Chi"]

RegExp

Methods + Properties


Properties

r = /(hi?)/g;
r.global             // -> true
r.ignoreCase         // -> false
r.multiline = true   // -> false
r.source             // '(hi?)'
r.exec("hi")         // -> ['hi','hi']
r.exec('hi')         // -> ["", undefined]
r.lastIndex          //2
r.lastIndex = 0
r.exec("hi")         // -> ['hi','hi']
r.lastIndex = 0
r.test("hi")         // -> true

Object Primitives

Primitives can be objects too


Creating Object Primitives:


new Boolean(true);
new String("hello world");
new Number(10);

Useful for passing by reference

Conclusion

What you should remember:

  1. Future -> More JavaScript
  2. More JavaScript == More Problems
  3. JMVC address many of these problems

For more info:

http://javascriptmvc.com
http://jupiterit.com
http://twitter.com/justinbmeyer
justin@juptierit.com
0