internet mark-up languages co32036 part lecture: elementary javascript
TRANSCRIPT
Internet Mark-up LanguagesCO32036
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 non-standard. 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 mystringvar 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 WORKfunction 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!!