Server versus Client-Side Programming Server-Side Client-Side What is JavaScript? Embedding JavaScript in a Web Page • To place JavaScript in a Web page use the tag: <script type=”text/javascript”> script commands </script> • Each script command is a single line that indicates an action for the browser to take. • Each command ends with a semi-colon. • Place scripts anywhere. If placed in <head>, it is immediately interpreted and run. A Sample Command • To write text to a Web page with JavaScript, use the command: document.write(“text”); where text is the HTML code to be written to the Web page. • document is an example of an object (a thing you manipulate) • write is an example of a method (an action you perform on the object) Some JavaScript Syntax Rules • JavaScript is case sensitive • JavaScript ignores most occurrences of extra white space • In general, do not break a statement into several lines • The + symbol used in a command combines several text strings into a single text string, e.g. “Rick “ + “Bournique” is the same as “Rick Bournique” JavaScript Variables • A variable is a named item in a program that stores a data value • Variables should always be declared (reserve memory) but isn’t required by JavaScript • To declare a JavaScript variable: var variable; Example: var area, diameter; • To declare a JavaScript variable and set its initial value: var variable = value; Example: var pi = 3.14159; • Assignment: variable = value; Types of JavaScript Variables • Numeric: any number, such as 13, 22.5, -77 • Text: any group of text characters, such as “Hello” or ‘Happy Holidays!’ Must be enclosed within either double or single quotations (but not both) • Boolean:only true and false • Null: no value at all, e.g. x = null; • JavaScript is a weakly typed language. This is OK: total = 5 + 4; total = “face” + “book”; // 9 // facebook Creating a JavaScript Function • A function is a collection of commands that performs an • • • • action or returns a value. Good for reuse. General form: function function_name(parameters){ JavaScript commands return value; } Example: function CalculateArea(radius) { area = 3.14159 * radius * radius; return area; } Functions are not required to return values. Good practice to put all functions in <head> Calling a JavaScript Function • Once a function is created, you can call the function (i.e., run it). • Example: function CalculateArea(radius) { area = 3.14159 * radius * radius; return area; } var r = 10; a = CalculateArea(r); document.write(a); Function is called with a parameter, r, of 10. Placing JavaScript in an External File • To access an external JavaScript file: <script src="url" type="text/javascript "></script> where url is the URL of the external document Inserting Comments in JavaScript • Commenting your code is an important practice Debugging JavaScript • Debugging is the process of searching code to locate a source of trouble • Three types of errors can occur: • Load-Time Errors (also called compile-time or syntax) Example: area = 3.14159 * radius *radius • Run-Time Errors Example: area = 3.14159 * Radius *Radius; • Logical Errors Example: area = 13.14159 * radius *radius; A Useful Debugging Tool: Alert Functions • The alert function in JavaScript displays a dialog box that shows a text message with an OK button url = “cadler@mpl.gov”; alert(url);