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

JavaScript

advertisement 
JavaScript - 1h
JavaScript is a scripting language. This means that it is written in text form and
interpreted line by line. It was invented by the then Netscape Communications
Corporation. Java was an exciting new language at the time, so this new scripting
language was called JavaScript because it too was exciting and new. Do not be
misled – JavaScript has nothing whatsoever to do with Java.
Javascript is non-copyright – anyone can use it. It is designed to make web pages
interactive. Microsoft have Jscript, which is non-standard. The existence of the two
similar languages causes problems which are solvable.
JavaScript can:
Like most languages, it can calculate (eg currency converters). It can change the
contents of pages as they are loaded, or after they are loaded. It can respond to client
actions. It can read, write and check contents of forms. It can detect which browser is
being used (important to cope with non-standard microsoft browsers). It can also
deposit and read cookies
Places to put JavaScript:
You can put Javasript in three places: Firstly, it may be mixed in with the body of the
HTML
<html>
<head></head>
<body>
<input type='button'
onclick=“javascript: alert(‘Boo!’);” value=‘click here'/>
</body></html>
You can put functions in the head and refer to them from the body:
<html><head>
<script type='text/javascript'>
function popup(){ alert(‘Boo!’);}
</script></head>
<body>
<input type='button' onclick=“javascript:popup()”
value='wash'/>
</body></html>
You can put all your JavaScript into a separate file and include it when the page is
loaded:
<html><head>
<script type='text/javascript‘ src=popup.js>
</script></head>
<body>
<input type='button' onclick=“javascript:popup()”
value='wash'/>
</body></html>
The contents of popup.js:
function popup(){
alert(‘Boo!’);}
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, but do not exist after the page is reloaded or changed. Variables within
functions last only 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” is handled by “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 are handled by “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 are also handled by “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>
Most HTML objects can be given HTML events. These include:
 onfocus, unblur, onchange (usually form fields)
 onclick (buttons and link text)
 onmouseover, onmouseout (swap images for animation)



onsubmit (form checking)
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.
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
Let’s look at the standard HTML way of doing 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 -->
An HTML comment will NOT stop JavaScript from working. You cannot “comment
out” in this way.
<script type='text/javascript'>
<!-- This code WILL WORK
function rewriter(where,what){
document.getElementById(where).innerHTML = what;
}
-->
</script>
// 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 */
Download
advertisement