Debugging

1
Debugging

• Types of errors
• Syntax (grammatical and spelling errors)
• Logic or run-time (when the program runs)
• Management (i.e. Failure to upload the correct
  version)
• Browsers can help find syntax errors
• Mozilla
• tools?web development?JavaScript console
• Tools?web development?JavaScript debugger
• Explorer
• tools?advanced?enable script debugging
• Note I prefer Mozillas version
• More complex debugging tools exist (beyond this
  course's scope)
• Techniques for finding runtime and management
  errors
• Desk check first to run eliminates obvious
  problems
• You can isolate errors using alert messages

2
Nature of Computer Execution

• Imperative (Command Driven)
• Computers execute one instruction at a time in
  sequence
• Storage based (Memory Driven)
• Central is getting from storing into memory
• Definition A variable is a place in memory that
  holds a value
• Central JavaScript concepts
• Create variables
• Find HTML tags
• Manipulate those tags

3
Central Definitions to JavaScript

• Variable A place in memory that holds a value
• Function A block of instructions called by name
  that may return a value
• Object A collection of properties and methods
• Method A function inside an object
• Property A variable inside an object
• Identifier The name given to a variable, method,
  or function
• Escape sequence A backslash followed by a letter
• \ for a quote, \n for a new line, \t for a tab,
  and others
• String sequence of letters enclosed by a single
  or double quote
• Concatenation gluing strings together with the
  operator

4
Comments (ignored by browsers)

• Multi-line JavaScript comments / big
  long comment, all ignored
  /
• Single line JavaScript comment// I'm a single
  line comment.// Everything to the right of the
  // is ignored.

5
Inline JavaScript uses on---- attributes

• ltinput type"button" value"useless
  button"
• onclick"alert('you clicked the '
  this.value)" /gt
• A list of on--- attributes
• onmouseover, onmouseout, onselect, onclick,
  onchange
• onblur, onfocus, onresize, onmove,
• onsubmit, onreset, onabort, onerror, onload,
  onunload
• Notes
• 'this.value' refers to the current object
• The ' in the alert statement is using
  concatenation

Common Error missing between things being
concatenated
6
JavaScript anda Menu

• lttablegt
• lttrgt
• lttd align"center"gt
• Select a Sodalt/tdgt
• lt/trgtlttrgtlttdgtltselect onchange"alert(this.selecte
  dIndex)" gt
• ltoptiongtcokelt/optiongtltop
  tiongtpepsilt/optiongt
• ltoptiongtDr.
  Pepperlt/optiongt
• lt/selectgtlt/tdgt
• lt/trgtlt/tablegt

• Explanation
• The onchange attribute only triggers when the
  selection changes
• The reserved word this refers to the current
  object
• The property, selectedIndex, indicates which
  option is selected

7
Concatenation

• ltform id'myForm'gt
• lttablegt
• lttrgtlttd colspan"2"gt
• Concatenate two stringslt/tdgt
• lt/trgtlttrgt
• lttdgtltinput type"text" size"5"
  id"first"/gtlt/tdgt
• lttdgtltinput type"text" size"5" id"second"
  /gtlt/tdgt
• lt/trgtlttrgtlttd colspan"2" align"center"gt
• ltinput type"button" value"click me"
• onclick
• "alert('The result is '
  document. getElementById('first').value
• document.getElementById('second').
  value)" /gt
• lt/trgtlt/tablegtlt/formgt

Concatenation glues strings together using the
operator
8
Browsers and Objects

• Browsers organize the display into objects
• Objects consist of
• A collection of properties (The nouns and
  adjectives)
• A collection methods that operate on the
  attribute (The verbs)
• Example ltimg srcdog.gif altdog /gt is an
  image tag object has properties src and alt.
• Objects provided to JavaScript by browsers
• window The browser window
• parent For frames, this is the document defining
  the frame
• document The current web page
• history A record of pages visited
• HTML tags Every HTML tag is an object
• location The name of the page displayed
• others Browsers provide many other objects
  besides these

9
Variables
Definition A place in memory where we can store
a value or object

• Example JavaScript statements to create variables
• Create one variable var answer
• Create two variables in one line var ans1, ans2
  
• Create a variable holding an initial value var
  ten 10, Ten "10"
• Access the value a variable holds
• Replace the value in a variable with a number
  answer 42
• Replace the value in a variable with a string
  answer "George
• Display a value in a variable in a popup window
  alert(answer)
• Rules for naming and accessing variables
• You cannot use a variable till you first declare
  it
• You cannot declare two variables with the same
  name
• The last thing stored in a variable replaces what
  was there before
• Variable names consist of alphabetic letters,
  numbers, underscores. No spaces!!
• Equal doesnt mean equal! It means evaluate the
  right side store the result in the variable on
  the left. It means store (or assign).

10
Dot Notation
'dot' notation syntax to access an object's
properties and methods

