javascript professor robin burke. 2 outline quiz tables javascript
TRANSCRIPT
JavaScript
Professor Robin Burke
2
Outline
Quiz Tables JavaScript
3
Quiz
10 min.
4
Quiz Answers
5
HTML continued
Elements for overall document organization headings, paragraphs, lists images links
6
Tables
A table is a rectangular region organized into rows and columns row-based definition
<table> element declares a table
<tr> element declares a row
<td> element declares a division (cell) within a row
7
More elements
<caption> declares a caption for the table
<th> declares a "header" cell usually bold and centered
8
Example<table> <caption>This is a table</caption> <tr>
<th>First Row</th> </tr> <tr>
<td>A1</td> </tr></table>
9
Border control border
attribute of table gives the width of the visible border set to 0 for "invisible" table
frame controls which sides of the table are framed default = "box", many other options
rules controls which directionality of borders default="all"
10
Table spacing
cellspacing space between cells
cellpadding space between cell text and cell border
align (as for images) text flow around table
11
Other table attributes
bgcolor background color for table
width pixels or % of browser window
height pixels or % of browser window
12
TR, TH and TD
Share many table attributes bgcolor width, height
% means % of table size align
horizontal alignment valign
vertical alignment
13
Table contents
Must be row-by-row Table row element
with cells inside <tr><td>1</td><td>2</td></tr> <tr><td>3</td><td>4</td></tr>
14
Spanning
A cell can span multiple rows or columns Attributes of td and th
colspan # of columns included
rowspan # of rows included
15
Span example
Cell spans two cols and two rows: <td rowspan=“2” colspan=“2”>
Cell spans three cols: <td colspan=“3”>
Cell spans ……………. <td …………….> Complete
16
Tables for layout
A grid is the most common layout graphic layout tool
Early versions of HTML provided no layout facilities logical structure only
Tables provided a grid-based mechanism to get layout in spite of HTML controversial but widely-used
17
Table-based layout cons
Platform-dependent Difficult for alternative renderings
audio mobile platform
Contrary to HTML spirit There is now an "approved" way to do layout
style sheets
18
Example
DePaul Homepage
19
Web languages
Three formal languages HTML JavaScript CSS
Three different tasks Document description Client-side interaction Style definition
20
Client-side interaction
Example
21
Without JavaScript
Browser can only display what the server sent each effect requires server round-trip too slow
Client-side programming lets the browser handle user interaction makes web pages "dynamic"
22
For our purposes
JavaScript is a reasonable first language Loosely typed
Fewer details at first Interpreted
Simple execution model As long as you don't think too much about it
Integrated with HTML Program files are just web pages
Execution platform = browser No special tools to acquire
23
Programming
HTML adds markup to text text is still there
JavaScript little "content" beyond the program more abstract
24
Reading a program
greet.html example What to see
statements path of execution resources of the language
function calls objects & properties
user-defined and user-named items variables functions
25
Writing a program
Design+construction process Meaning
Start with requirements Plan the structure of the solution Implement the solution with available tools Making design decisions along the way
Often evolutionary initial prototype improved upon until requirements met
26
In HTML Requirements
some content text / images / links
some organization for that content Plan
sketching page layout Implement
write HTML elements corresponding to layout design decisions
layouts, style options Evolution
view page in browser revise HTML
27
In JavaScript Requirements
functional something we want the program to do
Plan develop algorithm
sequence of steps that will achieve the function Implement
write each step of algorithm in formal language design decisions
names, language elements Evolution
debugging
28
Algorithm
Steps to accomplish result We'll talk more about this later
In "greet.html" ask user for name print name and greeting on page
29
Debugging
Defects in programs can difficult to find error messages from browser can very unhelpful
If you even see any! the computer doesn't "understand" your program programs are "brittle"
Can be frustrating
30
Debugging tools
Make sure to make errors visible browser settings
Test your assumptions sometimes useful to print out values during
computation Figure out exactly where the error occurs
might not be where you think Reproduce the error in a simplified program
sometimes your expectations are wrong
31
Variables
An algorithm will have multiple steps Steps are linked by values
value computed in step 1 used in step 2 Necessary to store computed values Variables
names given to stored values firstName
32
Naming
Names are arbitrary the computer does not care
Names are crucial the human reader does care descriptive names are important
Convention "camel case"
firstName modifiers first, noun last
33
JavaScript language
Syntax how statements are constructed
Semantics what statements mean
Operations what computations you can perform
34
Syntax (Ch. 4)
statement ends in ;
assignment statement variable = value;
function call function name (parameters)
"" delimits a list of characters as a string
35
Semantics
assignment places a value in a named location
function call invokes a named function with the given parameters may return a value
36
Prompt function
prompt (promptValue, defaultValue) Effect
opens a prompt dialog for user input Input
prompt to be displayed initial value in text input area
Result user's input string
37
document.write function
document.write (text) Ignore the funny syntax for now
Effect Writes text to the web page
Input Text to output
Result none
38
+ operator
Combines strings together string1 + string2 Input
two string values Output
single string value concatenated
39
Next class
Cascading Style Sheets Reading
online CSS Basic