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
Copy of Copy of 002.002.000_ProgrammingFundamentals SCRATCH
By lonce
Copy of Copy of 002.002.000_ProgrammingFundamentals SCRATCH
A brief overview of audio synthesis fundamentals, and how to create interactive audio on the Web.
- 308