1. JavaScript ICW: Lecture 11 Tom Chothia

2. 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.

3. 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.

4. Marks 40 pass, 60 Merit, 70 Distinction. Distribution of marks: 2550 100 75

5. 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.

6. 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.

7. 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....

8. Hello World in JavaScript: Put the JavaScript in a HTML web page. Put JavaScript between the HTML tags... The print command in JavaScript is: document.write( ); HTML between the... will be run if JavaScript is not enabled.

9. 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

10. Control Structors You have all your favourite Java Control Structures: for (var i = 0;i<10;i++){... } if (input=”hello”){...} else {...} while (i<10) {...}

11. 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); }

12. Functions and Files Put functions in the HTML header. You can link to a function: You can also load functions and script from a file: Loads and runs the JavaScript in the file: file.js

13. 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");

14. 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.

15. The JavaScript String Object Strings in JavaScript include the following methods: length() indexOf(subString) lastIndexOf(subString) match(pattern)

16. HTML Forms HTML forms let the user enter data on a website: Email:

17. HTML Forms onsubmit lets us test the input before accepting it. <form action="thanks.html” onsubmit="return validate_form(this”) method="post"> Email:

18. 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?

19. Cookies To create a cookie say: document.cookie = data; Test if a cookie exists with if (document.cookie.length>0) {… Cookie data is often stored as a list field=value, which need to be parsed.

20. 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".

21. 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.

22. 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.

23. 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

24. The History Object The History Objects gives length number of pages in the history previous URL of the last site visited.

25. 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.

26. 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.

27. 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.

28. Next Time: Java Database connectivity (JDBC) Serious Internet systems usually need a database. JDBC makes interacting with a database easy.