CODE TO LIVE

Tuesday, 24 April 2012

js browser properties

Testing your Visitor's Browser

The document object dealt with code between the BODY tags. The navigator object is used to reveal information about the browser your visitors are using. Because some browsers can't deal with certain things (like the document.images code we wrote), the navigator object is typically used to help divert these users away from any code that they can't handle.

Two Properties of the navigator object are:

appName
userAgent
Let's use an alert box to test them out. If you don't want to open a new page for this exercise, you can just comment out any old code between SCRIPT tags. Like this:

// document.open()

// document.write("<H1>Hello</H1>")

The two forward slashes mean "please ignore this code". Whether you decide to create a new web page, or use an old one, type this code in the HEAD section of the page:

<SCRIPT LANGUAGE = JavaScript>

alert(navigator.appName)

</SCRIPT>

If you're using Internet Explorer, you'll get this before the page loads:

The Naigator Ap Name in Internet Explorer

Whereas, if you're using Netscape/Mozilla, you'll get this before the page loads:

The Naigator Ap Name in Netscape

Try changing the alert box to this:

<SCRIPT LANGUAGE = JavaScript>

alert("Your Browser is: " + navigator.appName)

</SCRIPT>

The plus sign (+) is used to combine things. Here, we're combining the direct text "Your Browser is:" with whatever value is returned from navigator.appName. Note that the direct text has double quotes surrounding it, and navigator.appName doesn't. Save your work and load the web page again. You should get something like this (in Netscape):

Test the Browser

OK, so we can tell which browser our visitor is using. But there are many different versions of Netscape and Internet Explorer. An early version of Netscape won't be able to do as much as the latest version, and therefore may not be able to run our scripts. If we just use navigator.appName we won't be able to tell if our user has an early version or the latest version.

To solve the problem, we can use navigator.userAgent. Change your alert box to this:

alert(navigator.userAgent)
Now reload your web page.

Internet Explorer will give you something like this:

The User Agent Property

The part that's useful to us is MSIE 5.01. This tells us that our visitor is using Microsoft Internet Explorer version 5.01. Here's the Netscape version:

The User Agent Property for Netscape

The information we're looking for is now on the end: Netscape 6

By using navigator.userAgent we can return all of that text and store it in a variable. We'd then use a JavaScript function to strip out the bit we're looking for. An IF statement is then typically used to execute code depending on what the browser is.

js image

A JavaScript Rollover
For this part, you may need these two images. Right click on the images, and save them to your own computer:

Now we can begin.

A useful property of document is images. The images property tells you if any images are loaded. If the answer is yes, and your HTML images have a NAME attribute, document.images can gain access to them. Why is this useful? Well, let's see. Examine this HTML code for an image:

<BODY>

<IMG SRC = "pointer1.jpg" NAME = "but1">

</BODY>

Simple enough, because it's just standard HTML Image code. We can turn the image into a link by surrounding it with an Anchor tag:

<BODY>

<A HREF = "page2.html">

<IMG SRC = "pointer1.jpg" NAME = "but1" Border = 0>

</A>

</BODY>

Still, simple enough: now we've just added the HREF tag and switched the borders off in the image. However, we can add a bit of JavaScript to the Anchor link. This bit of JavaScript uses the images property of document. Like this:

<BODY>

<A HREF = "page2.html" OnMouseOver = "document.images.but1.src= 'pointer2.jpg'">

<IMG SRC = "pointer1.jpg" NAME = "but1" Border = 0>

</A>

</BODY>
That code looks a bit messy spread over two lines. Notice, though, what was added to the HREF code. It was this:

OnMouseOver = "document.images.but1.src= 'pointer2.jpg'"

Remember the OnClick event of the button you did? Well, OnMouseOver is another event you can use. This event does something when the user places the mouse over a link, or an image, or whatever. After the equals sign (assignment operator, if you please), we write the code (not forgetting all those awfully messy double and single quotes):

