Learn JavaScript by modeling Rubik Cube

Silicon Valley Code Camp
Learn JavaScript
by
Modeling Rubik’s Cube
Manoj Kumar

Agenda
• Scripting Language
• Crash course in Rubik’s Cube
• Code Walk-through
• Modeling
• Finding moves

Scripting Language
• Is a Programming Language
– To manipulate
– To customize
– To automate
– an existing system
• ECMAScript
– Web Scripting Language
– To work with web browser

ECMA Script
• Object Based
– Object: Collection of properties
– Property
• Type : Number, Boolean, String, Array, Function
& other objects
• Attributes
• Value, Writable, Configurable, Enumerable
• Functional
• Based on
– Java, C
– Self (Prototype)
– Scheme (Functional)

Types
• Primitive Value Types
– Number
– String
– Boolean
– Null
– Undefined
• Objects
• Functions

Number
• 64 bit floating point (sign bit, 11 exp, 52 frac)
• Represents integer and float
– 1, 3.45, 5.345e-10, 0377, 0xFF,
• Infinity
– >1.79769313486231570e+308
• NaN
– Nan != NaN
• Representation for
– MAX_VALUE, MIN_VALUE
– NEGATIVE_INFINITY, POSITIVE_INFINITY
• +0 == -0 but 1/+0 != 1/-0

String
• Within double/single quotes
– “Hello world”
– ‘u0041 world’
• Sequence of 16 bit unicode chars
• Supports + operator
• Used for character type too

Boolean
• Only two values
– true
– false
• 6 more falsy values
– 0, -0, “”, NaN, null, undefined
• Rest all values are true
– Including ‘false’ :)

Undefined and Null
• Undefined Type
– Only one value: undefined
• Null Type
– Only one value: null

Binary Operators
• Binary + (Addition or concatenation)
– 1 + 2 = 3,
– ‘1’ + ‘2’ = ‘1’ + 2 = 1 + ‘2’ = ‘12’
• -, * , /, %
– 2 * ‘3’ = 6
• >=, <=, >, <
• ==, !=
• === !==
• Logical &&, ||

Prefix Operators
• + to number
– 1 + +'2' // 3
• - negate
• ! logical not
• Typeof
– typeof 1 // ‘number’
– typeof ‘a’ // ‘string’

Bit Operators
• & and
• | or
• ^ xor
• ~ not
• >> signed right shift
• >>> unsigned right shift
• << left shift

And more
• = assignment
• +=, -=, *=, /= %=
– X op= y ==> x = x op y
• ++ increment
– X++ ==> x = x+1
• -- decrement
– X-- ==> x = x-1

A Simple Object
point = { x : 100, y : 200 };
point.x // 100
point[‘x’] // 100
point.y = 300;
ap = { “x-coord” : 100, “y-coord” : 200 };
ap.x-coord // Error, - means subtraction
ap[“x-coord”] // 100
ap[“X-coord”] // undefined, (note the upper
case X)

Functions
function add(x, y) {
return x+y
}
sum = add(4,5)
myAdd = add
sum1 = myAdd(4, 5)

Function Var
Assignment
myAdd = function add(x, y) {
return x+y
}
sum1 = myAdd(4, 5)
sum2 = add(4, 5)
ReferenceError: add is not defined

Function Var
Assignment
myAdd = function (x, y) {
return x+y
}
sum1 = myAdd(4, 5)

Anonymous Function
sum = function (x, y) {
return x+y
} (4,5)

Arguments
function add( ) {
var sum = 0
for( var i = 0; i < arguments.length; i++) {
sum += arguments[i]
}
return sum
}
add(4, 5) => 9
add(4,5,3) => 12
add() => 0

Scope of a Variable
function f() {
a = 6 // “a” is a global variable
}
a = 5
f()
// a is 6 now

Scope of a Variable
function f() {
var a = 6 // “a” is a local variable
alert("After assignment : a = " + a)
}
a = 5
alert("Before Calling function: a = " + a)
f()
alert("After Calling function: a = " + a)

