OVERVIEW OF CLIENT-SIDE SCRIPTING

Welcome to client-side scripting Make stuff happen on the user's computer without ever hitting the server Who cares? – Usability: It "feels good" for the user – Aesthetics: It looks impressive – Performance: It's faster than hitting the server – Scalability: It conserves server resources

Hyperlinks – your best non-script option Click me Another link Clicking a link causes the entire page to refresh, forcing a network request… very slow and ugly.

Examples of some scripting alert("hello world!"); Just mix some script tags into the HTML. The alert function just shows a textual popup.

Writing out HTML document.write(" HELLO, Mr. Smith!!! "); // text on next line is small so that PowerPoint doesn’t wrap line document.write(" "); The document.write function writes HTML to the page right when it is first loaded.

Variables var x = confirm("do you like it?"); document.write(" "+x+" "); The confirm function prompts the user and returns a Boolean. There is no static type system. The variable x will get treated as a Boolean at runtime when it is assigned. Its evaluated value will be converted to a string for concatenation with " " and " ".

Conditionals and comparisons var i = 40; if (i == 41-1 && i !== '40') document.write('looks nice'); else document.write('kinda weird'); Concatenation with a string yields a string. Comparison with == or != allows for type conversion, though. Comparison with === or !== requires an exact equality.

Loops for (var x = 0; x < 100; x++) document.write(x+" "); Much as in C or Java.

Arrays var myarray = ["A", "B", "C", "D"]; document.write(myarray[1]+"ob is the man!"); Each array object is indexed from 0 and has a.length property that indicates its number of elements.

Associative arrays var myobj = {name:"Jimmy", age:54}; alert(myobj.name+" is " + myobj.age); You can nest objects if you like. For example, myobj = {name:"Jimmy", age:54, son:{name:"Sam", age:20}};

Checking if an array entry is set var myobj = {name:"Jimmy", age:54}; alert("has son: "+(myobj.son ? "yes" : "no")); Missing values are equal to null. And null values are converted to a false Boolean in conditionals.

Functions function piEstimate() { return 3.14; } alert("PI is approximately "+ piEstimate()); Seems simple, right? Not so much. There's a whole lecture coming up about how fancy and sometimes confusing JavaScript functions actually are.

Regular expressions var isint = /^\-?[0-9]+$/; var strs = ["888","bob","-282"]; for (var i = 0; i < strs.length; i++) document.write(strs[i]+":"+isint.test(strs[i])+" "); The test function returns true if the string matches the pattern described by the regular expression, false otherwise.

Regular expressions cheat sheet [0-9] means any digit [a-z] means any lowercase letter [A-Z] means any uppercase letter (x|y|z) means x or y or z * means 0 or more + means 1 or more ? means 0 or 1 {4-5} means four or five ^ means starts with $ means ends with. means just about any character \ is how you escape the special characters above

Regular expressions examples [0-9]{5} means five digits [A-Z][a-z]+ means an uppercase followed by at least one lowercase (maybe more) (Powerpoint|Open Office) means "Powerpoint" or "Open Office" (Rubicon|Rider) v\. [0-9]\.[0-9] matches "Rubicon v. 3.2" and "Rider v. 1.1" and "Rider v. 7.2", etc

Accessing elements on the page document.getElementById("myfield").value = 'x'; In a couple lectures, we will see how you can manipulate the web page's structure using JS.

Event handlers Text inputs have onchange events, buttons have onclick events (and so do most other HTML elements). On event, the code runs.

You can manipulate parts of the page in your event handlers. img { width: 3in; }

What's next for you… Refer to w3schools Walk through three of these JS examples – Including one of the "advanced" examples If you have any questions, ask your instructor!