Introduction to Programming the WWW I

1
Introduction to Programming the WWW I

• CMSC 10100-1
• Winter 2004
• Lecture 15

2
Todays Topics

• Working with objects
• JavaScript data types and operators
• Conditional and loop statements
• Using events

3
Review A First JavaScript Program

• The ltscriptgt Tag
• JavaScript programs are run from within an HTML
  document
• ltscriptgt and lt/scriptgt
• Used to notify the browser that JavaScript
  statements are contained within

4
Review A First JavaScript Program

• The ltscriptgt Tag
• language attribute
• Denotes the scripting language being used
• Default ? JavaScript
• Other languages (e.g., VBScript) may be used
• Can also specify script language version
• No space between name and version
• Checked by browser, scripts ignored if browser
  doesnt support version
• For ECMAScript compatible browsers, omit version

5
(No Transcript)
6
Review Working with Variables

• Variables
• To create
• Use keyword var to declare the variable
• Use the assignment operator to assign the
  variable a value
• Declare, then assign value (initialize)
• var employeeName
• employeeName Ric
• Declare and assign variable in a single statement
• var employeeName Ric

7
Review Working with Functions

• Defining Custom Functions
• A function definition consists of three parts
• Reserved word function followed by the function
  name (identifier)
• Parameters required by the function, contained
  within parentheses following the name
• Parameters ? variables used within the function
• Zero or more may be used
• Function statements, delimited by curly braces

8
(No Transcript)
9
Some Built-in Functions
http//www.devguru.com/Technologies/ecmascript/qui
ckref/js_functions.html
10
Working with Objects

• An object is a collection of properties and these
  properties include
• Primitive data types
• Other objects
• Functions(methods)
• Constructor function(constructor) is a function
  to create an instance of the object
• Use the new keyword with the constructor to
  create a new object
• You access the property that belongs to an object
  using the dot access operator, .
• document.writeln(my message)
• Some_variable document.form_name.input_element
  _name.value

11
Objects

• There are built-in objects that relate to the
  browser and its contents
• Window
• Document
• Navigator
• Frames
• Location
• History
• These objects are global objects and you need not
  create a new instance when you use them

12
(No Transcript)
13
Working with Objects

• There are also built-in JavaScript objects that
  extend the functionality of the language
• JavaScript includes 11 built-in objects that
  relate to the language itself
• Each object contains various methods and
  properties for performing a particular task
• Can be used directly in program without
  instantiating a new object

14
(No Transcript)
15
Working with Objects

• JavaScript built-in object properties and methods
  reference
• http//archive.devx.com/projectcool/developer/refe
  rence/jscript_obj.html

16
Working with Objects

• Custom JavaScript objects (not required in this
  course)
• Based on constructor functions
• Instantiate a new object or extending an old
  object
• Objects inherit all variables and statements of
  constructor function
• Any JavaScript function can serve as a
  constructor
• Online reference
• http//www.sitepoint.com/article/oriented-programm
  ing-1/2

17
JavaScript Data Types

• Data Types
• Primitive data types
• Data types that can be assigned only a single
  value
• JavaScript supports five primitive data types
• Integers
• Floating points
• Booleans
• Strings
• Null

18
(No Transcript)
19
Using Data Types

• Data Types
• Primitive data types (contd)
• Null value
• Data type and a value
• Signifies that the variable contains no value
• Undefined variable
• Has never had a value assigned to it
• Has not been declared
• or
• Does not exist

20
Using Data Types

• Data Types
• Reference (composite) data types
• Collections of data represented by a single
  variable name
• JavaScript supports three reference data types
• Functions
• Objects
• Arrays

21
Using Data Types

• Data Types
• Strongly typed programming languages
• Data types do not change after they have been
  declared (data type declaration required)
• Also know as static typing
• Loosely typed programming languages
• Variable data types are not required to be
  declared
• Also know as dynamic typing

22
Using Data Types

• Data Types
• JavaScript language
• Loosely typed programming language
• JavaScript does not allow data typing
• Determined automatically by JavaScript
  interpreter
• Can be determined using typeof() operator
• typeof(variableName)
• PrintDataTypes.html

23
(No Transcript)
24
Using Data Types

• Numeric Data Types
• JavaScript supports two numeric data types
• Integers
• Positive or negative number with no decimal point
• Range from 253 to 253
• Floating points
• Contains decimal places or written using
  exponential notation
• Range from ?1.7976931348623157 X 10308 to ?5 X
  10-324

