DATE CHANGES OUTSIDE FORMS CONDITIONALS IF THEN ELSE if (MUST - - PowerPoint PPT Presentation

▶
date
SMART_READER_LITE
LIVE PREVIEW

DATE CHANGES OUTSIDE FORMS CONDITIONALS IF THEN ELSE if (MUST - - PowerPoint PPT Presentation

Dec 06, 2023 275 likes •442 views

CONDITIONALS DATE CHANGES OUTSIDE FORMS CONDITIONALS IF THEN ELSE if (MUST BE LOWERCASE) No else: do nothing if not true else: one or the other else if: nested function OPERATORS Conditional Operator Meaning

slide-1
SLIDE 1

CONDITIONALS DATE CHANGES OUTSIDE FORMS

slide-2
SLIDE 2

CONDITIONALS

slide-3
SLIDE 3

IF … THEN … ELSE

  • if (MUST BE LOWERCASE)
  • No else: do nothing if not true
  • else: one or the other
  • else if: nested function
slide-4
SLIDE 4

OPERATORS

Operator Meaning == Is equal to != Is not equal > Is greater than < Is less than >= Is greater than or equal to <= Is less than or equal to Operator Meaning && and ||

  • r

! not

Logical Conditional

slide-5
SLIDE 5

CONDITIONAL EXAMPLE

Random message using if Simple if…then…else Condition is random function

slide-6
SLIDE 6

N-WAY DECISIONS

  • More than 2 alternates?
  • Nested else statements (else if)
  • switch – case (Excel CHOOSE)
  • Example:

Random message using switch

slide-7
SLIDE 7

BUT IF IT’S ONLY THE DATA…

  • Arrays
  • Collection of items referenced with index
  • Just keep adding items!
  • Start with 0
  • Example: Select an element from an array
slide-8
SLIDE 8

DATE

slide-9
SLIDE 9

DATE AND TIME

Full date is unfriendly format

  • To get today’s date:

var d = new Date();

  • To get the time:

var time = d.getHours();

  • To get the day:

var theDay=d.getDay(); w3schools http://www.w3schools.com/js/js_date_methods.asp

slide-10
SLIDE 10

WHAT DOES IT MEAN?

  • Objects have attributes
  • Chair: color, size, legs, wheels, …
  • Date: year, month, day, day of week, hour, …
  • Object.retrieve-attribute
  • Assign the date with built in function Date()
  • Extract the piece using getHours, getDays, …
slide-11
SLIDE 11

DATE AND TIME EXAMPLES

3 messages based on Hour Prints an appropriate message based

  • n time of day (3 choices)

2 messages based on Day Prints an appropriate message based on day of week (2 choices)

slide-12
SLIDE 12

CHANGES OUTSIDE FORMS

slide-13
SLIDE 13

RETRIEVING THE VALUE

  • In JavaScript

document.getElementById("name").value

  • What does that mean?
  • document: the web page
  • getElementById: find this id on the page
  • Returns an object
  • Value: get the value of the object
slide-14
SLIDE 14

WRITING TO THE PAGE

  • Use an id on any element
  • Replace the element using innerHTML
  • Allows us to keep the correct semantics in

HTML Using innerHTML

slide-15
SLIDE 15

CHANGING HTML

General structure: context.element.attribute Within form: formname.element.attribute form-name.input-id.value form-name.img-id.src Outside form: document.getElementById(“id-name”).attribute document.getElementById(“id”).innerHTML document.getElementById(“id”).className document.getElementById(“id”).src