Introducing JavaScript

1
Introducing JavaScript

2
Objectives

• Understand the history and theory of JavaScript
• Create a script element
• Understand and use basic JavaScript syntax
• Write text to a Web document using a JavaScript
  command

3
Objectives

• Understand the different data types supported by
  JavaScript
• Declare a variable and assign it a value
• Reference a variable in a JavaScript statement
• Create and call a JavaScript function

4
Objectives

• Access functions from an external JavaScript file
• Document code with multiline and single-line
  comments
• Understand basic techniques for debugging
  JavaScript code

5
Staff Directory at Monroe Public Library Web Page
6
Introduction to JavaScript

• Spam
• Junk e-mail
• Spammer
• Person who sends spam
• E-mail harvester
• Program that scans documents looking for e-mail
  addresses

7
E-Mail Addresses in Staff Directory
8
Server-Side and Client-Side Programming

• Server-side programming
• Program placed on server that hosts Web site
• Program then used to modify contents and
  structure of Web pages

9
Server-Side and Client-Side Programming

• Client-side programming
• Runs programs on users computer
• Programs likely to be more responsive to users
• Can never completely replace server-side
  programming

10
Server-Side Programming
11
Client-Side Programming
12
Combining Client-Side and Server-Side Programming
13
The Development of JavaScript

• Java
• Developed by Sun Microsystems
• Programs designed to be run within Java
  interpreters
• An example of a compiled language
• JavaScript
• Developed by Sun Microsystems Netscape
• Subset of Java
• An interpreted language (IE uses Jscript)

14
Comparing Java and JavaScript
15
Versions of Java and JavaScript
16
Working with the Script Element

• Script element
• Used to enter scripts into an HTML or XHTML file
• Syntax
• ltscript type"mime-type"gt
• script commands
• lt/scriptgt

17
Writing Output to a Web Document

• Inserting cadler_at_mpl.gov in a Web document
• ltscript type"text/javascript"gt
• document.write("cadler_at_mpl.gov")
• lt/scriptgt

18
The document.write() Method

• One way to send output to the Web document
• Object
• Can be any item, including mouse pointer or
  window scrollbars
• Method
• Process by which JavaScript manipulates the
  features of an object

19
Understanding JavaScript Rules and the Use of
White Space

• JavaScript
• Is case sensitive
• Ignores most occurrences of extra white space
• Line breaks occurring within a statement can
  cause error
• Good practice to not break a statement into
  several lines

20
Supporting Non-JavaScript Browsers

• noscript element
• Used by browsers that do not support scripts
• Syntax
• ltnoscriptgt
• alternative content
• lt/noscriptgt

21
Supporting Non-JavaScript Browsers

• CDATA section
• Marks text as data that should not be processed
  by XHTML parsers
• Syntax
• ltscript type"text/javascript"gt
• lt!cdata
• JavaScript code
• gt
• lt/scriptgt

22
Working with Variables

• Variable
• A named item in a program that stores information
• Used to represent values and text strings
• Values can change as the program runs

23
Declaring a Variable

• Statement to declare a variable
• var variable
• Declaring three variables
• var emLink
• var userName
• var emServer
• or as a single statement
• var emLink, userName, emServer

24
Declaring a Variable

• Limits on variable names
• First character must be either a letter or an
  underscore character ( _ )
• Remaining characters can be letters, numbers, or
  underscore characters
• Variable names cannot contain spaces
• Reserved words cannot be used

25
JS Reserved Words
26
Assigning a Value to a Variable

• variable value
• var n 37
• var name "fred"
• Combining variable declaration and assignment in
  a single statement
• var userName "cadler"
• var emServer "mpl.gov" var userName
  "cadler", emServer "mpl.gov"

27
Working with Data Types

• Data type
• Type of information stored in a variable
• Numeric value
• Any number, such as 13, 22.5, or -3.14159
• Text string
• Any group of text characters, such as "Hello"
• Boolean value
• Indicates the truth or falsity of a statement

28
Working with Data Types

• Javascript is a weakly typed language
• Variables are not strictly tied to specific data
  types
• Strongly typed languages (such as Java)
• Force the programmer to explicitly identify a
  variables data type
• Null value
• Value has not yet been assigned to variable

29
Writing a Variable Value to a Web Document

• Variable
• a variable is used in place of value it contains
• Writing a text string to a Web page
• var libName "Monroe Public Library"
• document.write(libName)
• Plus symbol ( )
• Can be used to combine variable with text string

30
Creating a Function to Perform an Action

• Functions
• Collection of statements that perform an action
  or return a value
• Includes a function name
• Some require parameters

31
Creating a Function to Perform an Action

• Syntax of a JavaScript function
• function function_name(parameters)
• JavaScript statements
• Calling a function
• function_name(parameter values)

32
Functions and Variable Scope

• Variable scope
• Indicates where and how the variable can be used
  in your application
• Can be local or global

33
Functions and Variable Scope

• Local scope
• Variable created within a JavaScript function
• can not be accessed outside the function
• Global scope
• Variables not declared within functions and are
  visible by all functions

34
Creating a Function to Return a Value

• For a function to return a value
• It must include a return statement
• Syntax of a function that returns a value
• function function_name(parameters)
• JavaScript commands
• return value

35
Accessing an External JavaScript File

• Common practice to
• Create libraries of functions located in external
  files
• Script elements that point to external files are
• Placed in a documents head section
• Extension .js
• Used by external files containing JavaScript
  commands and functions

36
Using an External Script
37
Commenting JavaScript Code

• Comments
• These explain what your program is designed to do
  and how it works
• Multiline comment
• /
• The showEM() function displays a link to the
  users e-mail address.
• The username and e-mail server name are entered
  in reverse order
• /

38
Using Comments to Hide JavaScript Code

• Syntax for hiding script
• ltscript type"text/javascript"gt
• lt!-- Hide from non-JavaScript browsers
• JavaScript commands
• // Stop hiding from older browsers --gt
• lt/scriptgt

39
Debugging Your JavaScript Programs

• Load-time error
• Occurs when script is first loaded by JavaScript
  interpreter
• Run-time error
• Occurs after script has been successfully loaded
  and is being executed
• Logical errors
• Free from syntax and structural mistakes, but
  result in incorrect results

40
Displaying a Logical Error
41
Common Mistakes

• Debugging
• Process of searching code to locate a source of
  trouble
• Common errors
• Misspelling a variable name
• Mismatched parentheses or braces
• Mismatched quotes
• Missing quotes

42
Debugging Tools and Techniques

• Writing modular code
• Breaking up a programs different tasks into
  smaller, more manageable chunks
• Alert dialog box
• Dialog box generated by JavaScript that displays
  a text message with an OK button
• Firefox Javascript Error Console
• Can help to debug JavaScript programs

43
Microsoft Debugger Window
Trrext
derererrrdd

• Download add on for IE

44
Tips for Writing Good JavaScript Code

• Apply layout techniques to make code more
  readable
• Use descriptive variable names
• Be consistent in how you apply uppercase and
  lowercase letters to your variable names
• Add comments to your code

45
Tips for Writing Good JavaScript Code

• Create customized functions
• Break up long and complicated functions into
  smaller functions
• Use the debugging tools available
• In case of a logical error, use alert boxes