39
JavaScript Professor Robin Burke

JavaScript Professor Robin Burke. 2 Outline Quiz Tables JavaScript

Embed Size (px)

Citation preview

Page 1: JavaScript Professor Robin Burke. 2 Outline Quiz Tables JavaScript

JavaScript

Professor Robin Burke

Page 2: JavaScript Professor Robin Burke. 2 Outline Quiz Tables JavaScript

2

Outline

Quiz Tables JavaScript

Page 3: JavaScript Professor Robin Burke. 2 Outline Quiz Tables JavaScript

3

Quiz

10 min.

Page 4: JavaScript Professor Robin Burke. 2 Outline Quiz Tables JavaScript

4

Quiz Answers

Page 5: JavaScript Professor Robin Burke. 2 Outline Quiz Tables JavaScript

5

HTML continued

Elements for overall document organization headings, paragraphs, lists images links

Page 6: JavaScript Professor Robin Burke. 2 Outline Quiz Tables JavaScript

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

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

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

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

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

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

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

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

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

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

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

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

18

Example

DePaul Homepage

Page 19: JavaScript Professor Robin Burke. 2 Outline Quiz Tables JavaScript

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

20

Client-side interaction

Example

Page 21: JavaScript Professor Robin Burke. 2 Outline Quiz Tables JavaScript

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

39

Next class

Cascading Style Sheets Reading

online CSS Basic