1

XP

Working with JavaScriptWorking with JavaScript

Creating a Programmable Web Page for North Pole Novelties

Tutorial 10

2

XPIntroduction to JavaScriptIntroduction to JavaScript

• Server-side Programs pose problems

• Client-side Programs were developed to run programs and scripts on the client side of a Web browser

3

XPThe Development of JavaScriptThe Development of JavaScript

• JavaScript is a subset of Java

• Differences between Java and JavaScript:• Java is a compiled language• JavaScript is an interpreted language

4

XPComparing Java and JavaScriptComparing Java and JavaScript

5

XPThe Development of JavaScriptThe Development of JavaScript

• Jscript is a version of JavaScript supported by Internet Explorer

• The European Computer Manufacturers Association (ECMA) develops scripting standards• The standard is called ECMAScript but browsers still

generally call is JavaScript

6

XPInserting JavaScript into a Web

Page FileInserting JavaScript into a Web

Page File

• Outline the main tasks you want the program to perform first

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

7

XPInserting JavaScript into a Web

Page FileInserting JavaScript into a Web

Page File

• Insert a client-side script in a Web page when using the script element - placed anywhere - some prefer head section others body section

• Comments are useful for hiding scripts from older browsers

• Specify alternative content using the nonscript element for browsers that don’t support scripts (or have their script support disabled)

8

XPWriting Output to the Web PageWriting Output to the Web Page

• An object-oriented programming language writes the output by manipulating tasks

• An action you perform on an object is called a method

9

XPWriting Output to the Web PageWriting Output to the Web Page

• To write text to a Web page, use the following JavaScript commands:document.write(“text”);

or

document.writeln(“text”)’

Where text is the content to be written to the page. The doucment.write() and document.writeln() methods are identical, except that the document.writeln() method preserves any line breaks in the text string - only with the pre element.

10

XPWorking with Variables and DataWorking with Variables and Data

• A variable is a named item in a program that stores information - use somewhere else - can change

• Variable names have restrictions and are case-sensitive

11

XPWorking with Variables and DataWorking with Variables and Data

• JavaScript variable types:• Numeric variables - 13, 22.5, -7• String variables - “hello”• Boolean variables - T or F• Null variables - no value

• You must declare a variable before using it• Var command - at beginning of program with

comments

12

XPDeclaring a JavaScript VariableDeclaring a JavaScript Variable

• 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. The first command creates the variable without assigning it a value; the second and third commands both create the variable and assign it a value.

13

XPWorking with DatesWorking with Dates

• To store information about date - create a date object

• Retrieving the day value - form that is useful - stored as milliseconds - can be used in numerical calculations

• Use built in java date methods• getDate() method• Retrieving the month value• Retrieving the year value

14

XPWorking with DatesWorking with Dates

• Create a date object to store date information

Date Methods

15

XPWorking with Expressions and

OperatorsWorking with Expressions and

Operators

• Expressions are JavaScript commands that assign values and variables

• Operators are elements that perform actions within expressions• Arithmetic operators: perform simple mathematical calculations

• Binary operators: work on two elements in an expression

• Unary operators: work on only one variable

• Increment operators: can be used to increase the value of a variable by 1

• Assignment operators: used to assign values in expressions

16

XPWorking with Expressions and

OperatorsWorking with Expressions and

Operators

• The Math object is a JavaScript object used for calculations other than simple math

17

XPCreating JavaScript FunctionsCreating JavaScript Functions

• A function is a series of commands that perform an action or calculates a value

• A function name identifies a function

• Parameters are values used by the function

18

XPCreating JavaScript FunctionsCreating JavaScript Functions

• A group of commands set off by curly braces is called a command block. Command blocks exist for other JavaScript structures in addition to functions.

19

XPWorking with Conditional

StatementsWorking with Conditional

Statements

• Conditional statements are commands that run only when specific conditions are met

• Conditional statements require a Boolean expression• you need one of the following operators to create a

Boolean expression:• Comparison operator

• Logical operator

• Conditional operator

20

XPUsing ArraysUsing Arrays

• An array is an ordered collection of values referenced by a single variable name

var variable = new Array (size);

Where variable is the name of the array variable and

size is the number of elements in the array

21

XPWorking with Program LoopsWorking with Program Loops

• A program loop is a set of instructions that is executed repeatedly• Use program loops to configure a group of commands

to be executed a set number of times• The loop uses a counter to track the number of times

the command block has been run

22

XPWorking with Program LoopsWorking with Program Loops

Creating a For loop

23

XPWorking with Program LoopsWorking with Program Loops

Nesting a For loop

24

XPWorking with Program LoopsWorking with Program Loops

Creating a While loop

25

XPWorking with Program LoopsWorking with Program Loops

Nesting a While loop

26

XPDebugging Your JavaScript

ProgramsDebugging Your JavaScript

Programs

• Three types of errors:• Load-time errors (occurs when the script is loading)• Run-time errors (occurs when the being executed)• Logical errors (free from syntax and structural

mistakes, but result in incorrect results)

27

XPCommon MistakesCommon Mistakes

• You need to debug your program to fix the mistakes

• Common mistakes include:• Misspelling a variable name• Mismatched parentheses or braces• Mismatched quotes• Missing quotes• Using ( instead of [• Using = in place of ==

28

XPDebugging Tools and TechniquesDebugging Tools and Techniques

• To avoid making mistakes and quickly located those you do make:• Write modular code• Use the Microsoft Script Debugger to debug (for use

with Internet Explorer)• Use the Netscape JavaScript Console to debug (for

use with Netscape)

29

XPTips for Writing Good JavaScript

CodeTips for Writing Good JavaScript

Code

• Use good layout to make your code more readable. Indent command blocks to make them easier to read and to set them off from other code

• Use descriptive variable names to indicate the purpose of your variables

• Be careful how you use uppercase and lowercase letters in your code, because JavaScript commands and names are case-sensitive

30

XPTips for Writing Good JavaScript

CodeTips for Writing Good JavaScript

Code

• Add comments to your code to document the purpose of each script

• Initialize all variables at the top of your script and insert comments describing the purpose and nature of your variables

• Create customized functions that can be reused in different scripts. Place your customized functions in external files to make them available to your entire Web site