1. Internet Mark-up Languages CO32036 Part Lecture: Elementary JavaScript

2. Lecture Contents Description Applications Location within document Time of execution Variables Statements Case sensitivity Scope of Variables Programming structures Events Strings Comments What next?

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

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

5. 1/3 places to put JavaScript:

6. 2/3 places to put JavaScript: function popup(){ alert(‘Boo!’);} <input type='button' onclick=“javascript:popup()” value='wash'/>

7. 3/3 places to put JavaScript: <input type='button' onclick=“javascript:popup()” value='wash'/>

8. 3/3 places to put JavaScript: The contents of popup.js: function popup(){ alert(‘Boo!’);}

9. Script in the body alert(‘Boo!’);

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

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

12. 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?)

13. If-Then-Else var d = new Date() var time = d.getHours() if (time </body

14. 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!") }

15. Loops - For var i=0 for (i=0;i ") }

16. Loops - While var i=0; while (i ") i=i+1 }

17. Events Run your mouse over this text.

18. 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)

19. 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…

20. Strings Getting text into JavaScript is not hard: Text may be input from a separate file (see later lectures) Alternatively, it may be constructed in the document

21. 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(" "+strvar+" ")

22. Comments It does NOT work for JavaScript

23. Comments

24. 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 */

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

26. Lecture Review Description Applications Location within document Time of execution Variables Statements Case sensitivity Scope of Variables Programming structures Events Strings Comments What next?

27. 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!!