Lesson 1: Decomposition GET YOUR PEN OUT ! Year 9 Build a Javascript game Starter: You have been asked to build a Call of Duty style combat computer game. How would you go about splitting up the task? What parts would you need to consider? Which parts could you give to other people to do? Draw a Spider Diagram to represent the parts
Combat Game – possible decomposition ideas Each one of the tasks could be further and further decomposed into smaller sub-tasks
Decomposition is one of the principles of Computational Thinking Computational Thinking = Thinking like a computer (ie logically) Very useful skill in all parts of life E.g. organising a party Revising for exams Planning a picnic with friends
Decomposition in computer programming… Allows you to tackle large problems in a methodical way The sub tasks are more manageable and easier to understand Let's other developers work on sub tasks of the problem (saving you time) Allows each sub task/sub program to be tested independently to check it works
Lesson 1 - Plan We will be learning a new programming language – Javascript We will use Javascript (as well as HTML & CSS) to build a simple online game Choose the level of difficulty of the game to work with depending on your confidence with programming if you are taking Comp Science next year you have used Javascript before Select a Gold, Silver or Bronze task from the folder W:\Public\ICT & Computing\Year 9\9.6 Javascript\Tasks Read it and make sure you understand what the game is supposed to do Create a new Powerpoint and save it as "My Javascript Game Diary" For your chosen task, create a slide with another spider diagram to divide your task into sub-tasks Imagine you were giving jobs to other workers to complete
Example Decomposition of Magic 8 Ball game User Interface User enters a question User clicks a button Page design should be appealing Game Logic When button pressed, generate random phrase Display random phrase to screen Ask if they want to play again Using Powerpoint "Smart Art Feature"
Building a game in a web page You will need to use HTML to build the framework of the webpage <html> <body> <h1>My fabulous game</h1> <p>This is going to be an awesome game</p> <img src="cat.jpg" width="100"/> </body> </html> What will this page look like?
New online HTML/CSS/Javascript editor Jsbin.com New online HTML/CSS/Javascript editor Result appears here Type HTML here http://jsbin.com/genabujiki/edit?html,output http://jsbin.com/gozawopohi/edit?html,output http://jsbin.com/givawekusa/edit?html,output http://jsbin.com/dewuzoconi/edit?html,output 9A1 Mon 19th Feb 2018 Use File > Save to get a unique URL that you can use Copy and paste this into your Powerpoint NOW!
Two new HTML tags At the moment the button doesn't do anything
What is Javascript? The most popular programming language in the world Lightweight scripting language Runs in your browser Allows interactivity on web pages Animations, popups, validation, calculations, games, Google doodles! Almost all web sites use Javascript No relation to Java!
Event driven Javascript is event driven Runs when Button clicked Image clicked Page is loaded Mouse moved Events can be added to HTML e.g. <img src=“cat.jpg” onclick=“sayMeow()” />
Lines end in a semi-colon ; Javascript Rules Case sensitive Alert() is not the same as alert() Lines end in a semi-colon ; Quotes matter – make sure that you have pairs of matching “ ”
Lesson 2 – Working with Javascript Variables & the Document True or False Javascript can create animations Javascript is not case sensitive Javascript can run in your browser Javascript lines end in colons : Javascript is used on almost every web site TRUE FALSE TRUE FALSE https://codepen.io/tholman/pen/jvIEz?page=1& TRUE COOL JavaScript Examples https://codepen.io/jackrugile/pen/acAgx?page=3 https://codepen.io/tholman/pen/jvIEz?page=1& https://codepen.io/jackrugile/pen/Drykf?page=2
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
Debugging errors Javascript errors can be tricky to track down Use F12 on a web page to show the Console Or in JSBIN there is a console button This tells me I’ve spelled “alert” wrong!
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 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
TO DO Adding comments Changing a picture Creating a Random Number Creating an array (and picking random value) Adding a delay using setTimeout