javascript 101
DESCRIPTION
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.)TRANSCRIPT
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