25
Using Data Types

• Boolean Values
• Logical value of true or false
• Can be thought of as yes/on/1 or no/off/0
• Used for decision making and comparing data
• Recall use in overriding internal event handler
  with custom code

26
Using Data Types

• Strings
• Text string contains zero or more characters
  delimited by double or single quotation marks
• Text strings can be
• Used as literal values
• Assigned to a variable
• Assigned a zero-length string value (empty string)

27
Using Data Types

• Strings
• Using quotation marks and apostrophes
• Use one to delimit and the other in the literal
• var thisString Daves house
• var anotherString The house of Dave
• Or, use escape sequence
• var aThirdString Dave\s house

28
(No Transcript)
29
(No Transcript)
30
(No Transcript)
31
(No Transcript)
32
(No Transcript)
33
Using Data Types

• Strings
• Using HTML tags in strings
• Use tags to format strings
• Tag must be contained inside string quotes
• var newString Daves house.ltbrgt

34
Using Data Types

• Arrays
• Contains a set of data represented by a single
  variable name
• i.e., collection of variables contained in a
  single variable
• Used to store related things
• To create, use Array() constructor function
• hospitalDepartments new Array(numberOfElements)

35
Using Data Types

• Arrays
• Each piece of data in array is an element
• Numbering of elements in array starts with 0
• Size of array is declared and each element in
  array is accessed using brackets
• hospitalDepartments new Array(10)
• hospitalDepartments0 Oncology
• Arrays can contain different data types
• Array elements are undefined unless value is
  assigned

36
Array Built-in Methods

• myArray.length
• length return the number of elements in the array
  (which is alway one less than the last index).
• myArray.sort()
• sort() sorts an array in alphabetical order.
• myArray.push(value)
• push(value) appends value to the end of the
  array.
• myArray.pop()
• pop() extracts and returns the last item of the
  array.

37
Array Built-in Methods (contd)

