Programming games HTML/JavaScript basics Functions, events, forms Classwork: [Show favorite sites.] Coin toss. Homework: GET WEB SPACE. Complete coin toss. HTML basics first
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 The shoe tying task has similarities to manufacturing tasks. For example, before a particular manufacturing process begins, a worker or a machine or both need to make a decision that the correct parts are present and suitable to continue. We check that our shoe laces are the right size or close enough to the right size. The definition of “close enough” can be very important for making a manufacturing process be economical.
Recap: what we did (do) Use an editor (Sublime) to prepare HTML document It may contain html, JavaScript, CSS Use a browser (Firefox, Chrome, etc.) to see our work (run, execute, display) Soon: use an ftp program (Filezilla) to upload files to your website so anyone can see them If they have the URL
Layers of software (programs) HTML document the <head> element may contain <script> with JavaScript Text editor (Sublime, Textpad, others) Browser (Chrome, Firefox, Safari, IE, others) Will go into more detail later. Operating System, such as OS Yosemite on MACs or Windows on PCs or Linux on various computers or Android or iOS
Recap What are the parts of an html document? Answer: head and body. The head can contain title, style, and script elements.
template <html> <head><title> Sites </title> <style> article {display:block; ….} </style> </head> <body> My sites <article> …. </article> <article> … </article> <article> … </article> </body> </html> This is a template for your favorite sites application. Do research online to replace the .... with specification of fonts, color, border, or what suits your fancy.
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 <style> Note: I want the formatting in the <style> element, not in the body. The term “font-family” may be used.
Preparation for coin toss and many other examples. Image change Variables Math functions Math.random() if statement Function definitions and Function calls There is a tutorial for coin toss. Study these charts first and then look at the tutorial. We/you create a coin toss (you can toss something other than a coin) by using several distinct programming features.
Image change Image tag (and other tags) can have names: <img name="coin" src="blank.gif"> 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" You may be able to leave off the window in window.document….
So… if my/our code determines that the 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? Write the code using the code in the prior chart as a model.
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 = "Jordan"; 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++; Notice that the plus sign when used with strings of characters performs a concatenation operation.
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: could have var tas = ["Jordan"]; tas[0] is "Jordan"; tas[1] is an error. Can check tas.length
Note [ordinary] arrays require the programmer to put the items in an 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. Look up scope in programming.
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. You do need to think about there being values between 0 and 1.
If statement Example of conditional statement. Two forms if (condition) { statements } Or else { The indenting is NOT required, but is a good idea to help you keep track of what is going on.
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). Note: look ahead: the trace function will do a similar task as alert in ActionScript/Flash. 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"; } var statement sets up the variable named toss AND immediately gives it a value. The var statements are not required, but a good practice. This is called a variable declaration. Some languages require them. Notice also that my code doesn’t “ask” if the document.coin.src already is “head.gif”. It makes the assignment.
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 <script> </script> element in the <head> </head>. Calls (invocations) of functions in tags in the body or in other functions (or in this function, but more on that much later). Functions are defined and functions are executed. When a function is executed, the statements in the function are each executed. Actually, this isn’t quite true: where there are if statements, either the true clause or the false, meaning not true, the else clause is executed.
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: http://faculty.purchase.edu/jeanine.meyer Click on Current. Click on Schedule under Programming Games Think of function as a shorthand.
JavaScript function definition function functionname (args if there are any) { statements } </script> Outline.
Function call Functions can be called / invoked / executed in different ways. One way is the result of an event set up in a tag <button onclick="return toss();"> Flip coin! </button> The return may not be necessary. Within the definition of the toss function will be a return statement.
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. Your notebook also is your idea book. Write down ideas for your own projects. Also, try to make all the assignments “your own”. You certainly can improve on my designs.
Filezilla …. is a file transfer protocol program. Find and start Filezilla Connect to your website Use Site Manager to set up new connection. Specify host, protocol, encryption, user, password Now can move files from the computer in front of you (aka client computer) to and from your site (on server computer)
Notes Can use this for storage even if your project is not done. There are no links. No one knows about it. You can make a new folder on the server Perhaps games or pg For the Favorite Sites project, how many files must you upload to your server?
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. Your coin toss can use any pair of images. It generally is good if they are related and also the same size.
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 In this example, the changing of images is not random.
var original = "bird.gif"; var next ="frog.gif"; <html><head><script> 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; } </script> </head> <body> <img name="place" src="bird.gif"/> <form action="" onSubmit="return change();"> <input type="submit" value="Change"> </form> </body> </html> Notice == for the checking for equality operation Squeezed to fit on a chart.
form Can use form input values to Will show more of this present button to player output (display) information to player as well as input values Will show more of this You can look up the form element in JavaScript. There are many options for types of input.
form <script> … f.ans.value= ???? </script> <body> <form action="" name="f" onSubmit="return toss();"> <input type="text" name="ans"> <input type="submit" value="TOSS"> </form> </body> This is just a suggestion of what you can do. My/your code has a definition of the toss function in the script element.
More on functions A function in JavaScript has a function. 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. Code can use a function within a statement. For example, the Date() function returns something. We used document.write(Date()); to make a Date (and time) appear in our first example.
Other Function calls In <a> tag as value of href <a href="javascript:fun(a, b);"> Call fun </a> In <a> tag as value of onClick, onMouseover or onMouseOut <a href="" onMouseover="fun(a,b);" > 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); We will use these later.
HTML5 feature button as a new element type Use google to look up how to write a button Look it up.
Next How to make this a crooked/biased/weighted coin? Prepare for next class. What do I mean by a biased coin? A coin in which the chances of getting a head versus a tail is not even.
Web space You need an account on the purchase student server for this course to upload work!!! Go to http://students.purchase.edu and follow directions. Get this done! We will demonstrate the use of Filezilla for uploading and downloading files.
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 See you next class