JavaScript Review PPT

berserkarithmeticInternet and Web Development

Dec 14, 2013 (3 years and 3 months ago)

118 views

1
JavaScript Review
Prof. Rasley
Objectives:

Overview of client-side JavaScript

The <script> tag

Some OOP vocabulary

JavaScript Source files

Comments in JavaScript

Hiding JavaScript code from old browsers

Placement of code

Variables
JavaScript’s Role on the Web

JavaScript brings HTML to life and makes Web
pages dynamic

Use JavaScript to change the contents of a Web
page after it has been rendered by a browser

The standardized client-side JavaScript is the
format available to HTML pages displayed in Web
browsers
2
Logic and Debugging

JavaScript has its own syntax, or rules of the
language

Logic underlying any program involves
executing the various parts of the program in
correct order to produce desired results

Any error in a program that causes it to function
incorrectly is called a bug

Debugging describes the act of tracing and
resolving errors in a program.

Debugging in a browser is not easy
Error Message in Navigator and Error
Message in Internet Explorer
The <SCRIPT> Tag

JavaScript is the default scripting language for
most Web browsers

Statements that make up a JavaScript
program in an HTML document are contained
between the <SCRIPT>…</SCRIPT> tag pairs

The language attribute of the <SCRIPT> tag
tells the browser which scripting language
and version is being used

JavaScript is an object-oriented
programming language
3
OOP:

An object is programming code and data that can
be treated as an individual unit or component

Individual lines in a programming language are
called statements

Groups of related statements associated with an
object are called methods

To execute, or call, an object’s methods, append
the method to the object with a period, and
include any required arguments or parameters
between parentheses
OOP:

An argument is any type of information that
can be passed to a method

The write () and writeIn() methods require a
text string as an argument

Text string, or literal string, is text that is
contained within double quotation marks

The writeIn () method adds a carriage return
after the line of text

See “js1.htm”
Creating a JavaScript Source File

For longer JavaScript code, it is easier to include the
code in a .js source file

There are several reasons you may want to use .js
source files instead of adding code to HTML:

Your HTML document will be neater

The JavaScript code can be shared among multiple
HTML documents

JavaScript source files hide JavaScript code from
incompatible browsers

See “sampleext.htm” and “ext.js”
4
Creating a JavaScript Source File

You can use a combination of embedded JavaScript code and
source files in your HTML document
Adding Comments to a
JavaScript Program

Comments are nonprinting lines that you place
in code to contain various types of remarks. For
example,name of program, your name, date
created, notes to self, or instructions to future
programmers to modify your work

Line comments are created by adding two
slashes // before the text

Block comments span multiple lines and are
created by adding /* to the first line to be
included in the block and finishing with */
JavaScript File With
Line and Block Comments
5
Hiding JavaScript from
Incompatible Browsers

JavaScript source files hide code from
incompatible browsers

If your HTML document contains embedded
JavaScript codes instead of calling an
external .js source file, then an incompatible
browser will display the codes

Alternate text in the <NOSCRIPT> tag is also
displayed if a user has disabled JavaScript
support in the Web browser
JavaScript Code Hidden From Incompatible
Browsers, Using HTML Comments
JavaScript Code with
<NOSCRIPT> Tag
6
Placing JavaScript in
HEAD or BODY Sections

Web browser renders tags in an HTML
document in the order in which they are
encountered

When there are multiple JavaScript code
sections in an HTML document, each section
is also executed in the order in which it
appears

The order in which a browser executes
JavaScript code also depends on which
section of the HTML document the
JavaScript code is placed in

See again “sampleext.htm” and “ext.js”
Variables:

Values stored in computer memory locations are
called variables

In JavaScript, use the reserved keyword var to
create variables

Reserved words, or keywords, are part of the
JavaScript syntax

Reserved words cannot be used as is for
variable names

When you use the reserved word var to create a
variable, you declare the variable

Variables can hold numbers, strings, booleans,
and nulls
More on Variables…

Var x=0, y=0, z=0;declares multiple variables
on one line

The name assigned to a variable is an identifier

Identifiers must begin with an uppercase or
lowercase ASCII letter, $, or _ note: the $
won’t work in old browsers

Numbers can’t be the first character

Reserved words cannot be used for variable
names, and there can’t be spaces within a
variable name
7
Reserved Words:
Some practical advice…

Common practices in variable names:

Use an (_) to separate individual words

Use a lowercase letter for the first letter of first word

Variable names, like other JavaScript code, are case-
sensitive

Examples:

My_variable

$my_variable

_my_variable

My_variable_example

myVariableExample
Illegal Names:
8
Types of variables (1):

Numbers:

JavaScript does NOT “type” the number to
floating-point, integer, etc.

Large numbers may be noted as:

X.XXeY that is 3.02e6 represents 3.02 * 10
6

Strings

Any characters enclosed in quotes (double or
single)

Strings are case sensitive

e.g. var name=“John Doe”;
Types of variables (2):

Boolean:

Has a value of true or false (1 or 0 are accepted also)

Are not enclosed in quotes – they are reserved words

e.g. Var chargetax = true;

Null

The variable has no value – null is a reserved word

Useful to test for input in scripts

e.g. var valuein = null;
Defining Functions:

A function allows you to treat a related group of
JavaScript statements as a single unit – define
functions in the <head> section

Lines that compose a function within an HTML
document are called the function definition

The syntax for defining a function is:
function name_of_function (parameters)
{
statements;
}

A parameter, or argument, is a variable that will
be used within a function
9
Example Function:
Calling Functions:

A function definition does not execute automatically

To execute a function, you must invoke, or call, it from
elsewhere in the program – call it after it is defined

Sending variables or values to a called function’s arguments
is called passing arguments

To return a value, include the return statement within the
called function -- You are not required to return a value from
a function

Using unique names to identify specific variables makes it
easier to understand a program’s logic and assist in the
debugging process

See “function.htm”
Function calls from the <body>
10
Variable Scope:

Variable scope refers to where in your program a
declared variable can be used

A variable’s scope can be either global or local:

Global variable is one that is declared outside of
a function and available to all parts of the
program

Local variable is declared inside a function and
is only available within the function

For global variables, the use of the var keyword is
optional
Events:

One way JavaScript makes HTML
documents dynamic is through events

An event is a specific circumstance that is
monitored by JavaScript

Most common events are actions that
users take – for example, a mouse click
JavaScript Events:
11
Html Tags and Events:
HTML Tags and Events:
Event Handlers:

When an event occurs, a program executes
JavaScript code that responds to the event

Code that executes in response to a specific
event is called an event handler

Event handler names are the same as the name
of the event itself

JavaScript code for event handler is contained
within quotation marks following the name of the
JavaScript event handler

JavaScript alert()method displays a pop up
dialog box with an OK button