An introduction to JavaScript that includes side-by-side comparisons with Python -- for journalism students. Based on the free JavaScript exercises/lessons at Codecademy: http://www.codecademy.com/tracks/javascript (Students in this course spent 4 weeks learning Python before they were introduced to JavaScript.)

1. JavaScript 101
Review from Codecademy exercises
Parts 1–12
http://www.codecademy.com/tracks/javascript

2. Comparison
JavaScript
Python
var animal =
"elephant"
animal.length
8
console.log(animal)
elephant
2 + 3 * 5
17
// a comment
animal = "elephant"
len(animal)
8
print animal
elephant
2 + 3 * 5
17
# a comment

3. Comparison
JavaScript
Python
function myfunction(a, b) {
var answer = a + b;
return answer;
}
console.log(myfunction(3, 5));
8
def myfunction(a, b):
answer = a + b
return 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

4. 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.

5. Alert, Confirm, Prompt
We will do an exercise
with these later.

6. Booleans: Comparison
JavaScript
Python
10 > 3
true
10 < 3
false
10 > 3
True
10 < 3
False
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.

7. If–Else
JavaScript
Python
if (x == y) {
console.log("They are
equal.");
}
else if (x > y) {
console.log("x is
more.");
} else {
console.log("x is
less.");
}
if (x == y):
print "They are equal."
elif (x > y):
print "x is more."
else:
print "x is less."

8. For Loop
JavaScript
Python
for ( i = 0; i < 10; i++ )
{
console.log(i);
}
for i in range(0, 10):
print i
// this will print the
numbers from 0 through 9
# this will print the
numbers from 0 through 9

9. For Loop (2)
Python
JavaScript

10. While Loop
JavaScript
Python
var n = 0;
while (n < 3) {
console.log("Looping.");
n++;
}
n = 0
while (n < 3):
print "Looping."
n += 1
Looping.
Looping.
Looping.
Looping.
Looping.
Looping.

11. “Incrementing”
JavaScript
i++ is the same as i = i + 1
i-- is the same as i = i - 1
Python
i += 1 is the same as i = i + 1
i -= 1 is the same as i = i - 1

12. Extracting a substring
JavaScript
Python
var mystring = "the
word swagger"
mystring = "the word
swagger"
console.log(mystring.s
ubstring(9,13));
print mystring[9:13]
swag
swag

13. The switch statement
switch (//Some expression) {
case 'option1':
// Do something
break;
case 'option2':
// Do something else
break;
default:
// Do yet another thing
break;
}

14. Switch statement example

15. 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;
. . . . . . . . . .
};

16. Arrays (Lists)
JavaScript
var mylist = ["red", "white", "blue"];
console.log(mylist[2]);
blue
Python
mylist = ["red", "white", "blue"]
print mylist[2]
blue

17. 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!

18. 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

19. What is happening here?

20. 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.

21. 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.

22. Alert, Confirm, Prompt
Download this:
https://github.com/maclo
o/javascript_beginners

23. JavaScript 101
Review from Codecademy exercises
Parts 1–12
http://www.codecademy.com/tracks/javascript