Programming with JavaScript

1
Programming with JavaScript

• cis311

2
Agenda

• Learn about fundamentals of client-side scripting
  with JavaScript
• Variables and data
• expressions and operators
• JavaScript function
• arrays and conditional statements
• program loops

3
Introduction to JavaScript

• JavaScript is an interpreted programming or
  script language from Netscape.
• JavaScript is used in Web site development to
• automatically change a formatted date on a Web
  page
• cause a linked-to-page to appear in a popup
  window
• cause text or a graphic image to change during a
  mouse rollover
• Resource www.whatis.com

4
Client-Side Programs

• Client-side programs
• solve many of the problems associated with
  server-side scripts
• computing is distributed over the Web, so that no
  one server is overloaded with programming
  requests
• can be tested locally without first uploading it
  to a Web server
• are likely to be more responsive to the user
• can never completely replace CGI scripts

5
Comparison of Java and JavaScript
6
ECMAScript

• European Computer Manufacturers Association
  (ECMA) responsible for development of a scripting
  standard
• ECMA standard called ECMAScript
• though browsers still refer to it as JavaScript.
• The latest version is ECMA-262, which is
  supported by the major browsers.
• http//www.ecma-international.org/publications/sta
  ndards/Ecma-262.htm
• Standards document http//www.ecma-international.
  org/publications/files/ECMA-ST/Ecma-262.pdf

7
Working with JavaScript Objects

• JavaScript is an object-based language.
• JavaScript is based on manipulating objects by
  modifying an objects properties or by applying
  methods to an object.
• objects are items with a defined existence
• each object has properties that describe its
  appearance, purpose, or behavior
• each object has methods, which are actions that
  can be performed with the object or to it

8
Understanding JavaScript Objects and Object Names

• In JavaScript, each object is identified by an
  object name.
• for example, when you want to use JavaScript to
  manipulate the current window, you use the object
  name window
• operations that affect the current Web page use
  the document object name
• the object name can also be based on the name
  assigned to the object by the user

9
Some JavaScript Objects and Their Object Names
10
Document Object Model (DOM)

• JavaScript arranges objects in a Document Object
  Model or DOM.
• The DOM defines the logical structure of objects
  and the way an object is accessed and
  manipulated.
• The document object model can be thought of as a
  hierarchy moving from the most general object to
  the most specific.

11
Part of the DOM
12
DOM Hierarchy

• top object is the window object,
• contains the other objects in the list
• current frame, history list, document.
• Web page document contains own set of objects
• links, anchors, and forms.
• Each form contains form objects
• input boxes, radio buttons, or selection lists.

13
Object Names and Browsers

• DOM hierarchy window.document.order.
• Some browsers cannot interpret the object names
  without the complete hierarchy.
• Field Names on a form
• use field name in JavaScript reference to
  elements on the form.
• document.order.formdate
• order is name of form formdate is a field on
  order form
• http//www.csupomona.edu/llsoe/311/examples/tutor
  ial/ordertxt.htm

14
Some JavaScript Object Collections
15
Working with Object Properties

• Each object in JavaScript has properties
  associated with it.
• The number of properties depends on the
  particular object
• some objects have only a few properties, while
  others have many.
• As with object names, certain keywords identify
  properties.

16
JavaScript Objects and Properties
http//www.csupomona.edu/llsoe/311/examples/event
handler.htm
17
JavaScript Properties

• There are several ways of working with
  properties.
• the value of a property can be
• changed
• stored in a variable
• Can test whether the property equals a specified
  value in an IfThen expression

18
Modifying a Propertys Value

• The syntax for changing the value of a property
  is
• object.property expression
• object is the JavaScript name of the object you
  want to manipulate
• property is a property of that object
• expression is a JavaScript expression that
  assigns a value to the property

