Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revision Previous revision
Next revision		 Previous revision
p5js-week-12 [2022/07/16 07:14] – renickp5js-week-12 [2023/06/29 23:02] (current) – reina.chen
Line 1: Line 1:
 ====== p5js week 12 ====== ====== p5js week 12 ======
  
-Last time, we looked at if-statements. Remember, here's the basic pattern for an if statement:+{{:unplugged-toaster.jpg?600|}} 
 + 
 +(photo from https://www.flickr.com/photos/healthserviceglasses/3256234213) 
 + 
 +Last time, we looked at <color black/pink>if-statements</color> and used them to check a toaster. Remember, here's the basic pattern for an if statement:
  
   if () {} else {}   if () {} else {}
  
-We also did this example about a toaster:+This is the example function we made about a toaster:
  
   toasterPluggedIn = false;   toasterPluggedIn = false;
Line 20: Line 24:
 ====== using else ====== ====== using else ======
  
-We use "else" to handle every case that isn't handled by our condition. Above, the condition is "toasterPluggedIn == true"; anything else gets caught by "else". +We use <color black/yellow>"else"</color> to handle every case that isn't handled by our condition. Above, the condition is "toasterPluggedIn == true"; anything else gets caught by "else". 
  
   toasterPluggedIn = "i forgot"    toasterPluggedIn = "i forgot" 
Line 27: Line 31:
 You can see that "else" catches this one, too. You can see that "else" catches this one, too.
  
-We could do that with toast, too:+{{:strawberry-jam.jpg?600|}} 
 + 
 +(photo from https://world.openfoodfacts.org/product/0688267061790/strawberry-jam-stop-shop) 
 + 
 +We could do that with toast, too. Below the function, there are three calls of the function. Each one prints a different string to the console based on the values of the three variables customerOrder1, customerOrder2, and customerOrder3.
      
   function toppingForToast (customerOrder) {   function toppingForToast (customerOrder) {
Line 34: Line 42:
       topping = "butter"       topping = "butter"
     }     }
-    else topping = customerOrder+    else {topping = customerOrder
     console.log ("This toast should have " + topping + " on it.")     console.log ("This toast should have " + topping + " on it.")
 +    }
     return topping     return topping
   }   }
Line 68: Line 77:
 ====== using else if ====== ====== using else if ======
  
-Sometimes we have more than one condition; in those cases, we can continue to use new "ifs" with "else if". Finally, we present "else" to catch anything that isn't covered by our "ifs".+Sometimes we have more than one condition; in those cases, we can continue to use new "ifs" with <color black/yellow>"else if"</color>. Finally, we present "else" to catch anything that isn't covered by our "ifs".
  
 We can modify our basic if-statement reference to include else if like this: We can modify our basic if-statement reference to include else if like this:
Line 78: Line 87:
 ===== the includes method ===== ===== the includes method =====
  
-To do that, let's learn a new JavaScript method called "includes". "includes" checks a string to see if part of it matches the argument. Use it like this:+To do that, let's learn a new JavaScript method called "includes". <color black/pink>"includes"</color> checks a string to see if part of it matches the argument. Use it like this:
  
   "some delicious toast for breakfast".includes("toast")   "some delicious toast for breakfast".includes("toast")
Line 91: Line 100:
 ===== toppingForToast with else if ===== ===== toppingForToast with else if =====
  
-Let's use "else if" to improve our toppingForToast function, too. We'll add butter to all customer orders unless the customer says "no butter".+{{:butter.jpg?600|}} 
 + 
 +(photo from https://www.healthline.com/nutrition/foods/butter) 
 + 
 +Let's use "else if" to improve our toppingForToast function, too. We'll automatically put butter on the toast, which means we'll add butter to all customer orders unless the customer says "no butter". Like before, if the customer doesn't specify anything, we'll still put butter on it.
      
   function toppingForToast (customerOrder) {   function toppingForToast (customerOrder) {
     let topping = customerOrder;     let topping = customerOrder;
-    if (topping.includes("no butter")) { +    if  (topping == undefined) { 
-      topping = customerOrder+      topping = "butter"
     }     }
     else if     else if
-    (customerOrder == undefined) { +    (topping.includes("no butter")) { 
-      topping = "butter"+      topping = customerOrder
     }     }
     else {topping = customerOrder + " and butter"}     else {topping = customerOrder + " and butter"}
Line 107: Line 120:
   }   }
      
-  let customerOrder1 = undefined; +  let customerOrder1 = "grape jelly no butter"; 
-  let customerOrder2 = "strawberry jam and butter";+  let customerOrder2 = "strawberry jam";
   let customerOrder3 = "cheese";   let customerOrder3 = "cheese";
-  toppingForToast (customerOrder1)  +  let customerOrder4 = undefined; 
-  toppingForToast (customerOrder2)  +   
-  toppingForToast (customerOrder3) +  toppingForToast (customerOrder4) 
  
 ===== drawing a heart ===== ===== drawing a heart =====
Line 144: Line 157:
  
 Be sure to post your drawing to your wiki page. Be sure to post your drawing to your wiki page.
 +
 +===== conclusion =====
 +
 +This is also the end of our course. I hope you've enjoyed thinking about toast, JavaScript, and p5js with us. Please keep drawing with code, and be sure to share your progress with us! 
 +
  
  • p5js-week-12.1657980895.txt.gz
  • Last modified: 3 years ago
  • by renick