week 5 java script functions
DESCRIPTION
TRANSCRIPT
![Page 1: Week 5 java script functions](https://reader034.vdocument.in/reader034/viewer/2022051609/5478cda3b37959582b8b4597/html5/thumbnails/1.jpg)
Speaking in Code
Intro to JavaScriptFunctions!
Brian Lee
Professor Liel Leibovitz
![Page 2: Week 5 java script functions](https://reader034.vdocument.in/reader034/viewer/2022051609/5478cda3b37959582b8b4597/html5/thumbnails/2.jpg)
Speaking in Code
Logistics
• Spring Break – no class next week
![Page 3: Week 5 java script functions](https://reader034.vdocument.in/reader034/viewer/2022051609/5478cda3b37959582b8b4597/html5/thumbnails/3.jpg)
Speaking in Code
![Page 4: Week 5 java script functions](https://reader034.vdocument.in/reader034/viewer/2022051609/5478cda3b37959582b8b4597/html5/thumbnails/4.jpg)
Speaking in Code
Big Picture: HTML/CSS vs. JavaScript
• HTML/CSS are computer languages that define
content, structure, and how things look
• JavaScript is a programming language where you give
the computer instructions
– Set of directions such as for recipes
![Page 5: Week 5 java script functions](https://reader034.vdocument.in/reader034/viewer/2022051609/5478cda3b37959582b8b4597/html5/thumbnails/5.jpg)
Speaking in Code
Big Picture: Programming
• Learning JavaScript – programming language
• Widely-applicable concepts
![Page 6: Week 5 java script functions](https://reader034.vdocument.in/reader034/viewer/2022051609/5478cda3b37959582b8b4597/html5/thumbnails/6.jpg)
Speaking in Code
Programming Language Similarities• JavaScript
• Ruby
• Python
if (x < 10) { console.log("x is less than 10!");
}
if x < 10puts "x is less than 10!"
if x < 10: print "x is less than 10!"
![Page 7: Week 5 java script functions](https://reader034.vdocument.in/reader034/viewer/2022051609/5478cda3b37959582b8b4597/html5/thumbnails/7.jpg)
Speaking in Code
Programming Language Similarities
• JavaScript
• Java
if (x < 10) { console.log("x is less than 10!");
}
if(x < 10) {
System.out.println("x is less than 10!"); }
![Page 8: Week 5 java script functions](https://reader034.vdocument.in/reader034/viewer/2022051609/5478cda3b37959582b8b4597/html5/thumbnails/8.jpg)
Speaking in Code
Big Picture: What we’re learning now
• Using JavaScript to tell browser what to do
• “Front-end” language
![Page 9: Week 5 java script functions](https://reader034.vdocument.in/reader034/viewer/2022051609/5478cda3b37959582b8b4597/html5/thumbnails/9.jpg)
Speaking in Code
Big Picture: How it all fits in (HTML)
<!DOCTYPE html><html>
<head><title>HTML title</title>
</head><body>
<p>paragraph</p></body>
</html>
![Page 10: Week 5 java script functions](https://reader034.vdocument.in/reader034/viewer/2022051609/5478cda3b37959582b8b4597/html5/thumbnails/10.jpg)
Speaking in Code
Big Picture: How it all fits in (CSS)
<!DOCTYPE html><html>
<head><title>HTML title</title><link type="text/css" rel="stylesheet"
href="stylesheet.css"/></head><body>
<p id=“color-me”>paragraph</p></body>
</html>
![Page 11: Week 5 java script functions](https://reader034.vdocument.in/reader034/viewer/2022051609/5478cda3b37959582b8b4597/html5/thumbnails/11.jpg)
Speaking in Code
Big Picture: How it all fits in (JavaScript)
<!DOCTYPE html><html>
<head><title>HTML title</title><link type="text/css" rel="stylesheet" href="stylesheet.css"/><script type="text/javascript" src="script.js"></script>
</head><body>
<p id=“color-me”>paragraph</p></body>
</html>
![Page 12: Week 5 java script functions](https://reader034.vdocument.in/reader034/viewer/2022051609/5478cda3b37959582b8b4597/html5/thumbnails/12.jpg)
Speaking in Code
JavaScript
• Each line is read one at a time
• Comments
• Most lines are ended with ;
– Like a period at the end of a sentence
// These won’t be read in JavaScript
![Page 13: Week 5 java script functions](https://reader034.vdocument.in/reader034/viewer/2022051609/5478cda3b37959582b8b4597/html5/thumbnails/13.jpg)
Speaking in Code
JavaScript
• Print to the screen (console)
• Try it in your browser console
– Right-click -> Inspect Element -> Console
console.log(‘Hello World’);console.log(9482301);
![Page 14: Week 5 java script functions](https://reader034.vdocument.in/reader034/viewer/2022051609/5478cda3b37959582b8b4597/html5/thumbnails/14.jpg)
Speaking in Code
Recap: Types
• Everything is associated with a type
• Numbers
• Strings
• Booleans
254
“Hi there!”
truefalse
![Page 15: Week 5 java script functions](https://reader034.vdocument.in/reader034/viewer/2022051609/5478cda3b37959582b8b4597/html5/thumbnails/15.jpg)
Speaking in Code
Recap: Types – Strings
• You can concatenate strings
“Brian” + “ Lee”>> Brian Lee
“1” + “ 1”>> “11”
![Page 16: Week 5 java script functions](https://reader034.vdocument.in/reader034/viewer/2022051609/5478cda3b37959582b8b4597/html5/thumbnails/16.jpg)
Speaking in Code
Recap: Conditionals
• Arithmetic expressions compute to a Number
• Conditionals compute to a Boolean
4 * 5;>> 20
20 > 15;>> true
13 >= 15;>> false
![Page 17: Week 5 java script functions](https://reader034.vdocument.in/reader034/viewer/2022051609/5478cda3b37959582b8b4597/html5/thumbnails/17.jpg)
Speaking in Code
Recap: Conditionals
• Operators
><>=<====
![Page 18: Week 5 java script functions](https://reader034.vdocument.in/reader034/viewer/2022051609/5478cda3b37959582b8b4597/html5/thumbnails/18.jpg)
Speaking in Code
Recap if statements
• Execute code based on a set of conditions
• English: If you are older than 21, then you can drink
• JavaScript: (try in JSbin)var i = 18;if ( i >= 21) {
console.log(“you can drink!”);}else {
console.log(“better wait another year”);}
![Page 19: Week 5 java script functions](https://reader034.vdocument.in/reader034/viewer/2022051609/5478cda3b37959582b8b4597/html5/thumbnails/19.jpg)
Speaking in Code
Variables
• Very similar to variables in algebra
• Begin with var to instantiate
• Common practice to camelCase
var firstName = “Brian”var lastName = “Lee”console.log(firstName + “ “ + lastName)>> “Brian Lee”
![Page 20: Week 5 java script functions](https://reader034.vdocument.in/reader034/viewer/2022051609/5478cda3b37959582b8b4597/html5/thumbnails/20.jpg)
Speaking in Code
Variables
• Should be lowercase first (otherwise Objects)
• Cannot start with numbers, no spaces
var 1stName = “Brian”var LastName = “Lee”
![Page 21: Week 5 java script functions](https://reader034.vdocument.in/reader034/viewer/2022051609/5478cda3b37959582b8b4597/html5/thumbnails/21.jpg)
Speaking in Code
Common Gotchas
• Important:
• Not as important
var taxRate = 1.089; var tax rate = 1.089; //error no spaces between variable namesvartaxRate = 1.089; //error need space between var and variable name
var taxRate = 1.089; var taxRate = 1.089;
if(10 > 5) { console.log("Hello!"); }
![Page 22: Week 5 java script functions](https://reader034.vdocument.in/reader034/viewer/2022051609/5478cda3b37959582b8b4597/html5/thumbnails/22.jpg)
Speaking in Code
Indenting
• Similar to the principals for HTML
• Makes it easier for you!
• No set standard, but just stick to it!
var i = 18;if (i >= 21) {
console.log(‘you can drink!’);}else {
console.log(‘better wait another year’);}
![Page 23: Week 5 java script functions](https://reader034.vdocument.in/reader034/viewer/2022051609/5478cda3b37959582b8b4597/html5/thumbnails/23.jpg)
Speaking in Code
Gotcha’s: Read line by line
• This won’t work:
var cost = 24.99; var total = cost * taxRate; var taxRate = 1.089;
![Page 24: Week 5 java script functions](https://reader034.vdocument.in/reader034/viewer/2022051609/5478cda3b37959582b8b4597/html5/thumbnails/24.jpg)
Speaking in Code
Intro to Functions: Name
• No need to repeat same code
• Set of instructions
var drinking = function(age) {if (age >= 21) {
console.log(‘you can drink!’);}else {
console.log(‘better wait another year’);}
};
drinking(21);
![Page 25: Week 5 java script functions](https://reader034.vdocument.in/reader034/viewer/2022051609/5478cda3b37959582b8b4597/html5/thumbnails/25.jpg)
Speaking in Code
Intro to Functions: Syntax
• No need to repeat same code
• Set of instructions
var drinking = function(age) {if (age >= 21) {
console.log(‘you can drink!’);}else {
console.log(‘better wait another year’);}
};
drinking(21);
![Page 26: Week 5 java script functions](https://reader034.vdocument.in/reader034/viewer/2022051609/5478cda3b37959582b8b4597/html5/thumbnails/26.jpg)
Speaking in Code
Intro to Functions: Parameters
• No need to repeat same code
• Set of instructions
var drinking = function(age) {if (age >= 21) {
console.log(‘you can drink!’);}else {
console.log(‘better wait another year’);}
};
drinking(21);
![Page 27: Week 5 java script functions](https://reader034.vdocument.in/reader034/viewer/2022051609/5478cda3b37959582b8b4597/html5/thumbnails/27.jpg)
Speaking in Code
![Page 28: Week 5 java script functions](https://reader034.vdocument.in/reader034/viewer/2022051609/5478cda3b37959582b8b4597/html5/thumbnails/28.jpg)
Speaking in Code
Functions === Microwave Buttons?
• Each button has a purpose
![Page 29: Week 5 java script functions](https://reader034.vdocument.in/reader034/viewer/2022051609/5478cda3b37959582b8b4597/html5/thumbnails/29.jpg)
Speaking in Code
Functions === Microwave Buttons?
• Each button has a purpose
• Same as a functionvar minutes = 5var addTime = function(minutes, additionalMinutes) {
minutes = minutes + additionalMinutes;return minutes;
};
addTime(minutes, 10);>> 15
![Page 30: Week 5 java script functions](https://reader034.vdocument.in/reader034/viewer/2022051609/5478cda3b37959582b8b4597/html5/thumbnails/30.jpg)
Speaking in Code
Try it yourself
http://bit.ly/jsfunctions
http://jsbin.com
![Page 31: Week 5 java script functions](https://reader034.vdocument.in/reader034/viewer/2022051609/5478cda3b37959582b8b4597/html5/thumbnails/31.jpg)
Speaking in Code
Sync-Up!
• Using return
var minutes = 5var addTime= function(minutes, additionalMinutes) {
minutes = minutes + additionalMinutes;return minutes;
};
console.log(addTime(minutes, 10) + 2);>> 17
![Page 32: Week 5 java script functions](https://reader034.vdocument.in/reader034/viewer/2022051609/5478cda3b37959582b8b4597/html5/thumbnails/32.jpg)
Speaking in Code
Sync-Up!
• Using return
var minutes = 5var addTime= function(minutes, additionalMinutes) {
minutes = minutes + additionalMinutes;return minutes;
};
console.log(15 + 2);>> 17
![Page 33: Week 5 java script functions](https://reader034.vdocument.in/reader034/viewer/2022051609/5478cda3b37959582b8b4597/html5/thumbnails/33.jpg)
Speaking in Code
Sync-Up!
• Calling functions: Name
var drinking = function(age) {if (age >= 21) { console.log(‘you can drink!’);}else {console.log(‘better wait another year’);}
};drinking(21);drinking(18);drinking(25);