1. © 2010 Robert K. Moniot1 Chapter 6 Introduction to JavaScript

2. © 2010 Robert K. Moniot2 Objectives ● Learn how to add a JavaScript program to a web page ● Learn basic JavaScript language elements ● Simple action statements ● Variable declarations ● Decisions

3. © 2010 Robert K. Moniot3 JavaScript Element Add a JavaScript program to your web page using the tag: program text here This can be in either the document head or the body. It can also be in an external file.

4. © 2010 Robert K. Moniot4 For (Very) Old Browsers Browsers of a certain age do not understand JavaScript. They don't know the tag and ignore it. This means they will try to interpret the JavaScript as HTML. Bad. Hide it inside an HTML comment:

5. © 2010 Robert K. Moniot5 A First JavaScript Program Today's Date document.write(" Today's date is "); document.write(Date()); document.write(" "); Resul t

6. © 2010 Robert K. Moniot6 Debugging ● Tools for debugging your scripts: ● Browser built-in debuggers: – IE: open Tools – Internet Options – Advanced. Make sure “Disable script debugging” boxes are not checked. If page has a JavaScript error, double-click on the warning icon in status bar to see what is wrong. – Firefox: if page has an error, use Tools – Error Console to see error reports. Exampl e

7. © 2010 Robert K. Moniot7 Debugging, cont'd ● External debuggers ● Microsoft Office includes JavaScript Debugger. It appears on IE View menu. ● For Firefox, there is Firebug. It also provides debugging for HTML and CSS. ● There are various third-party debuggers as well.

8. © 2010 Robert K. Moniot8 JavaScript Syntax ● A JavaScript program consists of a series of statements (commands). ● Each statement ends with a semicolon ;. (Can be omitted if statement is complete by end of line.) ● Statements can be grouped by enclosing them in curly braces { … }.

9. © 2010 Robert K. Moniot9 Built-In Methods ● Often, JavaScript programs use built-in methods (actions) to achieve their results. ● The Date() method is one example. In its simplest form it yields the current date and time. ● The document.write() and document.writeln() methods output text that is then interpreted as HTML. The latter appends a line break (unimportant in HTML). ExampleExample that produces the same result as before a slightly different way.

10. © 2010 Robert K. Moniot10 More About Methods Methods actually belong to objects. For instance, the document.write() method belongs to the document object. The syntax for accessing an object's method is to write the object name, then a dot (period) and the method name. The Date() method is different: it is an object constructor. We will see more about these later.

11. © 2010 Robert K. Moniot11 JavaScript Comments ● Comments are useful to help the reader of your program. They do not affect its operation. ● There are three ways to put comments in a JavaScript program: ● // comment text – ends at end of line ● /* comment text */ – can span multiple lines ● <!-- HTML-style comment – ends at end of line (The HTML-style comment form is only for hiding JavaScript from old browsers.)

12. © 2010 Robert K. Moniot12 Strings ● A string is a piece of text enclosed in quotation marks, e.g. "Hello, world!" ● No “smart quotes” please! If your text editor auto- corrects these, turn that feature off. ● Each string must fit on a line. Long lines are OK, but to break a string up, concatenate with + document.writeln("Here is a longish string " + "of text.");

13. © 2010 Robert K. Moniot13 Strings, cont'd ● Rendering ignores line breaks in HTML. To get line breaks in rendered document, include tags in strings. ● To put quote marks in string text, escape with backslash: \" yields a quote mark. ● If you need a backslash to appear, escape it with a backslash: \\ yields a single backslash. Exampl e

14. © 2010 Robert K. Moniot14 Variables ● These are named storage locations, used to hold values that may change. ● Valid names start with an alphabetic character and contain only alphabetic characters, digits, underscores or dollar signs. ● A common convention is for variable names to start with a lowercase letter. If the name is composed of multiple words, each later word is capitalized. Exampl e

15. © 2010 Robert K. Moniot15 Variables ● Variables are introduced into a program using the keyword var. (Actually var is optional, but it is wise to always use it.) ● Optionally a variable can be initialized in the declaration. ● Be sure to give each variable a value before using it! Exampl e

16. © 2010 Robert K. Moniot16 Arithmetic ● The last example illustrates arithmetic. The four basic operations are: + Add - Subtract * Multiply / Divide ● Use parenthesis () for grouping expressions.

17. © 2010 Robert K. Moniot17 Arithmetic Expressions ● Multiplication and division have higher precedence than addition and subtraction. ● At same precedence, evaluation is left to right. ● Expression is evaluated and then assigned, using = sign, to variable at the left. ● Fahrenheit = 1.8*Centigrade + 32; ● Centigrade = (Fahrenheit - 32)/1.8;

18. © 2010 Robert K. Moniot18 ● One way to get information to or from user at run time is through pop-up boxes: ● window.alert("text message"); Pops up a box with the message and OK button ● window.prompt("text prompt"); Pops up a dialog box for user to enter text Input & Output Exampl e

19. © 2010 Robert K. Moniot19 Pitfall with window.prompt ● This method always returns a text string. A text string that reads as a number is not a number! It can be converted to a number, and JavaScript converts it to a number when necessary, i.e. when used in arithmetic. ● However the + operator may mean add or concatenate, depending on context. Exampl e

20. © 2010 Robert K. Moniot20 Ways to Force Conversion ● Conversion of a string representing a number can be forced by putting it in a context where a number is required: firstNum = firstNum*1.0; ● Better way: parse the string into a number: firstNum = parseInt(firstNum); Exampl e

21. © 2010 Robert K. Moniot21 Decisions ● Sometimes an action is to be done only if some given condition is true if( condition ) statement-if-true; else statement-if- false; The statement-if-true is executed only if the condition is true. Otherwise the statement-if-false is executed.

22. © 2010 Robert K. Moniot22 Conditions ● A condition is a test whose result is either true or false. Typically a condition compares two values for equality or inequality. x == y x equals y x != y x not equal to y x > y x greater than y x >= y x greater than or equal to y x < y x less than y x <= y x less than or equal to y Exampl e

23. © 2010 Robert K. Moniot23 Decisions, cont'd ● The else part can be omitted. If so, then if the condition is false, nothing is done. ● To control more than one statement's execution, enclose a block of statements in braces. if( condition ){ statement; statement;... } Exampl e