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:

• toolsweb developmentJavaScript console• Toolsweb developmentJavaScript debugger

– Explorer• toolsadvancedenable script debugging• Note: I prefer Mozilla’s 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

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

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

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.

Inline JavaScript uses on---- attributes<input type="button"

value="useless button"

onclick="alert('you clicked the ' + this.value);" />

• 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

JavaScript anda Menu

<table><tr> <td align="center"> Select a Soda</td></tr><tr><td>

<select onchange="alert(this.selectedIndex);" > <option>coke</option><option>pepsi</option> <option>Dr. Pepper</option> </select></td></tr></table>

Explanation1.The onchange attribute only triggers when the selection changes2.The reserved word this refers to the current object3.The property, selectedIndex, indicates which option is selected

Concatenation

<form id='myForm'><table><tr><td colspan="2"> Concatenate two strings</td></tr><tr> <td><input type="text" size="5" id="first"/></td> <td><input type="text" size="5" id="second" /></td></tr><tr><td colspan="2" align="center"> <input type="button" value="click me" onclick= "alert('The result is ' +

document. getElementById('first').value + document.getElementById('second').value);" /></tr></table></form>

Concatenation glues strings together using the + operator

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: <img src=“dog.gif” alt=“dog” /> 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

Variables

• 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 doesn’t mean equal! It means evaluate the right side & store the

result in the variable on the left. It means store (or assign).

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

Dot Notation

• 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("<strong>hello</strong>");

'dot' notation: syntax to access an object's properties and methods

Be Careful: object, method, and property names are case sensitive

Finding tags in JavaScript1. Use the document.getElementById method (The preferred approach)

<input type="text" size="5" id="data" /><script type="text/JavaScript"> var tag = document.getElementById("data"); alert(tag.value);</script>

2. Use the name field of the form and GUI components (Older way that only works with tags in a form)

<form name="myForm"><input type="text" size="5" name="nameData" /></form><script type="text/JavaScript"> var tag = document.myForm.nameData.value; alert(tag);</script>

• Explanation: Create a variable called tag that contains the <input> tag object and then display the object’s value attribute in a popup window.

Document Object Model (DOM)

<table> <tbody> <tr> <td>Shady Grove</td> <td>Aeolian</td> </tr> <tr> <td>Over the River, Charlie</td> <td>Dorian</td> </tr> </tbody> </table>

Document are represented in a tree structure.

JavaScript can alter the web-display by changing the DOM

Definition: Web page structure available to JavaScript

DOM - Continued

Browsers organize the display window into self contained objectsNote: the square braces represent tables (more later)

Types, Numbers, and Strings

• 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

Definition: A type identifies the kind of data that a variable holds

Precedence 1. var x = 3*4 + 2;2. var x = 3 * (4 + 2);3. var x = 2 + 3 * 44. var x = 2 + 3 / 45. var x = 5; alert(x++); alert(x);6. var x = 5; alert(++x); alert(x);7. var x = 5; x+=3; alert(x);8. var x=5; x-=3; alert(x);9. var x=5; x*=3; 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));

1. ++, -- before a variable2. * and /3. + and –4. Math function calls5. +=, *=, -=, /=6. ++,-- 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

Definition: Order of operations

JavaScript References

• The Standard:http://www.ecma-international.org/publications/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

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?