JavaScript 101

Review from Codecademy exercisesParts 1–12

http://www.codecademy.com/tracks/javascript

Comparison

JavaScriptvar animal = "elephant"animal.length8console.log(animal)elephant2 + 3 * 517// a comment

Pythonanimal = "elephant"len(animal)8print animalelephant2 + 3 * 517# a comment

ComparisonJavaScriptfunction myfunction(a, b) {

var answer = a + b;return answer;

}console.log(myfunction(3, 5));8

Pythondef myfunction(a, b):

answer = a + breturn answer

print (myfunction(3, 5))8

var myfunction = function(a, b) {var answer = a + b;return answer;

}console.log(myfunction(3, 5));8 also JavaScript

Alert, Confirm, Prompt

An alert dialog box gives a message to the user. It only allows the user to click OK.

A confirm dialog box allows the user to choose between OK and Cancel. So the text should ask a question, and clicking OK should cause something to happen.

A prompt dialog box allows the user to type something and click OK, or the user may cancel to close the dialog.

Alert, Confirm, Prompt

We will do an exercise with these later.

Booleans: Comparison

JavaScript10 > 3true10 < 3false

Python10 > 3True10 < 3False

Note that case is significant in JavaScript (just as it is in Python).The Boolean values in Python must be uppercase.In JavaScript, the Boolean values must be lowercase.

If–Else

JavaScriptif (x == y) {

console.log("They are

equal.");}else if (x > y) {

console.log("x is more.");

} else {console.log("x is less.");

}

Pythonif (x == y): print "They are equal."elif (x > y): print "x is more."else: print "x is less."

For Loop

JavaScriptfor ( i = 0; i < 10; i++ ) {

console.log(i); }

// this will print the numbers from 0

through 9

Pythonfor i in range(0, 10): print i

# this will print the numbers from 0 through 9

For Loop (2)Python

JavaScript

While Loop

JavaScriptvar n = 0;while (n < 3) {

console.log("Looping.");n++;

}

Looping.Looping.Looping.

Pythonn = 0while (n < 3): print "Looping." n += 1

Looping.Looping.Looping.

“Incrementing”

i++ is the same as i = i + 1 i-- is the same as i = i - 1

i += 1 is the same as i = i + 1 i -= 1 is the same as i = i - 1

JavaScript

Python

Extracting a substring

JavaScriptvar mystring = "the word swagger"

console.log(mystring.substring(9,13));

swag

Pythonmystring = "the word swagger"

print mystring[9:13]

swag

The switch statement

switch (//Some expression) {case 'option1':

// Do somethingbreak;

case 'option2':// Do something elsebreak;

default:// Do yet another thingbreak;

}

Switch statement example

switch (album) {case "asbury":

songfile = "clips/spiritinthenight.mp3";track = "Spirit in the Night";album = "Greetings from Asbury Park";break;

case "wild":songfile = "clips/fourth.mp3";track = "4th of July, Asbury Park (Sandy)";album = "The Wild, the Innocent, and the E Street

Shuffle";break;

case "borntorun":songfile = "clips/thunderroad.mp3";track = "Thunder Road";album = "Born to Run";break;

. . . . . . . . . .};

Arrays (Lists)JavaScriptvar mylist = ["red", "white", "blue"];console.log(mylist[2]);blue

Python

mylist = ["red", "white", "blue"]print mylist[2]blue

Math.random()

If we declare a variable and make it equal to Math.random(), that variable will equal a number between 0 and 1.

Note: In JavaScript, the capital M in all Math methods is significant. No lowercase!

Note that if you use Math.random() to create the value of a variable, that value will not change randomly.

But if you run Math.random() again and again, it will generate a new number between 0 and 1 each time.

To use the JavaScript console in Chrome (shown here), open the View menu > Developer > JavaScript Console

What is happening here?

What would this code be good for?(Think about games.)

Note: Math.floor() rounds a number down to the nearest integer. It conveniently cuts off the decimal places. We add 1 because otherwise our numbers would go from 0 to 5. By adding 1, they range from 1 to 6 instead.

Guessing a number

• In-class assignment: Create a little game with an HTML page, a confirm dialog box and JavaScript.

• Your game will use Math.Random() to pick a number between 1 and … ? (You choose.)

• Then the user has to guess the number, by typing it into the confirm dialog.

• A new alert box will open and tell the user if the guess is right or wrong.

Alert, Confirm, Prompt

Download this:

https://github.com/macloo/javascript_beginners

JavaScript 101

Review from Codecademy exercisesParts 1–12

http://www.codecademy.com/tracks/javascript