JavaScript ICW: Lecture 11 Tom Chothia. Last Lecture URLs Threads, to make a process run in...
-
date post
21-Dec-2015 -
Category
Documents
-
view
216 -
download
2
Transcript of JavaScript ICW: Lecture 11 Tom Chothia. Last Lecture URLs Threads, to make a process run in...
![Page 1: 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.](https://reader036.fdocuments.us/reader036/viewer/2022062516/56649d615503460f94a43571/html5/thumbnails/1.jpg)
JavaScript
ICW: Lecture 11
Tom Chothia
![Page 2: 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.](https://reader036.fdocuments.us/reader036/viewer/2022062516/56649d615503460f94a43571/html5/thumbnails/2.jpg)
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.
![Page 3: 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.](https://reader036.fdocuments.us/reader036/viewer/2022062516/56649d615503460f94a43571/html5/thumbnails/3.jpg)
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.
![Page 4: 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.](https://reader036.fdocuments.us/reader036/viewer/2022062516/56649d615503460f94a43571/html5/thumbnails/4.jpg)
Marks
• 40 pass, 60 Merit, 70 Distinction.
• Distribution of marks:
25 50 10075
![Page 5: 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.](https://reader036.fdocuments.us/reader036/viewer/2022062516/56649d615503460f94a43571/html5/thumbnails/5.jpg)
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.
![Page 6: 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.](https://reader036.fdocuments.us/reader036/viewer/2022062516/56649d615503460f94a43571/html5/thumbnails/6.jpg)
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.
![Page 7: 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.](https://reader036.fdocuments.us/reader036/viewer/2022062516/56649d615503460f94a43571/html5/thumbnails/7.jpg)
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 ....
![Page 8: 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.](https://reader036.fdocuments.us/reader036/viewer/2022062516/56649d615503460f94a43571/html5/thumbnails/8.jpg)
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.
![Page 9: 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.](https://reader036.fdocuments.us/reader036/viewer/2022062516/56649d615503460f94a43571/html5/thumbnails/9.jpg)
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
![Page 10: 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.](https://reader036.fdocuments.us/reader036/viewer/2022062516/56649d615503460f94a43571/html5/thumbnails/10.jpg)
Control Structors
You have all your favourite Java Control Structures:
for (var i = 0;i<10;i++){ ... }
if (input=”hello”){...} else {...}
while (i<10) {...}
![Page 11: 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.](https://reader036.fdocuments.us/reader036/viewer/2022062516/56649d615503460f94a43571/html5/thumbnails/11.jpg)
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);}
![Page 12: 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.](https://reader036.fdocuments.us/reader036/viewer/2022062516/56649d615503460f94a43571/html5/thumbnails/12.jpg)
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
![Page 13: 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.](https://reader036.fdocuments.us/reader036/viewer/2022062516/56649d615503460f94a43571/html5/thumbnails/13.jpg)
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");
![Page 14: 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.](https://reader036.fdocuments.us/reader036/viewer/2022062516/56649d615503460f94a43571/html5/thumbnails/14.jpg)
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.
![Page 15: 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.](https://reader036.fdocuments.us/reader036/viewer/2022062516/56649d615503460f94a43571/html5/thumbnails/15.jpg)
The JavaScript String Object
Strings in JavaScript include the following methods:
• length()• indexOf(subString)• lastIndexOf(subString)• match(pattern)
![Page 16: 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.](https://reader036.fdocuments.us/reader036/viewer/2022062516/56649d615503460f94a43571/html5/thumbnails/16.jpg)
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>
![Page 17: 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.](https://reader036.fdocuments.us/reader036/viewer/2022062516/56649d615503460f94a43571/html5/thumbnails/17.jpg)
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>
![Page 18: 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.](https://reader036.fdocuments.us/reader036/viewer/2022062516/56649d615503460f94a43571/html5/thumbnails/18.jpg)
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?
![Page 19: 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.](https://reader036.fdocuments.us/reader036/viewer/2022062516/56649d615503460f94a43571/html5/thumbnails/19.jpg)
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.
![Page 20: 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.](https://reader036.fdocuments.us/reader036/viewer/2022062516/56649d615503460f94a43571/html5/thumbnails/20.jpg)
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".
![Page 21: 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.](https://reader036.fdocuments.us/reader036/viewer/2022062516/56649d615503460f94a43571/html5/thumbnails/21.jpg)
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.
![Page 22: 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.](https://reader036.fdocuments.us/reader036/viewer/2022062516/56649d615503460f94a43571/html5/thumbnails/22.jpg)
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.
![Page 23: 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.](https://reader036.fdocuments.us/reader036/viewer/2022062516/56649d615503460f94a43571/html5/thumbnails/23.jpg)
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
![Page 24: 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.](https://reader036.fdocuments.us/reader036/viewer/2022062516/56649d615503460f94a43571/html5/thumbnails/24.jpg)
The History Object
The History Objects gives
• length number of pages in the history
• previous URL of the last site visited.
![Page 25: 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.](https://reader036.fdocuments.us/reader036/viewer/2022062516/56649d615503460f94a43571/html5/thumbnails/25.jpg)
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.
![Page 26: 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.](https://reader036.fdocuments.us/reader036/viewer/2022062516/56649d615503460f94a43571/html5/thumbnails/26.jpg)
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.
![Page 27: 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.](https://reader036.fdocuments.us/reader036/viewer/2022062516/56649d615503460f94a43571/html5/thumbnails/27.jpg)
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.
![Page 28: 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.](https://reader036.fdocuments.us/reader036/viewer/2022062516/56649d615503460f94a43571/html5/thumbnails/28.jpg)
Next Time:
• Java Database connectivity (JDBC)
• Serious Internet systems usually need a database.
• JDBC makes interacting with a database easy.