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

2. 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 term 2181

3. Tables
10/30/2017
CS term 2181

4. 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 term 2181

5. 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 term 2181

6. 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 term 2181

7. 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 term 2181

8. 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 term 2181

9. <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 term 2181

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

11. 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 term 2181

12. 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 term 2181

13. 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 term 2181

14. 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 term 2181

15. Lab part 1!
10/30/2017
CS term 2181

16. Inputs and Variables
10/30/2017
CS term 2181

17. <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 term 2181

18. <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 term 2181

19. 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 term 2181