Scope of a Variable
function f() {
a = 6
….
var a // makes “a” a local variable!
}
a = 5
f()
// a is still 5

Semicolon Insertion
You can only leave out ;
– Before }
A = 6 }
– After new line(s)
A = 6
}
– End of the program
Cannot leave ; within ‘for’ header
– for (var i=0; i < 7 .. NO ; inserted here
i++) {

Semicolon Insertion
Inserted only if next token cannot be parsed
A = 6 (; is inserted automatically)
X = 5
What if next line seems to be continuation?
A = b (; is NOT inserted automatically)
(add(3,4),......)
– So problem starting chars are
( [ + - /
– Statements before such chars must have ;

Building Custom Object
frontColor = { } // create empty
object
frontColor.red = 255
frontColor.blue = 0
frontColor.green = 128
redComponent = frontColor.red

Object using
constructor
function Color ( r, g, b ) {
this.red = r
this.green = g;
this.blue = b
}
red = new Color(255, 0, 0)

Object Using
Constructor
this.red = r
this.green = g;
this.blue = b
}
myColor = { }
myColor.red // undefined
Color.apply( myColor, [255, 65, 127] )
Color.call( myColor, 255, 65, 127 )
myColor.red // 255

Bad Usage of
Constructor
this.red = r
this.green = g
this.blue = b
}
Color(255, 127, 65)
this.red // 255.. but what is “this”
here?

Immutable Object Using
Constructor
this.getRed = function( ) { return r };
this.getGreen = function() { return g };
this.getBlue = function() { return b };
}
red = new Color(255, 0, 0)
red.getRed( ) // 255
red.red = 128 // creates a new property red
red.getRed() // still 255!

Closure
• Closure is an object having
– Function
– Environment when function was
created
• Local Variables of outer function
• Local functions declared in outer
function
• Parameters of outer function
• this and arguments of outer function are
not available but can be saved in local
variables of outer function and then

Property Attributes
• Value (Named Data Property)
– Default value
• Get and Set (Named Accessor Property)
– Getter and Setter function
– Either Value or Get/Set can be used, but not both
• Writable
– False => Read Only Property
• Enumerable
– False => Obj.keys or for (key in Obj) will not show
• Configurable
– False => delete obj.prop, or redefine will not work

Defining Property
function Color(r, g, b) {
Object.defineProperties( this,
{
red : {
value: r,
writable : false,
enumerable : true,
configurable: false
}, …
} ); }

Freezing an Object
Rubik = {};
Rubik.Slope = {};
Rubik.Slope.HORIZONTAL = "Horizontal";
Rubik.Slope.VERTICAL = "Vertical";
Rubik.Slope.SLANTED = "Slanted";
Rubik.Slope.ERROR = "Error";
Object.freeze(Rubik.Slope);
Object.defineProperty( Rubik, "Slope",
{ writable : false, enumerable : true,
configurable : false }
);

Sealing an Object
Object.seal(Rubik.Slope);
No new properties can be added.
Writable properties can be re-written.
Configurable properties can be re
configured.
Object.isSealed(Rubik.Slope) // true

What next?
• DOM
• JQuery
• Java Script Design Patterns
• Coding Style/Documentation
• Books to read:
– JavaScript – The Good Parts
– Effective JavaScript

Many Variables in one
declaration
function X () {
var a = 5,
b = 6
var c = 7, d=8
alert ( "a=" + a + ", b=" + b + ", c="
+ c)
}
X()
//alert ( "a=" + a + ", b=" + b + ", c=" +
c)

Spot the mistake!
function X () {
var a = 5
b = 6
var c = 7
alert ( "a=" + a + ", b=" + this.b + ", c=" +
c)
}
X()
//alert ( "a=" + a + ", b=" + b + ", c=" + c)
alert ( "b=" + window.b)

Spot the mistake!
function X () {
var a = 5,
b = 6
var c = 7
alert ( "a=" + a + ", b=" + this.b + ", c=" +
c)
}
X()
//alert ( "a=" + a + ", b=" + b + ", c=" + c)
alert ( "b=" + window.b)