19
Setting Objects Property Valuehttp//www.csupomo
na.edu/llsoe/311/examples/objectproperties.htm
ltscript language"javascript" type"text/javascrip
t"gt document.bgColor "FF0033"
document.fgColor "333300"
window.defaultStatus "Call 1-800-555-2915 for
technical support" document.title "Technical
Support" document.write("lth1gt"document.lastModi
fied "lt/h1gt") lt/scriptgt
20
Elements of JavaScript

• Variables and their values
• Expressions, which manipulate those values
• Control structures, which modify how statements
  are performed
• Functions, which execute a block of statements
  
• Objects and arrays, which are ways of grouping
  related pieces of data together

21
Example of Web Site using JavaScript World Script
Samples

• http//www.javascriptworld.com/scripts/index.html
  
• Chapter 2 dialog boxes
• Chapter 3 loops, functions, conditionals, error
  handling
• Chapter 4 5 image handling, rollovers
• Chapter 8 form handling

22
Writing a JavaScript Program

• Before writing a program, outline main tasks the
  program should perform.
• Web browser runs JavaScript
• when the Web page is first loaded,
• in response to an event (e.g. onClick).
• Placement of JavaScript
• in the HTML file -- can be viewed by anyone
• in an external file -- allows hiding program code
  from user
• More complicated and larger JavaScript programs
  are usually placed in an external file.

23
Writing a JavaScript Program

• Best form place JavaScript inside ltscriptgt tags
  inside ltheadgt tags
• separates JavaScript from Web page content and
  layout.
• Browser doesnt care
• Can place scripts inside the ltbodygt tags at the
  location where the program output is generated
  and displayed.
• The ltscriptgt tag is a two-sided tag that
  identifies the beginning and end of a client-side
  program.

24
Syntax for ltscriptgt Tag calling external js file
(16.01)

• ltscript src"external.js" language"Javascript"
  type"text/javascript"gt
• lt!-- Hide script from old browsers
• function imgOver()
• function imgOut()
• // End hiding script --gtlt/scriptgt
• src location of external js document containing
  program code
• Required only if external JavaScript file
• Code for functions is contained in external js
  file
• language -- language written in Jscript is
  default
• Type is required for XHTML
• lt! Comment so page loads in earlier browsersgt

25
Hiding Script from Older Browsers

• Browsers that do not support JavaScript may
  display the program code as part of the Web page
  body.
• You can hide the script from these browsers using
  comment tags.
• The syntax for doing this is as follows
• ltscript languageJavaScriptgt
• lt!- Hide from non-JavaScript browsers
• JavaScript commands
• // Stop hiding from older browsers-gt
• lt/scriptgt
• When a Web browser that doesnt support scripts
  encounters this code, it ignores the ltscriptgt tag.

26
document.write example

• ltbody bgcolor"FFFFFF"gt
• lth1gt
• ltscript language"Javascript" type"text/javascri
  pt"gt
• lt!-- Hide script from old browsers
• document.write("Hello, world!")
• // End hiding script from old browsers --gt
• lt/scriptgt
• lt/h1gt
• lt/bodygt
• http//www.javascriptworld.com/scripts/script02.02
  .html
• Script is inside body tags

27
The document.write()

• can also include HTML tags in the text string to
  format the text and to insert images.
• for example, the following command displays the
  text News Flash! formatted with the lth3gt header
  tag
• document.write(lth3gtNews Flash!lt/h3gt)
• the text string specified by the document.write()
  method can be enclosed within either double or
  single quotation marks

28
JavaScript Syntax Issues

• JavaScript commands names are case-sensitive.
• document.write(), works
• Document.Write() generates JavaScript errors
• JavaScript command lines end with a semicolon
• separates it from the next command line in the
  program.
• in some situations, the semicolon is optional
• Use semicolons -- makes code easier to follow and
  interpret

29
Working with Variables Data

• A variable is a named element in a program that
  stores information.
• Variables can store information created in one
  part of a program for use in another part of the
  program.
• The following restrictions apply to variable
  names
