| Definitions |
Javascript is not a tool in an of
itself - it runs off a browser. If your browser doesn't recognise javascript
- the code will be seen as text on your page (unless you comment it out
like this : <!-- to start your script and
//--> to end
Also, use the <noscript>....</noscript> tags for alternate html
for browsers that don't recognize javascript. |
Javascript is interpreted. - Not compiled. This
means it takes longer to execute the code. - The browser compiles the code
at runtime. (NS4 javascript on the server side uses compiled html and javascript
- stored in a .web file)
(Microsoft has a compiler available that will partially compile your javascript
code -- the link for this is in the "extra" category) |
Javascript works on Netscape 4, Jscript works
on IE 4 and uses the same <javascript> tag. vbscript works on IE --
we will ignore vbscript for this class.
Now javascsript and jscript are essentially the same with the advent of
NS6 and IE5.5 |
Why use Javascript:
Quicker Downloads: DHTML files are much smaller than files for comparable
effects created with multimedia programs like Shockwave and Flash (and even
using the built-in functions with dreamweaver)
No Plug-ins Required: DHTML uses tools already recognized by most browsers
so visitors don't have to download and install any special software to view
your site's contents. This increases your site's usability level |
| DHTML |
HTML that changes after the browser has loaded
the Web page. Generally this is in response to actions by the user (onClick,
onMouseOver, etc.). Dynamic effects range from simple popup windows to elaborate
animations and special effects |
| Javascript |
Most commonly used scripting language for creating
DHTML effects. Not a compiled language, harder to debug. In Netscape type
javascrpt: and you will see a list of syntax
problems. In IE you will get a debugger, this will display one line of code
that is the problem. (say "no" to opening a project) |
| CSS |
Cascading Style Sheets. Plain HTML defines a
document's structure, while CSS give you precise control over a document's
presentation. Defines the display attributes of elements on the page. With
DHTML, you use the CSS properties of a page element to change the element's
display. |
| link |
relationship between two resources, explicity
tells the browser the path to the document. |
element
a.k.a. node is used also |
our HTML tag |
attributes and properties
a more complete list - check out tags |
describe an element (set up by World
Wide Web Consortium...)
| events |
our onMouseOver, onMouseOut... |
| type |
could be text |
| id |
allows us to access our tags (i.e. elements) with javascript |
| name |
allows us to access our tags with javascript -- everything
needs a name or an id if you want to use it with your javascript |
| style |
we can now define many graphical facets for any tag |
| alt |
gives us "tooltips" and really helps search
engines |
| title |
gives us "tooltips" and really helps search
engines |
| src |
get external data to our webpage |
| bgcolor |
sets the background color |
| color |
sets the font color |
| top |
for layers, placement on the page |
| left |
for layers, placement on the page |
| align |
placement (horizontally) of an element within our table
or layer; or, alternately, next to our picture or plug-in |
| valign |
placement (vertically) of an element within
our table or layer; or, alternately, next to our picture or plug-in |
| target |
on a link, will open page in a frame or
new window |
| z-index |
integer
higher values are layered on top of lower values |
|
| syntax |
common types of errors for any programming language
- the typo's |
| logic |
- recheck your data - some situations might have unforseen results
- always initialize your variables on every page. This is good programming
practice for when you add database connection and you don't know what
is changed, where.
- logic is why we tell you to "structure" your data. Structure
controls the logic flow of a program.
|
| heirarchical programming |
 |
| modular |
watch how much you put into your
functions, and then we can just add "black boxes" to our programs
(where each function only does what it is supposed to do and will work under
all circumstances) |
| DOM |
Document Object Model.Takes the individual components
of the HTML document and organizes them into a hierarchal structure of named
objects. You must structure your HTML code to meet the DOM requirements
before you can implement DHTML effects. You have to understand the DOM in
order to use XML, APIs and eventually progress in javascript.. The DOM is
designed to be used with any programming language |
| API |
Application Program Interfaces. (In
our use)The Document Object Model (DOM) is an application programming interface
(API) for HTML documents. |
| HEAD element |
profile -a property and the set of
legal values for that property
title - Used for search engines to identify and describe your site
metatags - various uses |
| XML/XSL |
separates data and display -
hierarchy of Node objects that also implement other, more specialized
interfaces
http://www.w3.org/TR/1998/REC-DOM-Level-1-19981001/level-one-core.html
|
| Tree Model |
we use the term structure model for
Javascript --the model includes the structure and the behavior of a document
and the objects of which it is composed. In other words, the nodes in the
diagram do not represent a data structure, they represent objects, which
have functions and identity. |
| control structure |
one way in - one way out - no spagetti
code
Ultimately - you want to be able to have your flow work forwards - and on
html especially- BACKWARDS too! (The users have that BACK button) |
| Tokens - or Tags |
smalles individual words, phrases,
or characters that JavaScript can understand. -- Javascript looks for these
tags, ignoring comments and whitespace |
| Identifiers - Key values |
An attribute for a tag - It's name
that identifies it. All variables, methods, and objects. have their "name"--
Javascript has rules in setting up names |
| Keywords |
predefined identifiers that make up
the basic of the javascript language, see reserved words for the identifiers |
| Literals |
numbers or strings used to represent
fixed values - don't change during your program.
integers, floating-point, boolean, strings (characters enclosed in single
or double quotes), escape codes |
| Operators |
The = in between two expressions.
Javascript puts the value in the right-hand side into the left-hand expression.
Many math operators, string
operators, comparison operators |
| Variables, parameteres, and arguments. |
name given to a location in the computer's
memory where data is stored. The computer can use the name to find the location
of the value you gave it.
parameter - the variable you use in a function
argument - the values that are actually sent to the function when it is
called. |
| Declaring |
to use a variable in javascript you must first declare it -
var myVariable
to use a function in javascript you must first declare it -
f unction myFunction(){
code goes here
}
|
| Function, method |
a named area of your program that
does a specific action
A script that you can call by name at any time.
If you don't want your script to execute automatically when the page loads,
you can name it and call it at a later time.
Also useful if you want to repeat the same actions over in your page, just
call that group a name and it will execute everytime you call it. |
| Scope |
refers to the area or areas within
a program where a variablae can be used and seen.
Some are global - can be seen everywhere by every statement
Some are local to that function - this variable is recreated everytime that
function is called |
| Constants |
A variable that cannot change during
the program, attempting to change it would cause an error.
Javascript does not support constants - any variable can be changed
By replacing multiple instances of a variable, it's easier to update the
script at a later time. (Stick it at the top - where you can find it later,
use all caps to name it - then you will remember to not change it's value) |
| Expression |
group of statements that evaluate
to a single value. Includes variables and functions.
Used with operators. Example:
document.writeln(x = 10 )
(the number 10 is displayed) |
| Comments |
// will
comment out a single line
/* with text in between
a few lines
will comment out many lines */ |