1 of 19

More Practice with JavaScript

CS 130: Conditionals, Lists, �Objects, Loops, & Event Handlers

1

2 of 19

Announcements

  • HW3 due Wednesday!
  • IMPORTANT: Project proposal meetings this week: sign up for a timeslot!
  • Tutorial 7 this week will help you get started on HW4!

2

3 of 19

Goals for Today

  • Review of Tutorial 6 (solutions posted on Canvas)
  • Do some of the exercises we didn’t get to during Lecture 12
    • Color mixer
    • Objects
    • List of objects
  • If time: work through HW3 together

​

3

4 of 19

Outline

  • Review of Tutorial 6
  • Exercises from Lecture 12
  • HW3

​

4

5 of 19

Takeaways from Tutorial 6

  • Sometimes (but not always), you want to generate parts of your HTML page using data.
    • This is often the case for “web apps” — where the content is driven by a database of content
    • However for portfolio sites, this is less common, because the content is usually fixed.
  • Big takeaway: if you want to create a web app that pulls from a database, it’s important to think about converting sections of your web pages to dynamic, data-driven templates
    • Also important to know how to attach event handlers to your templates so that you can interact with them!

5

6 of 19

Tutorial 6: Code Review

  • Use a loop to generate all of the cards
  • Embed some data in the card
  • Create the event listener / handler

6

7 of 19

Outline

  • Review of Tutorial 6
  • Exercises from Lecture 12
  • HW3

​

7

8 of 19

Exercises from Lecture 12

Let’s try doing the following exercises:

  • 01-color-mixer
  • 04-single-object
  • 05-list-of-objects

8

9 of 19

01-color-mixer > If / Else Statements

9

if (condition) {

statement 1;

statement 2;

} else {

statement 1;

statement 2;

}

CONDITION�Boolean expression that evaluates to True or False.

�If the condition evaluates to True, the first block executes.

�If the condition evaluates to False, the second block executes.

10 of 19

01-color-mixer > Logical Operators

10

Operator

Meaning

Explanation

&&

and

If both operands are true, then the “and expression” also evaluates to true. Otherwise, the “and expression” evaluates to false.

||

or

If either or both of the operands are true, then the “or expression” also evaluates to true. Otherwise, the “or expression” evaluates to false.

!

not

if the operand is false, then the “not” of the operand is true (and vice versa).

11 of 19

Exercises from Lecture 12

Let’s try doing the following exercises:

  • 01-color-mixer
  • 04-single-object
  • 05-list-of-objects

11

12 of 19

Objects: Representing Complex Entities

Some kinds of data (i.e. data about people, places, and belongings) are complex, and need more complex data structures to represent them in ways that a computer can understand and easily store an manipulate.

Often entities that are made up of sub-entities, which are related in some way. Examples:

  • Tweets, Facebook posts, etc.
  • Student data (like in Caesar)
  • IRS data
  • Human resources data

12

13 of 19

Example

const person = {

name: "Jane",

pic: "http://knight.gamebanana.com/img/ico/sprays/patrick_star_preview_2.png",

score: 300

};

​

13

14 of 19

Code Example: Object Demo

  • Download lecture files and open the 04-single-object folder in VS Code
  • Practice with dot notation

14

15 of 19

Exercises from Lecture 12

Let’s try doing the following exercises:

  • 01-color-mixer
  • 04-single-object
  • 05-list-of-objects

15

16 of 19

for...of loop versus forEach method

If you want to do something for each item of a list, you have many options. Here are 2 of them (they do the same thing):

const names = ['charlie', 'freddie', 'lucy'];

//option 1:

for (const name of names) {

console.log(name);

}

//option 2:

names.forEach(name => {

console.log(name, idx);

});

16

17 of 19

Before we do 05-list-of-objects...

const people = [

{ name: "Jane", pic: "http://knight.gamebanana.com/patrick.png", score: 300 },

{ name: "Brenda", pic: "https://3.bp.blogspot.com/spongeBob.png", score: 10} ,

{ name: "Wanda", pic: "https://3.bp.blogspot.com/spongeBob.png", score: 60 },

{ name: "Maria", pic: "http://knight.gamebanana.com/patrick.png", score: 80 },

{ name: "Jasper", pic: "https://3.bp.blogspot.com/spongeBob.png, score: 600 },

{ name: "Malik", pic: "http://knight.gamebanana.com/patrick.png", score: 40 }

];�

  • Write code that prints the name of the fourth player to the console.
  • Write code that draws the avatar of the third player to the screen (as an img tag).
  • Write code that adds the scores of the fifth and sixth player together.

​

17

18 of 19

Outline

  • Review of Tutorial 6
  • Exercises from Lecture 12
  • HW3

​

18

19 of 19

Let’s download and work through HW3 together

19