Introduction to JavaScript Programming

1
Introduction to JavaScript Programming
2
World Wide Web

• Original purpose was locating and displaying
  information
• Small academic and scientific community
• Commercial applications
• Static HTML
• Need for more interactive and appealing

3
JavaScript

• Joint venture Sun Netscape
• Netscape Communications
• LiveScript
• Sun Microsystems
• Simplify its Java language
• Open language anyone can use
• Embedded in the HTML document

4
JavaScript vs. Java

• Java is full-fledged, object-oriented language
• Can be used to create applets
• Applets small programs designed to execute
  within another application
• Must use some type compiler, such as Suns JDK

5
JavaScript

• Statements/variables are case sensitive
• Interpreted language code runs only on a JS
  interpreter built into browser
• Version of JS depends on browser version
• IE supports additional features Microsoft calls
  its version Jscript
• Older browsers may not handle newer JS codes

6
JavaScript and HTML Tags

• HTML (hypertext markup language)
• Microsoft FrontPage
• Macromedia Dreamweaver
• Microsoft Word
• Netscape Composer
• Text editor, such as Notepad
• Tag instruction surrounded by lt and gt
  symbols
• The instructions are call attributes and have
  values assigned to them

7
JavaScript and HTML Tags
Tag
Attributes
ltBODY TEXT 00008B BACKGROUND image.gifgt
Tag
Attributes
ltINPUT Type text Name PhoneNumber Value
Size 17gt
8
SCRIPT Tags

• Four attributes
• LANGUAGE identifies version of JavaScript
• SRC text string for URL/filename of JS source
  file
• TYPE specify the scripting language
• DEFER beyond the scope

9
SCRIPT Tags
Tag
Attributes
ltSCRIPT LANGUAGE JavaScriptgt lt! Hide from
old browsers Place your JS code in this
area //--gt lt/SCRIPTgt
10
HTML Comments

• Embedded JS code needs to be hidden from
  incompatible browsers
• lt!-- beginning comment block
• --gt ending comment block

11
JavaScript Comments

• Line Comments
• // This is a line comment
• Block Comments
• / Beginning line
• Still a comment
• Ending line /

12
JavaScript Benefits

• Web Standard
• Alternative Microsoft VBScript
• Follows Visual Basic syntax
• VBScript not supported in Netscape Navigator
• Provide instant feedback without CGI (Common
  Gateway Interface) scripts

13
JavaScript Cookies

• Cookies data sent and stored in files on users
  computer
• Navigator cookies.txt
• IE Cookies folder
• Track users preferences
• JavaScript code limits access to users hard
  drive browser controls cookie location

14
JavaScript Basics

• Common types of variables
• Numeric - numbers
• Strings - letters
• Boolean true/false or yes/no

15
JavaScript Basics

• Variables Naming Conventions
• Name must begin with letter or underscore
• Rest of name letters, numbers, or underscores
• Avoid reserved words (appendix A)
• No spaces or punctuation
• Variables are case sensitive
• Defined by keyword var

16
JavaScript Basics

• Literal actual number or char text, rather than
  a calculated result or value input from a keyboard

var width 3
var browserType Netscape
String literal
Special characters (table I-2)
var Test \Hey there!\ she said.
17
JavaScript Basics

• write() method used to write text to the Web
  page
• alert() method used to display messages in a
  dialog box
• Discussed in more detail in Project 1

18
JavaScript Basics

• Expression formula to assign values to
  variables

average totalValue/Count
var Count 0
19
JavaScript Basics

• Arithmetic operators Table I-3
• Increment/decrement Table I-4
• Arithmetic expressions Table I-5
• Mathematical order Table I-6
• Concatenation

20
Conditionals

• Allow comparisons of values
• See Table I-7
• If and While statements

21
Conditionals
var todaysDate new Date() var numHours
todaysDate.getHours() if(numHours gt 12)
document.write(Good Afternoon) else
document.write(Good Morning) the rest of
your code
22
Conditionals
while (condition) the JavaScript code to be
executed while the condition is True the
JavaScript code to be executed when the loop is
finished
23
Functions

• Way to write several lines of script and use them
  repeatedly as needed

function Greetings() alert(Hello, this is a
friendly message.)
messageStr This is a customized
message. function Greetings(messageStr)
alert(messageStr)
All-purpose message
24
Objects, Properties, and Methods

• Object real-world entity (book, car)
• JS is object oriented (OO)
• Object-Oriented Programming (OOP)
• Object is described by its properties
• Properties are attributes that help differentiate
  one object from another
• Separate object and property with a period
• Ex. car.color red

25
Objects, Properties, and Methods

• Method function or action you want the object
  to perform (behavior)
• Ex. car.drive()
• Some methods require an argument
• Argument is a value passed to the method

26
Objects, Properties, and Methods

• JS uses many objects, but not a complete OOP
  language
• JS provides many built-in objects
• Ex. Date, Arrays, windows, and forms
• JS allows you to define and create your own
• When defining objects, assign unique and
  meaningful names (not form1)

27
Events

• Action that occurs, such as a user clicking a
  link or button, or user entering data in a form
  textbox
• JS reacts to events by Event Handlers
• Table I-8
• JavaScript Quick Reference (page J A.5)
• Events are triggered
• Ex. onMouseOver

28
EventsForms

• Many event handlers work with forms
• Ex. onFocus, onBlur, onChange, onSubmit, and
  onReset

ltINPUT TYPE Button Value White onclick
document.bgColor Whitegt
ltBODY bgColor White onload timeLine()gt
ltINPUT TYPE Button Name SubmitText Value
Submit onclick Transmit()gt
29
Frames

• Frame is a feature that allows a browser window
  to be split into smaller units.
• http//home.mcom.com/assist/net_sites/frames.html

ltFRAMESET COLS 25,75gt ltFRAME SRC
TOC.HTMLgt ltFRAME SRC MAINPAGE.HTMLgt lt/FRA
MESETgt
30
Arrays

• Collection of data items identified by a singular
  name
• Defined by using built-in Array object

var currMonth new Array(13) currMonth1
January currMonth2 February currMonth12
December
Length
31
Arrays

• Thirteen (13) elements defined because JS first
  array element is 0
• Older browsers use 0 to hold the length
• Good practice to leave element 0 empty and
  start with element 1
• Creating arrays discussed in Project 3