JavaScript

1. ICW: Lecture 11 Tom Chothia JavaScript

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: 25 50 75 100

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 <script> ... </script> • The print command in JavaScript is: document.write(<String>); • HTML between the <noscript> ... </noscript> will be run if JavaScript is not enabled.

9. But it’s weakly typed: var x = 11; x=x+3; x=x+”1” x=x+2 x will equal 1412 Variables • Can declare variables in JavaScript with: • var x = 10; • var Name = • “Tom”;

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

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: • <form action="thanks.html method="post"> • Email: <input type="text" name="email"> • <input type="submit" value="Submit"> • </form>

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

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.