Chapter 2: Variables, Functions, Objects, and Events

1
Chapter 2 Variables, Functions, Objects, and
Events

• JavaScript - Introductory

2
Section A Working with Variables, Functions,
and Events
3
Objectives

• In this section, you will learn how to
• Declare and use variables
• Define functions
• Call functions
• Use JavaScript objects
• Use object inheritance and prototypes
• Use object methods
• About variable scope

4
Variables

• Values stored in computer memory locations are
  called variables-(values can change during each
  program run)
• In JavaScript, use the reserved keyword var to
  create variables
• Reserved words, or keywords, are part of the
  JavaScript syntax
• Reserved words cannot be used for variable names

5
JavaScript Reserved Words
Look at Figures 2-1 and 2-2 on Pages 44 45 For
a Complete Listing
6
Variables

• When you use the reserved word var to create a
  variable, you declare the variable
• You can assign a value to a variable at
  declaration using the syntax var
  variable_name value
• var myVariable hello
• In this statement, we are assigning the literal
  string Hello to the variable myVariable

7
Variables

• You can declare multiple variables in the same
  statement using a single var keyword followed by
  a series of variable names and assigned values
  separated by commas
• var firstVartext, secondVar100

8
Variables

• The name assigned to a variable is an identifier
• Identifiers must begin with an uppercase or
  lowercase ASCII letter (ex. () or (_). You
  cannot use numbers as the first character in an
  identifier.
• Reserved words cannot be used for variable names,
  and there should be no spaces within a variable
  name

9
Variables

• Common practices in variable names
• Use an (_) to separate individual words
• Use a lowercase letter for the first letter of
  first word
• Variable names, like other JavaScript code, are
  case-sensitiveMyVariable is different from
  MYVARIABLE

10
Variables

• You are not required to use the var keyword to
  declare a variable. However, the omission of the
  var keyword can change where a variable can be
  used in a program.
• It is good programming practice to use the var
  keyword when declaring a variable.

11
Legal Variable Names

• my_variable
• my_variable (not recommended for older browsers)
• _my_variable
• my_variable_examples
• myVariableExample

12
Illegal Variable Names

• my_variable
• 1my_variable
• my_variable
• _at_my_variable
• my_variable
• my_variable

13
Defining Functions

• A function allows you to treat a related group of
  JavaScript statements as a single unit
• Lines that compose a function within an HTML
  document are called the function definition
• Before you can use a function, you must create or
  define it
• The syntax for defining a function is function
  name_of_function (parameters) statements
  
• A parameter, or argument, is a variable that will
  be used within a function

14
Defining Functions

• Parameters are placed within the parentheses that
  follow a function name.
• It is a variable that will be used within a
  function
• Functions are not required to contain parameters.
  Many functions only perform a task and do not
  require external data (a.k.a passing data to the
  function).

15
Function Definitions - Three Parts

• 1. The reserved word function followed by the
  function name. The reserved word function
  notifies the JavaScript interpreter that the code
  following is a function. As with variables,the
  name assigned to a function is called an
  identifier. The same rules and conventions that
  apply to variable names, apply to function names
• 2. Any parameters required by the function are
  contained within parentheses following the
  function name
• 3. The functions statements, enclosed in curly
  braces

16
Function That Prints Name of Multiple Companies
Notice the StructureThe opening curly bracket
is on the same line as the function name, and the
closing curly brace is on its own line following
the function statements. Each statement is
indented one-half inch.
17
Calling Functions

• A function definition does not execute
  automatically
• To execute a function, you must invoke, or call,
  it from elsewhere in the program
• Sending variables or values to a called
  functions arguments is called passing arguments
• You are not required to return a value from a
  function
• Using unique names to identify specific variables
  makes it easier to understand a programs logic
  and assist in the debugging process

18
Calling Functions

• Always create functions within the ltHEADgt
  section, and place calls to a function within the
  ltBODYgt section.
• The ltHEADgt section of an HTML document is always
  rendered before the ltBODYgt section. Placing
  functions in the ltHEADgt section and function
  calls in the ltBODYgt section ensure that functions
  will be created before they are called.
• If your program does attempt to call a function
  before it is created, you will receive an error.

19
JavaScript Function Being Called from the ltBODYgt
Section
20
Output of the JavaScript Function Being Called
from the ltBODYgt Section
Example of Output Examples\SimpleCallingaFu
nction.html Examples\CallingaFunction.html
21
Calling Functions

• When a function performs a calculation such as an
  average, normally it wants to receive a return
  value

Examples\TwoFunctionsProgram.html
22
Understanding JavaScript Objects

• Objects are based on classes
• Data, procedures, and other attributes are
  contained in a structure known as a class
• A function that is used as the basis for an
  object is called an object definition, or
  constructor function
• A constructor function is more like a template on
  which an object is based than a class
• Property is a variable within a constructor
  function

23
Understanding JavaScript Objects

• function Animal (type, sound, transport_mode)
• this.animal_type type
• this.animal_soundsound
• this.animal_transport_modetransport_mode
• The this keyword refers to the current object
  that called the constructor function. The 3
  statements assign the 3 arguments, type, sound
  and transport mode to the animal_type,
  animal_sound, and transport_mode properties
  (which are variables) of whichever object (this)
  is instantiated from the constructor function.

24
Understanding JavaScript Objects

• A method is a function - whether a built-in
  JavaScript function or a function you create -
  that is called from within an object
• Class names in traditional object-oriented
  programming languages usually begin with an
  uppercase letter
• Objects are created from constructor functions
  using the new keyword

25
Understanding JavaScript Objects

• Objects are created from constructor functions
  using the new keyword.
• cat new Animal (feline, meow, walk/run)
• The cat object now has three properties type,
  sound, and transport_mode.
• You can add a new property cat.size fat
• When you add a new property to an object that has
  been extended from a constructor function, the
  new property is only available to that specific
  object.

26
Object Inheritance

• Objects inherit the properties and methods of the
  constructor functions from which they are
  instantiated
• Constructor functions do not require arguments
• A prototype property is a built-in property that
  specifies the constructor from which an object
  was extended
• Object definitions can extend other object
  definitions
• JavaScript, however, only allows objects to
  inherit from a single object definition

27
Understanding Prototyping

• cat new Animal (feline, meow, walk/run)
• animal.prototype.sizefat
• By using a prototype property, all objects that
  extend the Animal constructor function will also
  have access to the size property.

28
Two Object Definitions Extending Another Object
Definition
29
CompanyObjects.html
Examples\CompanyObjects.html
30
Object Methods

• Object methods are functions associated with a
  particular object
• The methodName following the this reference is
  the name that is being assigned to the function
  within the object
• After you instantiate an object based on object
  definition, call the objects methods by adding a
  period

31
Variable Scope

• Variable scope refers to where in your program a
  declared variable can be used
• A variables scope can be either global or local
• Global variable is one that is declared outside
  of a function and available to all parts of the
  program
• Local variable is declared inside a function and
  is only available within the function
• The arguments within the parentheses of a
  function declaration are considered to be local
  variables
• To declare a global variable, the use of the var
  keyword is optional

32
Section A Chapter Summary

• The values stored in computer memory locations
  are called variables
• Use the reserved word var to declare a variable
• Words that are part of JavaScript language syntax
  are called reserved words or keywords
• Before you can use a function in JavaScript
  program, first create, or define, the function
• A parameter, or argument, is a variable that will
  be used within a function

33
Section A Chapter Summary

• Sending variables or values to a called
  functions arguments is called passing arguments
• To return a value, include the return statement
  within the called function
• Two types of elements are found within
  constructor functions properties and methods
• The this keyword refers to the current object
  that called the constructor function
• Object definitions can extend other object
  definitions

34
Section A Chapter Summary

• The prototype property is a built-in property
  that specifies the constructor from which an
  object was extended
• Object methods are essentially functions
  associated with a particular object
• The syntax for calling an object method is
  objectiveName.methodName (arguments)
• Variable scope refers to where in your program a
  declared variable can be used

35
Lets Practice This Stuff