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 element declares a table element declares a row element declares a division (cell) within a row

7 More elements declares a caption for the table declares a "header" cell usually bold and centered

8 Example This is a table First Row A1

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

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: Cell spans three cols: Cell spans ……………. 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