• the first character must be either a letter or an
  underscore character ( _ )
• the remaining characters can be letters, numbers,
  or underscore characters
• variable names cannot contain spaces
• you cannot use JavaScript reserved words
• Variable names are case-sensitive.

30
An Example of a Variable

• create a variable named Year to
• store the value of the current year
• use the Year variable at different locations in
  the program Year2003
• With the Year variable assigned a value, you can
  use the document.write() method to display the
  value on the Web page document.write(Year)
• this code displays the text 2004 on the Web
  page
• You can also combine text with the variable value
  by using a plus symbol () document.write(The
  year is Year)
• this command displays the text The year is 2004
  on the Web page

31
Types of Variables

• JavaScript supports 4 different types of
  variables
• numeric variables can be a number, such as 13,
  22.5, or -3.14159
• string variables any group of characters, such
  as Hello or Happy2Holidays!
• Boolean variables accept one of two values,
  either true or false
• null variable has no value at all

32
Arrays

• An array is an ordered collection of values
  referenced by a single variable name.
• The syntax for creating an array variable is
• var variable new Array(size)
• variable is the name of the array variable
• size is the number of elements in the array
  (optional)
• Once an array is created, you create values for
  each individual element in the array.

33
Using Arrays Continued

• A more efficient way of populating an array is to
  specify the array contents in the new
  Array()statement.
• In this form, the syntax is
• var variable new Array(contents)
• contents are the array elements enclosed in
  quotes and separated by commas
• For example, the following statement creates an
  array of the names of the seven days of the week
• var Wdaynew Array(Sun, Mon, Tue, Wed,
  Thu, Fri, Sat)

