JavaScript Notes



Yüklə 391,5 Kb.
tarix07.11.2018
ölçüsü391,5 Kb.
#78673

Page

JavaScript Notes




Chapter

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








Result:


 


Pic one

Pic two









Google

Google

Google

Close


Yahoo

Yahoo

Yahoo



Close











Yüklə 391,5 Kb.

Dostları ilə paylaş:




Verilənlər bazası müəlliflik hüququ ilə müdafiə olunur ©genderi.org 2024
rəhbərliyinə müraciət

    Ana səhifə