Post on 05-Jan-2016
transcript
Programming gamesShow shaking screen, quiz show.
CalculationsHomework: (Finish basic Javascript Projects) Make proposal. Work on
project
Recap on simulation
• Start function invokes setInterval that sets up call to change function.
• Change function makes logical checks (using if or (perhaps) switch) that may lead to changes of image (.src of img element) or text (.value of input element(s))
• Other functions may lead to changes of images and/or text and/or internal variables.
Other applications
• Shaking window
• Quiz show
• Random image on loading
Operators
• + – does addition if the operands are numbers– concatenation if the operands are strings. So,
if you see 11 when you expected to see 2, you will need to change a number into a string
• * does multiplication
• / does division
• - does subtraction
Chocolate shop Example
(see on-line, called calculation from forms)
• Customer enters number of boxes of chocolate and cocoa– uses forms
• Program calculates total cost and cost with tax.
• Prices are 'in' the code.• (Later example will do proper formatting.)
<html> <head><title>Computation test </title><script language="JavaScript">function total(f) {var chocolateprice = 2.55;var cocoaprice = 3.15;var chocolatecost = chocolateprice * f.choc.value;var cocoacost = cocoaprice*f.cocoa.value;var taxrate = .06;var totalcost = chocolatecost + cocoacost;var totalpay = totalcost + taxrate*totalcost;var totals = "Total is " + totalcost + " with tax is " + totalpay;f.cost.value=totalcost;f.wtax.value=totalpay;return false;} </script> </head>
<body><h1>Application Form for Chocolate</h1><hr><form name="fx" onsubmit= "return total(this);">Enter number of goods in each category.Boxes of Chocolate: <input type="text" name="choc"> <br>Boxes of Cocoa: <input type="text" name="cocoa"> <br>Total:
<input type="text" name="cost"><input type="text" name="wtax"><input type="submit" value="Compute totals"></form> </body> </html>
Modulo operator %
• Gives remainder after division
Clock arithmetic
• 4 % 12 is 4
• 13 % 12 is 1
• 12 % 12 is 0
Use of modulo
• Slideshow: replace if statement
if (ns<= ++sn)
{ sn = 0; }
with
sn = (++sn) % ns;
Other operators• comparison: these produce values true or false
– < <= > >= != ==
• logical: produce true or false– && means and (both operands are true)– || means or (one or the other or both are true)– – ! Means logical negative
• others
Equality test
• Operator is ==
• The = sign by itself does an assignment.
if (a==b) { }
Looping
• To do more or less the same thing many times, use a for loop.
• This makes use of a so-called looping variable, which can be anything. The looping variable is frequently accessed in the body of the loop.
for(initialize;condition; increment) { }
• Often need to have some code outside/prior to the loop to initialize the process
Example: add up elements in array
Assume sales is an array.total = 0;for (i=0; i<sales.length; i++) { total += sales[i];}Ortotal = 0;for (i=0; i<sales.length; i++) { total = total + sales[i];}
Example: find max of elements in array
• Assume sales is an array.
best = sales[0];
for (i=0; i<sales.length; i++) {
if (sales[i]>best) {
best = sales[i]; }
}
Example: want to determine the index of the best
best = sales[0];
bi = 0;
for (i=0; i<sales.length; i++) {
if (sales[i]>best) {
bi = i;
best = sales[i]; }
}
Conditional operator
• (condition) ? value_if_true : value_if_false
canrentcar = (age>25) ? true : false;
• Say taxrate is .05 unless city is NYC, in which case it is .08
taxrate = (city=="NYC") ? .08 : .05
• Can nest conditional operators. Has effect of if this else if this else if this
Conditional operator alternatives
• if statement.– means you can do more than one thing– Perhaps less error prone
• switch statement– means you can do more than one thing– combine different possibilities– does require you to think about the break;
Detecting arrow keys
• … sometimes called 'capturing' arrow events
• Problem: browsers return this information in different ways
Code for arrow keys
var keyCode = document.layers ? evt.which : document.all ? evt.keyCode : document.getElementById ? evt.keyCode : 0;
• This code does not use document.layers or document.all or document.getElementById directly but instead uses their existence to get the correct property.
• This could be used to get any keyCode.
checking browsers
Using arrow keys to move object
Strategy: combine
• code for moving object (in bouncing ball)
• code for capturing/detecting arrow pressed– detecting a keydown event
<body onKeyDown="return checkArrows(event);">
– figuring out which key
Programming is
…. putting techniques together
• To find out techniques, consult me, book, 'google' to get to OTHER sources– ask me to help with google
• Work in stages. For example,– my google search produced something buggy– first used alert– then combined with bouncing ball code
String operations
• Say title is a string (of characters). Use string attributes and methods
• title = "Programming Games";title.length gives the number of charactersstringname.substr(startingindex, length)
– title.substr(1,3) is "rog"– title.substr(12,5) is "Games"
Matching
• Say you want values such as file names to match if they are partially alike
– aviva1.jpg, aviva2.jpg, daniel1.jpg, daniel2.jpg, anne1.jpg, anne2.jpg, etc.
– Determine how many letters you need (okay to use extra—2 would work)
if (choice1.substr(0,3) == choice2.substr(0,3))
JavaScript & ActionScript
• ActionScript is the scripting language for Flash. It and JavaScript are based on the same standard in terms of syntax: format, punctuation, grammar.
• The differences will be– where the code goes– what objects are referenced in the code– ActionScript is compiled: translated all at once.
NOTE: the word objects is used in both its normal and its technical meaning.
Finding errors• Syntactic errors are analogous to errors in
grammar and notation. The code is not legal JavaScript. Examples are leaving out parentheses or brackets or putting operators together.
• Semantic errors are the equivalent of saying something in correct English that isn’t what you wanted to say. Examples are adding instead of multiplying or using > in place of < or "I'm going to Programming Games class in Social Sciencs."
Error console
• In Firefox (mac) under Tools, click on Error console to see syntactic errors.– Click on Clear to remove errors
• In Firefox and some other browsers on the PC, you can type in javascript: in the location field
• Google Chrome: claims facilities for testing, but…I can't quite make them work.
Homework
• Finish assigned JavaScript projects– coin toss, dice, slide show, virtual something– upload using FTP
• create index.html linking to games
• Work on your project– make proposal posting and check for my
response