CONDITIONALS DATE CHANGES OUTSIDE FORMS. CONDITION ALS.
-
Upload
nancy-carter -
Category
Documents
-
view
218 -
download
3
Transcript of CONDITIONALS DATE CHANGES OUTSIDE FORMS. CONDITION ALS.
![Page 1: CONDITIONALS DATE CHANGES OUTSIDE FORMS. CONDITION ALS.](https://reader030.fdocuments.us/reader030/viewer/2022032703/56649f4d5503460f94c6e8f3/html5/thumbnails/1.jpg)
CONDITIONALS DATE
CHANGES OUTSIDE FORMS
![Page 2: CONDITIONALS DATE CHANGES OUTSIDE FORMS. CONDITION ALS.](https://reader030.fdocuments.us/reader030/viewer/2022032703/56649f4d5503460f94c6e8f3/html5/thumbnails/2.jpg)
CONDITIONALS
![Page 3: CONDITIONALS DATE CHANGES OUTSIDE FORMS. CONDITION ALS.](https://reader030.fdocuments.us/reader030/viewer/2022032703/56649f4d5503460f94c6e8f3/html5/thumbnails/3.jpg)
IF … THEN … ELSE
• if (MUST BE LOWERCASE)• No else: do nothing if not true• else: one or the other• else if: nested function
![Page 4: CONDITIONALS DATE CHANGES OUTSIDE FORMS. CONDITION ALS.](https://reader030.fdocuments.us/reader030/viewer/2022032703/56649f4d5503460f94c6e8f3/html5/thumbnails/4.jpg)
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
|| or
! not
Logical
Conditional
![Page 5: CONDITIONALS DATE CHANGES OUTSIDE FORMS. CONDITION ALS.](https://reader030.fdocuments.us/reader030/viewer/2022032703/56649f4d5503460f94c6e8f3/html5/thumbnails/5.jpg)
CONDITIONAL EXAMPLE
Random message using ifSimple if…then…else
Condition is random function
![Page 6: CONDITIONALS DATE CHANGES OUTSIDE FORMS. CONDITION ALS.](https://reader030.fdocuments.us/reader030/viewer/2022032703/56649f4d5503460f94c6e8f3/html5/thumbnails/6.jpg)
N-WAY DECISIONS•More than 2 alternates?• Nested else statements (else if)• switch – case (Excel CHOOSE)• Example:
Random message using switch
![Page 7: CONDITIONALS DATE CHANGES OUTSIDE FORMS. CONDITION ALS.](https://reader030.fdocuments.us/reader030/viewer/2022032703/56649f4d5503460f94c6e8f3/html5/thumbnails/7.jpg)
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
![Page 8: CONDITIONALS DATE CHANGES OUTSIDE FORMS. CONDITION ALS.](https://reader030.fdocuments.us/reader030/viewer/2022032703/56649f4d5503460f94c6e8f3/html5/thumbnails/8.jpg)
DATE
![Page 9: CONDITIONALS DATE CHANGES OUTSIDE FORMS. CONDITION ALS.](https://reader030.fdocuments.us/reader030/viewer/2022032703/56649f4d5503460f94c6e8f3/html5/thumbnails/9.jpg)
DATE AND TIMEFull 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();
w3schoolshttp://www.w3schools.com/js/js_date_methods.asp
![Page 10: CONDITIONALS DATE CHANGES OUTSIDE FORMS. CONDITION ALS.](https://reader030.fdocuments.us/reader030/viewer/2022032703/56649f4d5503460f94c6e8f3/html5/thumbnails/10.jpg)
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, …
![Page 11: CONDITIONALS DATE CHANGES OUTSIDE FORMS. CONDITION ALS.](https://reader030.fdocuments.us/reader030/viewer/2022032703/56649f4d5503460f94c6e8f3/html5/thumbnails/11.jpg)
DATE AND TIME EXAMPLES
3 messages based on HourPrints an appropriate message based on time of day (3 choices)
2 messages based on Day Prints an appropriate message based on day of week (2 choices)
![Page 12: CONDITIONALS DATE CHANGES OUTSIDE FORMS. CONDITION ALS.](https://reader030.fdocuments.us/reader030/viewer/2022032703/56649f4d5503460f94c6e8f3/html5/thumbnails/12.jpg)
CHANGES OUTSIDE FORMS
![Page 13: CONDITIONALS DATE CHANGES OUTSIDE FORMS. CONDITION ALS.](https://reader030.fdocuments.us/reader030/viewer/2022032703/56649f4d5503460f94c6e8f3/html5/thumbnails/13.jpg)
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
![Page 14: CONDITIONALS DATE CHANGES OUTSIDE FORMS. CONDITION ALS.](https://reader030.fdocuments.us/reader030/viewer/2022032703/56649f4d5503460f94c6e8f3/html5/thumbnails/14.jpg)
WRITING TO THE PAGE
• Use an id on any element• Replace the element using innerHTML• Allows us to keep the correct semantics in
HTMLUsing innerHTML
![Page 15: CONDITIONALS DATE CHANGES OUTSIDE FORMS. CONDITION ALS.](https://reader030.fdocuments.us/reader030/viewer/2022032703/56649f4d5503460f94c6e8f3/html5/thumbnails/15.jpg)
CHANGING HTMLGeneral 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