"document.images.but1.src= 'pointer2.jpg'"

See what we're pointing at? The document.images part is pointing to our image that has the NAME but1. We're then saying access the SOURCE (src), and change it to 'pointer2.jpg'.

To see the effect that all this code has, move your mouse over the image below. Move it away and then back again.

Neat, hey? Are the neighbours impressed yet? Blimey, they're a tough crowd.

The code for the "dancing hand" uses an event related to the OnMouseOver event - the OnMouseOut event. The code is then exactly the same, except you're resetting the image back to pointer2:

OnMouseOut ="document.images.but1.src='pointer2.jpg'"
So by using the images property of document you can create a rollover effect. This is not, however, the recommended way to create a rollover. The standard way is to pre-load the images in the head section of the web page, then use something called a function to switch the images around.

js document

The document Title Property

The Title of a web page appears at the very top of the browser window. You set it by typing some text between the two <TITLE> tags. You can use JavaScript to either get the Title or to set a new one. Here's a script that pops up the Title in an alert box. Try it out and see it in action:

<HTML>
<HEAD>
<TITLE>The title of this web page</TITLE>

<SCRIPT LANGUAGE = JavaScript>

alert(document.title)

</SCRIPT>

</HEAD>

<BODY>

</BODY>
</HTML>

You can also reset the title of the web page. Change you alert code to this:

alert(document.title = "Now I've changed it")

The equals sign in there doesn't actually mean equals. It means "assign the value". So what we're saying is "Assign the value of 'Now I've changed it' to the title of the document."

Any direct text that you type after the "assignment operator" (the equals sign) needs to go inside double quotes.

Load up your new code in your browser, and watch what happens. First, you'll get an alert box:

Netscape/Mozilla Alert Box

Alert Box in Netscape

Internet Explorer Alert Box

Alert Box in Internet Explorer

But that's not the only thing that happens. If you look at the very top of your browser, the title should have change from "The title of this web page" to "Now I've changed it." Here's the changed version in the two most popular browsers:

Netscape Title Bar

Internet Explorer Title Bar

Now that you're an expert with alert boxes, here's a little exercise.

Exercise

Use an alert box to test out the location property of document.

js methods

That Document Thing

As was mentioned, document is a part of the Document Object Model. We saw a method that can be used with document, but here's a couple more (Properties and Methods).

Properties

    bgColor
    fgColor
    title
    location
    images
    forms

Methods

    open()
    close()
    write()
    writeln()

There are quite a few more Properties and Methods you can use with document, but these are enough for us. Let's see how you can use them in your own scripts.

Start a new web page in your HTML Editor (Or use an old one, if you like - waste not, want not!) Then add this to the BODY section of your page:

<BODY>

<INPUT TYPE = Button VALUE = "Colour One" Onclick = "document.bgColor = 'Red'">

<INPUT TYPE = Button VALUE = "Colour Two" Onclick = "document.bgColor = 'Blue'">

<INPUT TYPE = Button VALUE = "Colour Three" Onclick = "document.bgColor = 'Green'">

</BODY>

Remember, when you're typing the OnClick code that this bit

"document.bgColor = "

is surrounded by double quotes, and this bit:

'Green'

is surrounded by single quotes. And the whole thing is a confusion of single and double quotes:

Onclick = "document.bgColor = 'Green'"

When you're done, save your work and view the results in your browser. Click the button and see what happens.

Well, how did you get on? That should impress the neighbours, hey? If it doesn't, you have some very strange people living next-door to you. Try moving house until you find some neighbours who are impressed.

The background colour of your web page should have changed colour when you clicked a button. It did this because of the bgColor poperty of the document object.

document.bgColor =

After the equals sign, you can either type a name of a colour, or better use an Hexadecimal value:

document.bgColor = #FF0000
document.bgColor = #0000FF
document.bgColor = #00FF00

