JavaScript overview (ppt) - Bill Pegram Home Page

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

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

84 εμφανίσεις


JavaScript


Part I

William Pegram

George Mason University

June 3, 2010



Overview


JavaScript is a programming language


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


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

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

Uses of Client
-
Side JavaScript


Image rollovers


Validation of entries on forms


Calculations


e.g. for entries on a form


Date and time features


Write and read cookies


Pop
-
up windows and display alert boxes


Redirection to other pages


Changes to pages without reloading entire
page

Uses of Client
-
Side JavaScript (cont.)


Fly
-
out menus

What Client
-
Side JavaScript Can’t
Do


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
-
Oriented
Language


Although programming languages like Java
rely heavily on user
-
created objects, most
JavaScript programming utilizes pre
-
existing
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
objectname.property, e.g. window.status


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


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

JavaScript is case
-
sensitive


JavaScript is case
-
sensitive


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
text


this is called the Document Object
Model (DOM)


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


AJAX


Stands for Asynchronous JavaScript and XML


Is a combination of various technogies:


XHTML


CSS


Document Object Model (DOM)


XML


XMLHttpRequest


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
file)


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
here</script>


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

External JavaScript files


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

</script

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
http://www.thecounter.com/stats/

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


http://www.mistered.us/tips/javascript/browse
rs.shtml

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
errors

JavaScript Elements


Reserved words


Modifiers


Statements


Blocks


Methods


Functions


Comments


Reserved Words


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

examples
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

Statements


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!") ;

Blocks

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) {

document.write(i);

i=i+1;}


Methods


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
commas


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

Functions


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

Comments


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 */