• myArray.unshift(value
• unshift(value) inserts value at the from of the
  array.
• myArray.shift()
• shift() extracts and returns the first item of
  the array.
• Online references
• http//www.classes.cs.uchicago.edu/classes/archive
  /2004/winter/10100-1/02/javascript/arrayMethods.ht
  ml
• http//developer.netscape.com/viewsource/goodman_a
  rrays.html

38
Automatic Arrays in Document Objects

• Some objects in the document object model can
  contain more than one nested object of the same
  type
• Example list of all links or a list of all forms
  or a list of all components in a form
• http//archive.devx.com/projectcool/developer/refe
  rence/jscript_obj.html
• The browser automatically maintains arrays of
  those items
• Example document.links, document.forms,
  document.forms0.elements

39
Automatic Arrays in Document Objects (contd)

• How to access the object in these arrays, for
  example, a link in the document?
• By array syntax. If this link is the first link
  definition in the document (in source code
  order), the reference would be
• document.links0
• Or you can also use the name (as a string) in
  array syntax, as follows
• document.links"home"
• Does not work in IE!
• Examples
• http//people.cs.uchicago.edu/hai/hw6/accessobjec
  t.html

40
Expressions and Operators

• Expressions
• Combination of literal values, variables,
  operators, and other expressions that can be
  evaluated by the JavaScript interpreter to
  produce a result

41
(No Transcript)
42
Expressions and Operators

• Expressions
• Operators and operands can be used to create more
  complex expressions
• Operand
• Variables and literals contained in an expression
• Operators
• Symbols used in expressions to manipulate
  operands
• Example
• myNumber 100

43
(No Transcript)
44
Expressions and Operators

• Operators
• Can be binary or unary
• Binary
• Requires an operand both before (left operand)
  and after (right operand) the operator
• e.g., ? myNumber 100
• Unary
• Requires a single operand either before or after
  the operator
• e.g., ? myNumber

45
Expressions and Operators

• Arithmetic Operators
• Used to perform mathematical calculations
• Comprised of both binary and unary operators
• Note
• Addition operator (), when used on strings
  concatenates the operands (operator overloading)

46
Expressions and Operators

• Arithmetic Operators
• Converting strings to integers
• Reference page 165 of JavaScript, the
  Definitive Guide.
• Can use the Number() built-in function
• var number Number(string_value)
• only works with base-10 numbers, does not allow
  any non-space characters to appear in the string
  following the number

47
Expressions and Operators

• Arithmetic Operators
• Can use the parseInt() built-in function
• var number parseInt(3 blind mice)
• places the integer 3 into the var number
• only works with any base number, converts any
  number at the beginning of a string, ignores any
  non-number characters at the end.

48
Expressions and Operators

• Arithmetic Operators
• Can use the parseFloat() built-in function
• var number parseFloat(3.12 blind mice)
• places the value 3.12 into the number variable
• works with both integers and floating point
  numbers.

49
Expressions and Operators

• Precision You can adjust the number of digits a
  number has with number.toPrecision()
• var n 12345.6789
• n.toPrecision(1) // returns 1e4
• n.toPrecision(3) // returns 1.23e4
• n.toPrecision(5) // returns 12346 note rounding
• n.toPrecision(7) // returns 12345.67
• n.toPrecision(10) // returns 12345.67890 note
  added zero

50
Expressions and Operators

• Rounding You can adjust a number by rounding
  with Math.round(theNum)
• Rounds a float number to nearest integer (.5 goes
  up).
• var n 12345.6789
• theNum Math.round(n)
• // theNum now contains 12346

51
(No Transcript)
52
Expressions and Operators

• Examples
• numInPrompt.html
• simple expressions folder
• ArithmeticExamples.html
• BirthInfo.html
• ImprovedProgram.html

53
Expressions and Operators

• Arithmetic Operators
• Unary operators
• Prefix operator
• Placed before the operand
• count
• Value returned after operation
• Postfix operator
• Placed after the operand
• count
• Value returned before operation

54
Expressions and Operators

• Assignment Operators
• Used for assigning a value to a variable
• Basic assignment operator ()
• Assign initial value to new variable
• Assign a new value to an existing variable
• NaN
• Not a Number
• Returned when a mathematical expression does not
  result in a numerical value

55
(No Transcript)
56
(No Transcript)
57
Expressions and Operators

• Comparison Operators
• Used to compare two operands for equality and if
  one numeric value is greater than another
• Can use number or string values as operands

58
(No Transcript)
59
Expressions and Operators

• Comparison Operators
• Conditional operator
• Executes one of two expressions, based on the
  results of a conditional expression
• Syntax
• cond_expression ? expression1 expression2
• If con_expression true ? expression1 executes
• If con_expression false ? expression2 executes

60
Expressions and Operators

• Logical Operators
• Used for comparing two Boolean operands for
  equality
• Comparison returns a Boolean value
• Comprised of both binary and unary operators

61
(No Transcript)
62
Logical Operators

• Examples
• BooleanVariables.html
• LogicalExamples.html

63
Expressions and Operators

• Working with Strings
• JavaScript has two operators that can be used
  with Strings to combine two strings
• Concatenation operator ()
• var oneString one
• var anotherString oneString , two, three,
  
• Assignment operator ()
• var oneString one
• oneString , two, three,

64
Expressions and Operators

• String Object
• Literal strings and string variables in
  JavaScript are represented by a String object
• The String object contains methods for
  manipulating text strings

65
Expressions and Operators

• String Object
• length property
• Returns the number of characters in a string
• Parsing
• Act of extracting characters or substrings from a
  larger string

66
Expressions and Operators

• String Object
• Parsing using the split() built-in function
• Reference Javascript the Definitive Guide, p
  529.
• stringVariable.split(delimiter). Returns an
  array of strings, created by splitting string
  into substrings at the boundaries specified by
  delimiter.

67
Expressions and Operators

• String Object
• Parsing using the split() built-in function.
• Example
• var myVar John Barr
• var newVar myVar.split( )
• newVar contains John, Barr

68
Expressions and Operators

• String Object
• Parsing using the split() built-in function.
• Example
• var myVar redbluegreenyellow
• var newVar myVar.split()
• newVar contains red, blue.green,yellow

69
Expressions and Operators

• Example
• StringExamples.html

70
Expressions and Operators

• Operator Precedence
• Order of priority in which operations in an
  expression are evaluated
• Expressions are evaluated
• On a left-to-right basis
• With the highest priority precedence evaluated
  first

71
Expressions and Operators

• Operator Precedence
• Parentheses/brackets/dot (( ) .)
• Negation/increment (! - -- typeof void)
• Multiplication/division/modulus ( / )
• Addition/subtraction ( -)
• Comparison (lt lt gt gt)
• Equality ( !)
• Logical AND ()
• Logical OR ()
• Assignment operators ( - / )
• Comma (,)

72
Decision Making Statements

• if statements
• ifelse statements
• Nested if statements
• switch statements

73
Decision Making

• Decision Making
• Process of determining the order in which
  statements execute in a program
• AKA flow control
• Decision-Making Structures
• Special type of JavaScript statements used for
  making decisions

74
Decision Making

• if Statements
• Used to execute specific programming code if the
  evaluation of a conditional expression returns a
  value of true
• Do this or dont do this
• Syntax (3 primary parts)
• if (conditional_expression)
• statement(s)

75
Decision Making

• if Statements
• Operation
• If the conditional expression is true, the
  statement(s) is/are executed
• Control then continues to subsequent code
• Command block
• Multiple statements contained within a set of
  braces (require curly braces)

76
(No Transcript)
77
(No Transcript)
78
(No Transcript)
79
Decision Making

• if Statements
• Conditional Expression
• Can consist of
• Comparison operators
• Logical operators
• Combination of the two
• Must resolve to Boolean value

80
Decision Making

• ifelse Statements
• Used to execute one set of code if the evaluation
  of a conditional expression returns a value of
  true, otherwise executes another set of code
• Do this or do something else
• Syntax
• if (conditional_expression)
• statement(s)
• else
• statement(s)

81
(No Transcript)
82
Decision Making

• Nested if and ifelse Statements
• Nested statements
• Statements contained within other statements
• Syntax (variable)
• if (conditional_expression)
• statement(s)
• if (conditional_expression)
• statement(s)
• else
• statement(s)

83
(No Transcript)
84
(No Transcript)
85
Decision Making

• switch Statements
• Controls program flow by executing a specific set
  of statements, depending on the value of an
  expression
• Syntax switch (expression)
• case label1
• statement(s)
• break
• case label2
• statement(s)
• break
• default
• statement(s)

86
Decision Making

• switch Statements
• Case labels
• Identify specific code segments
• Can use a variety of data types as case labels
• Break statement
• Used to exit switch statements
• Default label
• Contains statements that execute when the
  condition expression doesnt match any of the
  case labels

87
(No Transcript)
88
Repetition Statements

• while statements
• dowhile statements
• for statements
• forin statements
• with statements
• continue statements

89
Repetition

• Repetition
• The if, ifelse and switch statements select only
  a single branch of code to execute, then continue
  to the statement that follows
• Loop statements
• Repeatedly execute a statement or a series of
  statements while a specific is true or until a
  specific condition becomes true

90
Repetition

• while Statements
• Used for repeating a statement or a series of
  statements as long as a given conditional
  expression evaluates to true
• Typically uses a counter to keep track of
  iteration
• Syntax
• while (conditional_expression)
• statement(s)

91
Repetition

• while Statements
• Example
• var count 1
• while (count lt 5)
• document.writeln(count)
• count
• document.writeln(You have printed 5 numbers.)

92
(No Transcript)
93
Repetition

• while Statements
• Example
• var count 10
• while (count gt 0)
• document.writeln(count)
• --count
• document.writeln(We have liftoff.)

94
(No Transcript)
95
Repetition

• while Statements
• Example
• var count 1
• while (count lt 100)
• document.writeln(count)
• count 2

96
(No Transcript)
97
Repetition

• while Statements
• Infinite loop
• A situation in which a loop statement never ends
  because the conditional expression is never
  updated or is never false
• Need to include code within the body of the while
  statement that changes some part of the
  conditional expression
• Should also include code that monitors the
  conditional expression

98
Repetition

• dowhile Statements
• Executes a statement or statements once, then
  repeats the execution as long as a given
  conditional expression evaluates to true
• Do once, then test to see if it is done again
• Syntax
• do
• statement(s)
• while (conditional_expression)

99
(No Transcript)
100
(No Transcript)
101
Repetition

• for Statements
• Used for repeating a statement or series of
  statements as long as a given conditional
  expression evaluates to true
• Do for a prescribed number of iterations
• Syntax
• for (initialization_expression condition
  update_statement)
• statement(s)

102
Repetition

• for Statements
• Steps in processing a for loop
• Initialization expression is started
• Only occurs once, when loop is first encountered
• Evaluate condition
• If condition true ? execute loop body, go to
  next step
• If condition false ? for statement ends
• Execute update statement
• Then return to condition evaluation

103
(No Transcript)
104
(No Transcript)
105
(No Transcript)
106
Repetition

• break Statements
• Stop executing the looping statement
• continue Statements
• Halts a looping statement and restarts the loop
  with a new iteration

107
(No Transcript)
108
(No Transcript)
109
(No Transcript)