The fgColor property is similar to the bgColor property. Except it will change the colour of any foreground text on your page. Try it out and see how it works. You only need to change the "b" of "bgColor" to an "f". And type some text.

js tags

The Script Tag and HTML

At the moment, we have our script between the two BODY tags. And it works perfectly well here. It's quite happy where it is. However, SCRIPTS are best kept in the HEAD section of your HTML. This is because any code in the HEAD section will be dealt with first by the browser. And besides, it's neater up there. You're not cluttering up your HTML code with lots of JavaScript.

So, cut your script out of the BODY section, and paste it into the HEAD section. Like this:

<HTML>
<HEAD>
<TITLE>A First Script</TITLE>

<SCRIPT LANGUAGE = JavaScript>

document.write("Hello World")

</SCRIPT>

</HEAD>

<BODY>

</BODY>
</HTML>

Save your work, and then view the results in your browser. Did it make a difference? No, it did not. But rest assured that your script was dealt with before anything in the BODY section.

You can also put your scripts into HTML tags. Here's the document.write() code inserted into a Form's Button code:

<BODY>
<INPUT TYPE = Button VALUE = "Click Me" OnClick = "document.write('Hello World')">
</BODY>

Looks a bit messy, but then scripting languages can get like that. Notice, however, that we've shifted the document code to our button:

OnClick = "document.write('Hello World')"
OnClick is an event that can be applied to buttons (amongst other things.) We'll get to Events later, but for now, note that the same code we wrote earlier then goes after an equals sign ( = ). Or is it the same code? Have you spotted the difference?

Yes, Hello World is now in single quotes! That's because we used up our double quotes surrounding the document.write() part. And JavaScript doesn't like you using two sets of double quotes in the same bit of code. There's a lot of things that JavaScript doesn't like. Get used to it.

So what have we learnt so far? We've learnt this:

    Scripting code is written between a pair of <SCRIPT> </SCRIPT> tags
    You can refer to the two BODY tags by using the word "document"
    You can use the write( ) method of document to insert stuff onto your web pages
    JavaScript is very picky about the way you spell things

The Pop-up message box

We've seen one way to display text - with the write() method of document. Another way to display text (and numbers) is with a little pop-up box. These are called Alert boxes in JavaScript, and they are ideal for nagging your users when they don't fill in your forms correctly. Here's a picture of one:

Internet Explorer Alert Box

The code for an Alert box is quite simple. It's this:

alert("That was not a proper email address")

Notice the cunning use of "alert" for an alert box? The message you want to get over to your users goes between the two brackets. Surround your text message with double quotes, or single quotes if you're putting it after an equals sign in a HTML element.

OnClick = "alert('That was not a proper email address')"

Javascript Introduction

Beginner's JavaScript Tutorials

Introduction and a First Script

Our quick javascript links
Background Colour
An Easy Rollover
Browser Check
if Statements
for loops
Javascript and Forms
Little Programmes
Colour Picker
Lottery
A simple calculator

Introduction

This course deals with Scripts. A Script is a segment of code that manipulates the browser and its contents in ways that is not possible with ordinary HTML or Cascading Style Sheets. By using a script in your web pages, you can gain more control of how the page looks and behaves: dates and times can be added to the page, form elements validated before the contents are sent, browser details checked, cookies set, even simple games can be added to a web page - all with a scripting language.

The learning curve for scripting is a lot a steeper than HTML and Style Sheets. But you can learn the basics, and use scripts on your own pages, without it causing you too much trouble. The scripting language covered in these pages is meant to get you started on the subject, and is not intended as an in-depth study.

We're going to study the JavaScript programming language, because it is a widely-used scripting language for web pages. All the scripts in these pages have been tested with modern versions of a wide variety of browsers. If you're ready, then, let's make a start.

A First Script

Let's jump right in with a bit of code. Fire up whatever HTML Editor you use (you can use our free Editor by clicking here: Download the free editor ). With your editor open, copy the following code. When you're done copying it, save your work and load it into your browser.

