JavaScript Console

1
JavaScript Console

• When some of you have had problems with your
  JavaScript, you may have seen me use this tool to
  figure out the problem
• A key tool for debugging JavaScript is the
  JavaScript Console
• Access Netscape menu Tasks / Tools to open the
  JavaScript Console

2
JavaScript Console

• As your JavaScript program is running If it has
  any programming errors, the JavaScript Console
  displays appropriate warnings/error messages
• The Console acts like an error log. It displays
  all errors encountered since it was last cleared
• You can clear the logged messages with the clear
  button on the menu bar
• It is a good idea to clear out old messages
  before starting to debug your JavaScript program

3
JavaScript Console

• Open the JavaScript Console now
• Do you see any error/warning messages?
• If so, clear them. They are left over from
  running previous JavaScript programs on this
  machine (A scary thought, huh?)
• Now, lets run your web page and look at the
  JavaScript Console
• Do you see any error/warning messages?

4
JavaScript Console

• If the JavaScript Console shows any error or
  warning messages, try to determine cause of the
  problem that it is flagging in your code
• If the JavaScript Console doesnt show any
  messages, artificially create an error in your
  JavaScript to see the error message it prints
• Take a quoted string and delete closing
  character to create an un-terminated string

5
JavaScript Console

• Notice that you dont get any indication of the
  nature of the problem in the browser window
  just a blank page. Not too useful!
• Notice that the JavaScript Console flags a
  specific line and provides an indication of the
  type of error in that line. Very useful!
• Try some other errors leave out a closing on
  a line, leave out a closing ) on a line

6
JavaScript

• HTML works! Why need for JavaScript?
• HTML is good for web page display, e.g. to show
  mix of text, graphics, hyperlinks, etc.
• HTML has no capability to do calculations or make
  logical decisions about what to do
• JavaScript is much better for these purposes
• HTML and JavaScript work well together

7
JavaScript

• Tag pair within HTML head or body
• ltscript languageJavaScriptgt
• Javascript statements here ending with
• lt/scriptgt
• JavaScript is a different language from HTML with
  different rules for writing the code

8
JavaScript Comments/Statements

• JavaScript comments (two types)
• // single line comment no need to end
• / multi-line comment
• need to end it with a /
• All other JavaScript statements end with a
• JavaScript statement

9
JavaScript Variables

• Variables are names used to hold a value
• var x
• Variable is a name for a location in memory
• A location in memory is like a box or folder that
  can hold a value
• A value can be
• A number such as 42
• A string such as Save the whales.

10
Variable Types

• Variables are untyped and can hold any type of
  value (e.g. strings, numbers, or boolean)
• A string is character sequence, e.g. abc or
  0.5
• An number is a numeric value, e.g. 153 or 0.5
• A boolean is a true or false value
• Can add/subtract/multiply/divide numbers
• Cant add/subtract/multiply/divide strings

11
Setting Value of Variables

• You can set the value of a variable with and a
  numeric, string, or boolean constant
• var x 42
• var x Save the whales.
• var x true
• Note If you want a number, do not include it in
  double quotes. If you want a string, do include
  it in double quotes.

12
Assignments/Expressions

• Expressions are formulas computing a value
• There are three types of expressions based on the
  type of value that they calculate
• Numeric
• String
• Boolean

13
Numeric Expressions

• For a numeric value, you use variable names and
  operations in an algebraic formula
• var a 5
• var b 2
• var c 4
• var x a b c
• x now holds 3 ( 5 2 4)

14
String Expressions

• For a string value, you use text strings and
  variable names with between them
• var a Save the whales.
• var b They will thank you.
• var x a It is a noble cause. b
• x now holds Save the whales. It is a noble
  cause. They will thank you.

15
Boolean Expressions

• We can only make a decision based on a boolean
  (true or false) value
• We need to convert a number or string into a
  boolean value to use it for a decision
• var x (a 0) (if a is an integer)
• OR
• var x (a ! stop) (if a is a string)

16
Relations

• A relation is used to calculate a boolean value
• A relation contains a variable or expression, a
  logical operator, and another variable or
  expression
• a 0 (true if a is equal to 0)
• a ! stop (true if a is equal to stop)
• (x 1) (a b c) (true when?)

17
Experiment with Variables

• Define some variables in your JavaScript
• Assign values to them.
• Try all three types
• Numeric values
• String Values
• Boolean Values (using a relation)