Chapter 7 JavaScript: Introduction to Scripting. Outline Simple Programs Objects and Variables Obtaining User Input with prompt Dialogs – –Dynamic Welcome.

Chapter 7Chapter 7

JavaScript: Introduction to JavaScript: Introduction to ScriptingScripting

OutlineOutline

• Simple Programs

• Objects and Variables

• Obtaining User Input with prompt Dialogs– Dynamic Welcome Page– Adding Integers

• Arithmetic

• Decision Making: Equality and Relational Operators

IntroductionIntroduction

• JavaScript is an interpreted, scripted, JavaScript is an interpreted, scripted, programming languageprogramming language– Core syntax resembles C++ and JavaCore syntax resembles C++ and Java– has some “object-oriented capabilities”has some “object-oriented capabilities”

• Web browsers contain a JavaScript Web browsers contain a JavaScript interpreterinterpreter

• Use JavaScript to Use JavaScript to – Enhances functionality and appearanceEnhances functionality and appearance– Makes pages more dynamic and interactive Makes pages more dynamic and interactive – etc…etc…

JavaScriptJavaScript

• JavaScript is JavaScript is case sensitivecase sensitive• Statements in JavaScript end in a Statements in JavaScript end in a

semi-colonsemi-colon• JavaScript code is often embedded in JavaScript code is often embedded in

the <head> section of the documentthe <head> section of the document• JavaScript code in the <head> section JavaScript code in the <head> section

is executed before any XHTML code in is executed before any XHTML code in the <body> of the documentthe <body> of the document


• Use the <script> element to embed Use the <script> element to embed JavaScript code within your XHTML:JavaScript code within your XHTML:– e.g.e.g.

<script type="text/javascript"><script type="text/javascript">

document.writeln ("<h1>Welcome to COSC 2956 document.writeln ("<h1>Welcome to COSC 2956 </h1>")</h1>")

</script></script>

– typetype attribute attribute• Specifies the type of file and the scripting language useSpecifies the type of file and the scripting language use

– writelnwriteln method method• Write a line in the documentWrite a line in the document


• JavaScript code can be shielded with XHTML comments: JavaScript code can be shielded with XHTML comments: – // -->– needed for proper validationneeded for proper validation

<script type="text/javascript"><script type="text/javascript">// -->

</script></script>• Comments within JavaScript code can be:Comments within JavaScript code can be:

– single-line style: single-line style: //// my single-line commentmy single-line comment– multi-line style: multi-line style: /*/* … … my multi-line commentmy multi-line comment ... ... */*/

1 <?xml version = "1.0"?>

2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

4

5 

6 

7

8 <html xmlns = "http://www.w3.org/1999/xhtml">

9 <head>

10 <title>A First Program in JavaScript</title>

11

12 <script type = "text/javascript">

13 

17 </script>

18

19 </head><body></body>

20 </html>




4

5 

6 

7


9 <head>

10 <title>Printing a Line with Multiple Statements</title>

11


13 

18 </script>

19

20 </head><body></body>

21 </html>




4


6 

7


9 <head><title>Printing Multiple Lines in a Dialog Box</title>

10


12 

15 </script>

16

17 </head>

18

19 <body>

20 <p>Click Refresh (or Reload) to run this script again.</p>

21 </body>

22 </html>

ObjectsObjects

• An object consists of An object consists of – properties (attributes)properties (attributes)– methods (behaviour)methods (behaviour)

• Properties define the characteristics of an Properties define the characteristics of an object object – e.g., a browser document has a 'e.g., a browser document has a 'titletitle' property' property

• Methods define the functions that an object Methods define the functions that an object can performcan perform– e.g., a browser window can be resized e.g., a browser window can be resized

programmatically by using the programmatically by using the resizeTo( ) resizeTo( ) methodmethod

ObjectsObjects

• To use a property of an object, use the To use a property of an object, use the following syntax: following syntax: objectName.propertyNameobjectName.propertyName– For example:For example:

document.title = "My title " document.title = "My title " window.defaultStatus = "Everything is A-OK"window.defaultStatus = "Everything is A-OK"

• To use a method of an object, use the To use a method of an object, use the following syntax: following syntax: objectName.methodName( objectName.methodName( <parameters> )<parameters> )– For example, to resize the browser width and For example, to resize the browser width and

height:height:window.resizeTo( 600, 400 )window.resizeTo( 600, 400 )

The document ObjectThe document Object

• Every window object has a Every window object has a documentdocument object, that allows object, that allows you to access properties and methods of the document you to access properties and methods of the document currently loaded into the browsercurrently loaded into the browser

• Some Some documentdocument properties: properties:– bgColor, fgColor - background and foreground colour of the bgColor, fgColor - background and foreground colour of the

documentdocument– alinkColor, linkColor, vlinkColor - colours for hypertext linksalinkColor, linkColor, vlinkColor - colours for hypertext links– URL - the URL of the current documentURL - the URL of the current document– referrer - the URL of the document with the link that loaded referrer - the URL of the document with the link that loaded

this documentthis document– title - the title of the documenttitle - the title of the document– lastModified - the modification date of the documentlastModified - the modification date of the document

• Some Some documentdocument methods methods– write( )write( )– writeln( ) writeln( )

document.writeln( )document.writeln( )

