Programming games HTML/JavaScript basics Functions, events, forms Classwork: [Show favorite sites.] Coin toss. Homework: GET WEB SPACE. Complete coin toss.

Recap on shoe tying Directions for sequence of operations Included 'event' related actions: do this until this situation is true –Usual form is: when this event happens, do this. The pulling of the laces was keep going until something happens Double loop (bunny ears) method made two overhand knots Task definition versus language for task

Recap What are the parts of an html document?

template Sites article {display:block; ….} My sites …. …

Fonts How do you use CSS to specify font for a specific element type, such as article? Look it up! Terms could be html5 font Note: I want the formatting in the element, not in the body.

Preparation for…coin toss Image change Variables Math functions –Math.random() if statement Function definitions and Function calls

Image change Image tag (and other tags) can have names: HTML tags have attributes. –name and src are each attributes. Your code can change the image being displayed by referring to the src attribute of the img element of a given name: document.coin.src = "head.gif"

So… if my/our code determines that a head of a coin should be shown, and the img element has the name coin and the name of the image files are "head.gif" and "tail.gif", how do we write the code to make sure the img element is showing a tail?

Variables Variable is a programming construct for associating a name (possibly a place in memory) with a value. Your code then uses the name as it would the value. Values are specific datatypes: integers, numbers, strings of characters, Booleans, other things JavaScript has the var statement for setting up a variable. IT IS NOT ALWAYS NECESSARY to do this before using a variable, but is a good idea. The term for this is declaring a variable. This is required in many programming languages, for example, Processing. var size = 25; var classname = "Programming Games"; var ta = "Skylar"; A variable can be referenced in code and changed by code. document.write("The class is " + classname + " and the TA is "+ ta); size = size + 1; SAME AS size++;

Array variables Variables hold different types of data –int, number, string, Boolean… –Arrays are a type of variable that holds an ordered set of values var tas = ["Skylar", "Allen"]; To get at individual components, use indexing. The first index is 0 tas[0] is " Skylar" tas[1] is " Allen"

Note [ordinary] arrays require the programmer to put the items in order. Must make sure that that order doesn't influence anything it shouldn't…. –See my implementations of rock, paper, scissors JavaScript, some other languages, also have associative arrays: indexing by keys, not numbers. (Python calls these dictionaries) Some languages allow programmer to specify the range of numbers. SETL is a language that has unordered sets as primitive data type. Haskell is a language that includes ways to specify infinite sets.

Variables Variables can be outside of any function, within the script tag. The scope of these variables is global. They can be referenced and changed everywhere. Variables within, local to, a function go away when the function ends. MORE ON THIS LATER: when we do the dice game (craps) Variables are stored 'in memory' and go away when you exit the function or leave the page. Variables are reinitialized when you refresh/reload a page. –See in coin toss, the return false makes sure the page is not refreshed/reloaded.

Math functions JavaScript, Objective-C, Processing, etc. provide many standard math functions as part of the language. Javascript does this using methods of the (single) Math class. We will use Math.sin() and Math.cos() for the cannonball game (ballistics simulation). Many games require use of Math.random() This returns a (fraction/decimal) value from 0 up to, but not including 1.

If statement Example of conditional statement. Two forms if (condition) { statements } Or if (condition) { statements } else { statements }

example var toss = Math.random(); if (toss>.5) { alert("greater than.5"); } else {alert("not greater than.5"); }

example var toss = Math.random(); if (toss>.5) { alert("greater than.5"); } else {alert("not greater than.5"); } At this point, toss will hold a number (fraction). Writes out string in box string is string (sequence) of symbols, such as a message

So in coin toss var toss = Math.random(); if (toss>=.5) { document.coin.src = "head.gif"; } else { document.coin.src="tail.gif"; }

Function definition You can define your own functions, to be used by your code –called user-defined functions, but this may be confusing because you are the developer/programming and not the end user. I prefer player to user. –I call them programmer-defined functions. Function definitions generally are in the element in the. Calls (invocations) of functions in tags in the body or in other functions (or in this function, but more on that much later).

Analogy to function definition From now on, when I say 'check the schedule', I mean –[go to a computer connected to the Web. Invoke a browser. Go to my website: Click on Current. Click on Schedule under Programming Games

JavaScript function definition function functionname (args if there are any) { statements }

Function call Functions can be called / invoked / executed in different ways. One way is the result of an event set up in a tag Flip coin!

Aside There is a tutorial on coin toss. You now have heard about different features/constructs that are used. The coin toss puts them together. In your notebook, make note of the terms function, array, variable. These are common and important terms in computer programming jargon. Look them up. Read multiple sources.

Classwork Be ready to show your favorite sites. Acquire (find on-line) image files of coin faces. Look at newcointoss.doc tutorial (follow link from the currentcourses.html page) and create a simple coin toss application.

Example: changepicture script element holds 3 variables and one function definition –original, next, current and change body holds img and form –img is named place, src (initially) the same value as original –form element is what produces the button that calls the change() use onSubmit

var original = "bird.gif"; var next ="frog.gif"; var current = "bird.gif"; function change() { if (current==original) { current = next; document.place.src = next; } else { current = original; document.place.src = original;} return false; } Notice == for the checking for equality operation

form Can use form input values to –present button to player –output (display) information to player –as well as input values Will show more of this

form … f.ans.value= ????

More on functions Functions in programming are ways to store code for later use. This includes storing code to be used (re-used) more than one time. They also can make code easier to understand. A function in JavaScript has a function. –The first use of function (italic and bold) is JavaScript jargon. The second use is English. Programming languages have constructions like functions. –For example, I'm learning Max, a language used for music and other things. It has encapsulations and abstractions.

onsubmit When form submit button is pressed, invoke the toss() function and return to the system whatever value it returns. Functions can return/produce values A return value of false (the Boolean value false ) means the html page will not be refreshed—changed back to the original.

Other Function calls In tag as value of href Call fun In tag as value of onClick, onMouseover or onMouseOut Set up to be called after time interval. This statement will be somewhere in the code, perhaps within another function. tid = setInterval("moveit(dx, dy)",500);

HTML5 feature button as a new element type Use google to look up how to write a button

Next How to make this a crooked/biased/weighted coin? Prepare for next class.

Web space You need an account on the purchase student server for this course to upload work!!! Go to and follow directions.

Homework Introduce yourself on moodle if you haven’t done so –Respond to other posts Get web space Use the web to find definitions of –function –variable –object –class Check out books on reserve in Library Do coin toss