Add to collection(s) Add to saved
  1. Engineering & Technology
  2. Web Design

Javascript

advertisement 
Internet Mark-up Languages
CO32036
Part Lecture:
Elementary JavaScript
Lecture Contents
• Description
• Applications
• Location within
document
• Time of execution
• Variables
• Statements
• Case sensitivity
• Scope of Variables
• Programming
structures
• Events
• Strings
• Comments
• What next?
What is JavaScript?
• Scripting language = Written in text form
and interpreted line by line
• Non-copyright – anyone can use it
• Designed to make web pages interactive
• JavaScript ≠ Java. Name chosen only to
make it sound cool and groovy
• Microsoft have Jscript, which is nonstandard. Causes solvable problems
JavaScript can:
• Calculate (eg currency converters)
• Change contents of pages
– As they are loaded
– After they are loaded
•
•
•
•
Respond to client actions
Read, write and check contents of forms
Detect which browser is being used
Deposit cookies
1/3 places to put JavaScript:
<html>
<head></head>
<body>
<input type='button'
onclick=“javascript: alert(‘Boo!’);”
value=‘click here'/>
</body></html>
2/3 places to put JavaScript:
<html><head>
<script type='text/javascript'>
function popup(){ alert(‘Boo!’);}
</script></head>
<body>
<input type='button' onclick=“javascript:popup()”
value='wash'/>
</body></html>
3/3 places to put JavaScript:
<html><head>
<script type='text/javascript‘ src=popup.js>
</script></head>
<body>
<input type='button' onclick=“javascript:popup()”
value='wash'/>
</body></html>
3/3 places to put JavaScript:
• The contents of popup.js:
function popup(){ alert(‘Boo!’);}
Script in the body
<html>
<head> </head>
<body>
<script type='text/javascript'>
alert(‘Boo!’);
</script>
</body>
</html>
Execution time
• If script is to execute as the page is
loaded, put it in the body
• If it’s a function to be executed after the
page has loaded, put it in the head.
Variables
var mystring
var mystring = ‘Boo!’
mystring = ‘Boo!’
mystring = ‘Boo!’;
• A statement may be ended by a semicolon or a
line feed.
• Var and semicolons are optional but JavaScript
IS case-sensitive.
• Variable type is taken as implied
Scope
• Lifetime of variables is as in any other
language:
• Globals last for the lifetime of the page
• Variables within functions last for the time
the function is functioning
• Variables within functions can be read by
functions within functions (got that?)
If-Then-Else
<body>
<script type="text/javascript">
var d = new Date()
var time = d.getHours()
if (time < 12)
{ document.write("Good morning!") }
else { document.write("Good afternoon!") }
</script>
</body
Case -> Switch
switch (myInput) {
case 5: document.write(“Five") break
case 6: document.write(“Six") break
case 0: document.write(“Zero") break
default: document.write(“Unexpected!")
}
Loops - For
<html>
<body>
<script type="text/javascript">
var i=0 for (i=0;i<=10;i++) {
document.write("The number is " + i)
document.write("<br />") }
</script>
</body>
</html>
Loops - While
<html>
<body>
<script type="text/javascript">
var i=0; while (i<=10) {
document.write("The number is " + i)
document.write("<br />") i=i+1 }
</script>
</body>
</html>
Events
<a href=#
onmouseover="alert(‘Boo!');return false">
Run your mouse over this text.
</a>
Events
• Most HTML objects can be given events.
• These include:
• onfocus, unblur, onchange (usually form
fields)
• onclick (buttons and link text)
• onmouseover, onmouseout (swap images
for animation)
• onsubmit (form checking)
Events
• onload, onunload (ie on opening or closing
a page)
Used for browser checks, cookie checks
and extra windows containing irritating
adverts.
• There is also:
OnDblClick, OnKeyDown, OnKeyPress
OnKeyUp, OnMouseDown,
OnMouseMove, OnMouseUp…
Strings
• Getting text into JavaScript is not hard:
<input ondblclick="alert(this.value)">
• Text may be input from a separate file (see
later lectures)
• Alternatively, it may be constructed in the
document
Strings
• String manipulation is as you would
expect:
Var strvar=“a custard pie”;
document.write(strvar);
document.write(“I would like ”+strvar)
alert(strvar.length);
document.write(strvar.toUpperCase);
document.write("<h1>"+strvar+"</h1>")
Comments
• <!-- Comment-->
• <!-- This method of commenting is valid in
DTD and all XML documents, ie XHTML,
XSD, XSL, the works (but it may upset
some XML parsers, even though it is valid)
-->
• It does NOT work for JavaScript
Comments
<script type='text/javascript'>
<!-- This code WILL WORK
function rewriter(where,what){
document.getElementById(where).innerHTML = what;
}
-->
</script>
Comments
// In JavaScript, double slashes will
// comment out a single line
/* This is the way of commenting out
multiple lines of text (or code when you
are debugging */
What Now?
• This was only an introduction
• Try the w3schools tutorial on Javascript
• W3schools also has a reference on all
available JavaScript functions
• Try out examples (from anywhere) using
hapedit, W3schools TryIt editor or the IE
“view source” facility.
Lecture Review
• Description
• Applications
• Location within
document
• Time of execution
• Variables
• Statements
• Case sensitivity
• Scope of Variables
• Programming
structures
• Events
• Strings
• Comments
• What next?
Final Word
• If you’re stuck, get a good book. My own
is the Peachpit Press one.
• You don’t need a server to try out
JavaScript – only a browser. It will run
from your desktop.
• Enjoy!!
Download
advertisement