Programming with JavaScript

(Chapter 10)

XPVarious things

• Midterm grades: Friday• Winter Career Fair– Thursday, April 28, 2011 (11 am to 3 pm).– MAC Gym, Wade King Student Rec Center – http://www.careers.wwu.edu/careerfair_specialevents.shtml

– bring resumes, dress in business attire, and research participating employers in advance.

XPObjectives• The script element • Basic JavaScript syntax• Write text to a Web page with JavaScript• JavaScript data types and variables• Create and call a JavaScript function• Access an external JavaScript file• Add comments to JavaScript code• Basic debugging techniques and tools• Example of a Javascript application• Examples of document.write() • Lab4 at http://faculty.wwu.edu/~granier/Spring2011/csci202/labs/lab04/ • LAB 3 ANSWERS

csci 202 3

XPThe Development of JavaScript

• Server-side vs Client-side programming• JavaScript is a subset of Java• Differences between Java and JavaScript:– Java is a compiled language– JavaScript is an interpreted language

csci 202 4

XPComparing Java and JavaScript

csci 202 5

XPThe Development of JavaScript

• Jscript is an IE version of JavaScript • ECMA– European Computer Manufacturers Association– develops scripting standards– The standard is called ECMAScript (aka JavaScript)

csci 202 6

XPWorking with the Script Element

• JavaScript code can either be placed– directly in a Web page file or– saved in an external text file

• Insert a client-side script in a Web page when using the script element<script type="mime-type">

script commands

</script>

csci 202 7

XPWriting Output to the Web Page

• Object: any item• Method: a process by which JS accesses properties of

an object• To write text to a Web page, use the following JS code:

document.write(“text”);

ordocument.writeln(“text”)’

where text is the content to be written to the page.

csci 202 8

XPUnderstanding JavaScript Syntax

• JavaScript is case sensitive• Ignores most occurrences of extra white space• Do not break a statement into several lines• The + symbol used in this command combines

several text strings into a single text string

csci 202 9

XPDeclaring a JavaScript Variable• Variable: named item designed to store information

– JS programs use variables to represent values and text strings

• You can declare variables with any of the following JavaScript commands:

var variable;var variable = value;variable = value;

where variable is the name of the variable and value is the initial value of the variable.

csci 202 10

XPWorking with Variables and Data

• JavaScript variable types:– Numeric variables– String variables– Boolean variables– Null variables

• You must declare a variable before using it

csci 202 11

XPWorking with Variables and Data

• Numeric variable:– any number, such as 13, 22.5, etc. – can also be expressed in scientific notation

• String variable:– any group of characters, such as “Hello” or “Happy Day!”– Must be enclosed within either double or single quotes

• Boolean variable– accepts only true and false values

• Null variable– has no value at all

csci 202 12

XPWorking with Variables and Data

• JavaScript is a weakly typed language• The + symbol can be used with either numeric

values or text strings

var total = 5 + 4;

var emLink = "cadler" + "@" + "mpl.gov";

csci 202 13

XPCreating a JavaScript Function

• A function is a collection of commands that performs an action or returns a value

• A function name identifies a function• Parameters are values used by the function• The function is executed only when called by

another JavaScript commandfunction_name(parameter values)

csci 202 14

XPCreating a JavaScript Function

csci 202 15

XPCreating a Function to Return a Value

• For a function to return a value, it must include a return statement

function function_name(parameters){

JavaScript commands

return value;

}

csci 202 16

XPAccessing an External JavaScript File

• The code to access an external script file is:

<script src="url" type="mime-type"></script>

• Place all script elements that reference external files in the document head

csci 202 17

XPCommenting JavaScript Code

• Commenting your code is very important

// comment rest of line• Or

/* comment block with many lines*/

csci 202 18

XPUsing Comments to Hide JavaScript Code

<script type="text/javascript">

<!--Hide from nonJavaScript browsers

JavaScript commands

// Stop hiding from older browsers -->

</script>

csci 202 19

XPDebugging Your JavaScript Programs

• Debugging is the process of searching code to locate a source of trouble

• There are three types of errors:– Load-time errors– Run-time errors– Logical errors

csci 202 20

XPDebugging Your JavaScript Programs

• Microsoft: Microsoft Script Debugger• Firefox: Firefox Error Console• Modular code entails breaking up a program’s

different tasks into small, manageable chunks• An alert dialog box can be generated to

display a text message with an OK button

alert(text);

csci 202 21