Web Programming CSC 242 Professor John Carelli Kutztown

Web Programming CSC 242 Professor John Carelli Kutztown University Computer Science Department

Arrays • Java. Script arrays are Array objects • implicit declaration • var ints 0= []; // new empty array • var ints 1= [ 1, 3, 5, 7]; • var ints 2= [ 2, , , 8]; // two elements are undefined • use new operator to create one* • var names= new Array(size) • size subscript is optional – empty array if not present • Elements are in numerical order starting at 0 (up to N-1) • subscript operator like C++ • ints 1[0] … ints 1[3] • Array know their own length! • use. length to get the number of elements • ints 1[ints 1. length – 1] // last element Professor John Carelli Kutztown University Use of new operator is discouraged!* • complicates code • can lead to unexpected results • var p= new Array(10, 20) // 2 elements • var p= new Array(20) // 20 elements! Computer Science Department

Arrays, cont. • Adding elements beyond the current length will automatically expand the array to the needed size • any intermediate, uninitialized values will be undefined • Array elements need not be the same type • Arr[0]= 2; Arr[1]= “hi”; // valid! • Looping with for / in for (enum in Arr) { } document. write(Arr[enum]); Arrays. html Professor John Carelli Kutztown University Computer Science Department

Array Methods • Arrays are objects • support a variety of methods • Some Methods – Array. Methods. html • to. String() and join() – convert elements to a string • push(), pop(), shift(), unshift() • index. Of(), slice() • Sorting – Array. Sort. html • sort() • string comparison, by default • can, optionally, take a comparison function as an argument Professor John Carelli Kutztown University Computer Science Department

Passing Arrays to Functions • Java. Script argument passing • Numbers, Boolean values, strings are all passed to functions by value • original argument variable cannot be modified by the function • Objects are passed by reference • original argument variable can be modified by the function • Arrays are objects, so they get passed by reference • pass the entire array by using the base name • function can modify the array elements Array. Passing. html • can also pass individual elements • they are passed by value - unless they are objects too!!! Professor John Carelli Kutztown University Computer Science Department

Java. Script Objects • A Java. Script Object is a container for named values called properties • each property has a value associated with it • like a hash or an associative array • properties are accessible in two ways: • myobject[“propname”] • myobject. propname • properties can be added with a simple assignment • myobject[“newprop”]= somevalue; • the new operator will return an object • var x = new String(); // Declares x as a String object Professor John Carelli Kutztown University Computer Science Department

Objects, cont. • Objects can contain methods • methods: a function that “belongs” to the object • this • a built-in variable that refers back to the current instance of the object • like C++ JSON var person = { first. Name: "John", last. Name: "Doe" }; • JSON (Java. Script Object Notation) • a standardized, and widely used, format for storing object information Professor John Carelli Kutztown University Basic. Objects. html Computer Science Department

DOM – Document Object Model • Contains a tree structure of all HTML objects in the currently loaded web page • Created whenever the browser loads a new page • Provides Java. Script with access to every HTML element on the page • Allows for programmatic control of the entire web-page! • Using the DOM, Java. Script can: • • change HTML elements in the page change HTML attributes in the page change CSS styles in the page remove existing HTML elements and attributes add new HTML elements and attributes react to any existing HTML events in the page create new HTML events in the page Professor John Carelli Kutztown University Computer Science Department

DOM, cont. • Some DOM methods and properties: • • document. get. Element. By. Id(…) document. get. Elements. By. Tag. Name(…) document. get. Attribute(…) document. inner. HTML • Can be called hierarchically: • ex: document. get. Element. By. Id("demo"). inner. HTML= “Hi”; DOM. html Professor John Carelli Kutztown University Computer Science Department