34
Creating the MonthTxt Function
The MonthTxt function has one parameter,
MonthNumber, which is the number of a month
that the function uses to return the name of the
corresponding month. The figure shows the code
for the MonthTxt function.
35
Using JavaScript array to Displaytodays date on
a Web Pagehttp//www.javascriptworld.com/scripts/
chap10/script01.html
ltheadgt ltscript language"Javascript"
type"text/javascript"gt lt!-- Hide script from
old browsers dayName new Array
("Sunday","Monday","Tuesday","Wednesday","Thursday
","Friday","Saturday") monName new Array
("January", "February", "March", "April", "May",
"June", "July", "August", "September", "October",
"November", "December") now new Date // End
hiding script from old browsers
--gt lt/scriptgt lt/headgtltbody bgcolor"FFFFFF"gt ltsc
ript language"Javascript" type"text/javascript"gt
lt!-- Hide script from old browsers document.wri
te("lth1gtToday is " dayNamenow.getDay() ", "
monNamenow.getMonth() " " now.getDate()
".lt\/h1gt") // End hiding script from old
browsers --gt lt/scriptgtlt/bodygtlt/htmlgt
36
Declare a Variable in several ways (including bad
spelling)

• Before you can use a variable in your program,
  you need to create it also known as declaring a
  variable.
• You declare a variable in JavaScript using the
  var command or by assigning the variable a value.
• Any of the following commands is a legitimate way
  of creating a variable named Month
• var Month
• var Month December
• Month December
• the first command creates the variable without
  assigning it a value, while the second and third
  commands both create the variable and assign it a
  value

37
Date Methods in JavaScript assume date(April,
8, 2004, 122528)
38
Retrieving Date Information with JavaScript -
examples

• JavaScript World, Chapter 10 http//www.javascrip
  tworld.com/scripts/index.html
• 01 - Putting current date/day on web page
• 02 Weekend/weekday checker
• 03 Customizing message for time of day
• 04 - Time zones
• 06 Creating a countdown

39
Working with Expressions and Operators

• Expressions are JavaScript commands that assign
  values to variables.
• for example, DaysLeft999, assigns the value 999
  to the DaysLeft variable
• Expressions are created using variables, values,
  and operators (elements that perform actions
  within the expression).
• One of the most commonly used operators is the
  operator, which performs the action of adding or
  concatenating two elements.
• for example, use the plus operator in a program
  with the following command
• var ThisMonth Today.getMonth()1

40
Operators

• Binary operators work on two elements in an
  expression.
• Unary operators work on only one variable.
• unary operators include the increment (),
  decrement (--), and negation (-) operators.
• The increment operator can be used to increase
  the value of variable by 1.

41
Arithmetic Operators
59 numeric adds numbers together 5-4
numeric subtraction 54 numeric
multiplication 5/4 numeric division 54 modulus
of 5 divided by 4 5, 5 Increment Adds 1 to
5 5-- or --5 Increment - Subtracts 1 from
5 String concatenation different Love
string concatenation
42
An Example of the Increment Operator

• In the following code, an increment operator is
  used to increase the value of the x variable by
  one.
• x 100
• y x
• thus, after both commands are run, the value of
  the x variable is 100 and the value of the y
  variable is 101

43
Expressions assign values using assignment
operators

• .most common assignment operator is the equals
  () sign
• JavaScript provides additional assignment
  operators that manipulate elements in an
  expression and assign values within a single
  operation.
• one of these is the operator
• In JavaScript, the following two expressions
  create the same results
• x x y x y
• in both expressions, the value of the x variable
  is added to the value of the y variable and then
  the new variable is stored back into the x
  variable

44
Variable Assignment Operators

• xy sets x y
• x x y sets x to x plus y
• xy same as x xy
• cab sets c equal to a b
• cay sets c equal to a times y
• ay same as a a times y
• a/y divides a on left by y assigns result to
  a same as aa/y
• ca y sets c modulus of a divided by y
• a/y same as a modulus of a/y

45
The Operator

• common use of the operator is to create
  extended text strings.
• for example, for text string that covers several
  lines, can incrementally concatenate string
  content
• quote To be or not to be.
• quote That is the question.
• quote Whether tis nobler of the mind to suffer
  the lings and arrows of outrageous fortune,
• . . .

46
Creating JavaScript Functions

• A function is a series of commands that performs
  an action or calculates a value.
• A function consists of the function name, which
  identifies it parameters.
• Parameters are values used by the function and a
  set of commands that are run when the function is
  used.
• Not all functions require parameters.
• The general syntax of a JavaScript function is
• function function_name(parameters)
• JavaScript commands

47
Creating JavaScript Functions

• Function names are case-sensitive.
• The function name must begin with a letter or
  underscore ( _ ) and cannot contain any spaces.
• There is no limit to the number of function
  parameters that a function may contain.
• The parameters must be placed within parentheses,
  following the function name, and the parameters
  must be separated by commas.

48
Performing an Action with a Function

• The following function displays a message with
  the current date
• function ShowDate(date)
• document.write(Today is date ltbrgt)
• the function name is ShowDate, and it has one
  parameter, date
• there is one line in the functions command
  block, which displays the current date along with
  a text string

49
Placing a Function in an HTML File

• Where you place a function in the HTML file is
  important.
• The function definition must be placed before the
  command that calls the function.
• Preferred programming convention is to place all
  of the function definitions inside the ltheadgt and
  lt/headgt tags.
• A function is executed only when called by
  another JavaScript command.

50
Placing a Function in an HTML File

• To use a function on several Web pages, place the
  function in a separate file and access the
  function from each Web page.
• To access the externally located function, insert
  the following command in the head section of the
  HTML file
• ltscript srcURL languageJavaScriptgtlt/scriptgt
• URL is the filename and location of the external
  file containing the functions
• Its common practice for JavaScript programmers
  to create libraries of functions located in
  external files.

51
The XMASDAYS Function
This figure show an example of the XMASDAYS
function. The function has three
variables XYear The current year XDay The
date of Christmas. The initial value of this
variable is the date December 25,
2003. DayCount The number of days between
current date and December 25. This is the value
that is returned by the function.
52
Example of Web Pagewith Days Until Christmas
53
Working with Conditional Statements

• A conditional statement is one that runs only
  when specific conditions are met i.e. If
  statement.
• An If statement has the following general syntax
• if (condition)
• JavaScript Commands
• condition is an expression that is either true or
  false
• if the condition is true, the JavaScript Commands
  in the command block are executed
• if the condition is not true, then no action is
  taken

54
Comparison, Logical, and Conditional Operators

• To create a condition in JavaScript, you need one
  of three types of operators
• a comparison operator
• compares value of one element with that of
  another,
• creates Boolean expression that is either true or
  false
• a logical operator
• connects two or more Boolean expressions
• a conditional operator
• tests whether a specific condition is true
• returns one value if the condition is true and a
  different value if the condition is false

55
An Example of Boolean Expressions

• Here are two examples of Boolean expressions
• x lt 100
• if x is less than 100, this expression returns
  the value true however, if x is 100 or greater,
  the expression is false
• y 20
• the y variable must have an exact value of 20 for
  the expression to be true
• comparison operator uses a double equal sign ()
  rather than a single one (a single equal sign is
  an assignment operator and is not used for making
  comparisons)

56
Comparison Operators

• xy returns true if x and y are equal
• x!y returns true if x and y are not equal
• xgty returns true if x is great than y
• xlty returns true if x is less than y
• xlty returns true if x is less than or equal to
  y
• xgty returns true if x is greater than or equal
  to y
• xy returns true if both x and y are true
• xy returns true if either x or y is true
• !x returns true if x is false

57
Logical Operators. Assume x20, y25
58
If/Else remember?
if
Response yes
false
false
true
Go to homepage
Close Browser window
59
Using an If...Else Statement

• The If statement runs a set of commands if the
  condition is true.
• if the condition is false use the If...Else
  statement.
• The general syntax is
• if (condition)
• JavaScript Commands if true
• else
• JavaScript Commands if false
• condition is an expression that is either true or
  false, and one set of commands is run if the
  expression is true, and another is run if the
  expression is false

60
Using an If...Else Conditional Statement 02.06

• ltheadgt
• lttitlegtMy JavaScript pagelt/titlegt
• ltscript language"Javascript" type"text/javascri
  pt"gt
• lt!-- Hide script from old browsers
• ans prompt("Are you sure you want to do
  that?","")
• if (ans)
• alert("You said "ans)
• else
• alert("You refused to answer")
• // End hiding script from old browsers --gt
• lt/scriptgt
• lt/headgt
• ltbody bgcolor"FFFFFF"gtlt/bodygt lt/htmlgt

61
The For Loop

• The For loop allows you to create a group of
  commands to be executed a set number of times
  through the use of a counter that tracks the
  number of times the command block has been run.
• Set an initial value for the counter, and each
  time the command block is executed, the counter
  changes in value.
• When the counter reaches a value above or below a
  certain stopping value, the loop ends.

62
Creating a For Loop
This figure shows an example of a For loop used
to write a row of table cells.
63
Nesting a For Loop
This figure shows code used to write a table
containing three rows and four columns.
64
The While Loop

• The While loop runs a command group as long as a
  specific condition is met, but it does not employ
  any counters.
• The general syntax of the While loop is
• while (condition)
• JavaScript Commands
• condition is a Boolean expression that can be
  either true or false

65
Creating a While Loop
This figure shows how you can create a set of
table cells using a While loop.
66
Nesting a While Loop lets try it.
As with For loops, this figure shows that While
loops can be nested inside one another.
67
Tutorial Summary Continued

• Learned about JavaScript tools used to work with
  dates.
• Learned how to create a function to calculate
  some simple date values.
• Covered the topics of conditional statements,
  arrays, and program loops.
• Learned how to create IF statements and IF...ELSE
  statements and observe how to nest one set of
  conditional statements within another.
• Learned about FOR loops and WHILE loops.