<HTML>
<HEAD>
<TITLE>A First Script</TITLE>
</HEAD>
<BODY>

<SCRIPT LANGUAGE = JavaScript>

document.write("Hello World")

</SCRIPT>

</BODY>
</HTML>

All right, how did you get on? All that typing should have gotten you this in the browser:

"Hello World"

Granted, that's a heck of a lot of trouble to go to just to write "Hello World". But it's a start. Let's explain what's going on.

When you're writing your scripts, you enclose them between two <SCRIPT> tags, an opening one and a closing one. The opening one should tell the browser what language the script is written in:

<SCRIPT LANGUAGE = JavaScript>

The closing Script tag is just the word SCRIPT in between two angle brackets with a forward slash:

</SCRIPT>

Most of your JavaScript will go between these two tags. So what's all that "document dot write" bit?

document.write("Hello World")

Document is part of something called the Document Object Model. Document refers to all the text and HTML elements between the two BODY tags. And that includes any attributes inside the BODY tag itself. Like BGCOLOR.

Write( ) is a method of Document. A method is a bit of code that actually does something. As opposed to a Property, which IS something. Methods are usually Verbs, and Properties usually Nouns. The Write( ) method writes text (and numbers as well) between the two BODY tags on your page.

For all you English language experts out there who might be protesting about the lack of capital letters, Document is spelt with a lowercase "d", and Write with a lowercase "w". Try changing your code to this and see what happens:

Document.Write("Hello World")

JavaScript is damned picky about capital letters - it doesn't like them at all!

The part or parts between the two brackets of write( ) are what will be written to your page. Direct text goes between two double quotes; Variables don't need any. Whoops, we haven't done variables yet. We'll get to them.

So the whole line reads "Write the text Hello World between the two BODY tags of the web page."

Monday, 23 April 2012

SVG Polyline

SVG Polyline - <polyline>

Example 1

The <polyline> element is used to create any shape that consists of only straight lines:

Here is the SVG code:
Example
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<polyline points="20,20 40,25 60,40 80,120 120,140 200,180"
style="fill:none;stroke:black;stroke-width:3" />
</svg>

For Opera users: View the SVG file (right-click on the SVG graphic to view the source).
Example 2

Another example with only straight lines:

Here is the SVG code:
Example
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<polyline points="0,40 40,40 40,80 80,80 80,120 120,120 120,160"
style="fill:white;stroke:red;stroke-width:4"/>
</svg>

SVG polygon

SVG Polygon - <polygon>
Example 1

The <polygon> element is used to create a graphic that contains at least three sides.

Polygons are made of straight lines, and the shape is "closed" (all the lines connect up).

Remark Polygon comes from Greek. "Poly" means "many" and "gon" means "angle".

Here is the SVG code:
Example
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<polygon points="200,10 250,190 160,210"
style="fill:lime;stroke:purple;stroke-width:1"/>
</svg>

For Opera users: View the SVG file (right-click on the SVG graphic to view the source).

Code explanation:

The points attribute defines the x and y coordinates for each corner of the polygon

Example 2

The following example creates a polygon with four sides:

Here is the SVG code:
Example
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<polygon points="220,10 300,210 170,250 123,234"
style="fill:lime;stroke:purple;stroke-width:1"/>
</svg>

For Opera users: View the SVG file (right-click on the SVG graphic to view the source).
Example 3

Use the <polygon> element to create a star:

Here is the SVG code:
Example
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<polygon points="100,10 40,180 190,60 10,60 160,180"
style="fill:lime;stroke:purple;stroke-width:5;fill-rule:nonzero;" />
</svg>

For Opera users: View the SVG file (right-click on the SVG graphic to view the source).
Example 4

Change the fill-rule property to "evenodd":

Here is the SVG code:
Example
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<polygon points="100,10 40,180 190,60 10,60 160,180"
style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" />
</svg>
NEXT

