1

JavaScript in Context

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

HTML 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 variablevar variable;

• Declaring three variablesvar 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 pagevar libName = ”Duston Public Library";document.write(libName);

• Plus symbol ( + ) – Can be used to combine variable with text

string

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

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 functionfunction function_name(parameters){

JavaScript commands

}

• Calling a functionfunction_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 valuefunction 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 ==

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

• Firefox Tools – Web Developer, Web Console

• Chrome Tools– Developer, JavaScript console

The above two tool sets 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