Concatenation

1
Concatenation

• If you took the programming class, you would have
  already worked with concatenation, or the
  function that joins string literals or variables
  together as one variable
• Here, the () sign will be used
• You can see an example on Slide 8
• We will use concatenation in the next unit

2
Conditionals

• One of the advantages of using JavaScript is the
  ability to validate data entered into a form
  through the use of a conditional
• Conditionals evaluate data and compare whether
  the data matches the criteria or not
• From there, you will have an if then structure to
  instruct the page as to what to do
• You can also use a while loop that continues to
  execute until certain conditions are met
• Slide 9 lists the operands that you can use for
  your conditionals

3
If and If Else Statements

• When writing if and if else statements, the
  first part always starts with if and a condition
• Slide 10 shows an example of how this works
• The use of the word else indicates code that
  needs to be executed if the condition does not
  exist

4
While Loop

• A loop is a set of JavaScript codes that are to
  be executed repeatedly
• The while loop tests a condition at the beginning
  of the loop
• If the condition is true, the loop is executed,
  if false, the loop is not executed
• See Slide 11 to see how this works

5
Functions

• A function is a way to write several lines of
  code and use them repeatedly as needed
• Functions are defined by starting with the
  keyword function followed by a set of parentheses
• The instructions or code is written inside a set
  of braces
• The left-hand brace begins the function and the
  right-hand brace ends it
• The example at the top of Slide 12 shows an
  example

6
Functions

• You can also call variables into functions
• The alert() method will display a dialog box that
  the user can click OK to when through
• An example of using a variable in a function is
  at the bottom of Slide 12

7
Objects, Properties, and Methods

• An object is a real-world entity such as a pet, a
  car, or a friend
• JavaScript makes use of objects in association
  with Web browsers using a concept called OOP or
  Object Oriented Programming
• OOP provides a way to represent the world in
  conceptual terms that are easily understood

8
Objects, Properties, and Methods

• An object is described by its properties
• Properties are attributes that help differentiate
  one object from another
• Objects and properties are separated by a period
• A method is a function or action you want the
  object to perform
• You can either write your own functions, or use
  the built-in methods supplied with JavaScript

9
Objects, Properties, and Methods

• Some methods require arguments to work properly
• An argument is a value given to the method
• The argument is the message used in a method that
  is passed to the object
• For example, cat.feed(Tuna) would be a
  statement that would feed (method) the object
  cat, Tuna (argument)
• Arguments can be variables or literals, but the
  argument must match the method, I.e. the method
  must be able to use the argument
• An example is on SLIDE 13

10
Events

• Most interactive Web applications are
  event-driven
• An event is an action that occurs, such as a user
  clicking a link or button, or a user entering
  data in a form textbox
• Events can be compared to clicking a toolbar
  button in a program like Word
• For JavaScript to react to an event, you need to
  write a handler such as onClick.
• SLIDE 14 lists some of the more common handlers

11
Events

• When an action associated with an event handler
  occurs, it is called triggering the event
• For example, when you move your mouse over an
  object, an event is triggered that makes the
  object do something

12
Forms

• Because many event handlers work on forms, you
  need to know the HTML behind forms
• Forms often use a programming technique called
  CGI script for dealing with the data that they
  collect.
• PERL is an example of the language used for
  processing forms

13
Forms

• Using event handlers in forms is a relatively
  easy task
• The first bullet point on SLIDE 15 shows how an
  event handler can be used in an input box to
  change the background color to white
• The second example on SLIDE 15 shows how an event
  handler can be used to display either a Sun or a
  Moon in a certain location based on the time that
  a user is on a page

14
Forms

• Many of the event handlers from SLIDE 14 are used
  as part of an INPUT tag
• For example, focus means that a text box, check
  box, or option button is active
• Blur means that you have left that input box
• The third example on SLIDE 15 shows how you could
  use an event handler to submit a form

15
Frames and Arrays

• A frame is a feature that allows a browser window
  to be split into smaller units
• Frames are created using the ltFRAMESETgt tags
• Each frame created with HTML has its own HTML
  source page which is identified as an attribute
  of the SRC property
• JavaScript applies properties and methods to each
  frame individually in order to provide dynamic
  controlling of the browser window

16
Arrays

• An array is a collection of data items that is
  identified by a singular name
• This name is used in place of many different
  variables that would need to be used if
  JavaScript couldnt use the array
• When using arrays, you will need to specify a
  length which represents the number of items
  stored in the array
• SLIDE 16 shows an example

17
Arrays

• Notice in the example that the 13 elements
  represent not only the 12 months but also the new
  Array item
• If you define a new item for your array after it
  has been created, JavaScript will not give an
  error message, but the new item will not be
  recognized by Navigator or Explorer as part of
  the array

18
Tomorrow In-class Assignment

• The Day After Test over the Introduction to
  JavaScript