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

Slides:



Advertisements
Similar presentations
Programming games Classwork: Show Favorite Sites. Show coin toss. Review concepts. Crooked coin toss. Homework: Complete coin toss examples. Upload files.
Advertisements

Page 1 of 26 Javascript/Jscript Ch 7,8,9,10 Vadim Parizher Computer Science Department California State University, Northridge Spring 2003 Slides from.
Georgia Institute of Technology JavaScript part 2 Barb Ericson Georgia Institute of Technology May 2006.
JavaScript (Part 2) CS 183 4/13/2010. JavaScript (Part 2) Will cover: ◦ For.. In ◦ Events ◦ Try.. Catch, Throw ◦ Objects.
CIS101 Introduction to Computing Week 10 Spring 2004.
Computer Science 103 Chapter 4 Advanced JavaScript.
CIS101 Introduction to Computing Week 10. Agenda Your questions Final exam and final project CIS101 Student Survey Class presentations: Your Mad Libs.
JavaScript 101 Lesson 5: Introduction to Events. Lesson Topics Event driven programming Events and event handlers The onClick event handler for hyperlinks.
Web Development & Design Foundations with XHTML Chapter 14 Key Concepts.
Programming Games Computer science big ideas. Computer Science jargon. Show virtual dog Homework: [Catch up: dice game, credit card or other form.] Plan.
Javascript and the Web Whys and Hows of Javascript.
JavaScript Form Validation
JS: DOM Form Form Object Form Object –The Form object represents an HTML form. –For each instance of a tag in an HTML document, a Form object is created.
Introduction to JavaScript. JavaScript Facts A scripting language - not compiled but interpreted line by line at run-time. Platform independent. It is.
JavaScript Defined DOM (Document Object Model) General Syntax Body vs. Head Variables Math & Logic Selection Functions & Events Loops Animation Getting.
Creating Web Documents: JavaScript, continued Tool reports Creating new windows Form input verification Homework: read about JavaScript, start planning.
Bridges To Computing General Information: This document was created for use in the "Bridges to Computing" project of Brooklyn College. You are invited.
IT – som værktøj Bent Thomsen Institut for Datalogi Aalborg Universitet.
JavaScript II ECT 270 Robin Burke. Outline JavaScript review Processing Syntax Events and event handling Form validation.
CNIT 133 Interactive Web Pags – JavaScript and AJAX JavaScript Environment.
JavaScript Part 1.
JavaScript Part 1.
Internet Mark-up Languages CO32036 Part Lecture: Elementary JavaScript.
CSS Class 7 Add JavaScript to your page Add event handlers Validate a form Open a new window Hide and show elements Swap images Debug JavaScript.
1 Lesson 7 Using Images with JavaScript HTML and JavaScript BASICS, 4 th Edition Barksdale / Turner.
Creating Web Documents Questions on JavaScript (lecture, text)? Work on JavaScript examples and/or Project III Calculations Homework: experiment, research.
Unit 2 — The Exciting World of JavaScript Lesson 6 — Using Images with JavaScript.
1 JavaScript 1. 2 Java vs. JavaScript Java –Is a high level programming language –Is platform independent –Runs on a standardized virtual machine.
Introduction to JavaScript Basharat Mahmood, Department of Computer Science, CIIT, Islamabad, Pakistan. 1.
Pemrograman Teknologi Internet W06: Functions and Events.
Extending HTML CPSC 120 Principles of Computer Science April 9, 2012.
Programming Games Show project. Refresher on coordinates. Scaling, translation. HTML5 logo. Refresher on animation. Bouncing ball. Homework: Do your own.
Functions, Objects, and Programming IDIA 619 Spring 2014 Bridget M. Blodgett.
JavaScript, jQuery, and Mashups Incorporating JavaScript, jQuery, and other Mashups into existing pages.
Programming Games Reprise on drawing on canvas. Jargon (concepts): objects. Demonstrate slingshot. Mouse events. Work on your cannonball. Homework: Finish.
JavaScript – more arrays, images. Image Object and images[] array  Using allows us to display images on webpages. What if we want more control of what.
Created by, Author Name, School Name—State FLUENCY WITH INFORMATION TECNOLOGY Skills, Concepts, and Capabilities.
Creating Web Documents: JavaScript Continue with JavaScript Form check Dice (die) throw Questions for midterm Homework: Prepare for midterm. Complete project.
Programming games HTML/JavaScript basics Functions, events, forms Classwork: [Show favorite sites.] Coin toss. Homework: GET WEB SPACE. Complete coin toss.
Creating Web documents Questions on JavaScript Hints calendar example "Great homepages really suck" Homework: Project 3.
Handling Image & Animation Using JavaScript HTML tag to display image: More options:
Creating Web Documents catch-up JavaScript slide show tools redirection.
JavaScript – return function, time object and image rollover.
ECA 225 Applied Interactive Programming ECA 225 Applied Online Programming control structures, events, objects.
Jaana Holvikivi 1 Introduction to Javascript Jaana Holvikivi Metropolia.
Programming Games Logic. Slide show. Range input. Storage. Datatypes. Binary numbers. Homework: Catch up. This includes uploading projects to your server.
1 CSC160 Chapter 7: Events and Event Handlers. 2 Outline Event and event handlers onClick event handler onMouseOver event handler onMouseOut event handler.
Event Handling. Objectives Using event handlers Simulating events Using event-related methods.
JavaScript Defined DOM (Document Object Model) General Syntax Body vs. Head Variables Math & Logic Selection Functions & Events Loops Animation Getting.
CIS 3.5 Lecture 2.3 "Introduction to JavaScript".
Copyright © Terry Felke-Morris WEB DEVELOPMENT & DESIGN FOUNDATIONS WITH HTML5 7 TH EDITION Chapter 14 Key Concepts 1 Copyright © Terry Felke-Morris.
JavaScript: Functions © by Pearson Education, Inc. All Rights Reserved.
Computer Science I Share plans for virtual something. Text. Show my virtual dog. Classwork: Plans for your virtual something. Homework: start implementation.
Creating Web Documents: JavaScript Ftp / file management: review Introduction to JavaScript Sources Homework: start review for midterm, work on Project.
Javascript Overview. What is Javascript? May be one of the most popular programming languages ever Runs in the browser, not on the server All modern browsers.
Computer Science I Assignments. Extra credit possibilities. Have a great break!
Programming Games Reprise: credit cards. Show video projects. Demonstrate Find Daniel and Virtual Dog. Homework: [Catch up.] Post proposal for your JavaScript.
JavaScript II ECT 270 Robin Burke. Outline Functions Events and event handling Form validation.
JavaScript and Ajax (JavaScript Functions) Week 5 Web site:
1 Lesson 6 Introducing JavaScript HTML and JavaScript BASICS, 4 th Edition.
JavaScript and Ajax (JavaScript Environment) Week 6 Web site:
Programming Games Reprise Credit Cards! Reprise Binary. Overall time limit, setTimeout Homework: [Show virtual something.] Make proposal as reply to my.
Programming games Show work on site. Work on slide show. Timed event for bouncing ball. Homework: [Finish slide show and upload to site.] Acquire a short.
Programming Games Work / finish and show dice game. Extras. Timed events. ftp. index file. Homework: Catch up and do slide show.
Web Programming– UFCFB Lecture 17
Programming Games Computer science big ideas and Computer Science jargon: review of things we have used in examples. Show virtual dog Homework: [Catch.
Event Driven Programming & User Defined Functions
Recognizing JavaScript Features
Programming games Share your plans for your virtual something.
CNIT 133 Interactive Web Pags – JavaScript and AJAX
Presentation transcript:

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

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

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)

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 ); }

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; }

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); }

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"; } //-->

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.

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.

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.

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

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.