JavaScript

ICW: Lecture 11

Tom Chothia

Last Lecture

• URLs

• Threads, to make a process run in parallel:• Make it extend Thread• Give it a run method• Call start() to set it going.

Exercise

Marks for Exercise will go into the SIS later today or tomorrow.

Grades: Over 40 Pass Over 60 VERY Good Over 70 Truly Outstanding

Exercises are worth 2.5 credits should be 20-40 hours work.

Marks

• 40 pass, 60 Merit, 70 Distinction.

• Distribution of marks:

25 50 10075

Marking for Exercise 2

35% How well you handle the HTTP

and network communication.

20% Quality of your code.

20% How easy is it to control your browser.

10% How well you display the HTML (use any

libraries you like).

15% extra in Part 4.

Today: JavaScript

JavaScript is a language for web pages, that will run on the client.

It can be added to any HTML file.

When the client loads the HTML it will execute the JavaScript.

Its not Java, but is kind of OO.

Why Use JavaScript?

Shift computation onto the client.

Personalise web pages to the reader.

Form validation

Keeping track of users: cookies.

Pop-up, alerts, new windows ....

Hello World in JavaScript:

• Put the JavaScript in a HTML web page.

• Put JavaScript between the HTML tags <script> ... </script>

• The print command in JavaScript is: document.write(<String>);

• HTML between the <noscript> ... </noscript> will be run if JavaScript is not enabled.

Variables

Can declare variables in JavaScript with:

var x = 10;

var Name =

“Tom”;

But it’s weakly typed:

var x = 11;x=x+3;x=x+”1”x=x+2

x will equal 1412

Control Structors

You have all your favourite Java Control Structures:

for (var i = 0;i<10;i++){ ... }

if (input=”hello”){...} else {...}

while (i<10) {...}

Functions

Functions (like methods) can be defined:

function helloTime (name){ var now = new Date; if (now.getHours()<12) return ("Good morning "+name); else return ("Good afternoon "+name);}

Functions and Files

Put functions in the HTML header.

You can link to a function: <a href=“javascript:fun(args)”;>

You can also load functions and script from a file: <script language=“JavaScript” src= “file.js” type =“text/javascript> </script>

Loads and runs the JavaScript in the file: file.js

Pop Up Boxes

• You can open a pop up box with:– alert(“message”);

• An OK/CANCEL box with:– var r=confirm("Press a

button");

• Or a prompt box with:– var name=prompt("Enter your

name","nobody");

What is This Useful For?

You can do a lot with what I have just showed you.

But Javascript is most useful for:• validating forms,• and keeping track of users.

The JavaScript String Object

Strings in JavaScript include the following methods:

• length()• indexOf(subString)• lastIndexOf(subString)• match(pattern)

HTML Forms

HTML forms let the user enter data on a website:

<form action="thanks.html method="post">

Email: <input type="text" name="email">

<input type="submit" value="Submit">

</form>

HTML Forms

onsubmit lets us test the input before accepting it.

<form action="thanks.html”

onsubmit="return validate_form(this”)

method="post">

Email: <input type="text" name="email">

<input type="submit" value="Submit">

</form>

Cookies

• Cookies let you store a string on the client.

• This can be used for– Identify the user,

– Storing their name, preferences etc.

– Tracking the user: time of last visit, etc.

How many cookies are in your browser?

Cookies

• To create a cookie say:

document.cookie = data;

• Test if a cookie exists withif (document.cookie.length>0) {…

• Cookie data is often stored as a list field=value, which need to be parsed.

The Navigator Object

navigator gives you system information:

• appName - name of the browser

• appVersion - version of number

• cookieEnabled – false if cookies are disabled

• cpuClass - e.g. "x86"

• onLine – is there an Internet connection

• platform -e.g. "Win32" for Windows 95.

• systemLanguage - language used e.g. "en-us".

Different Browser can act in different ways :-(

• Internet Explorer will give you the window size using

document.body.offsetWidth;

• Netscape family use:

window.innerWidth;

• You must find the browser type before using these commands.

More JavaScript Uses

• Make a 10 second counter before forwarding the user to a new site.

• Opening a new window.

• Automatically resizing the window based on the users browser.

The Window Object

The window object gives you some control over the browser:

• Close closes browser window• Focus brings window to the front• Open opens a new URL• ResizeTo resizes the window

The History Object

The History Objects gives

• length number of pages in the history

• previous URL of the last site visited.

Is This to Much?

• Maybe this is more power and information you want to give to the server?

• If your worried you can always turn JavaScript off

• and delete your cookies.

Online Tutorial

There is an excellent Java tutorial at:

http://www.w3schools.com/js/

http://www.tizag.com/javascriptT/

Take some time and go through this to learn more about JavaScript.

Conclusion

JavaScript is a language for web pages, that will run on the client.

Personalise web pages to the reader.

Form validation

Keeping track of users: cookies.

Next Time:

• Java Database connectivity (JDBC)

• Serious Internet systems usually need a database.

• JDBC makes interacting with a database easy.