Conditional Statements. Quiz Hand in your jQuery exercises from last lecture They don't have to...
-
Upload
laurence-wilcox -
Category
Documents
-
view
215 -
download
0
Transcript of Conditional Statements. Quiz Hand in your jQuery exercises from last lecture They don't have to...
![Page 1: Conditional Statements. Quiz Hand in your jQuery exercises from last lecture They don't have to be 100% perfect to get full credit They do have.](https://reader035.fdocuments.in/reader035/viewer/2022081603/5697bfac1a28abf838c9ba03/html5/thumbnails/1.jpg)
BIT116: ScriptingLecture 05
Conditional Statements
![Page 2: Conditional Statements. Quiz Hand in your jQuery exercises from last lecture They don't have to be 100% perfect to get full credit They do have.](https://reader035.fdocuments.in/reader035/viewer/2022081603/5697bfac1a28abf838c9ba03/html5/thumbnails/2.jpg)
2
Today Quiz
Hand in your jQuery exercises from last lecture They don't have to be 100% perfect to get full credit They do have to be "done except for maybe some small-ish errors"
JavaScript: Conditional Statements
![Page 3: Conditional Statements. Quiz Hand in your jQuery exercises from last lecture They don't have to be 100% perfect to get full credit They do have.](https://reader035.fdocuments.in/reader035/viewer/2022081603/5697bfac1a28abf838c9ba03/html5/thumbnails/3.jpg)
3
Conditional Statements – Basic Syntax
![Page 4: Conditional Statements. Quiz Hand in your jQuery exercises from last lecture They don't have to be 100% perfect to get full credit They do have.](https://reader035.fdocuments.in/reader035/viewer/2022081603/5697bfac1a28abf838c9ba03/html5/thumbnails/4.jpg)
4
What is a Conditional Statement?
A conditional statement is a statement that you can use to execute a bit of code based on a condition or to do something else if that condition is not met. You can think of a conditional statement as being a little like cause and effect.
Here's an example:
"If a variable named myMoney is greater than 1000, send an alert that says my finances are OK. Otherwise, send an alert saying I need more money!"
![Page 5: Conditional Statements. Quiz Hand in your jQuery exercises from last lecture They don't have to be 100% perfect to get full credit They do have.](https://reader035.fdocuments.in/reader035/viewer/2022081603/5697bfac1a28abf838c9ba03/html5/thumbnails/5.jpg)
5
The if , if/else , if/else if/else Statements
if statement: use this statement to execute some code once only if a specified condition is true
if...else statement: use this statement to execute some code if the condition is true and another code if the condition is false
if...else if....else statement: use this statement to select one of many blocks of code to be executed
![Page 6: Conditional Statements. Quiz Hand in your jQuery exercises from last lecture They don't have to be 100% perfect to get full credit They do have.](https://reader035.fdocuments.in/reader035/viewer/2022081603/5697bfac1a28abf838c9ba03/html5/thumbnails/6.jpg)
6
The if Statement (Example)
if (hour < 18){ show = "Good day";}
FILE: Conditional_Demonstration_1.html
![Page 7: Conditional Statements. Quiz Hand in your jQuery exercises from last lecture They don't have to be 100% perfect to get full credit They do have.](https://reader035.fdocuments.in/reader035/viewer/2022081603/5697bfac1a28abf838c9ba03/html5/thumbnails/7.jpg)
7
The if…else Statement (Example)
if (hour < 18){ show = "Good day";}else{ show = "Good evening";}
FILE: Conditional_Demonstration_1.html
![Page 8: Conditional Statements. Quiz Hand in your jQuery exercises from last lecture They don't have to be 100% perfect to get full credit They do have.](https://reader035.fdocuments.in/reader035/viewer/2022081603/5697bfac1a28abf838c9ba03/html5/thumbnails/8.jpg)
8
The if…else if…else Statement (Example)
if (hour < 12){
show = "Good morning";}else if ( hour < 18 ){
show = "Good afternoon";}else if ( hour < 22 ){ show = "Good evening";} else{
show = "Goodnight!";}
FILE: Conditional_Demonstration_1.html
if (hour < 12){
show = "Good morning";}else
if ( hour < 18 ){
show = "Good afternoon";
}else
if ( hour < 22 ){ show = "Good evening";} else{
show = "Goodnight!";}
![Page 9: Conditional Statements. Quiz Hand in your jQuery exercises from last lecture They don't have to be 100% perfect to get full credit They do have.](https://reader035.fdocuments.in/reader035/viewer/2022081603/5697bfac1a28abf838c9ba03/html5/thumbnails/9.jpg)
9 Do Exercise#1
The objective is to remind yourself what to type in order to get an if, if/else, or multiway if…else to work
![Page 10: Conditional Statements. Quiz Hand in your jQuery exercises from last lecture They don't have to be 100% perfect to get full credit They do have.](https://reader035.fdocuments.in/reader035/viewer/2022081603/5697bfac1a28abf838c9ba03/html5/thumbnails/10.jpg)
10
Conditional Statements – Effective Usage
![Page 11: Conditional Statements. Quiz Hand in your jQuery exercises from last lecture They don't have to be 100% perfect to get full credit They do have.](https://reader035.fdocuments.in/reader035/viewer/2022081603/5697bfac1a28abf838c9ba03/html5/thumbnails/11.jpg)
11
If:Optional Extra Think of an if as a way of asking if the program shouldoptionally do something extra, then resume the program
var hour = $("#time");
if (hour < 18){ $("#optionalOutput").html( "Good day!");}
$("#requiredOutput").html("Your time is " + hour);
// Store time into variablevar hour = $("#time");
// ALWAYS tell the user what their choice is:$("#requiredOutput").html("Your time is " + hour);
// OPTIONALLY tell them 'good day'$("#optionalOutput").html("Good day!");
// Is it before 6pm?if (hour < 18)
YES
NO
![Page 12: Conditional Statements. Quiz Hand in your jQuery exercises from last lecture They don't have to be 100% perfect to get full credit They do have.](https://reader035.fdocuments.in/reader035/viewer/2022081603/5697bfac1a28abf838c9ba03/html5/thumbnails/12.jpg)
12
If/Else: Either do A or else do B
One and only one will happen!
var hour = $("#time");
if (hour < 18){ $("#additionalOutput").html("Good day!");}
else{
$("#additionalOutput").html("Good evening!");}
$("#requiredOutput"). html("Your time is " + hour);
IfElse:Either/Or
// Store time into variablevar hour = $("#time");
// ALWAYS tell the user what their choice is:$("#requiredOutput").html("Your time is " + hour);
// THEN tell them 'good day'$("#additionalOutput").html("Good day!");
// Is it before 6pm?if (hour < 18)
YESNO
// OTHERWISE Tell them 'good evening'$("#additionalOutput").html("Good evening!");
![Page 13: Conditional Statements. Quiz Hand in your jQuery exercises from last lecture They don't have to be 100% perfect to get full credit They do have.](https://reader035.fdocuments.in/reader035/viewer/2022081603/5697bfac1a28abf838c9ba03/html5/thumbnails/13.jpg)
13
Think of an if as a way of asking if the program should exactly one of a several possible choices
if (hour < 12) {show = "Good morning";
} else if ( hour < 18 ) {show = "Good afternoon";
} else if ( hour < 22 ) { show = "Good evening";} else {
show = "Goodnight!";}
$("#requiredOutput").html("Your time is " + hour);
Multiway If..Else:Choose One
// ALWAYS tell the user what their choice is:$("#requiredOutput").html("Your time is " + hour);
// Tell them 'good morning'Show = "Good morning";
// What is the hour?
hour< 12
// Tell them 'good day'show = "Good day!";
12 ≤ h< 18
// Tell them 'good evening'show = "Good evening!";
18 ≤ h< 22
// Tell them 'goodnight'show = "Good night!";
hour≥ 22
![Page 14: Conditional Statements. Quiz Hand in your jQuery exercises from last lecture They don't have to be 100% perfect to get full credit They do have.](https://reader035.fdocuments.in/reader035/viewer/2022081603/5697bfac1a28abf838c9ba03/html5/thumbnails/14.jpg)
14
How To Solve Coding Problems1. List the steps that must be done in order to solve the problem
2. Identify those steps that are OPTIONAL, EITHER-OR, or CHOOSE ONE (FROM MANY)
These will be your if, if…else, and multiway if…else's
3. Sketch out you’re your solution You can use flowcharts, like we did on the prior slides You can use pseudocode, which is easier to write into comments in your source code
file
4. Proofread your solution!!!
5. Code it up
6. Test it out1. Figure out the answer yourself, by hand, then compare to the program
![Page 15: Conditional Statements. Quiz Hand in your jQuery exercises from last lecture They don't have to be 100% perfect to get full credit They do have.](https://reader035.fdocuments.in/reader035/viewer/2022081603/5697bfac1a28abf838c9ba03/html5/thumbnails/15.jpg)
15
Example: Fahrenheit Celsius, with bonus commentary!Problem specification:Create a page that will convert from Fahrenheit to Celsius. In addition, if the temperature is below freezing you should display a message formatted to look 'chilly'. Similarly, display a 'toasty' looking message if the temperature is above boiling.
![Page 16: Conditional Statements. Quiz Hand in your jQuery exercises from last lecture They don't have to be 100% perfect to get full credit They do have.](https://reader035.fdocuments.in/reader035/viewer/2022081603/5697bfac1a28abf838c9ba03/html5/thumbnails/16.jpg)
16
Example: Fahrenheit Celsius, with bonus commentary! I'll assume that you can set up the HTML and basic jQuery stuff on your own. We're just
focus on the problem-specific stuff
List steps:1. First, get input
2. Next, run through formula NOTE: You will probably need to look this up. Looking it up is something you need to do,
not something that the program does.
3. Display results on page
4. Tell'em if it's freezing
5. Tell'em if it's boiling
Try writing this in a flowchart format
Try writing this in pseudocode format (I'll do this in OneNote, so check the after-class videos to see these demonstrated
![Page 17: Conditional Statements. Quiz Hand in your jQuery exercises from last lecture They don't have to be 100% perfect to get full credit They do have.](https://reader035.fdocuments.in/reader035/viewer/2022081603/5697bfac1a28abf838c9ba03/html5/thumbnails/17.jpg)
17
Example: Fahrenheit Celsius, with bonus commentary! Once you've thought the problem through (listing, flowchart/pseudocode), then code it
up!
Test Remember: Calculate the answer yourself, then compare it to your program Try several temperatures between freezing & boiling
If you don't remember it off-hand then look up for yourself what these are in Fahrenheit Try freezing exactly, then one degree above and one degree below
Does the 'chilly' message show up correctly? Try boiling exactly, then one degree above and one degree below
Does the 'toasty' message show up correctly? Are there any other problems with this?
FILE: F2C.html
![Page 18: Conditional Statements. Quiz Hand in your jQuery exercises from last lecture They don't have to be 100% perfect to get full credit They do have.](https://reader035.fdocuments.in/reader035/viewer/2022081603/5697bfac1a28abf838c9ba03/html5/thumbnails/18.jpg)
18
Close, but not quite If we put in 300 & click we get the 'hot' message.
If we then change it to 3 & click we see BOTH messages
We'll fix this with an if…else
FILE: F2C_IfElse.html
![Page 19: Conditional Statements. Quiz Hand in your jQuery exercises from last lecture They don't have to be 100% perfect to get full credit They do have.](https://reader035.fdocuments.in/reader035/viewer/2022081603/5697bfac1a28abf838c9ba03/html5/thumbnails/19.jpg)
19 Do Exercise#2
![Page 20: Conditional Statements. Quiz Hand in your jQuery exercises from last lecture They don't have to be 100% perfect to get full credit They do have.](https://reader035.fdocuments.in/reader035/viewer/2022081603/5697bfac1a28abf838c9ba03/html5/thumbnails/20.jpg)
20
Example: Grade FeedbackProblem specification:
Create a page that convert a 0-100 numeric grade into an 'A', 'B', 'C', 'D', or 'F' grade, based on the table to the right.If a number greater than 100 or less than zero is used then display an error message on the page.
Numeric Grade Letter Grade
>100 Error!
90 – 100 A
80 – 90 B
70 – 80 C
60 – 70 D
0 – 60 F
< 0 Error!
![Page 21: Conditional Statements. Quiz Hand in your jQuery exercises from last lecture They don't have to be 100% perfect to get full credit They do have.](https://reader035.fdocuments.in/reader035/viewer/2022081603/5697bfac1a28abf838c9ba03/html5/thumbnails/21.jpg)
21
Example: Grade feedback List steps:
1. First, get input
2. If the grade is negative, display an error and immediately exit/stop/halt/etc.
3. If the grade is >100, display an error and immediately stop.(If we make it past this step then the input must be ok)(mostly – we're assuming that it's a number )
4. Use a multiway if/else to figure out which letter grade they're getting
Let's try writing this in a flowchart format
Let's try writing this in pseudocode format (I'll do this in OneNote, so check the after-class videos to see these demonstrated)
Useful idea:'Peeling off' errors'Peeling away' cases
![Page 22: Conditional Statements. Quiz Hand in your jQuery exercises from last lecture They don't have to be 100% perfect to get full credit They do have.](https://reader035.fdocuments.in/reader035/viewer/2022081603/5697bfac1a28abf838c9ba03/html5/thumbnails/22.jpg)
22
Example: Grade feedback Once you've thought the problem through (listing, flowchart/pseudocode), then code it
up!
Test Remember: Calculate the answer yourself, then compare it to your program
Try it with 95, 90, 100 Try it with 85, 80, 90 Etc, etc Try it with 101, 110, 200 Try it with 0, -1, -10
Are there any other problems with this?
FILE: GradeFeedback.html
![Page 23: Conditional Statements. Quiz Hand in your jQuery exercises from last lecture They don't have to be 100% perfect to get full credit They do have.](https://reader035.fdocuments.in/reader035/viewer/2022081603/5697bfac1a28abf838c9ba03/html5/thumbnails/23.jpg)
23
Ideas / Interests for in-class exercises?
A research paper that I read said that it's good to give new programmers a wider choice of exercises So instead of "do #1, then #2, then #3"… Instead tell people "Here's 6, pick 3"
This isn't always appropriate… "Let's make sure you can type in the syntax" Mechanical things like "ID different regions as CSS/JS"
… and I'm not 100% confident I can brainstorm a zillion exercises for each class, but I'm gonna try it
What ideas/interests do you have that might make for interesting problems involving if or if/else statements? I don't guarantee I'll use them, but it'll help Think about this during class, and we'll brainstorm a list towards the end
(or else at the start of next class)
![Page 24: Conditional Statements. Quiz Hand in your jQuery exercises from last lecture They don't have to be 100% perfect to get full credit They do have.](https://reader035.fdocuments.in/reader035/viewer/2022081603/5697bfac1a28abf838c9ba03/html5/thumbnails/24.jpg)
24 Do Exercise#3