http://slides.com/afo/deck-3
Analytical skills, problem solving and creativity, while also being both foundational and vocational
"Understanding that in the future no profession is untouched by machines means admitting that coding is part of the liberal arts, and therefore a core skill every child must possess."
- WSJ.com
for the Right-Brained or
Visual learners
Tools - jsfiddle.net (create an account)
We'll start with small (fun) exercises, build up
Any example that requires html or css I will provide
We'll break down more complex code together
2
"Duke"
true
var favShow = prompt("My favorite show as a kid was: ");
alert("My favorite show as a kid was " + favShow + ".");
We don’t need to create infrared radiation by using nichrome wires wrapped back and forth across a mica sheets (yes those are in traditional toasters).
We don’t then need to encase those wires in steel and add an electrical cord and plunging switch.
We just use a toaster. A function is similar. You simply call the function and it springs into action.
function
functionName
()
{
statement1;
statement2;
}
functionName();
function addOne() {
var age = 9;
var newage = age + 1;
alert (newage);
}
addOne();
function addOne()
function addOne() {
}
function addOne ( ) {
var age = 9;
var newage = age + 1;
alert (newage);
}
addOne( );
var jshero = {
color : green,
run : function ( ) {code to make
character run;
}
};
jshero.run;
Note the different syntax elements
No parameters
colons defining attributes and values
commas separate lines
there's a function embedded or nested
when calling object property or method use the dot syntax
I think the best analogy for this is conditional love. Something like:
"If you really loved me you'd buy me donuts. Otherwise, you don't."
An "if" statement is used to test if a condition is true or false
If the results are true then a command is executed.
Here is a basic "if then" statement that compares two numbers to see if the first is greater than the second:
if (5 > 2) {
alert ("It is bigger!");
}
Note comparison operators such as >= are considered "logic" and are also a big foundational concept, but they're just not really that fun to talk about :)
if (condition) {
statement1;
statement2;
}
else {
statement1;
}
Arrays are lists of any kind of data, including other arrays
Each item in the array has an index - a number - which can be used to retrieve an element from the array. The indices start at 0.
A new element here with the [ brackets ]
A comma separated list
Can use keyword var
var flavors = [ "vanilla", "buterscotch", "lavendar" ];
to retrieve an element of array you call it by its index
flavors [0]; would result in vanilla, and so on....
Use the Math Object to generate a random response
The syntax is getting a little complex here!
We won't add this to our exercise - not enough time
Used if you needed to keep checking the status of something, to see if it was still true
Keywords include for, while, switch...
What if we wanted to know if we'd eaten all our scoops of ice cream? I know I'd want to know that...
In the while loop below, it keeps looping until the statement is no longer true. It doesn't end well. How can it when you're out of ice cream?
for ( var x = 0; x < 10; x++) {
alert("The number is " + x);
}
The loop keeps checking to see if x is less than 10
The syntax is complex = 3 statements to start out
Variables store information or data for you.
Pretty cool when you want to store info for later use.
In our example we stored the value of our favorite show as a kid.
We then used that stored value in a sentence.
var favShow = prompt("My favorite show as a kid was: ");
alert("My favorite show as a kid was " + favShow + ".");
Functions are basically lists of things you'd like to happen.
The function name acts as a shortcut for those things to happen
In our function addOne we used it to add one to a stored value and then alert that new value
function addOne ( ) {
var age = 9;
var newAge = age + 1;
alert (newAge);
}
function addOne() {
var age = 9;
var newAge = age + 7;
document.getElementById("output").innerHTML = newAge;
}
An "if" statement is used to test if a condition is true or false
If the results are true then a command is executed.
In our conditional statement we tested whether a user was of age and had responses for both (that displayed in the browser:
if (newAge >= 21) {
document.getElementById("output").innerHTML = "You can buy beer!";
} else {
document.getElementById("output").innerHTML ="No way, buddy!";
}
Arrays are lists of any kind of data, including other arrays
In our array we created a list of sassy responses to underage drink seekers:
function addOne() {
var responses = ["Hell, no", "That'd be a no", "Uhhh, yeah, no"];
var age = 9;
var newAge = age + 7;
if (newAge >= 21) {
document.getElementById("output").innerHTML = "You can buy beer!";
} else {
document.getElementById("output").innerHTML = responses[1];
}
}
In the while loop below, it keeps looping until the statement is no longer true. It doesn't end well. How can it when you're out of ice cream?
BOOKS
Learn to Program by Chris Pine
JavaScript Cookbook by Shelley Powers
JavaScript: The Good Parts by Douglas Crockford
JavaScript the Definitive Guide, 6th edition
JavaScript Enlightenment by Cody Lindley
Effective JavaScript by Dave Herman
Head First JavaScript Programming by Eric Freeman and Elizabeth Robson
Matthew Wilson, Absolute blog
ONLINE GUIDES AND DOCUMENTATION
FREE ONLINE LEARNING ENVIRONMENTS
http://www.w3schools.com/js/
https://www.khanacademy.org/
http://www.codecademy.com
http://www.lynda.com
http://www.udemy.com
JAVASCRIPT ONLINE PLAYGROUNDS
http://codepen.io/
http://jsfiddle.net
http://jsbin.com/
http://dabblet.com/
COMMUNITY
github.com
stackoverflow.com
Doug Crockford - http://www.yuiblog.com/crockford/
Shelley Powers - http://www.burningbird.net
Bret Victor - http://worrydream.com
alex.fogarty@mnstate.edu
@alex_fogarty
http://slides.com/afo/deck-3