JavaScript Professor Robin Burke. 2 Outline Quiz Tables JavaScript.
-
Upload
norman-harper -
Category
Documents
-
view
214 -
download
0
Transcript of JavaScript Professor Robin Burke. 2 Outline Quiz Tables JavaScript.
![Page 1: JavaScript Professor Robin Burke. 2 Outline Quiz Tables JavaScript.](https://reader036.fdocuments.in/reader036/viewer/2022081516/56649eb75503460f94bc1919/html5/thumbnails/1.jpg)
JavaScript
Professor Robin Burke
![Page 2: JavaScript Professor Robin Burke. 2 Outline Quiz Tables JavaScript.](https://reader036.fdocuments.in/reader036/viewer/2022081516/56649eb75503460f94bc1919/html5/thumbnails/2.jpg)
2
Outline
Quiz Tables JavaScript
![Page 3: JavaScript Professor Robin Burke. 2 Outline Quiz Tables JavaScript.](https://reader036.fdocuments.in/reader036/viewer/2022081516/56649eb75503460f94bc1919/html5/thumbnails/3.jpg)
3
Quiz
10 min.
![Page 4: JavaScript Professor Robin Burke. 2 Outline Quiz Tables JavaScript.](https://reader036.fdocuments.in/reader036/viewer/2022081516/56649eb75503460f94bc1919/html5/thumbnails/4.jpg)
4
Quiz Answers
![Page 5: JavaScript Professor Robin Burke. 2 Outline Quiz Tables JavaScript.](https://reader036.fdocuments.in/reader036/viewer/2022081516/56649eb75503460f94bc1919/html5/thumbnails/5.jpg)
5
HTML continued
Elements for overall document organization headings, paragraphs, lists images links
![Page 6: JavaScript Professor Robin Burke. 2 Outline Quiz Tables JavaScript.](https://reader036.fdocuments.in/reader036/viewer/2022081516/56649eb75503460f94bc1919/html5/thumbnails/6.jpg)
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
![Page 7: JavaScript Professor Robin Burke. 2 Outline Quiz Tables JavaScript.](https://reader036.fdocuments.in/reader036/viewer/2022081516/56649eb75503460f94bc1919/html5/thumbnails/7.jpg)
7
More elements
<caption> declares a caption for the table
<th> declares a "header" cell usually bold and centered
![Page 8: JavaScript Professor Robin Burke. 2 Outline Quiz Tables JavaScript.](https://reader036.fdocuments.in/reader036/viewer/2022081516/56649eb75503460f94bc1919/html5/thumbnails/8.jpg)
8
Example<table> <caption>This is a table</caption> <tr>
<th>First Row</th> </tr> <tr>
<td>A1</td> </tr></table>
![Page 9: JavaScript Professor Robin Burke. 2 Outline Quiz Tables JavaScript.](https://reader036.fdocuments.in/reader036/viewer/2022081516/56649eb75503460f94bc1919/html5/thumbnails/9.jpg)
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"
![Page 10: JavaScript Professor Robin Burke. 2 Outline Quiz Tables JavaScript.](https://reader036.fdocuments.in/reader036/viewer/2022081516/56649eb75503460f94bc1919/html5/thumbnails/10.jpg)
10
Table spacing
cellspacing space between cells
cellpadding space between cell text and cell border
align (as for images) text flow around table
![Page 11: JavaScript Professor Robin Burke. 2 Outline Quiz Tables JavaScript.](https://reader036.fdocuments.in/reader036/viewer/2022081516/56649eb75503460f94bc1919/html5/thumbnails/11.jpg)
11
Other table attributes
bgcolor background color for table
width pixels or % of browser window
height pixels or % of browser window
![Page 12: JavaScript Professor Robin Burke. 2 Outline Quiz Tables JavaScript.](https://reader036.fdocuments.in/reader036/viewer/2022081516/56649eb75503460f94bc1919/html5/thumbnails/12.jpg)
12
TR, TH and TD
Share many table attributes bgcolor width, height
% means % of table size align
horizontal alignment valign
vertical alignment
![Page 13: JavaScript Professor Robin Burke. 2 Outline Quiz Tables JavaScript.](https://reader036.fdocuments.in/reader036/viewer/2022081516/56649eb75503460f94bc1919/html5/thumbnails/13.jpg)
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>
![Page 14: JavaScript Professor Robin Burke. 2 Outline Quiz Tables JavaScript.](https://reader036.fdocuments.in/reader036/viewer/2022081516/56649eb75503460f94bc1919/html5/thumbnails/14.jpg)
14
Spanning
A cell can span multiple rows or columns Attributes of td and th
colspan # of columns included
rowspan # of rows included
![Page 15: JavaScript Professor Robin Burke. 2 Outline Quiz Tables JavaScript.](https://reader036.fdocuments.in/reader036/viewer/2022081516/56649eb75503460f94bc1919/html5/thumbnails/15.jpg)
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
![Page 16: JavaScript Professor Robin Burke. 2 Outline Quiz Tables JavaScript.](https://reader036.fdocuments.in/reader036/viewer/2022081516/56649eb75503460f94bc1919/html5/thumbnails/16.jpg)
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
![Page 17: JavaScript Professor Robin Burke. 2 Outline Quiz Tables JavaScript.](https://reader036.fdocuments.in/reader036/viewer/2022081516/56649eb75503460f94bc1919/html5/thumbnails/17.jpg)
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
![Page 18: JavaScript Professor Robin Burke. 2 Outline Quiz Tables JavaScript.](https://reader036.fdocuments.in/reader036/viewer/2022081516/56649eb75503460f94bc1919/html5/thumbnails/18.jpg)
18
Example
DePaul Homepage
![Page 19: JavaScript Professor Robin Burke. 2 Outline Quiz Tables JavaScript.](https://reader036.fdocuments.in/reader036/viewer/2022081516/56649eb75503460f94bc1919/html5/thumbnails/19.jpg)
19
Web languages
Three formal languages HTML JavaScript CSS
Three different tasks Document description Client-side interaction Style definition
![Page 20: JavaScript Professor Robin Burke. 2 Outline Quiz Tables JavaScript.](https://reader036.fdocuments.in/reader036/viewer/2022081516/56649eb75503460f94bc1919/html5/thumbnails/20.jpg)
20
Client-side interaction
Example
![Page 21: JavaScript Professor Robin Burke. 2 Outline Quiz Tables JavaScript.](https://reader036.fdocuments.in/reader036/viewer/2022081516/56649eb75503460f94bc1919/html5/thumbnails/21.jpg)
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"
![Page 22: JavaScript Professor Robin Burke. 2 Outline Quiz Tables JavaScript.](https://reader036.fdocuments.in/reader036/viewer/2022081516/56649eb75503460f94bc1919/html5/thumbnails/22.jpg)
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
![Page 23: JavaScript Professor Robin Burke. 2 Outline Quiz Tables JavaScript.](https://reader036.fdocuments.in/reader036/viewer/2022081516/56649eb75503460f94bc1919/html5/thumbnails/23.jpg)
23
Programming
HTML adds markup to text text is still there
JavaScript little "content" beyond the program more abstract
![Page 24: JavaScript Professor Robin Burke. 2 Outline Quiz Tables JavaScript.](https://reader036.fdocuments.in/reader036/viewer/2022081516/56649eb75503460f94bc1919/html5/thumbnails/24.jpg)
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
![Page 25: JavaScript Professor Robin Burke. 2 Outline Quiz Tables JavaScript.](https://reader036.fdocuments.in/reader036/viewer/2022081516/56649eb75503460f94bc1919/html5/thumbnails/25.jpg)
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
![Page 26: JavaScript Professor Robin Burke. 2 Outline Quiz Tables JavaScript.](https://reader036.fdocuments.in/reader036/viewer/2022081516/56649eb75503460f94bc1919/html5/thumbnails/26.jpg)
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
![Page 27: JavaScript Professor Robin Burke. 2 Outline Quiz Tables JavaScript.](https://reader036.fdocuments.in/reader036/viewer/2022081516/56649eb75503460f94bc1919/html5/thumbnails/27.jpg)
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
![Page 28: JavaScript Professor Robin Burke. 2 Outline Quiz Tables JavaScript.](https://reader036.fdocuments.in/reader036/viewer/2022081516/56649eb75503460f94bc1919/html5/thumbnails/28.jpg)
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
![Page 29: JavaScript Professor Robin Burke. 2 Outline Quiz Tables JavaScript.](https://reader036.fdocuments.in/reader036/viewer/2022081516/56649eb75503460f94bc1919/html5/thumbnails/29.jpg)
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
![Page 30: JavaScript Professor Robin Burke. 2 Outline Quiz Tables JavaScript.](https://reader036.fdocuments.in/reader036/viewer/2022081516/56649eb75503460f94bc1919/html5/thumbnails/30.jpg)
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
![Page 31: JavaScript Professor Robin Burke. 2 Outline Quiz Tables JavaScript.](https://reader036.fdocuments.in/reader036/viewer/2022081516/56649eb75503460f94bc1919/html5/thumbnails/31.jpg)
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
![Page 32: JavaScript Professor Robin Burke. 2 Outline Quiz Tables JavaScript.](https://reader036.fdocuments.in/reader036/viewer/2022081516/56649eb75503460f94bc1919/html5/thumbnails/32.jpg)
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
![Page 33: JavaScript Professor Robin Burke. 2 Outline Quiz Tables JavaScript.](https://reader036.fdocuments.in/reader036/viewer/2022081516/56649eb75503460f94bc1919/html5/thumbnails/33.jpg)
33
JavaScript language
Syntax how statements are constructed
Semantics what statements mean
Operations what computations you can perform
![Page 34: JavaScript Professor Robin Burke. 2 Outline Quiz Tables JavaScript.](https://reader036.fdocuments.in/reader036/viewer/2022081516/56649eb75503460f94bc1919/html5/thumbnails/34.jpg)
34
Syntax (Ch. 4)
statement ends in ;
assignment statement variable = value;
function call function name (parameters)
"" delimits a list of characters as a string
![Page 35: JavaScript Professor Robin Burke. 2 Outline Quiz Tables JavaScript.](https://reader036.fdocuments.in/reader036/viewer/2022081516/56649eb75503460f94bc1919/html5/thumbnails/35.jpg)
35
Semantics
assignment places a value in a named location
function call invokes a named function with the given parameters may return a value
![Page 36: JavaScript Professor Robin Burke. 2 Outline Quiz Tables JavaScript.](https://reader036.fdocuments.in/reader036/viewer/2022081516/56649eb75503460f94bc1919/html5/thumbnails/36.jpg)
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
![Page 37: JavaScript Professor Robin Burke. 2 Outline Quiz Tables JavaScript.](https://reader036.fdocuments.in/reader036/viewer/2022081516/56649eb75503460f94bc1919/html5/thumbnails/37.jpg)
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
![Page 38: JavaScript Professor Robin Burke. 2 Outline Quiz Tables JavaScript.](https://reader036.fdocuments.in/reader036/viewer/2022081516/56649eb75503460f94bc1919/html5/thumbnails/38.jpg)
38
+ operator
Combines strings together string1 + string2 Input
two string values Output
single string value concatenated
![Page 39: JavaScript Professor Robin Burke. 2 Outline Quiz Tables JavaScript.](https://reader036.fdocuments.in/reader036/viewer/2022081516/56649eb75503460f94bc1919/html5/thumbnails/39.jpg)
39
Next class
Cascading Style Sheets Reading
online CSS Basic