Announcements This week No quiz No lecture or labs on Wednesday No school on Thursday or Friday No...
-
Upload
archibald-warner -
Category
Documents
-
view
220 -
download
0
Transcript of Announcements This week No quiz No lecture or labs on Wednesday No school on Thursday or Friday No...
![Page 1: Announcements This week No quiz No lecture or labs on Wednesday No school on Thursday or Friday No CLUE Tutoring 10/9/2015D.A. Clements, UW Information.](https://reader035.fdocuments.in/reader035/viewer/2022062314/56649ea05503460f94ba271b/html5/thumbnails/1.jpg)
Announcements
This weekNo quizNo lecture or labs on WednesdayNo school on Thursday or FridayNo CLUE Tutoring
04/21/23 D.A. Clements, UW Information School 1
![Page 2: Announcements This week No quiz No lecture or labs on Wednesday No school on Thursday or Friday No CLUE Tutoring 10/9/2015D.A. Clements, UW Information.](https://reader035.fdocuments.in/reader035/viewer/2022062314/56649ea05503460f94ba271b/html5/thumbnails/2.jpg)
Announcements
Drop-In labs this weekTuesday only8:30-9:20am and 5:00-5:50pm MGH 430
04/21/23 D.A. Clements, UW Information School 2
![Page 3: Announcements This week No quiz No lecture or labs on Wednesday No school on Thursday or Friday No CLUE Tutoring 10/9/2015D.A. Clements, UW Information.](https://reader035.fdocuments.in/reader035/viewer/2022062314/56649ea05503460f94ba271b/html5/thumbnails/3.jpg)
Announcements
Project 2B due on Wed., December 2
04/21/23 D.A. Clements, UW Information School 3
![Page 4: Announcements This week No quiz No lecture or labs on Wednesday No school on Thursday or Friday No CLUE Tutoring 10/9/2015D.A. Clements, UW Information.](https://reader035.fdocuments.in/reader035/viewer/2022062314/56649ea05503460f94ba271b/html5/thumbnails/4.jpg)
General comments
The programmer's habits of mindRead instructionsWork slowly and carefullyPay attention to details
04/21/23 D.A. Clements, UW Information School 4
![Page 5: Announcements This week No quiz No lecture or labs on Wednesday No school on Thursday or Friday No CLUE Tutoring 10/9/2015D.A. Clements, UW Information.](https://reader035.fdocuments.in/reader035/viewer/2022062314/56649ea05503460f94ba271b/html5/thumbnails/5.jpg)
PROJECT 2B
Arrays and conditionals—Setting gender pronouns based on user input…
04/21/23 D.A. Clements, UW Information School 5
![Page 6: Announcements This week No quiz No lecture or labs on Wednesday No school on Thursday or Friday No CLUE Tutoring 10/9/2015D.A. Clements, UW Information.](https://reader035.fdocuments.in/reader035/viewer/2022062314/56649ea05503460f94ba271b/html5/thumbnails/6.jpg)
Overview
Gender changes based on what the user chose in the dropdown menu
Arrays set up the series of pronouns for each gender
Use conditionals to choose which array to use
04/21/23 D.A. Clements, UW Information School 6
![Page 7: Announcements This week No quiz No lecture or labs on Wednesday No school on Thursday or Friday No CLUE Tutoring 10/9/2015D.A. Clements, UW Information.](https://reader035.fdocuments.in/reader035/viewer/2022062314/56649ea05503460f94ba271b/html5/thumbnails/7.jpg)
The gender arrays
var MalePronouns = new Array ("he","his","him","man","men");
var FemalePronouns = new Array ("she","her","her","woman","women");
var PersonPronouns = new Array ("one","one's","one","person","persons");
var PeoplePronouns = new Array ("they","their","them","people","people");
var gender;
04/21/23 D.A. Clements, UW Information School 7
![Page 8: Announcements This week No quiz No lecture or labs on Wednesday No school on Thursday or Friday No CLUE Tutoring 10/9/2015D.A. Clements, UW Information.](https://reader035.fdocuments.in/reader035/viewer/2022062314/56649ea05503460f94ba271b/html5/thumbnails/8.jpg)
Gender in your story
Each gender has its own pronoun arrayEdit the array to include the words needed
by your storyReplace Man with King, Prince, Boy, or UncleReplace Woman with Queen, Princess, Girl, or
Aunt, etc.
04/21/23 D.A. Clements, UW Information School 8
![Page 9: Announcements This week No quiz No lecture or labs on Wednesday No school on Thursday or Friday No CLUE Tutoring 10/9/2015D.A. Clements, UW Information.](https://reader035.fdocuments.in/reader035/viewer/2022062314/56649ea05503460f94ba271b/html5/thumbnails/9.jpg)
Gender pronoun arrays
Include only as many pronoun arrays as you have choices in your dropdown menu:var MalePronouns = new Array ("King","he","his");var FemalePronouns = new Array ("Queen","she","her");
04/21/23 D.A. Clements, UW Information School 9
![Page 10: Announcements This week No quiz No lecture or labs on Wednesday No school on Thursday or Friday No CLUE Tutoring 10/9/2015D.A. Clements, UW Information.](https://reader035.fdocuments.in/reader035/viewer/2022062314/56649ea05503460f94ba271b/html5/thumbnails/10.jpg)
Gender dropdown menu
The user chooses the gender of a main character in the story from the dropdown menu
<label for="genderlist">Choose gender:</label>
<select name="genderlist" size="1" id="genderlist"> <option value="Male">man</option>
<option value="Female">woman</option>
<option value="Person">person</option>
<option value="People">some people</option>
</select>
04/21/23 D.A. Clements, UW Information School 10
![Page 11: Announcements This week No quiz No lecture or labs on Wednesday No school on Thursday or Friday No CLUE Tutoring 10/9/2015D.A. Clements, UW Information.](https://reader035.fdocuments.in/reader035/viewer/2022062314/56649ea05503460f94ba271b/html5/thumbnails/11.jpg)
Grab the user's gender choice
Before you can do anything, you have to grab the user's choice from the genderlist dropdown menu:var genderlist = document.getElementById("genderlist").value;
04/21/23 D.A. Clements, UW Information School 11
![Page 12: Announcements This week No quiz No lecture or labs on Wednesday No school on Thursday or Friday No CLUE Tutoring 10/9/2015D.A. Clements, UW Information.](https://reader035.fdocuments.in/reader035/viewer/2022062314/56649ea05503460f94ba271b/html5/thumbnails/12.jpg)
Grab the user's gender choice
Before you can do anything, you have to grab the user's choice from the genderlist dropdown menu:var genderlist = document.getElementById("genderlist").value;
04/21/23 D.A. Clements, UW Information School 12
![Page 13: Announcements This week No quiz No lecture or labs on Wednesday No school on Thursday or Friday No CLUE Tutoring 10/9/2015D.A. Clements, UW Information.](https://reader035.fdocuments.in/reader035/viewer/2022062314/56649ea05503460f94ba271b/html5/thumbnails/13.jpg)
Grab the user's gender choice
Before you can do anything, you have to grab the user's choice from the genderlist dropdown menu:var genderlist = document.getElementById("genderlist").value;
04/21/23 D.A. Clements, UW Information School 13
![Page 14: Announcements This week No quiz No lecture or labs on Wednesday No school on Thursday or Friday No CLUE Tutoring 10/9/2015D.A. Clements, UW Information.](https://reader035.fdocuments.in/reader035/viewer/2022062314/56649ea05503460f94ba271b/html5/thumbnails/14.jpg)
Grab the user's gender choice
Before you can do anything, you have to grab the user's choice from the genderlist dropdown menu:var genderlist = document.getElementById("genderlist").value;
04/21/23 D.A. Clements, UW Information School 14
![Page 15: Announcements This week No quiz No lecture or labs on Wednesday No school on Thursday or Friday No CLUE Tutoring 10/9/2015D.A. Clements, UW Information.](https://reader035.fdocuments.in/reader035/viewer/2022062314/56649ea05503460f94ba271b/html5/thumbnails/15.jpg)
Conditionals
Conditionals select the pronoun array that matches the gender selected:
if (genderlist == "Male")
{
gender = MalePronouns;
}
else
{
gender = FemalePronouns;
}
04/21/23 D.A. Clements, UW Information School 15
<select name="genderlist" id="gende <option value="Male">man</option
<option value="Female">woman</ <option value="Person">person</o <option value="People">some peo
</select>
![Page 16: Announcements This week No quiz No lecture or labs on Wednesday No school on Thursday or Friday No CLUE Tutoring 10/9/2015D.A. Clements, UW Information.](https://reader035.fdocuments.in/reader035/viewer/2022062314/56649ea05503460f94ba271b/html5/thumbnails/16.jpg)
Conditionals
Conditionals select the pronoun array that matches the gender selected:
if (genderlist == "Male")
{
gender = MalePronouns;
}
else
{
gender = FemalePronouns;
}
04/21/23 D.A. Clements, UW Information School 16
![Page 17: Announcements This week No quiz No lecture or labs on Wednesday No school on Thursday or Friday No CLUE Tutoring 10/9/2015D.A. Clements, UW Information.](https://reader035.fdocuments.in/reader035/viewer/2022062314/56649ea05503460f94ba271b/html5/thumbnails/17.jpg)
Assigning the array to a variable
If you assign an array to a variable, The variable becomes an array Each element is accessible by array methods
gender[0] or gender[2]
04/21/23 D.A. Clements, UW Information School 17
![Page 18: Announcements This week No quiz No lecture or labs on Wednesday No school on Thursday or Friday No CLUE Tutoring 10/9/2015D.A. Clements, UW Information.](https://reader035.fdocuments.in/reader035/viewer/2022062314/56649ea05503460f94ba271b/html5/thumbnails/18.jpg)
DOCUMENT OBJECT MODEL (DOM)
Understanding the document tree, revisited
![Page 19: Announcements This week No quiz No lecture or labs on Wednesday No school on Thursday or Friday No CLUE Tutoring 10/9/2015D.A. Clements, UW Information.](https://reader035.fdocuments.in/reader035/viewer/2022062314/56649ea05503460f94ba271b/html5/thumbnails/19.jpg)
![Page 20: Announcements This week No quiz No lecture or labs on Wednesday No school on Thursday or Friday No CLUE Tutoring 10/9/2015D.A. Clements, UW Information.](https://reader035.fdocuments.in/reader035/viewer/2022062314/56649ea05503460f94ba271b/html5/thumbnails/20.jpg)
DOM
The Document object gives you access to the browser's DOM tree
You've used it for several labs now:document.getElementById("zone1").value
![Page 21: Announcements This week No quiz No lecture or labs on Wednesday No school on Thursday or Friday No CLUE Tutoring 10/9/2015D.A. Clements, UW Information.](https://reader035.fdocuments.in/reader035/viewer/2022062314/56649ea05503460f94ba271b/html5/thumbnails/21.jpg)
DOM
Here's the HTML
![Page 22: Announcements This week No quiz No lecture or labs on Wednesday No school on Thursday or Friday No CLUE Tutoring 10/9/2015D.A. Clements, UW Information.](https://reader035.fdocuments.in/reader035/viewer/2022062314/56649ea05503460f94ba271b/html5/thumbnails/22.jpg)
As the browser sees it!
![Page 23: Announcements This week No quiz No lecture or labs on Wednesday No school on Thursday or Friday No CLUE Tutoring 10/9/2015D.A. Clements, UW Information.](https://reader035.fdocuments.in/reader035/viewer/2022062314/56649ea05503460f94ba271b/html5/thumbnails/23.jpg)
DOM
getElementByID(“id”)attach ID-attributes to HTML tags and
access page elements by this notation, instead of having to wade through the hierarchy.
appendChild()Use appendChild() and .text or .innerHTML
instead of += concatenation
11-27-2007 D.A. Clements, Instructor
![Page 24: Announcements This week No quiz No lecture or labs on Wednesday No school on Thursday or Friday No CLUE Tutoring 10/9/2015D.A. Clements, UW Information.](https://reader035.fdocuments.in/reader035/viewer/2022062314/56649ea05503460f94ba271b/html5/thumbnails/24.jpg)
DOM
getElementByTagName(“div”)Search through all the <id> tags.
11-27-2007 D.A. Clements, Instructor
![Page 25: Announcements This week No quiz No lecture or labs on Wednesday No school on Thursday or Friday No CLUE Tutoring 10/9/2015D.A. Clements, UW Information.](https://reader035.fdocuments.in/reader035/viewer/2022062314/56649ea05503460f94ba271b/html5/thumbnails/25.jpg)
DOM Exercise
![Page 26: Announcements This week No quiz No lecture or labs on Wednesday No school on Thursday or Friday No CLUE Tutoring 10/9/2015D.A. Clements, UW Information.](https://reader035.fdocuments.in/reader035/viewer/2022062314/56649ea05503460f94ba271b/html5/thumbnails/26.jpg)
DOM Exercise Answers
![Page 27: Announcements This week No quiz No lecture or labs on Wednesday No school on Thursday or Friday No CLUE Tutoring 10/9/2015D.A. Clements, UW Information.](https://reader035.fdocuments.in/reader035/viewer/2022062314/56649ea05503460f94ba271b/html5/thumbnails/27.jpg)
DOM Exercise 2
![Page 28: Announcements This week No quiz No lecture or labs on Wednesday No school on Thursday or Friday No CLUE Tutoring 10/9/2015D.A. Clements, UW Information.](https://reader035.fdocuments.in/reader035/viewer/2022062314/56649ea05503460f94ba271b/html5/thumbnails/28.jpg)
![Page 29: Announcements This week No quiz No lecture or labs on Wednesday No school on Thursday or Friday No CLUE Tutoring 10/9/2015D.A. Clements, UW Information.](https://reader035.fdocuments.in/reader035/viewer/2022062314/56649ea05503460f94ba271b/html5/thumbnails/29.jpg)
![Page 30: Announcements This week No quiz No lecture or labs on Wednesday No school on Thursday or Friday No CLUE Tutoring 10/9/2015D.A. Clements, UW Information.](https://reader035.fdocuments.in/reader035/viewer/2022062314/56649ea05503460f94ba271b/html5/thumbnails/30.jpg)
The DOM Tree