D.A. Clements, MLIS, UW Information School Announcements Project due date Project 2A due Wednesday at 10pm 1-1-1 rule by Thursday night at 10pm Extra credit due dates Labs 8/9: Friday night at 10pm Living Computer Museum New quiz for anyone who got lost on the way to the museum—15 extra credit points Only for students who registered for the tour 9/12/2018 D.A. Clements, MLIS, UW Information School

Announcements This week's discussion is open Post your URL for Project 1B Explore the class's Misinformation Sites Post helpful comments for ten projects

Web Design Concepts Forms Gathering Input from the User Forms allow users to answer questions and provide data. You see many of them on the Web—shopping carts, registration forms, signing up for classes, and so forth. D.A. Clements 9/12/2018 D.A. Clements, MLIS, UW iSchool

D.A. Clements, MLIS, UW iSchool Objectives Set up a form with HTML Add form inputs: Text fields Radio buttons Check boxes Select menus Submit buttons Add JavaScript Event Handlers In this lecture, we'll explore the major categories of inputs that can be used with forms. 9/12/2018 D.A. Clements, MLIS, UW iSchool

A short form: Movie Picker <h1>Movie Picker</h1> <form id="picker" method="post" action=""> <p> <label for="movie">Enter movie name:</label> <input type="text" name="movie" id="movie" /> </p> Choose movie format: <input type="radio" name="format" id="dvd" value="dvd" /> <label for="dvd">DVD</label>  <input type="radio" name="format" id="vhs" value="vhs" /> <label for="vhs">VHS</label> <input type="button" name="cart" id="cart" value="Add to cart /> </form> To begin our journey into forms, we'll use this small Web form that lets you search for a movie in either DVD or VHS format and add it to the shopping cart. 9/12/2018 D.A. Clements, MLIS, UW iSchool

Test the Movie Picker form The form pops up but won't really do anything because It's the pure HTML No client-side or server-side scripts to put data into a database or manipulate it in any way 9/12/2018 D.A. Clements, MLIS, UW iSchool

D.A. Clements, MLIS, UW iSchool A short form: Markup <h1>Movie Picker</h1> <form id="picker" method="post" action=""> <p> <label for="movie">Enter movie name:</label> <input type="text" name="movie" id="movie" /> </p> Choose movie format: <input type="radio" name="format" id="dvd" value="dvd" /> <label for="dvd">DVD</label>  <input type="radio" name="format" id="vhs" value="vhs" /> <label for="vhs">VHS</label> <input type="button" name="cart" id="cart" value="Add to cart /> </form> Here is the markup for the form. 9/12/2018 D.A. Clements, MLIS, UW iSchool

D.A. Clements, MLIS, UW iSchool Form tags <h1>Movie Picker</h1> <form id="picker" method="post" action="#"> <p> <label for="movie">Enter movie name:</label> <input type="text" name="movie" id="movie" /> </p> Choose movie format: <input type="radio" name="format" id="dvd" value="dvd" /> <label for="dvd">DVD</label>  <input type="radio" name="format" id="vhs" value="vhs" /> <label for="vhs">VHS</label> <input type="button" name="cart" id="cart" value="Add to cart /> </form> Just like tables, start and end form tags alert the browser to the beginning and end of the form. The inputs must be nest inside these form tags. Forms may have a name as well as an ID. They can also have a method, post or get, that is used with server scripts. Action may open another page in the browser that has programming code. In our case, we are staying on the same page, staying on the form. We indicate that with #. You'll see that used with links as well when you are referring to the current Web page. 9/12/2018 D.A. Clements, MLIS, UW iSchool

D.A. Clements, MLIS, UW iSchool Input tags <h1>Movie Picker</h1> <form id="picker" method="post" action=""> <p> <label for="movie">Enter movie name:</label> <input type="text" name="movie" id="movie" /> </p> Choose movie format: <input type="radio" name="format" id="dvd" value="dvd" /> <label for="dvd">DVD</label>  <input type="radio" name="format" id="vhs" value="vhs" /> <label for="vhs">VHS</label> <input type="button" name="cart" id="cart" value="Add to cart /> </form> This input is for the text box where the user is asked to enter the movie name. 9/12/2018 D.A. Clements, MLIS, UW iSchool

