INTRODUCTION Learn how to code your own fun games using JavaScript JavaScript is a language originally used to make web pages more interactive It is now used to create online games that will run on both computers and mobile devices Enjoy creating the simple TIPS TO REDUCE BUGS programs in this book and you will be on your If you are making your own web page spend time drawing a diagram way to becoming a JavaScript expert and planning it before you start Try changing values if things don't work and don't be afraid to start again you will learn from it You could use a mygame html This will work fine plain text editor to but can be quite Bugs are errors or mistakes in your 1 code that stop your program from create your code touchy because 2 working properly Looking for those the software won't 3 errors is called debugging Make a give you any help very simple web page and get a friend to change one line of code while you're not looking Can you fix it When things are working property stop and look through your code so you understand each line Experiment The best thing to use for the activities in this book is an offline HTML and change your code and try editor This will support you as you type your code but also give you out different values To be good at the opportunity to learn the JavaScript code debugging you need to understand what each line of your code does There are two separate windows that you'll be using and how it works Sublime Text Web Browser SCORE 7 The text editor The browser to to enter your view the program JavaScript code There are many different browsers you can use We recommend using Google Chrome for the activities in this book Make sure you have the latest version installed on your computer before you start You will also learn some HTML in this book HTML is the language used to build web pages JavaScript is the language that brings those pages to life Note Words in italics appear in the glossary on 30 page 3
GETTING STARTED You need a text editor to start coding in JavaScript There will probably be a simple text editor already on your computer called Notepad if you have Windows or TextEdit on a Mac This will be sufficient for you to get started but it will be much easier to create JavaScript if you download a more powerful text editor In this book we will use a text editor called Sublime Text There are many others you could download such as Brackets or Notepad All of these are free for you to try out STEP FIND THE SUBLIME TEXT WEBSITE Open your web browser and visit www sublimetext com STEP 2 START THE DOWNLOAD Download Click the Download button near the top of the web page Choose which version of Sublime Text you need If you are not sure then ask an adult to help you find the correct version If you are using a Mac click the Apple menu then About On a PC click the Start menu select System and click About OSX 10 7 or later is required Windows Windows 64 bit STEP 3 INSTALL THE SOFTWARE Some web browsers will then ask you to run the installation program Choose Run If this does not happen don't panic The installer file should have been downloaded to your computer Look in your Downloads folder for it Double click it to start installing your new text editor You should get a big white or gray box giving you instructions on what to do next Follow these instructions to complete the installation 4
STEP 4 RUN SUBLIME TEXT On a PC Click Start Programs Sublime Text Or just click Sublime Text if it appears in the Recently added section On a Mac Click Finder Click Applications Make a shortcut by dragging Sublime Text from Finder onto your dock at the bottom of the Desktop sa Applications Click the Sublime Text icon STEP 5 SAY HELLO Carefully type this into lines 1 2 and 3 of your text editor Sublime Text should automatically indent lines for you but if it doesn't make sure you indent lines of code exactly as shown Sublime Text Mark the start of a JavaScript section Show a message box saying Hello The code will automatically indent Mark the end of the JavaScript section STEP 6 SAVE YOUR CODE STEP 7 VIEW YOUR PAGE 1 Click File Save Save to your Documents folder Type hello html as the filename Open your Documents folder Find the hello html file and double click it Your web page should now load in your normal web browser You should get a message saying Hello Hello WHY USE JAVASCRIPT INSIDE HTML CODE Although we are coding with JavaScript we need to put our file inside some HTML code to make it work HTML stands for HyperText Markup Language and is the language used to build web pages HTML is used to describe what objects or elements are shown on a web page If you are creating a simple game you need to use HTML to add an image and some text to show the score However HTML cant make the image more of the score change JavaScript is added to tell the image to move around when different keys are pressed or when the mouse is clicked It can also be used to display the score and make it change We need to use both HTML and JavaScript to make an interesting game JavaScript was designed to be added to HTML pages to make them more interactive You will learn about using different elements of HTML with JavaScript as you work through the programs in this
