JavaScript

1. JavaScript Helpful sites: http://www.w3schools.com http://docs.oracle.com/cd/E19957-01/816-6409-10/

2. JavaScript History • Originally developed by Netscape (Brendan Eich) • Later adopted by Microsoft in IE but called JScript. • Standardized in 1996, official name – ECMAScript • ECMA, European Computer Manufactures Association • Standard is ECMA-262

3. JavaScript • CORE: • Objects: Array, Boolean, Date, Function, Math, Number, RegExp, String • Operators • Control statements • Statements • Client-Side • Objects: Document, Window, Navigator • Server-Side • Objects to communicate with a database, save information from one invocation to the next (session variables), manipulate files

4. Client-Side JavaScript Objects: Document, Window, Navigator Objects are passed to client-side JavaScript via the Document Object Model (DOM) (BOM – Browser Object Model, not standardized and no strict definitions)

5. JavaScript Objects Four sources: • Build-in (from the JavaScript core) • Custom made by programmers • Web documents (DOM) • Browser (BOM)

6. Document Object Model, DOM • Standardized by W3C • Application Program Interface, API, for documents. • Platform- and language- neutral interface that allows programs and scripts to dynamically access and update the content, structure and style of documents. • Used by JavaScript to access elements in a document

7. JavaScript Object Hierarchy

8. Example Objects

9. JavaScript Objects * See next slide

10. Example: Date object <script type="text/javascript">var d = new Date();document.write(“The month is “ + d.getMonth());</script>

11. Identifiers (names) Identifiers: • (letter | _ |$) (digit | letter | _ | $)* • Don’t start with $ since these variables typically have special meaning • Case sensitive (don’t use uppercase) • Reserved words: break, case, do, if, for, new, switch, this, … • Also avoid predefined words: alert, java, open, self

12. JavaScript Reserved Words

13. Comments Comments: • /*…… ……………. ……………. */ • // (like Java, C, C++, C#)

14. Linking in HTML

15. Linking in HTML CSS: <link rel=“stylesheet” type=“text/css” href=“myStyle.css” /> JavaScript: <script type=“text/javascript” src=“myCode.js” ></script>

16. Locating Elements

17. Java vs. JavaScript

18. Java vs. JavaScript

19. JavaScript Objects A prototype-based language, such as JavaScript, does not distinguish between classes and instances, it simply has objects. Can say these are prototypical objects, an object used as a template from which to get the initial properties for a new object. Any object can specify its own properties, either when you create it or at run time. In addition, any object can be associated as the prototype for another object, allowing the second object to share the first object's properties.

20. JavaScript Objects JavaScript objects are just a collection of key/value pairs. Two types of properties: data and methods (functions). All properties are key/value pairs. Data properties can be primitive (like C scalar values) or objects. Methods are objects.

21. JavaScript Functions/Methods • Methods – subprograms associated with an object • Function – subprograms not associated with an object.

22. JavaScript functions • Variables declared within function are local • Primitive parameters are pass-by-value, objects are pass by reference.

23. JavaScript Primitive Types

24. Primitive Types vs. Wrapper Objects

25. JavaScript Wrapper Objects

26. JavaScript Wrapper Objects

27. Events Event – notification that something specific has occurred Event handler – code executed in response to an event Registration – associating an event handler to an event

28. Events

29. The <p> tag supports the following event attributes: • Attribute • onclick • ondblclick • onmousedown • onmousemove • onmouseout • onmouseover • onmouseup • onkeydown • onkeypress • onkeyup

30. Registering Events Two ways to associate an event handler with an event: • Assign event handler code to an event tag attribute <input type = “button” id = “myButton” onclick = “myButtonHandler();” /> • Assign event handler code to an event property document.getElementById(“myButton”).onclick = myButtonHandler;

31. Accessing Form Elements Given: <form name="myForm"> <input type="text" name="foo" id="foo" /> Many ways to access to an element: [1] document.forms[0].elements[0]; [2] document.myForm.foo; [3] document.getElementById('foo'); [4] document.getElementById('myForm').foo;

32. Accessing Form Elements • Avoid using document collections. • The name attribute is used to name things, not to access them. It is for naming things like windows, input fields, and anchor tags. • Use the id attribute Id. It uniquely identifies an element so that you can get access to it. • name and id are often used interchangeably but they should not be used that way anymore.

33. JavaScript Errors - Firefox

34. JavaScript Errors - Chrome

35. Validate Phone Nubmer • Could locate dash using indexOf(‘-’) • Extract portion of string using substring(0, posDash) • Check if you have a number isNumeric • Check if it is in the correct range, … Better, use regular expressions.

36. Regular Expressions • Regular expression, regex, describes a search pattern. The search method will take the pattern and return true if the pattern is matched and false otherwise. • Example to validate an email address pretty flexibly: \b[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}\b • Keith’s quick guide: https://katie.mtech.edu/classes/csci136/slides/136-regular-expressions.pdf, 2nd to the last page

37. JavaScript RegExp Object

38. Regular Expressions varmyRegEx = new RegExp(“[0-9]{3}-[0-9]{3}-[0-9]{4}”);

39. JavaScript String Wrapper

40. Search Method search() method searches a string for a specified value, or regular expression, and returns the position of the match, or -1 if no match is found. varstr="Visit W3Schools!";var n=str.search("W3Schools"); n becomes 6

41. Date Object • dateObj = new Date() • dateObj= new Date(dateVal) • dateObj= new Date(year, month, date[, hours[, minutes[, seconds[,ms]]]])

42. Enclosing in HTML comments <head> <title> Very Accommodating </title> …?> </head> <body> <script type = “text/javascript”> <!- - document.write(“Oldies can’t see this.”); // --> </script> <body>

43. Dynamic XHTML Dynamic XHTML allows changes to documents defined using XHTML after the document has been or is still being displayed. Same as what we were doing with DOM. • Locate the item which you want to change via document.getElementById(“xxx”); • Use JavaScript to make the change • Invoke the JavaScript based on • a browser event (onblur) • user inputs • timer

44. Stacking Documents Add a third dimension to your document with z-index

45. Stacking Documents z-index property sets the stack order of an element. The element with the highest stack order is visible. zIndex only works on elements that have been explicitly positioned (position: absolute).

46. Stacking Documents Add a third dimension to your document with z-index

47. Dynamic XHTML Positioning is relative to the upper left hand corner of whatever the thing is being positioned in (the screen, a cell, etc.) Three types of positioning: • Absolute • Relative • static

48. Positioning • Absolute – place this element at the given position without regard to the positions of the other elements (unless this element is inside another element) • Relative – when top and left are given, place the item that much off from where it would have been placed • Static – the position of an item doesn’t change (except for flowing as necessary) This is the default.

49. Using the Timer

50. Dynamic XHTML setTimeout – execute the given code after the given number of milliseconds Example: setTimeout(“myFunc()”, 50); setInterval – execute the given code repeatedly, using the second parameter as the interval between executions Can pass parameters to the function. Example: setInterval(“myFunc()”, 50); Example: setInterval(“myFunc()”, 50, 10, 10);