JavaScript in Context
1
Server-Side Programming
Client-Side Programming
Combining Client-Side and
Server-Side Programming
The Development of JavaScript
• Java
– Developed by Sun Microsystems
– Programs designed to be run within Java
Environment
– An example of a compiled language
• JavaScript
– An interpreted language
– Scripts are executed within a Web Browser
Comparing Java and JavaScript
The Development of JavaScript
• Jscript is a version of JavaScript supported
by Internet Explorer
• The European Computer Manufacturers
Association (ECMA) develops scripting
standards
– The standard is called ECMAScript but
browsers still generally call is JavaScript
JavaScript Principles
• An object-based programming language
• Object
– Can be any item, including mouse pointer or window
scrollbars
• Object
– Property (features)
– Method
– Event
• Method
– Process/action by which JavaScript manipulates the
features of an object
• Event
– Use event handlers to propagate JavaScript actions
DOM object hierarchy
DOM Object Method example
• One way to send output to the Web
document object is;
document.write() Method
document.write() Method
• To write text to a Web page, use the following
JavaScript commands:
document.write(“text”);
or
document.writeln(“text”)’
Where text is the content to be written to the page. The
doucment.write() and document.writeln() methods are
identical,
except that the document.writeln() method preserves any
line breaks in the text string.
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
A JavaScript program can be:
1. placed directly in a Web page file
2. saved in an external text file
1. Inserting JavaScript into a Web
Page File
• Insert a client-side script in a Web page
when using the script element
• Comments are useful for hiding scripts
from older browsers
• Specify alternative content using the
nonscript element for browsers that don’t
support scripts (or have their script support
disabled)
Working with the Script Element
• Script element
– Used to enter scripts into an HTML or XHTML
file
– Syntax
<script type="mime-type">
script commands
</script>
Supporting Non-JavaScript
Browsers
• noscript element
– Used by browsers that do not support scripts
– Syntax
<noscript>
alternative content
</noscript>
Supporting Non-JavaScript
Browsers
• CDATA section
– Marks text as data that should not be processed
by XHTML parsers
– Syntax
<script type="text/javascript">
<![cdata[
JavaScript code
]]>
</script>
Commenting JavaScript Code
• Comments
– Explain what your programs are designed to do
and how they work
• Multiline comment
/*
comment statements
*/
• Single line comment
// comment statement
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
Working with Variables and Data
• JavaScript variable types:
–
–
–
–
Numeric variables
String variables
Boolean variables
Null variables
• You should declare a variable before using
it
Working with Variables and Data
• Numeric variable- any number, such as 13, 22.5,
etc
– Can also be expressed in scientific notation
• String variable- any group of text characters,
such as “Hello” or “Happy Holidays!”
– Must be enclosed within either double or single
quotations (but not both)
• Boolean variable- accepts only true and false
values
• Null variable- has no value at all
Declaring a JavaScript Variable
• You can declare variables with any of the
following JavaScript commands:
var variable;
var variable = value;
variable = value;
Where variable is the name of the variable and value is
the initial value of the variable. The first command
creates the variable without assigning it a value; the
second and third commands both create the variable
and assign it a value.
Declaring a Variable
• Tells JavaScript interpreter to reserve
memory space for the variable
• Statement to declare a variable
var variable;
• Declaring three variables
var emLink, userName, emServer;
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
Writing a Variable Value to a
Web Document
• Variable
– Can be used in place of value it contains
• Writing a text string to a Web page
var libName = ”Duston Public Library";
document.write(libName);
• Plus symbol ( + )
– Can be used to combine variable with text
string
Working with Dates
• Create a date object to store date information
Date Methods
Working with Expressions and
Operators
• Expressions are JavaScript commands that assign values and variables
• Operators are elements that perform actions within expressions
– Arithmetic operators: perform simple mathematical calculations
– Binary operators: work on two elements in an expression
– Unary operators: work on only one variable
– Increment operators: can be used to increase the value of a variable
by 1
– Assignment operators: used to assign values in expressions
Working with Expressions and
Operators
• The Math object is a JavaScript object used
for calculations other than simple math
Creating a Function to Perform
an Action
• Functions
– Collection of commands that perform an action
or return a value
– Include a function name
– Include a set of commands that run when
function is called
– Some require parameters
Creating a Function to Perform
an Action
• Syntax of a JavaScript function
function function_name(parameters){
JavaScript commands
}
• Calling a function
function_name(parameter values)
Functions and Variable Scope
• Variable scope
– Indicates where and how the variable can be
used in your application
– Can be local or global
Functions and Variable Scope
• Local scope
– Variable created within a JavaScript function
• Global scope
– Variables not declared within functions
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;
}
2. Using 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 document’s head section
• Extension “.js”
– Used by external files containing JavaScript commands
and functions
Using an External Script
Debugging Your JavaScript
Programs
• Three types of errors:
– Load-time errors (occurs when the script is
loading)
– Run-time errors (occurs when the being
executed)
– Logical errors (free from syntax and structural
mistakes, but result in incorrect results)
Common Mistakes
• You need to debug your program to fix the
mistakes
• Common mistakes include:
–
–
–
–
–
–
Misspelling a variable name
Mismatched parentheses or braces
Mismatched quotes
Missing quotes
Using ( instead of [
Using = in place of ==
Commenting JavaScript Code
• Comments
– Explain what your programs are designed to do
and how they work
• Multiline comment
/*
The showEM() function displays a link to the
user’s e-mail address.
The username and e-mail server name are
entered in reverse order
*/
Using Comments to Hide
JavaScript Code
• Syntax for hiding script
<script type="text/javascript">
<!-- Hide from non-JavaScript browsers
JavaScript commands
// Stop hiding from older browsers -->
</script>
Debugging Tools and Techniques
• Writing modular code
– Breaking up a program’s different tasks into
smaller, more manageable chunks
• Alert dialog box
– Dialog box generated by JavaScript that
displays a text message with an OK button
• Mozilla Error Console & Add Ons
– FireBug, Web Developer, DOM Inspector
– Can help to create and debug JavaScript
programs
Tips for Writing Good JavaScript
Code
• Use good layout to make your code more
readable. Indent command blocks to make them
easier to read and to set them off from other code
• Use descriptive variable names to indicate the
purpose of your variables
• Be careful how you use uppercase and lowercase
letters in your code, because JavaScript commands
and names are case-sensitive
Tips for Writing Good JavaScript
Code
• Add comments to your code to document the
purpose of each script
• Initialize all variables at the top of your script and
insert comments describing the purpose and nature
of your variables
• Create customized functions that can be reused in
different scripts. Place your customized functions
in external files to make them available to your
entire Web site