D.A. Clements, MLIS, UW iSchool Inputs and Labels <h1>Movie Picker</h1> <form id="picker" method="post" action=""> <p> <label for="movie">Enter movie name:</label> <input type="text" name="movie" id="movie" /> </p> Choose movie format: <input type="radio" name="format" id="dvd" value="dvd" /> <label for="dvd">DVD</label>  <input type="radio" name="format" id="vhs" value="vhs" /> <label for="vhs">VHS</label> <input type="button" name="cart" id="cart" value="Add to cart /> </form> Notice the label tags that markup the directions to the user for this particular input: "Enter movie name:". 9/12/2018 D.A. Clements, MLIS, UW iSchool

D.A. Clements, MLIS, UW iSchool Inputs and Labels <h1>Movie Picker</h1> <form id="picker" method="post" action=""> <p> <label for="movie">Enter movie name:</label> <input type="text" name="movie" id="movie" /> </p> Choose movie format: <input type="radio" name="format" id="dvd" value="dvd" /> <label for="dvd">DVD</label>  <input type="radio" name="format" id="vhs" value="vhs" /> <label for="vhs">VHS</label> <input type="button" name="cart" id="cart" value="Add to cart /> </form> Notice that the for attribute in the label matches the id in the input tag. 9/12/2018 D.A. Clements, MLIS, UW iSchool

D.A. Clements, MLIS, UW iSchool Inputs and Labels <h1>Movie Picker</h1> <form id="picker" method="post" action=""> <p> <label for="movie">Enter movie name:</label> <input type="text" name="movie" id="movie" /> </p> Choose movie format: <input type="radio" name="format" id="dvd" value="dvd" /> <label for="dvd">DVD</label>  <input type="radio" name="format" id="vhs" value="vhs" /> <label for="vhs">VHS</label> <input type="button" name="cart" id="cart" value="Add to cart /> </form> Notice that the inputs must be within paragraph tags in order to validate with XHTML 1.0 Strict. 9/12/2018 D.A. Clements, MLIS, UW iSchool

D.A. Clements, MLIS, UW iSchool Inputs and Labels <h1>Movie Picker</h1> <form id="picker" method="post" action=""> <p> <label for="movie">Enter movie name:</label> <input type="text" name="movie" id="movie" /> </p> Choose movie format: <input type="radio" name="format" id="dvd" value="dvd" /> <label for="dvd">DVD</label>  <input type="radio" name="format" id="vhs" value="vhs" /> <label for="vhs">VHS</label> <input type="button" name="cart" id="cart" value="Add to cart /> </form> "Choose movie format:" is simply text on the page, an additional instruction to the user. 9/12/2018 D.A. Clements, MLIS, UW iSchool

D.A. Clements, MLIS, UW iSchool Inputs and Labels <h1>Movie Picker</h1> <form id="picker" method="post" action=""> <p> <label for="movie">Enter movie name:</label> <input type="text" name="movie" id="movie" /> </p> Choose movie format: <input type="radio" name="format" id="dvd" value="dvd" /> <label for="dvd">DVD</label>  <input type="radio" name="format" id="vhs" value="vhs" /> <label for="vhs">VHS</label> <input type="button" name="cart" id="cart" value="Add to cart /> </form> The next input and label are for the first radio button. In this case, the label appears after the input tag. It doesn't matter what order they are in because the label tag's for attribute links the label and the input field. We need to link them for accessibility purposes. If someone has a visual impairment and accesses the Web using a screen reader, which reads the screen out loud to them. The screen readers the label. If the user types something, the screen reader knows it goes with that input because of the for attribute in the label. 9/12/2018 D.A. Clements, MLIS, UW iSchool

D.A. Clements, MLIS, UW iSchool Inputs and Labels <h1>Movie Picker</h1> <form id="picker" method="post" action=""> <p> <label for="movie">Enter movie name:</label> <input type="text" name="movie" id="movie" /> </p> Choose movie format: <input type="radio" name="format" id="dvd" value="dvd" /> <label for="dvd">DVD</label>  <input type="radio" name="format" id="vhs" value="vhs" /> <label for="vhs">VHS</label> <input type="button" name="cart" id="cart" value="Add to cart /> </form> Notice again that the label's for and the input's id match and in the case of radio buttons, so does the value. Each radio button in a set must have a different value. 9/12/2018 D.A. Clements, MLIS, UW iSchool

D.A. Clements, MLIS, UW iSchool Inputs and Labels <h1>Movie Picker</h1> <form id="picker" method="post" action=""> <p> <label for="movie">Enter movie name:</label> <input type="text" name="movie" id="movie" /> </p> Choose movie format: <input type="radio" name="format" id="dvd" value="dvd" /> <label for="dvd">DVD</label>  <input type="radio" name="format" id="vhs" value="vhs" /> <label for="vhs">VHS</label> <input type="button" name="cart" id="cart" value="Add to cart /> </form> Looking at the next one in the set of radio buttons, we can see that the type is once again radio, but in this case the for, id, and value are all "vhs". 9/12/2018 D.A. Clements, MLIS, UW iSchool

