JavaScript overview (ppt) - Bill Pegram Home Page

mewstennisΛογισμικό & κατασκευή λογ/κού

4 Νοε 2013 (πριν από 4 χρόνια και 8 μήνες)

98 εμφανίσεις


Part I

William Pegram

George Mason University

June 3, 2010


JavaScript is a programming language

Its primary use is as a client
side scripting
language which means that it runs in a web

It can also be used as the scripting language
for applications that run on the server

(Active Server Pages) although VBScript is
more commonly used for this purpose

Uses of Client
Side JavaScript

Image rollovers

Validation of entries on forms


e.g. for entries on a form

Date and time features

Write and read cookies

up windows and display alert boxes

Redirection to other pages

Changes to pages without reloading entire

Uses of Client
Side JavaScript (cont.)

out menus

What Client
Side JavaScript Can’t

Can’t read or write files on client machines,
with the exception of the browser’s cookie file

Can’t read or write files on servers

Can’t close a window it hasn’t opened

Can’t read information from an opened web
page than came from another server

JavaScript is an Object

Although programming languages like Java
rely heavily on user
created objects, most
JavaScript programming utilizes pre
standard objects relating to web pages

e.g. a
window, a document, a form, or an element of
a form

These standard objects will have properties
(data relating to the object) and methods
(things the object can do)

Properties and Methods

The syntax for accessing properties is, e.g. window.status

The syntax for accessing methods is
objectname.methodname(), e.g

Often there will be information that is passed
to the method by placing it inside of the
parentheses, e.g. document.write(“Hello

JavaScript is case

JavaScript is case

When dealing with JavaScript standard
objects, their methods and their properties,
one must therefore match case exactly

typically everything will be lower case

For things you create, best to follow a
convention so that you don’t have to
remember how you capitalized something

Document Object Model (DOM)

The parts of a web page document can be
represented as a tree where objects in the tree
are nodes; these nodes can be HTML tags or

this is called the Document Object
Model (DOM)

JavaScript can be used to access and change
nodes on the tree, thus changing the document


Stands for Asynchronous JavaScript and XML

Is a combination of various technogies:



Document Object Model (DOM)



to request data from server

Used in Google maps, so you can drag map to
change what you see

Location of JavaScript

The JavaScript can be put within the web page
file or in an external text file (just like CSS
can be within a web page or in an external text

When JavaScript is placed between <script>
and </script> tags, it is executed when the
web page loads

<script> tag

<script language=“JavaScript”
type=“text/javascript”>JS statements

JavaScript is the default scripting language for
web pages, and thus the language attribute
may be eliminated; this attribute is also

External JavaScript files

<script language="JavaScript"
type="text/javascript" src="menu.js">


Just like the external CSS file contains what
otherwise would be between <style></style>,
the external JS file contains what would
otherwise be between <script></script> tags

<noscript> tags

2009 data from

suggest that
about 6% of users use a browser that either
doesn't support JavaScript or in which is has
been disabled

Content can be placed between <noscript> and
</noscript> tags; this content will only display
if the browser support for JavaScript doesn't
exist or has been disabled

Disabling JavaScript in browser

contains instructions on how to do
this for various browsers

note in IE, you
may have to close the browser after you
change the setting for it to take effect

If you are using JavaScript for menus of links,
putting the links between the <noscript> and
</noscript> tags will provide an alternate way
to access these pages

Testing <noscript> tags

As an alternative to disabling JavaScript to
test <noscript> tags, in Internet Explorer on
pages you are testing locally, you will be
prompted about whether to run the scripts

before you agree to that, the content between
the <noscript></noscript> tags will be visible,
because JavaScript is not yet enabled

Seeing JavaScript Errors

JavaScript errors are prevalent on websites;
perhaps for this reason both IE and Firefox
hide JavaScript errors

When you are writing JavaScript, you want to
be able to see these error messages

You want to be see them in both browsers
because the error messages are slightly
different and so one may better communicate
the problem to you than the other

Displaying JavaScript Errors

In IE, select Tools>Internet
Options>Advanced and then check the box in
the Browsing section "Display a notification
about every script error"

In Firefox, Tools>Error Console

you may
need to clear this so you only see current

JavaScript Elements

Reserved words







Reserved Words

Reserved words or keywords are words that have a
specific meaning to the JavaScript interpreter

would be document, window, forms, elements.

These cannot be used for other purposes in the program

Because these have pre
defined meanings, one must
match case when referring to these


A statement represents an action or a sequence of
actions; if you only have one statement on a line, ending
the line with a semicolon is optional, however it is
recommended so that the line numbers for error
messages can be more precise

document.write("Welcome to JavaScript!") ;


A pair of braces in a program forms a block that groups
statements together; this block can appear anywhere a
single statement can appear.

if (i<5) {




Methods are things an object can do; what these are
depend on the object

One often passes information to the object by calling the
method with arguments

these appear within the
parentheses, and if more than one, are separated by

This passing of arguments allows the method to do
similar, but different things, when it is invoked


Functions can be used in JavaScipt to define a
set of statements which then can be executed
from various places in the web page

Use of functions therefore makes it easier to
change these statements because the change
can be made once in the function rather than
in each place these statements would be used


Following (//) in a line, or

Enclosed between /* and */ in one or multiple lines

Browser doesn’t process comment

e.g. document.write(“Hello”); // displays hello to user

/* We can use the multi
line version of the comment

to avoid the necessity of using the double slashes in

every line */