SVG shapes

For Opera users: View the SVG file (right-click on the SVG graphic to view the source).

Code explanation:

    The CSS opacity property defines the opacity value for the whole element (legal range: 0 to 1)

Example 4

Last example, create a rectangle with rounded corners:

Here is the SVG code:
Example
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<rect x="50" y="20" rx="20" ry="20" width="150" height="150"
style="fill:red;stroke:black;stroke-width:5;opacity:0.5"/>
</svg>

Try it yourself »

For Opera users: View the SVG file (right-click on the SVG graphic to view the source).

Code explanation:

    The rx and the ry attributes rounds the corners of the rectangle
SVG Ellipse - <ellipse>
Example 1

The <ellipse> element is used to create an ellipse.

An ellipse is closely related to a circle. The difference is that an ellipse has an x and a y radius that differs from each other, while a circle has equal x and y radius:

Here is the SVG code:
Example
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<ellipse cx="300" cy="80" rx="100" ry="50"
style="fill:yellow;stroke:purple;stroke-width:2"/>
</svg>
Try it yourself »

For Opera users: View the SVG file (right-click on the SVG graphic to view the source).

Code explanation:

    The cx attribute defines the x coordinate of the center of the ellipse
    The cy attribute defines the y coordinate of the center of the ellipse
    The rx attribute defines the horizontal radius
    The ry attribute defines the vertical radius

Example 2

The following example creates three ellipses on top of each other:

Here is the SVG code:
Example
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<ellipse cx="240" cy="100" rx="220" ry="30" style="fill:purple"/>
<ellipse cx="220" cy="70" rx="190" ry="20" style="fill:lime"/>
<ellipse cx="210" cy="45" rx="170" ry="15" style="fill:yellow"/>
</svg>

Try it yourself »

For Opera users: View the SVG file (right-click on the SVG graphic to view the source).
Example 3

The following example combines two ellipses (one yellow and one white):

Here is the SVG code:
Example
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<ellipse cx="240" cy="50" rx="220" ry="30" style="fill:yellow"/>
<ellipse cx="220" cy="50" rx="190" ry="20" style="fill:white"/>
</svg>
NEXT

Scalable vector Graphics

SVG Shapes

SVG has some predefined shape elements that can be used by developers:

    Rectangle <rect>
    Circle <circle>
    Ellipse <ellipse>
    Line <line>
    Polyline <polyline>
    Polygon <polygon>
    Path <path>

The following chapters will explain each element, starting with the rect element.
SVG Rectangle - <rect>
Example 1

The <rect> element is used to create a rectangle and variations of a rectangle shape:

Here is the SVG code:
Example
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<rect width="300" height="100"
style="fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0)"/>
</svg>

.

Code explanation:

    The width and height attributes of the rect element define the height and the width of the rectangle
    The style attribute is used to define CSS properties
    The CSS fill property defines the fill color of the rectangle
    The CSS stroke-width property defines the width of the border of the rectangle
    The CSS stroke property defines the color of the border of the rectangle

Example 2

Let's look at another example that contains some new attributes:

Here is the SVG code:
Example
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<rect x="50" y="20" width="150" height="150"
style="fill:blue;stroke:pink;stroke-width:5;fill-opacity:0.1;
stroke-opacity:0.9"/>
</svg>

Code explanation:

    The x attribute defines the left position of the rectangle (e.g. x="50" places the rectangle 50 px from the left margin)
    The y attribute defines the top position of the rectangle (e.g. y="20" places the rectangle 20 px from the top margin)
    The CSS fill-opacity property defines the opacity of the fill color (legal range: 0 to 1)
    The CSS stroke-opacity property defines the opacity of the stroke color (legal range: 0 to 1)

Example 3

Here is the SVG code:
Example
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<rect x="50" y="20" width="150" height="150"
style="fill:blue;stroke:pink;stroke-width:5;opacity:0.5"/>
</svg>
NEXT