D.A. Clements, MLIS, UW iSchool Sets of Radio Buttons <h1>Movie Picker</h1> <form id="picker" method="post" action=""> <p> <label for="movie">Enter movie name:</label> <input type="text" name="movie" id="movie" /> </p> Choose movie format: <input type="radio" name="format" id="dvd" value="dvd" /> <label for="dvd">DVD</label>  <input type="radio" name="format" id="vhs" value="vhs" /> <label for="vhs">VHS</label> <input type="button" name="cart" id="cart" value="Add to cart /> </form> The two radio buttons are kept together as a set because they have the same name. Radio buttons are the only input where you want the name and id to be different! 9/12/2018 D.A. Clements, MLIS, UW iSchool

D.A. Clements, MLIS, UW iSchool Button inputs <h1>Movie Picker</h1> <form id="picker" method="post" action=""> <p> <label for="movie">Enter movie name:</label> <input type="text" name="movie" id="movie" /> </p> Choose movie format: <input type="radio" name="format" id="dvd" value="dvd" /> <label for="dvd">DVD</label>  <input type="radio" name="format" id="vhs" value="vhs" /> <label for="vhs">VHS</label> <input type="button" name="cart" id="cart" value="Add to cart /> </form> Finally, we come to the button input. Note that the name and id are the same. 9/12/2018 D.A. Clements, MLIS, UW iSchool

D.A. Clements, MLIS, UW iSchool Button inputs <h1>Movie Picker</h1> <form id="picker" method="post" action=""> <p> <label for="movie">Enter movie name:</label> <input type="text" name="movie" id="movie" /> </p> Choose movie format: <input type="radio" name="format" id="dvd" value="dvd" /> <label for="dvd">DVD</label>  <input type="radio" name="format" id="vhs" value="vhs" /> <label for="vhs">VHS</label> <input type="button" name="cart" id="cart" value="Add to cart" /> </form> The value for a button is the text that appears on the button. 9/12/2018 D.A. Clements, MLIS, UW iSchool

D.A. Clements, MLIS, UW iSchool Select boxes <p> <label for="gradprogram">Select your graduate program</label> <select name="gradprogram" size="1" id="gradprogram"> <option value="mlis" selected="selected">MLIS</option> <option value="msim">MSIM</option> <option value="other">Other</option> </select> </p> This type of input isn't illustrated in the Movie picker. Pause the video and go try it out on the course Web site if you haven't already! 9/12/2018 D.A. Clements, MLIS, UW iSchool

D.A. Clements, MLIS, UW iSchool Submit buttons Sends the user data to a JavaScript or Server-Side script: <p> <input type="submit" name="submitform" id="submitform" value="Submit Form" /> </p> Nothing happens with HTML alone. Submit buttons are a special type of button. Notice that the type is submit. The label on the button is "Submit Form". 9/12/2018 D.A. Clements, MLIS, UW iSchool

Submit buttons and form tags <h1>Movie Picker</h1> <form id="picker" method="post" action="#"> <p> <label for="movie">Enter movie name:</label> <input type="text" name="movie" id="movie" /> </p> Choose movie format: <input type="radio" name="format" id="dvd" value="dvd" /> <label for="dvd">DVD</label>  <input type="radio" name="format" id="vhs" value="vhs" /> <label for="vhs">VHS</label> <input type="button" name="cart" id="cart" value="Add to cart /> </form> Remember the start form tag? When a Submit button is clicked, the method and action listed in the start form tag are executed. If action indicates another page, that's where it goes. The method tells how the user data will be sent for processing. That's outside the scope of this class so we won't go any farther with that. Just know that the submit button activates the method and action in the form tag. 9/12/2018 D.A. Clements, MLIS, UW iSchool

Events Cause Processing After drawing a page, browsers sit idle waiting for something to happen … when user gives input, it cause events Event types onclick onchange onmouseover onsubmit Something else for you to know as just general background for Web design: Events can trigger JavaScripts. Events include clicking on a button, changing the value in a text box, mousing over something, or clicking the submit button. 9/12/2018 D.A. Clements, MLIS, UW iSchool

D.A. Clements, MLIS, UW iSchool Test the Smileys form Smileys… This one actually does something! JavaScripts respond to user events The Smileys form demonstrates JavaScript attached to a form. 9/12/2018 D.A. Clements, MLIS, UW iSchool

