Computational Thinking

SCRATCH

Lonce Wyse

Communication & New Media

lonce.wyse@cnm.nus.sg

 Functions

input

("arguments")

process

return

function ( arg ) {
	return arg/2;
}

var halve = function ( arg ) {
	return arg/2;
}

x = halve(256);

Define

Name

Use

(note pattern!)

Objects  

                          {  "radius" : 6,  

                              "position" :  { ... }  , 

                              "changeRadius"  :   function(...){...}   

                            }  

Define

Objects  

var myCircle = {  "radius" : 6,  

                              "position" :  { ... }  , 

                              "changeRadius"  :   function(...){...}   

                            }  

Define

Objects  

var myCircle = {  "radius" : 6,  

                              "position" :  { ... }  , 

                              "changeRadius"  :   function(...){...}   

                            }

Use

Define

myCircle.radius = 6;     or  myCircle["radius"] = 6;  

(note pattern!)

Document Object Model

document = {  "head" : { ... },  

                           "body" :  { ... }  , 

                            "getElementByID"  :   function(...){...},   

                            }

Every HTML page has a Document Object

Think of the DOM as a "tree" of "nodes" corresponding to the HTML structure

JavaScript *Modules*

• Best practices: Modules as seperate files
• We'll use a "module loader" called require.js
• Modules are written as functions that are executed as they are loaded. 

Representing and structuring information and ideas 

Systematically processing information with algorithms 

7 key elements

7 key elements

1) loops 

            
2) conditionals 

 
3) lists     

4) objects   

5) functions 

6) timers   

    
7) events           

7 key elements

1) loops              - for ( counter=1 to 10 ) { do something with counter }
2) conditionals  - if  ( true) { do something }  else  { do another thing }
3) lists                 - alist[0] = "star wars"; alist[1] = "Jurrasic Park"; alist[2] = "Ice Age";

4) objects           - kitchen = {  "numForks" : 6,  

                                                   "ovenSize" : "large" , 

                                                   "makeCake" : function   }

                                   kitchen.numForks = 6;     or   kitchen["numForks"] = 6; 
5) functions       - makeCake = function(ingrediants){recipe steps; return cake}
6) timers            - setTimeout( {do something}, 1 day )
7) events           - onClick ( {do something} )

7 key elements

1) loops              - for ( counter=1 to 10 ) { do something with counter }
2) conditionals  - if  ( true/false ) { do something }  else  { do another thing }
3) lists                 - alist[0] = "star wars"; alist[1] = "Jurrasic Park"; alist[2] = "Ice Age";

4) objects           - kitchen = {  "numForks" : 6,  

                                                   "ovenSize" : "large" , 

                                                   "makeCake" : function   }

                                   kitchen.numForks = 6;     or   kitchen["numForks"] = 6; 
5) functions       - makeCake = function(ingrediants) { recipe steps;  return cake }
6) timers            - setTimeout( {do something}, 1 day )
7) events           - onClick ( {do something} )

How to express with JavaScript syntax