1. Creating Web documents JavaScript: modeling dog behavior general modeling concepts JavaScript review

2. Dog behavior Feed dog Dog gains /loses weight Pet dog –wag tail –show anger

3. JavaScript parts variables: time last fed, timing interval, weight functions: –seconds_elapsed: calculates time since last feeding –startgame, stopgame, –feeddog, –petdog, –change: function invoked each interval form: used to display weight and condition image tag: used to display appropriate image of dog (possibly animated gif)

4. Pet <!-- var weight; var tid; var feedDate ; var feedTime ; function seconds_elapsed () { var date_now = new Date (); var time_now = date_now.getTime (); var time_diff = time_now - feedTime; var elapsed = Math.floor ( time_diff / 1000 ); return ( elapsed ); }

5. function change() { var secspast; secspast = seconds_elapsed(); if (secspast> 10) { document.forma.condition.value = "dog hungry"; weight = weight - 1; } else { document.forma.condition.value = "dog okay"; } document.forma.dogweight.value = weight; }

6. function feeddog() { feedDate = new Date(); feedTime = feedDate.getTime(); weight = weight + 10; document.forma.condition.value = "dog fed"; } function startgame() { weight=100; feeddog(); tid=setInterval('change()',1000); } function stopgame() { window.clearInterval(tid); }

7. function petdog() { var e; var p; var r; e = seconds_elapsed(); p = 1-(e/20); if (p<.1) { p =.1; } r = Math.random(); if (r<p) { document.dogpic.src="wag.gif"; } else { document.dogpic.src="mean.gif"; } //-->

8. Concepts Model: a representation of something Models can be realistic=based on our understanding of how things work (all science is building & testing models) OR fanciful OR in- between Models can be deterministic and/or non- deterministic (based on probabilities, aka 'stochastic' processes) –Dog model had both. Models can have discrete and/or continuous features. –Dog model basically continuous: weight. Tail wagging was based on threshold value.

9. Data driven applications Applications are said to be data-driven if they are based on … data, generally externally supplied data. John Klima had data driven applications, for example, the currency project that controlled the birds. Visualization is the name for the technique of displaying (real) data in ways that could lead to insights, including scientific discoveries.

10. JavaScript overview You have seen: –use of Date –status bar –image slide show –dice throw –image swap based on mouse over –form verification –dog model –(will see calculation of bills) GENERALIZE! Use features to put together your ideas.

11. JavaScript features variables –local & global (outside of any function) –arrays built-in functions: Date, Math.random, document.write, others. functions forms (for input & output) named image tags events: onMouseOver, onSubmit, onMouseout setInterval (setting up handler for timed event) If, For, return statements

12. Homework Catch up on postings (including posting idea for project 3, including keywords and description). Read postings! Use google.com to look up how to do things in JavaScript.