Javascript

Javascript is a script language developed by Netscape Communication Corporation. It isn't a programming language like the Java language. Javascript's statements are embedded in an HTML page (you should know the HTML language before following this course...). When you download a web page by means of a client such as Netscape Navigator or Internet Explorer, the client reads the page from top to bottom, displaying it according to HTML rules. However you can also use Javascript. Javascript scripts are freeware, because you can read HTML pages in order to discover how they are built. I could say that Javascript is a 'cut&pasteware' language...In fact, all you need is inside of the HTML page (a piece of that page): just cut and paste it! Netscape Navigator's versions previous to 2.0 can't interpret Javascript, so if you have those versions, I suggest you a newer version (while I'm writing, the current Netscape's browser version is the 4.0). I think it is worth, because by means of Javascript you can do fantastic things. In addition, the current Javascript version is the 1.2 (in this case you need Netscape Navigator 4.0, because Navigator 3.0 can't interpret Javascript version higher than 1.1). Javascript is an object oriented script language and its statements are quite similar to C language statements. If you know Java or Visual Basic or C++ you can understand me when I talk about 'Object Oriented Programming Language' and about 'Events'. However, if you don't know these languages, don't worry: Javascript is really simple, and I will explain you all these concepts. Objects First of all, let me say that there is a client-side Javascript and a server-side Javascript. Server-side Javascript has its own objects. However I won't talk about server-side Javascript, but I will talk about the client-side Javascript. Besides, you could define your own objects. Ok, but now let's talk about these objects...Well, objects are simply 'things' which you can 'handle' by means of an object oriented language such as Javascript. Look at your desktop for example: the Win95 start button is an object; the screen is an object; a window is an object, a Word document is an object and so on...By means of Javascript, you can handle some of these objects, but I will talk about that later. Events Events are things that a web page visitor can do. When you visit a web page for example, you could find some links...When you click on a link, that is an event (the 'Click' event). When you press a key, that is another event (the 'KeyPress' event). In other words, the user's (the web page visitor's) actions, are events. Well, it isn't really so, because there are events which aren't due to user's actions, such as the 'error' event. The error event may occurs during the loading of an HTML page or an image for example. In Javascript, there is an 'event handler' for each event. The name of the event handler is the name of the event preceded by 'on'. For example, the event handler for the click event is 'onClick'. Javascript and Java Well, now let's see the differences between Javascript and Java: Javascript Java * Interpreted by client while it reads the HTML page. It can't be executed outside of a web browser * Compiled bytecode downloaded from server and executed by client. However it is a multiplatform language and it may be executed inside of all operating systems which have a Java Virtual Machine (also outside of a web browser) * Code embedded in HTML page * Applet distinct from HTML page * Object-based: objects can have their property added dynamically * Object-oriented: objects can't have their properties added dynamically. All objects are divided into class * Objects references checked dynamically at runtime * Objects references checked at compile-time * Variable data types not declared * Variable data types must be declared Now let's see our first script. In order to use Javascript, you have to use the tag. In fact, all web browser which can interpret Javascript, can know the beginning of a script by means of the tags (Javascript version 1.0). It ignores code within the tags and code within the tags 3. Netscape Navigator 3.0 executes code within thetags and it ignores code within the tags 4. Netscape Navigator 4.0 executes all Javascript versions up to 1.2 ( tags) Now you are wondering : 'How can I know which browser version will read my HTML page?' Look here: What does it means? If means: 'Please, browser, test this condition within parenthesis if it is true or if it is false...if it is true, then execute the red code!' (navigator.userAgent.indexOf ("4.0" != -1))is the condition which has to be verified by the browser. In this case it means: 'You, browser, are the Navigator 4.0 version...' jsVersion = "1.2" means: 'Ok, browser: you are Navigator 4.0, so you can surely execute Javascript 1.2! Go!' else means: 'if the condition is false, then, you have to do this other thing...' So, more or less, all the previous code means: 'If you are Navigator 4.0 then execute Javascript 1.2, else, if you are Navigator 3.0 then execute Javascript 1.1, else, execute Javascript 1.0. However don't worry if you can't understand these things very well: I will explain you them better later... Hiding Javascript to old browsers Now another thing: there are browser which can't interpret Javascript. So, what's happen if you put some Javascript statements inside an HTML page and a browser which doesn't know Javascript reads them? Well, nothing: the browser will interpret them as a normal text, and it will show them. In other words, if you write something like this: the browser will show: these are Javascript statements, blah, blah... That's: garbage... So, you have to hide these statements to all browsers that don't know Javascript. Let's see...as browsers usually ignore unknown tags, they will ignore the tags. But they won't ignore all things written within these tags! So you have to hide them by placing the script within '' as it was a comment:// means the beginning of a comment in Javascript. Ok, just another thing before starting with our first script: you can put the script inside of a file which isn't an HTML page. This file should have the file name suffix '.js' and it must contain only Javascript statements: it can't contains any HTML tags. You can specify the file so: Where myfile.js is the file which contains the script. Ok, finally the script Click here! This script uses a method. A method is a function associated to an object. You can handle objects by changing their properties or by means of their associated methods. In this case the object was 'window', and its method was 'alert'. In other words, a method is a 'way' to handle objects. Objects have a certain collection of things that they can do. Each object can do different things, just as a door can open and close, while a light can turn on and off. Window - as well as Navigator - is the top level element within the object hierarchy, and you have not to specify it, because it is assumed by default. This is the source of the HTML page: >> < A HREF="javascript:myfunction()">Click here! Code within HEAD tags is loaded before the rest of the document. You have to put that code there. In the above example, If you put it after '< A HREF= "javascript:myfunction()"> Click here!' tag, and if the user perform an action (e.g.,clicking) while the page is still loading, the browser won't be able to execute 'myfunction'. In this case, the browser will attempt to execute an undefined function, and an error it will occur. In fact, you have to define your function before use it! What's a function? Don't worry, I will explain you that later. This is a bad script to begin our lessons, because you can't understand really so much by means of it. In fact this is a third way to put Javascript statements inside of an HTML page: you can put a Javascript expression as the value of an HTML attribute. In fact, in the previous example, the value of HREF attribute is "javascript:myfunction()". However I used it just to show you how much easy Javascript is... Finally, another tag: . You could use this tag to specify an alternate content for browsers that non support Javascript. Just put the alternate HTML page within these tags.In this lesson we are going to know more about objects, properties, methods, events and events-handlers. First of all you have to consider your page's visitors as users. Each user can do something, and we could call this something as an event. However an event may be due to something which isn't an user's action, for example an error occurred while an HTML page is loading. Objects are things which can be modified by means of Javascript. Objects have their properties. For example, a car is an object. Make and model are properties of that car. The color is a property of that car. The engine is another property of that car and so on. To identify an object's property, you have to name the object followed by a point and its property. In order to identify the color of a car for example, you have to write so: mycar.color. Hence you can define its property by assigning a value. So, in the previous example, you could write: mycar.color ="red". However when we talk about Javascript's objects, we aren't obviously talking about cars...We are talking about particular objects. There is an object hierarchy as shown here: In the table above, an object's descendants are properties of the object. For example, an image named image1, is an object, but it is also a property of document, and is referred as document.image1. There are 2 main object in Javascript: Navigator and Window. Well, it isn't really so, because we should also consider server-side objects for example, but we are talking about client-side only. Well, let's see our second script: Second script: the status property In this second script, we are going to see an object and its property, an event and its event-handler. The object is Window, that's the browser's window. The property of the window object is Status, that's the status bar at the bottom of the browser's window. The event is MouseOver, and its event-handler is OnMouseOver. The MouseOver event means that the cursor moves over an object or area. Let's see: Place the mouse here, but DON'T CLICK! Now look at the bottom of your browser's window (the status bar)... And this is the HTML page: < A HREF="" OnMouseOver="myfunction('This is a fake link!); return true"> Place the mouse here, but don't click! As you can see, inside the Anchor tag you use an event-handler: OnMouseOver. In this case you are saying to the browser: 'When the user moves the cursor on this link, perform the function named myfunction', giving a string of characters to her, by passing it inside of an area (variable) named variable1. What's a function? A function is a procedure by means of which Javascript can perform something. For example, when you use your car, you perform always the same function! In fact you have to : 1. take the key of the door of your car 2. turn it inside of the door-lock 3. open the door of your car 4. sit-down 5. close the door 6. turn the key inside of the ignition-lock 7. press down the clutch 8. change gear 9. turn on the direction indicator 10. look at the driving mirror 11. notice if other cars are arriving 12. finally go! Well, the example above is the 'take-the-car' function... Ok, the curly brackets { } define the beginning and end of the function. The string which you were passing to the function is: 'This is a fake link!'. The 'myfunction' function, take the string contained inside of the area named variable1, and assign it to the status property of the window object. Well, but what's a variable? A variable is a 'black box' which can contain something. For example, your wallet is a variable. In fact it can contains money, little pieces of paper, your driving license, and so on. In this case, the variable 'variable1' contains the string 'This is a fake link!'. Notice that there is another statement: return true. If you omit that statement, the browser will show the URL contained inside of the anchor tag before showing 'This is a fake link!'. Try this HTML page without that statement : Place the mouse here, but don't click! < A HREF="" OnMouseOver="myfunction('This is a fake link!)"> Place the mouse here, but don't click! Finally, another thing: by using these scripts, you can't delete your phrase from the status bar. So people put a timer to delete that phrase after a while. However, by means of Javascript 1.2, you can use the OnMouseOut event-handler. Now you can delete the phrase checking the MouseOut event. Just try this: Move and remove the cursor from here And this is the HTML page: < A HREF="" OnMouseOver="myfunction('This is a fake link!); return true" OnMouseOut="show('');return true"> Place the mouse here, but don't click! Oh, I was forgetting: while passing the phrase, you haven't to use double quotes! You have to use single quotes... In this lesson I'm going to show you the way to change the background color of an HTML page. Place the cursor over (DON'T CLICK!) one of these colors: RED WHITE YELLOW BLACK And this is the HTML source: RED WHITE YELLOW YELLOW Do you need any explanation? Document is an object. This HTML page is the Document object! BgColor is one of several Document object's properties. In fact bgColor is the HTML page's (the Document object) background color. Whenever the MouseOver event occurs (you, visitor, move the cursor over the RED link, for example), the OnMouseOver event-handler calls the 'myfunction' function. In other words, by means of the Javascript language, you can 'talk' to the browser. In this case, you are saying to the browser: 'browser, perform the 'myfunction' function'. What's happen inside of that function? Well, you are saying to your browser: 'please, browser, assign the 'red' value to the bgColor Document's property. You need a variable to do this job. In fact, the 'mickeymouse' variable can contain: 'red', 'white', 'yellow' or 'black'. You can't know where the user will place the cursor, so you can't assign a fixed value to the BgColor property (such as 'white' for example); you have to assign a value to a variable (mickeymouse) depending on where the user will place the cursor...Core Objects Properties Methods Array * Index * Input * Length * Prototype * Concat * Join * Pop * Push * Reverse * Shift * Slice * Splice * Sort * toString * Unshift Boolean * Prototype * toString Date * Prototype * getDate * getDay * getHours * getMinutes * getMonth * getSeconds * getTime * getTimezoneOffset * getYear * parse * setDate * setHours * setMinutes * setMonth * setSeconds * setTime * setYear * toGMTString * toLocaleString * UTC Function * arguments * arity * caller * prototype * toString Math * E * LN10 * LN2 * LOG10E * LOG2E * PI * SQRT1_2 * SQRT2 * abs * acos * asin * atan * atan2 * ceil * cos * exp * floor * log * max * min * pow * random * round * sin * sqrt * tan Number * MAX_VALUE * MIN_VALUE * NaN * NEGATIVE_INFINITY * POSITIVE_INFINITY * prototype * toString Object * Constructor * Prototype * eval * toString * unwatch * valueOf * watch RegExp * global * ignoreCase * input * lastIndex * lastMatch * lastParen * leftContext * multiline * rightContext * source * compile * exec * test String * Length * Prototype * anchor * big * blink * bold * charAt * charCodeAt * concat * fixed * fontcolor * fontsize * fromCharCode * indexOf * italics * lastIndexOf * link * match * replace * search * slice * small * split * strike * sub * substr * substring * sup * toLowerCase * toUpperCase Document Objects Properties Methods Document * alinkColor * anchors * applets * bgColor * cookie * domain * embeds * fgColor * formName * forms * images * lastModified * layers * linkColor * links * plugins * referrer * title * URL * vlinkColor * captureEvents * close * getSelection * handleEvent * open * releaseEvents * routeEvent * write * writeln Link * hash * host * hostname * href * pathname * port * protocol * search * target * text * HandleEvent Image * border * complete * height * hspace * lowsrc * name * prototype * src * vspace * width * HandleEvent Layer * above * background * bgColor * below * clip.bottom * clip.height * clip.left * clip.right * clip.top * clip.width * document * name * pageX * page y * parentLayer * siblingAbove * siblingBelow * src * top * visibility * zIndex * captureEvents * handleEvent * load * moveAbove * moveBelow * moveBy * moveTo * moveToAbsolute * releaseEvents * resizeBy * resizeTo * routeEvent Window Objects Properties Methods Window * closed * defaultStatus * document * frames * history * innerHeight * innerWidth * length * location * locationbar * menubar * name * opener * outerHeight * outerWidth * pageXOffset * pageYOffset * parent * personalbar * scrollbars * self * status * statusbar * toolbar * top * window * alert * back * blur * captureEvents * clearInterval * clearTimeout * close * confirm * disableExternalCapture * enableExternalCapture * find * focus * forward * handleEvent * home * moveBy * moveTo * open * print * prompt * releaseEvents * resizeBy * resizeTo * routeEvent * scroll * scrollBy * scrollTo * setInterval * setTimeout * stop Location * hash * host * hostname * href * pathname * port * protocol * search * reload * replace History * current * length * next * previous * back * forward * go Screen * availHeight * availWidth * colorDepth * height * pixelDepth * width Form Objects Properties Methods Form * action * elements * encoding * length * method * name * target * handleEvent * reset * submit Hidden * form * name * type * value Text * defaultValue * form * name * type * value * blur * focus * handleEvent * select Textarea * defaultValue * form * name * type * value * blur * focus * handleEvent * select Password * defaultValue * form * name * type * value * blur * focus * handleEvent * select Fileupload * form * name * type * value * blur * focus * handleEvent * select Button * form * name * type * value * blur * click * focus * handleEvent Submit * form * name * type * value * blur * click * focus * handleEvent Reset * form * name * type * value * blur * click * focus * handleEvent Radio * checked * defaultChecked * form * name * type * value * blur * click * focus * handleEvent Checkbox * checked * defaultChecked * form * name * type * value * blur * click * focus * handleEvent Select * form * length * name * options * selectedIndex * type * blur * focus * handleEvent Option * defaultSelected * selected * text * value Navigator Objects Properties Methods Navigator * appCodeName * appName * appVersion * language * mimeTypes * platform * plugins * userAgent * javaEnabled * plugins.refresh * preference * taintEnabled MimeType * description * enabledPlugin * suffixes * type Plugin * description * filename * length * name