HELLO

1) Please download Class 15 Starter Code

2) Move the following into class-work:

• click-count

• light-switch

3) Soloution to accordion and jquery-cityincluded

Class #15

11/05/2018

Conditional Statements

Announcements

• Final Projects:

⇒ Fourth deliverable due Wednesday, November 14th

⇒ JavaScript/Pseudocode

• No Class:

⇒ Monday, 11/12

⇒ Wednesday, 11/21

Agenda

• Conditional Statements

• Logical Operators

• Manipulating CSS Classes

Warmup

Conditional Statements

Conditional Statements

• Control Flow:

⇒ Order the CPU runs a program's statements

⇒ Decides which code is running at a given time

• So far, our code has flowed sequentially

• We can alter this flow using conditional logic

Conditional Statements

• Sequential Control Flow:

⇒ Programs execute line by line, from top to bottom

Conditional Statements

• Sequential Control Flow Example:


  function sayHello() {
    var name = $('input').val()
    var greeting = 'Hello, ' + name + '!'

    $('#output').text(greeting)
  }
Conditional Statements

• Programs can flow in other ways:

Conditional Statements

• Conditonal Flow:

⇒ AKA if/else statements

⇒ Alters flow when a decision must be made

⇒ Choice is based on variables in the program

Conditional Statements

• If/Else Flow:

Conditional Statements

• Sequential vs. Conditional Flows:

Conditional Statements

  var x = 10

  if (x > 5) {
    alert('x is larger than 5!')
  } else {
    alert('x is smaller than 5!')
  }

• Denoted by the if and else keywords

• Begins with a condition: (x > 5)

• If the condition is true, the statment(s) in the "if block" will run

• If the condition is false, the statment(s) in the "else block" will run

Logical Operators

Conditional Statements: Logical Operators

=== equal to

!== not equal to

> greater than

< less than

>= greater than or equal to

<= less than or equal to

Conditional Statements: Logical Operators

  var x = 10

  if (x === 10) {
    alert('bananas')
  } else {
    alert('apples')
  }



  var x = 'cat'

  if (x !== 5) {
    alert('tacos')
  } else {
    alert('salads')
  }
Conditional Statements: Logical Operators

  var x = 10

  if (x >= 10) {
    alert('oranges')
  } else {
    alert('strawberries')
  }



  var x = 10

  if (x <= 10) {
    alert('kiwis')
  } else {
    alert('olives')
  }

CodeAlong

Conditional Statements: Multiple Conditions

• Programs can evaluate more than one condition

• Use the else if operator to handle:


  var x = 10

  if (x !== 10) {
    alert('beer')
  } else if (x === 10) {
    alert('coffee')
  } else {
    alert('water')
  }
Exercise: Click Count

1. Open click-count in Sublime Text

2. Follow the instructions in js/app.js

3. Use if, else if, else structure

5 minute break

Manipulating CSS Classes

Manipulating CSS Classes

.addClass('class-name')

⇒ Adds classes to elements


  $('p').addClass('bold-text')

  // would yield: <p class="bold-text"></p>

.removeClass('class-name')

⇒ Removes classes from elements


  $('p').removeClass('bold-text')
Manipulatin CSS Classes

.toggleClass('class-name')

⇒ Adds class to elements if it does not exist; otherwise removes

• Assuming the following HTML:


  <p>Some Paragraph</p>



  $('p').toggleClass('bold-text')

  // would yield: <p class="bold-text"></p>
Exercise: Light Switch

1. Open light-switch in Sublime Text

2. Follow the instructions in js/app.js

On Deck: #16 - Function Arguments

• Function Arguments

• HTML Insertion/Removal

Exit Tickets!