Page
JavaScript Notes
1
Background and overview
The history of JavaScript and its purpose. The environment in which JavaScript operates. Standards.
Once upon a time there was the http protocol. Web pages defined with HTML were a novelty. However after a while people became a little bored with being able to do no more than clicking a link and going to a new page.
So in December 1995 Netscape, deeply embroiled in the browser wars with Microsoft, invented a scripting language which Navigator 2.0 could execute and which would enable a great deal more user interactivity. They planned to call it LiveScript - but just before they released it, Sun Microsystems released the first version of Java. Netscape's marketing people thought Java sounded a lot more lively than LiveScript, so they renamed it JavaScript, thus misleading a very large number of people into thinking that JavaScript and Java were somehow connected. They are not. This was Version 1.0.
Standards
Microsoft's reply to Netscape's JavaScript was something called JScript, starting with Internet Explorer 3.0. Since IE (more or less) had to be able to cope with JavaScript, JScript was pretty similar. As the table shows, successive versions of Netscape's Navigator and Microsoft's Internet Explorer used developing versions of JavaScript and Jscript, with Microsoft usually being one version behind. Some co-ordination started in 1998, when the standards agency ECMA developed something called ECMAScript 262, and Microsoft and others agreed to comply with this. However since then actual browser implementatiosn have continued to be supersets of this standard.
1994
|
NCSA Mosaic
|
|
|
|
|
1995
|
|
|
IE1, 2
|
|
|
March 1996
|
Navigator 2.0
|
JavaScript 1.0
|
|
|
|
August 1996
|
Navigator 3.0
|
JavaScript 1.1
|
IE 3
|
Jscript 1.0 JavaScript 1.0
|
|
Jan 1997
|
|
|
IE3
|
Jscript 2.0 JavaScript 1.1
|
|
June 1997
|
Navigator 4.0
|
JavaScript 1.2
|
|
|
|
Oct 1997
|
|
|
IE 4.0
|
Jscript 3.0 JavaScript 1.3
|
|
Jun e1998
|
|
|
|
|
ECMAScript-262 Version 1
|
Oct 1998
|
Navigator 4.5
|
JavaScript 1.3
|
|
|
Mozilla open source starts
|
Mar 1999
|
|
|
IE 5
|
Jscript 5.0 ECMAScript v.3
|
|
Dec 1999
|
|
|
|
|
ECMAScript version 3
|
Nov 2000
|
Navigator 6.0
|
JavaScript 1.5
|
|
|
|
July 2000
|
|
|
IE 5.5
|
Jscript 5.5 JavaScript 1.5
|
|
The initial version of the ECMAScript standard is on the web at -
http://www.ecma-international.org/publications/standards/Ecma-262.htm
The latest (June 2004) change to this is an extension to XML, at
http://www.ecma-international.org/publications/standards/Ecma-357.htm
JavaScript and the host environment
It is possible to see JavaScript as a general purpose language, but it was designed for, and is used in, the specific environment of a web page inside a browser. It is little use without interaction with this environment - which includes buttons and frames and such-like on the page. Hence it only becomes useful when treated together with 3 other standards, all defined by the W3C -
HTML - hyper-text markup language
CSS - cascading style sheets
DOM - the document object model
JavaScript as a language is quite straightforward – it is well-defined (as ECMAScript 262 ) and current browsers (and many older ones) implement that standard. However the host environment is a big problem. There is HTML 4.01, XHTML, DHTML, CSS1 and CSS2, and DOM1 and DOM2. Different versions of particular browsers implement different bits of different standards. One approach is to use JavaScript to work out which browser is being used, and then use different code. However there is not even a standard way of finding which browser you are on – and code like this has to be re-written every time a new version is released.
We will start with standard stuff which works on all browsers, and then look at more fancy bits.
Chapter
2
2 – Starting to write JavaScript
Organising software tools to write and debug web pages with JavaScript
Open NotePad and type in the following, very carefully (or if you are using the electronic version, copy and paste it ). Save it with a file extension .html, such as "one.html". Include the "quotes" around te filename, or Notepad will stick .txt on the end and you get one.html.txt.
Then in a browser (IE or whatever) go File Open Browse to this file, and open it:
----- 1 - HelloWorld -------
Some page content
Some page content
Some page content
Some page content
Some page content
onload="greet()">
is specifying the function 'greet' as the one to execute when the body is loaded.
Practical Task
The paragraph tag
has an onMouseOver event, which triggers when the user moves the mouse over the paragraph text. Using the above as a model, write a page containing a paragraph, so that a message is displayed when the user moves the mouse over it.
Chapter
5
The Document Object Model
How JavaScript refers to items on the screen
The last two sections have shown how JavaScript can use data values through variables. However the main things the script needs to process are the items in the browser window, and so some way of talking about them is needed. This is provided by the Document Object Model. This is a set of objects about windows and related things on the screen. This use of the word object comes from object-oriented programming. These objects have
-
properties
-
methods and
-
events
Properties are pieces of data about the object. For example, a window object has a status property - this is the text which is displayed in the status area at the bottom of the browser window.
A method is something you can tell an object to do. For example, a window has a resizeTo() method, which you use to tell the window to change its size.
An event is something that can happen to an object. You can set this to some JavaScript function - when the event occurs, that function executes. For example..
First DOM example
The browser already shows a window, but it is possible to use its open() method to create another window, by -
var newWindow =window.open("","nw", "menubar, status, resizable");
The open method takes 3 parameters. The first is the URL to open the window on - here that is "" or nothing. The second "nw" is the name of the new window. And the third sets some attributes of the new window - here that it will have a menubar, a status bar and be resizeable.
We can set one of the properties of the new window by -
newWindow.status ="Hello folks";
which writes 'Hello folks' in the status bar. This changes the value of the status property.
And we can call its resizeTo() method to change its width and height -
newWindow.resizeTo(400,200);
Putting this together we get -
----- 1 - HelloWorld -------
Some page content
Pic one
Pic two
Google
Google
Google
Close
Dostları ilə paylaş: |