Javascript Game Assessment Marking criteria Basic form design Title, input boxes, button Button does something Alert() / prompt() Random number generator Change something on the form Style the page Add ad least 1 image Use css to make your page look appealing to the target user Save your final jsbin link in your Javascript Game diary Add a screenshot with a description of what it does Add an evaluation slide with WWW and EBI

http://jsbin.com/qotiva/edit?html,js,output JavaScript Questions Look at the web page with the Rock Paper Scissors game below and answer the questions following it A link has been provided so you can test the game yourself http://jsbin.com/qotiva/edit?html,js,output 1 2 3 4 5 6 7 8 9 10 11 12 13 1415 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 http://jsbin.com/qotiva/edit?html,js,output

Homework questions Questions: What does the keyword var mean on line 3? What does Math.random() do? What does Math.floor(rand) do? What does line 10 mean: var userchoice = document.getElementById("choice").value; What does line 15 mean? if(userchoice==rock){ What happens if a user types nothing in the box and presses the button? How can this be fixed? Harder Questions – have a go (next year’s GCSE Computer Science students especially) What do you think line 6 does ? What is choices? What does line 7 do? document.getElementById("msg").innerHTML=choices[compchoice]; What do you think the symbol && means? What do you think the symbol || means?

Two new HTML tags At the moment the button doesn't do anything

Using the alert()function This will create a pop up Change <button>Click Me!</button> to <button onclick="alert('hello')">Click Me!</button> screenshot your work! Now click the button and a pop up appears Change the message to something else

Using the prompt()function This will create a pop up which asks the user a question Change the button to <button onclick="prompt('What is your name?')">Click Me!</button> Now click the button and a prompt box appears Change the message to something else

Creating a Javascript function At the moment the Javascript is being written inline with the HTML This will get confusing when we start to write longer programs Creating a block of code called a function allows us to separate the Javascript out to make it easier to manage In JSBin we need to show the Javascript tab:

Creating and running a function STEP 1: Define the function Love Tester Demo: http://jsbin.com/nihivaxuko/1/edit?html,css,output STEP 2: Run the function

Using variables in JavaScript Use the var keyword when you first set up a variable You can stick variables and text together (concatenate) using a + sign Variable names… -Must be one word -Can't start with a number -no punctuation

Task: Practice creating and running a function Add a function with a couple of alerts and a prompt to ask the user a question (This is practice – and doesn't have to be part of your final game) STEP 1: Define the function screenshot your work! STEP 2: Run the function

Changing the document with Javascript document.bgColor="red" What do you think this line will do? You can also use color hex codes such as #ff6600 #00ff00 http://jsbin.com/diceqoqife/2/edit?html,js,output You can change lots of things on a web page – images, text, divs – more later… amount of Red amount of Green amount of Blue

Task: Change the background colour Add a line to change the background colour to your button. Extension: Research "hex color codes" to find other colours you could use Add the line to change the colours at several points in your script and see what happens screenshot your work! or use "#ff6600"

Getting data out of fields that the user has typed in http://jsbin.com/raxogojesi/1/edit?html,js,output document.getElementById("name1").value "name1" is the id of the input tag Be careful of the spelling of getElementById store it in a variable and use it in your program screenshot your work! Love tester : http://jsbin.com/raxogojesi/1/edit?html,js,output

Random Numbers in Javascript var rand = Math.random() will return a random number between 0 and 1 Multiply it by the number you want var rand = Math.random() * 3 then remove decimal rand = Math.floor(rand) will randomly return 0, 1, or 2 http://jsbin.com/dunosutedu/1/edit?html,js,output Could use this in Rock Paper Scissors?

If this is TRUE then the code inside these curly brackets will run If statements Use an if statement if you want to test a value if (age < 17){ alert("You can't drive"); alert("Unlucky!"); } If this is TRUE then the code inside these curly brackets will run Note: Little "i" on "if" Round brackets around test Curly brackets around the block of code to run if test is true This is the test It returns True or false If it's true the block of code runs. If false it moves onto the next part of the code Love Tester: http://jsbin.com/givukuz/1/edit?html,js,output

Using an if with a random number If statement to display different messages depending on rand Generate random number between 0 and 100

Magic 8 Ball Example http://jsbin.com/nodociy/3/edit?html,js,output With delay http://jsbin.com/milesor/3

Rock Paper Scissors http://jsbin.com/qotiva/6/edit?html,js,output

Love Tester Game http://jsbin.com/zoyuvuw/5/edit?html,js,output

Recap: Using CSS to style your pages http://jsbin.com/zoyuvuw/4/edit?html,css,output Which line makes the background colour pink? Which line changes the font to cursive? Which line centres everything? Which line adds a white shadow t the heading? How do you get rounded edges on the inputs & the button?