Constants in JavaScript
"use strict";
Object.defineProperty(this, "PI", {
value : 3.14,
writable : false,
enumerable : true,
configurable : false
});
PI = 7 // TypeError: "PI" is read-only

Constants in JavaScript
"use strict";
var MyConst = { }
MyConst.PI = 3.14
Object.freeze(MyConst)
MyConst.PI = 8 //TypeError: "PI" is read-only

Rubik’s Cube
• Cube
– Mini Cube/Cubelet/Atom
• Corner (8)
• Edge (12)
• Center (6)
– Sides/Layer
• Front/Back/Left/Right/Up/Down

Naming Atoms
• Corner: RFU
– Right, Front, Up corner
– RFU, FRU, URF … refers to same corner
• Edge : RF
– Middle cubelet of the edge shared by Right
and Front layers
• Center: R
– Center of the right layer

Moves
• R => right layer 90 deg clockwise
looking from right
• R’ => right layer 90 deg anticlockwise
looking from right
• R2 => right layer 180 deg
• RRRR, RR’, R2R2 =>No change
• (XY)’ = Y’X’

Effect of a Move
• Rotating front layer clockwise
( F) ==>
[ fru -> fdr -> fld -> ful -> fru ]
[ fr -> fd -> fl -> fu -> fr ]
• FRU ->FDR
– Corner FRU has moved to FDR
– Right side color of FRU has gone to Down side
of FDR

Useful Moves
• Moves that produce the minimal
disturbance
• One cycle of 3 corners (Placement)
• Rotating corners (Orientation)
• One cycle of 3 edges (Placement)
• In-place flipping edges (Orientation)

Basic Corners Moves
• One cycle of 3 corners
– (R'D'LD RD'L'D) => [ fru -> drf -> ful -> fru ]
– (RF'L'F R'F'LF) => [ fru -> lfu -> drf -> fru ]
• Rotate corner at its own place
(R'D'LD RD'L'D RF'L'FR'F'LF) ==>
[ dfr -> rdf ]
[ flu -> luf ]

Basic Edges Moves
• One cycle of 3 edges
(V'F2VF2) ==> [ fu -> bu -> fd -> fu ]
(V'F'VFFV'F'V) ==> [ fr -> fl -> df -> fr ]
• Flipping edges in its own positions
(RFBU2F2U'FUFU2B'R'F') ==>
[ fr -> rf ]
[ fu -> uf ]

Cube Representation
• Cube
• Atom
– Corner
– Edge
– Center
• Side
• Move
• MoveSequence
• MoveFinder

Built-in Objects
• Object
• Function
• Array
• String
• Boolean
• Number
• Math, Date, RegExp, JSON, Error
objects

Call and Apply
• add(4, 5, 2 ,3)
• add.call(null, 4, 5, 2, 3)
• add.apply(null, [4, 5, 2, 3])
• add.apply(undefined, [4, 5, 2, 3])

Variables
• No need to declare a variable
sum = 5
• Local Variables
var sum = 0;
• Declaring many variables in one declaration
var sum = 0, average = 0, stddev = 0;
• Always use semicolon OR know the rules
precisely

Object
• Collection of properties
• Property (optional)
– primitive value
– function
– other object
• Prototype (optional)
– To share property from others

Literal Object
frontColor = {
red : 255
blue : 0
green : 128
}
redComponent = frontColor.red
greenComponent = frontColor [ “green” ]

Immutable Object
function makeColor ( r, g, b ) {
return {
getRed : function( ) { return r },
getGreen : function() { return g },
getBlue : function() { return b }
}
}
color1 = makeColor(255, 0, 0)
color1.getRed( ) // 255
color1.getGreen() // 0
color1.blue = 128 // red has no property called blue!
Error!

Learn JavaScript by modeling Rubik Cube

Recommended

More Related Content

What's hot (20)

Viewers also liked (6)

Similar to Learn JavaScript by modeling Rubik Cube (20)

Recently uploaded (20)

Learn JavaScript by modeling Rubik Cube