• Use the Use the document.writeln( )document.writeln( ) method to method to dynamically generate XHTML codedynamically generate XHTML code

• Pass writeln( ) the XHTML code that is to be Pass writeln( ) the XHTML code that is to be rendered, as a quoted string; e.g.,rendered, as a quoted string; e.g.,– document.writeln("<h1>First Heading</h1>");document.writeln("<h1>First Heading</h1>");

• writeln( ) writes a line of XHTML markup and writeln( ) writes a line of XHTML markup and positions the output cursor at the beginning of positions the output cursor at the beginning of the next line (of the code being generated, not the next line (of the code being generated, not the rendered document)the rendered document)

• XHTML validator does not catch errors in HTML XHTML validator does not catch errors in HTML embedded in JavaScriptembedded in JavaScript

The window ObjectThe window Object

• Every web browser Every web browser windowwindow is represented by a window is represented by a window objectobject

• A A windowwindow object defines properties and methods that allow object defines properties and methods that allow you to manipulate the web browser windowyou to manipulate the web browser window

• Some window properties:Some window properties:– defaultStatus - text that appears in the status line of the defaultStatus - text that appears in the status line of the

browser browser • Some window methods:Some window methods:

– alert( ), confirm( ), prompt( ) - simple dialog boxesalert( ), confirm( ), prompt( ) - simple dialog boxes– close( ) - close the windowclose( ) - close the window– open( ) - open a new top-level window to display a documentopen( ) - open a new top-level window to display a document– print( ) - print the contents of the windowprint( ) - print the contents of the window– resizeBy( ), resizeTo( ) - resize the windowresizeBy( ), resizeTo( ) - resize the window– moveTo( ) - move the windowmoveTo( ) - move the window

VariablesVariables

• Use a variable to store, manipulate and retrieve a value Use a variable to store, manipulate and retrieve a value from memory during program executionfrom memory during program execution

• A variable can hold a variable of any typeA variable can hold a variable of any type– x = 12;x = 12;– x = "123";x = "123";

• Declare variables with the Declare variables with the varvar keyword keywordvar x;var x;var y = "abd";var y = "abd";var myInt = 1, myFloat = 2.4;var myInt = 1, myFloat = 2.4;

• Variables that are declared but not initialized are Variables that are declared but not initialized are undefinedundefined. . Trying to print them produces the string literal "undefined"Trying to print them produces the string literal "undefined"

• Attempting to read the value of a variable that is not Attempting to read the value of a variable that is not declared causes a run-time errordeclared causes a run-time error

welcome5.htmlwelcome5.html(1 of 2)(1 of 2)


2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"

3 "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

4


6 

7


9 <head>

10 <title>Using Prompt and Alert Boxes</title>

11


13 

22 </script>

23

24 </head>

25

26 <body>


28 </body>

29 </html>

Fig. 7.7 Prompt dialog displayed by the window object’s prompt method.

This is the promptto 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 IntegersExample: Adding Integers

• Prompt user for two integers and Prompt user for two integers and calculate the sum (Fig. 7.8)calculate the sum (Fig. 7.8)

• parseIntparseInt– Converts its string argument to an Converts its string argument to an

integerinteger

Addition.htmlAddition.html(1 of 2)(1 of 2)




4

5 

6 

7


9 <head>

10 <title>An Addition Program</title>

11


13 

38 </script>

39

40 </head>

41 <body>

42 <p>Click Refresh (or Reload) to run the script again</p>

43 </body>

44 </html>

ArithmeticArithmetic

• Many scripts perform arithmetic Many scripts perform arithmetic calculationscalculations– Expressions in JavaScript must be written in Expressions in JavaScript must be written in

straight-line formstraight-line formJavaScript operation

Arithmetic operator

Algebraic expression

JavaScript expression

Addition + f + 7 f + 7

Subtraction - p – c p - c

Multiplication * bm b * m

Division /

x / y or or x y x / y

Remainder % r mod s r % s

Fig. 7.12 Arithmetic operators.

Equality and Relational Equality and Relational OperatorsOperators

• Decision based on the truth or falsity Decision based on the truth or falsity of a conditionof a condition– Equality operatorsEquality operators– Relational operatorsRelational operators

Standard algebraic equality operator or relational operator

JavaScript equality or relational operator

Sample JavaScript condition

Meaning of JavaScript condition

Equality operators = == x == y x is equal to y != x != y x is not equal to y Relational operators > > x > y x is greater than y < < x < y x is less than y >= x >= y x is greater than or

equal to y <= x <= y x is less than or

equal to y Fig. 7.15 Equality and relational operators.



2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"

3 "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

4


6 

7


9 <head>

10 <title>Using Relational Operators</title>

11


13 

43 </script>

44

45 </head>

46

47 <body>


49 </body>

50 </html>

Operators SummaryOperators Summary

Operators Associativity Type * / % left to right multiplicative + - left to right additive < <= > >= left to right relational == != left to right equality = right to left assignment Fig. 7.17 Precedence and associativity of the

operators discussed so far.

Chapter 7 JavaScript: Introduction to Scripting. Outline Simple Programs Objects and Variables Obtaining User Input with prompt Dialogs – –Dynamic Welcome.

Documents

javascript javascript

document javascript

javascript end

introduction javascript

case sensitive javascript

semi colon javascript

document slide

xhtml code