Empower User Experience through Client-side Scripting

1. Overview of Client-side Scripting http://www.flickr.com/photos/pmarkham/3165964414/

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

3. Hyperlinks – your best non-script option <a href="someotherwebpage.html">Click me</a> <a href="http://www.anotherserver.com/full/path/to/file.html"> Another link</a> Clicking a link causes the entire page to refresh, forcing a network request… very slow and ugly.

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

5. Writing out HTML <script> document.write("<b>HELLO, Mr. Smith!!!</b><br>"); // text on next line is small so that PowerPoint doesn’t wrap line document.write("<img src='http://images4.fanpop.com/image/photos/20800000/The-Fresh-Prince-of-Bel-Air-1x01-The-Fresh-Prince-Project-the-fresh-prince-of-bel-air-20895627-1536-1152.jpg'>"); </script> The document.write function writes HTML to the page right when it is first loaded.

6. Variables <script> var x = confirm("do you like it?"); document.write("<i>"+x+"</i>"); </script> 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 "<i>" and "</i>".

7. Conditionals and comparisons <script>vari = 40; if (i == 41-1 && i !== '40') document.write('looks nice'); else document.write('kindaweird'); </script> Concatenation with a string yields a string. Comparison with == or != allows for type conversion, though. Comparison with === or !== requires an exact equality.

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

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

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

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

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

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

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

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

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

17. Event handlers <form> <input onchange="alert('blah blah')"> <input type="button" onclick="alert(2)"> </form> Text inputs have onchange events, buttons have onclick events (and so do most other HTML elements). On event, the code runs.

18. You can manipulate parts of the page in your event handlers. <style> img { width: 3in; } </style> <img id='will' src='http://images4.fanpop.com/image/photos/20800000/The-Fresh-Prince-of-Bel-Air-1x01-The-Fresh-Prince-Project-the-fresh-prince-of-bel-air-20895627-1536-1152.jpg'> <form><input type=button value="Upgrade" onclick="document.getElementById('will').src='http://cdn2.screenjunkies.com/wp-content/uploads/2011/03/will-smith-mib-3-script.jpg'"> </form>

19. What's next for you… • Refer to w3schools http://www.w3schools.com/js/js_examples.asp • Walk through three of these JS examples • Including one of the "advanced" examples • If you have any questions, ask your instructor!