Emoticons = Emotional Icons :-) Smile or Happy :-( Frown or Sad ;-) Winking :-D Laughter :-C Very, very sad D-: Annoyed, shocked or scared :-p “Raspberry" or 'tongue in cheek’ :-S Confused :-/ Doubtful or confused :-| Blank O:O_O Surprised or shocked Sideways Just for fun, here are some more emoticons. They're all read sideways, in contrast to 9/12/2018 D.A. Clements, MLIS, UW iSchool

D.A. Clements, MLIS, UW iSchool Asian Emoticons (^_^) Laughing (>_<)> Troubled (^_^;) Troubled (ToT) Crying m(_ _)m Apologising (^^;) Shy (???) Grinning (???)/ Joyful (???;) Surprised (#^.^#) Shy (*´?`*) Infatuation (??;) Worried (*^?^*) Joyful (^?^) Laughing Sideways 9/12/2018 D.A. Clements, MLIS, UW iSchool

D.A. Clements, MLIS, UW iSchool Asian Emoticons (^_^) Laughing (>_<)> Troubled (^_^;) Troubled (ToT) Crying m(_ _)m Apologising (^^;) Shy (???) Grinning (???)/ Joyful (???;) Surprised (#^.^#) Shy (*´?`*) Infatuation (??;) Worried (*^?^*) Joyful (^?^) Laughing Sideways 9/12/2018 D.A. Clements, MLIS, UW iSchool

D.A. Clements, MLIS, UW iSchool Asian Emoticons (^_^) Laughing (>_<)> Troubled (^_^;) Troubled (ToT) Crying m(_ _)m Apologising (^^;) Shy (???) Grinning (???)/ Joyful (???;) Surprised (#^.^#) Shy (*´?`*) Infatuation (??;) Worried (*^?^*) Joyful (^?^) Laughing Sideways 9/12/2018 D.A. Clements, MLIS, UW iSchool

D.A. Clements, MLIS, UW iSchool Asian Emoticons (^_^) Laughing (>_<)> Troubled (^_^;) Troubled (ToT) Crying m(_ _)m Apologising (^^;) Shy (???) Grinning (???)/ Joyful (???;) Surprised (#^.^#) Shy (*´?`*) Infatuation (??;) Worried (*^?^*) Joyful (^?^) Laughing Right-side up! 9/12/2018 D.A. Clements, MLIS, UW iSchool

Try the Viking Names form Another form powered by JavaScript Here is another form that is powered by the JavaScript behind it. 9/12/2018 D.A. Clements, MLIS, UW iSchool

D.A. Clements, MLIS, UW iSchool Summary Set up a form with HTML Add form inputs: Text fields Radio buttons Check boxes Select menus Submit buttons Add JavaScript Event Handlers In this lecture, we'll explore the major categories of inputs that can be used with forms. 9/12/2018 D.A. Clements, MLIS, UW iSchool

JavaScript Storyteller Project 2B Putting a big project together D.A. Clements I'm not going to dump you into the deep end of the programming swimming pool. Instead, this project will walk you through the programming. Caution: It does include some string methods you haven't seen before but they're really cool and I give you the code for them. In fact, I pretty much give you the code for everything in this project! The more you understand the concepts, the easier this project will be. With that in mind, I'll go through some of the trickier functions for this project line by line so you can understand what they are doing and then I'll show you how to call them. 9/12/2018 D.A. Clements, MLIS, UW iSchool

D.A. Clements, MLIS, UW iSchool Objectives Understand how a larger project is built from the basic programming concepts Understand how to declare multiple functions Understand how to call functions from Event handlers Other functions In this class, you've worked extensively with short scripts. The intent of this project is to show you how a longer program with several functions is structured so that they all work together. You will learn how to call functions in lots of different ways. The project will also give you more experience with the concepts common to all programming languages, especially assignment statements, functions, conditionals, and arrays. 9/12/2018 D.A. Clements, MLIS, UW iSchool

D.A. Clements, MLIS, UW iSchool Small programming modules that can be called as needed Functions This project has a lot of functions. Some of them you call every time you have a user-supplied word that needs to be capitalized or you have a user-supplied word that needs "a" or "an" in front of it. You'll also call the entire program from the submit button. So lots of different functions! 9/12/2018 D.A. Clements, MLIS, UW iSchool

Passing Values to Functions Definition syntax function name(parameter) { //statement body x = x * parameter; } Call syntax onclick="name(argument)" For more discussion of function syntax, see the Module 8 Review lecture. 9/12/2018 D.A. Clements, MLIS, UW iSchool