Tables, inputs, and variables CS 0134 (term 2181) Jarrett Billingsley

Class announcements You should have gotten your Exam 1 grades last night! How's Stranger Things 2???? (don't spoil it plz) So, I was confused by the university's wording… "…evening classes (starting at 6 p.m. or later) will have final exams during the last scheduled class meeting the week of December 11, 2017." The final is actually on December 11th, in this room, at 6:00. I've adjusted the schedule. More time for JavaScript stuff! Probably making a little game :O A MULTIPLAYER game 8O There won't be a lab on 12/4, just some notes and review. 10/30/2017 CS 0134 term 2181

Tables 10/30/2017 CS 0134 term 2181

What's a table? Family Cats caption heading Name Sex Age Color Size You probably already know… but we need some terminology. Family Cats caption heading Name Sex Age Color Size Lily ♀ 14 Orange Big Hunter Orange/White Goober ♂ 6 Black/Grey Small column head body row cell 10/30/2017 CS 0134 term 2181

Table HTML tags Family Cats <caption> <th> Name Sex Age As you might expect, there's a tag for each part! Family Cats <caption> <th> Name Sex Age Color Size Lily ♀ 14 Orange Big Hunter Orange/White Goober ♂ 6 Black/Grey Small <col> <thead> <tbody> <tr> <td> 10/30/2017 CS 0134 term 2181

It's a bit boring, but that's It gets kind of wordy. A basic table looks like this: <table> <tr> <td>Thing 1</td> <td>Thing 2</td> </tr> <td>Thing 3</td> <td>Thing 4</td> </table> This might appear as: Thing 1 Thing 2 Thing 3 Thing 4 It's a bit boring, but that's what CSS is for! 10/30/2017 CS 0134 term 2181

Now we can style the head Splitting it up The head says what's in each column. The body has the table's data. Each contains 1 or more rows. <table> <thead> <tr> (headers) </tr> </thead> <tbody> <tr> (data) </tr> </tbody> </table> Now we can style the head and body differently! Bear. Bear? Bear! Yes Maybe No way What? HUH? 🐻 10/30/2017 CS 0134 term 2181

Different kinds of cells <td> is Table Data, and <th> is Table Header. You can use <th> anywhere – good for row headers! <thead> <tr> <th>One <th>Two <tbody> <th>Row header! <td>Regular data. I'm using this shorthand to save space, but all these should have closing tags. One Two Row header! Regular data. 10/30/2017 CS 0134 term 2181

<caption>Dogness</caption> <colgroup> Captions and columns <caption> comes inside <table>, but outside anything else. <colgroup> is the same way. Inside, you put <col> tags. This makes styling columns much easier! <table> <caption>Dogness</caption> <colgroup> <col class="breed"> <col class="rating"> </colgroup> <thead>... Dogness Breed Rating Samoyed 10/10 Shiba 3/10 Shih Tzu 7/10 10/30/2017 CS 0134 term 2181

CSS for Tables 10/30/2017 CS 0134 term 2181

border: 1px solid black; margin: 1em; } Borders and…margins? By default, tables look like this: But you can put borders around the cells by styling td/th. We can use a new kind of CSS selector: table td { border: 1px solid black; margin: 1em; } This says "select all the tds ANYWHERE inside the table, and put borders and margins around them." But the margins won't work! You can't put margins on table cells. Head1 Head2 Cell1 Cell2 Head1 Cell1 Head2 Cell2 10/30/2017 CS 0134 term 2181

border-collapse: collapse; Stretch and squash You can put space between the cells like so: table { border-spacing: 1em; } This goes on the table, not the cells! Or, you can remove all the spacing like this: border-collapse: collapse; Head1 Cell1 Head2 Cell2 Head1 Head2 Cell1 Cell2 10/30/2017 CS 0134 term 2181

col.rating { width: 7em; } tbody tr:nth-child(even) { Column and row styling It's REALLY common to set the width of a column: col.breed { width: 10em; } col.rating { width: 7em; } You can do really fun things with row styling: tbody tr:nth-child(even) { background: blue; /* stripey! */ } The :nth-child() selector can take "even", "odd", or a number. How about some visual help? tbody tr:hover { background: red; } 10/30/2017 CS 0134 term 2181

border-bottom: 2px solid black; } tbody td + td { Misc styling tips Instead of putting borders on all sides of cells, try just one or two: thead th { border-bottom: 2px solid black; } tbody td + td { border-left: 1px solid blue; } The "A + B" CSS selector selects "all the Bs that come after As." You can change where the caption appears like so: table { caption-side: bottom; } You can only put it on top or bottom. 10/30/2017 CS 0134 term 2181

Lab part 1! 10/30/2017 CS 0134 term 2181

Inputs and Variables 10/30/2017 CS 0134 term 2181

<input type="text" id="name"> Forms and Inputs A form is a way of letting the user give your page information. Inside of a form, there are inputs. Here's a simple form: <form> <input type="text" id="name"> <input type="number" id="age"> <input type="button" id="ok" value="OK!"> </form> OK! Kinda confusing… what do we type? 10/30/2017 CS 0134 term 2181

<input type="text" id="name" placeholder="Name"> Placeholders The placeholder lets you put some "default" text in an input. <input type="text" id="name" placeholder="Name"> Now our form might look like: Name Age OK! 10/30/2017 CS 0134 term 2181

var myButton = $("#add_button") myButton.click(some_handler) Variables In JavaScript, we often want to hold onto something. A variable is like a hand. It lets us hold onto something and work on it. For example: var myButton = $("#add_button") myButton.click(some_handler) The second line sets the add_button's click handler, even though we don't explicitly say add_button on that line. Today we'll be using them briefly, to let us add a row to our table! 10/30/2017 CS 0134 term 2181