• Display a pop up window call window object's
  alert methodJavaScript alert("hello") or
  window.alert("hello")Note window is the
  default object typing window.alert is not
  necessary
• Change a page Alter the location object's href
  propertyJavaScript location.href
  http//www.yahoo.com
• Go to the previous page call history object's
  back() and next() methodJavaScript
  history.back() or history.next()
• Go back three pages call history object's go
  method JavaScript history.go(-3)
• Change background color change document object's
  bgColor propertyJavaScript document.bgColor"red
  " or document.bgColor"ff0000
• Change the title change document object's title
  propertyJavaScript document.title "I'm a
  better title"
• Write into a web page call document object's
  write methodJavaScript document.write("ltstronggth
  ellolt/stronggt")

Be Careful object, method, and property names
are case sensitive
11
Finding tags in JavaScript

• Use the document.getElementById method (The
  preferred approach)ltinput type"text" size"5"
  id"data" /gtltscript type"text/JavaScript"gt
  var tag document.getElementById("data")
  alert(tag.value)lt/scriptgt
• Use the name field of the form and GUI components
  (Older way that only works with tags in a
  form)ltform name"myForm"gtltinput type"text"
  size"5" name"nameData" /gtlt/formgtltscript
  type"text/JavaScript"gt var tag
  document.myForm.nameData.value
  alert(tag)lt/scriptgt
• Explanation Create a variable called tag that
  contains the ltinputgt tag object and then display
  the objects value attribute in a popup window.

12
Document Object Model (DOM)
Definition Web page structure available to
JavaScript

• lttablegt
• lttbodygt
• lttrgt
• lttdgtShady Grovelt/tdgt
• lttdgtAeolianlt/tdgt
• lt/trgt
• lttrgt
• lttdgtOver the River, Charlielt/tdgt
• lttdgtDorianlt/tdgt
• lt/trgt
• lt/tbodygt
• lt/tablegt

Document are represented in a tree structure.
JavaScript can alter the web-display by changing
the DOM
13
DOM - Continued
Browsers organize the display window into self
contained objects Note the square braces
represent tables (more later)
14
Types, Numbers, and Strings
Definition A type identifies the kind of data
that a variable holds

• A String
• Sequences of characters enclosed in single or
  double quotes
• Examples "abc", "abc\'def", "123", '456
• Tag object properties are strings
• A Number
• A series of digits including a possible decimal
  point
• Examples 123, 456, 1.222
• Differences You CANNOT perform numeric
  calculations on strings
• Concatenation "123" "456" ? "123456
• Addition 123 456 produces 579
• "12" / "3" is illegal
• Convert string to number parseFloat("12") /
  parseFloat("3") ? 4
• Types (JavaScript supports numbers, Strings,
  Boolean (true/false))
• Example x 10 followed by x "joe" replaces a
  number by a string

15
Precedence

1. var x 34 2
2. var x 3 (4 2)
3. var x 2 3 4
4. var x 2 3 / 4
5. var x 5 alert(x) alert(x)
6. var x 5 alert(x) alert(x)
7. var x 5 x3 alert(x)
8. var x5 x-3 alert(x)
9. var x5 x3 alert(x)
10. alert(Math.sqrt(16))
11. alert(Math.pow(3, 5)
12. alert(Math.random())
13. alert(Math.round(10.5))
14. alert(Math.floor(10.999))
15. alert(Math.PI)
16. alert(Math.ceil(10.3))

Definition Order of operations

• , -- before a variable
• and /
• and
• Math function calls
• , , -, /
• ,-- after a variable
• Note Override precedence with parenthesis
• Note The '' means multiplication.
• Note The spelling of the Math object is case
  sensitive

Answers 14, 18, 14, 2.75, 5 and 6, 6 and 6, 8,
2, 15, 4, 243, 0.53323, 11, 10, 3.14159, 11
16
JavaScript References

• The Standardhttp//www.ecma-international.org/pu
  blications/standards/Ecma-262.htm
• Microsoft Version (Jscript)
• http//Msdn.microsoft.com/library (click on Web
  Development and then on Scripting)
• More sites
• www.JavaScript.com
• http//JavaScript.internet.com
• http//www.js-examples.com/
• http//www.w3schools.com/js/js_examples.asp
• http//www.pages.org/JavaScript/

There are many free Scripts to incorporate into
your pages
17
Review Questions

• What is a variable?
• How do you hide JavaScript from browsers that are
  unaware?
• What does the JavaScript alert statement do?
• When do browsers execute JavaScript code?
• What is a variable type?
• How do you debug JavaScript code?
• What are the three control structures that almost
  every programming language uses?
• How do you separate JavaScript statements?
• What is a break sequence?
• What characters does JavaScript use to enclose
  strings?
• Which object controls recently accessed
  web-sites?
• What keyword refers to the current tag?
• What are several objects that browsers know
  about?
• Why is window.alert("hello") the same as
  alert("hello")?
• What is the Document Object Model?
• What is an object?