Chapter 7 JavaScript: Introduction to Scripting

Outline Simple Programs Objects and Variables Obtaining User Input with prompt Dialogs – –Dynamic Welcome Page – –Adding Integers Arithmetic Decision Making: Equality and Relational Operators

Introduction JavaScript is an interpreted, scripted, programming language JavaScript is an interpreted, scripted, programming language –Core syntax resembles C++ and Java –has some object-oriented capabilities Web browsers contain a JavaScript interpreter Web browsers contain a JavaScript interpreter Use JavaScript to Use JavaScript to –Enhances functionality and appearance –Makes pages more dynamic and interactive –etc…

JavaScript JavaScript is case sensitive JavaScript is case sensitive Statements in JavaScript end in a semi- colon Statements in JavaScript end in a semi- colon JavaScript code is often embedded in the section of the document JavaScript code is often embedded in the section of the document JavaScript code in the section is executed before any XHTML code in the of the document JavaScript code in the section is executed before any XHTML code in the of the document

JavaScript Use the element to embed JavaScript code within your XHTML: Use the element to embed JavaScript code within your XHTML: –e.g. document.writeln (" Welcome to COSC 2956 ") document.writeln (" Welcome to COSC 2956 ")</script> – type attribute Specifies the type of file and the scripting language use Specifies the type of file and the scripting language use – writeln method Write a line in the document Write a line in the document

JavaScript JavaScript code can be shielded with XHTML comments: JavaScript code can be shielded with XHTML comments: – – –needed for proper validation <!-- // our first JavaScript code snippet document.title = "Welcome to COSC 2956"; // --> </script> Comments within JavaScript code can be: Comments within JavaScript code can be: –single-line style: // my single-line comment –multi-line style: /* … my multi-line comment... */

Objects An object consists of An object consists of –properties (attributes) –methods (behaviour) Properties define the characteristics of an object Properties define the characteristics of an object –e.g., a browser document has a 'title' property Methods define the functions that an object can perform Methods define the functions that an object can perform –e.g., a browser window can be resized programmatically by using the resizeTo( ) method

Objects To use a property of an object, use the following syntax: objectName.propertyName To use a property of an object, use the following syntax: objectName.propertyName –For example: document.title = "My title " window.defaultStatus = "Everything is A-OK" To use a method of an object, use the following syntax: objectName.methodName( ) To use a method of an object, use the following syntax: objectName.methodName( ) –For example, to resize the browser width and height: window.resizeTo( 600, 400 )

The document Object Every window object has a document object, that allows you to access properties and methods of the document currently loaded into the browser Every window object has a document object, that allows you to access properties and methods of the document currently loaded into the browser Some document properties: Some document properties: –bgColor, fgColor - background and foreground colour of the document –alinkColor, linkColor, vlinkColor - colours for hypertext links –URL - the URL of the current document –referrer - the URL of the document with the link that loaded this document –title - the title of the document –lastModified - the modification date of the document Some document methods Some document methods –write( ) –writeln( )

document.writeln( ) Use the document.writeln( ) method to dynamically generate XHTML code Use the document.writeln( ) method to dynamically generate XHTML code Pass writeln( ) the XHTML code that is to be rendered, as a quoted string; e.g., Pass writeln( ) the XHTML code that is to be rendered, as a quoted string; e.g., –document.writeln(" First Heading "); writeln( ) writes a line of XHTML markup and positions the output cursor at the beginning of the next line (of the code being generated, not the rendered document) writeln( ) writes a line of XHTML markup and positions the output cursor at the beginning of the next line (of the code being generated, not the rendered document) XHTML validator does not catch errors in HTML embedded in JavaScript XHTML validator does not catch errors in HTML embedded in JavaScript

The window Object Every web browser window is represented by a window object Every web browser window is represented by a window object A window object defines properties and methods that allow you to manipulate the web browser window A window object defines properties and methods that allow you to manipulate the web browser window Some window properties: Some window properties: –defaultStatus - text that appears in the status line of the browser Some window methods: Some window methods: –alert( ), confirm( ), prompt( ) - simple dialog boxes –close( ) - close the window –open( ) - open a new top-level window to display a document –print( ) - print the contents of the window –resizeBy( ), resizeTo( ) - resize the window –moveTo( ) - move the window

Variables Use a variable to store, manipulate and retrieve a value from memory during program execution Use a variable to store, manipulate and retrieve a value from memory during program execution A variable can hold a variable of any type A variable can hold a variable of any type –x = 12; –x = "123"; Declare variables with the var keyword Declare variables with the var keyword var x; var y = "abd"; var myInt = 1, myFloat = 2.4; Variables that are declared but not initialized are undefined. Trying to print them produces the string literal "undefined" Variables that are declared but not initialized are undefined. Trying to print them produces the string literal "undefined" Attempting to read the value of a variable that is not declared causes a run-time error Attempting to read the value of a variable that is not declared causes a run-time error

welcome5.html (1 of 2)

Fig. 7.7Prompt dialog displayed by the window objects prompt method. This is the prompt to the user. This is the default value that appears when the dialog opens. This is the text field in which the user types the value. When the user clicks OK, the value typed by the user is returned to the program as a string.

Example: Adding Integers Prompt user for two integers and calculate the sum (Fig. 7.8) Prompt user for two integers and calculate the sum (Fig. 7.8) parseInt parseInt –Converts its string argument to an integer

Addition.html (1 of 2)

Addition.html (2 of 2)

Arithmetic Many scripts perform arithmetic calculations Many scripts perform arithmetic calculations –Expressions in JavaScript must be written in straight-line form

Equality and Relational Operators Decision based on the truth or falsity of a condition Decision based on the truth or falsity of a condition –Equality operators –Relational operators

welcome6.html (1 of 3)

welcome6.html (2 of 3)

Operators Summary