Download presentation
Presentation is loading. Please wait.
1
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
2
Combat Game – possible decomposition ideas
Each one of the tasks could be further and further decomposed into smaller sub-tasks
3
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
4
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
5
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
6
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"
7
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?
8
New online HTML/CSS/Javascript editor
Jsbin.com New online HTML/CSS/Javascript editor Result appears here Type HTML here 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!
9
Two new HTML tags At the moment the button doesn't do anything
10
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!
11
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()” />
12
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 “ ”
13
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 TRUE COOL JavaScript Examples
14
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
15
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!
16
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
17
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:
18
Creating and running a function
STEP 1: Define the function Love Tester Demo: STEP 2: Run the function
19
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
20
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
21
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
22
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"
23
Getting data out of fields that the user has typed in
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 :
24
TO DO Adding comments Changing a picture Creating a Random Number
Creating an array (and picking random value) Adding a delay using setTimeout
Similar presentations
