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
Math QUIZ Now let's code a simple math quiz This will be a chance for you to get to know JavaScript a little better If you've done some coding before you will be familiar with the idea of variables and IF statements We will look at how to use these concepts in JavaScript STEP START YOUR TEXT EDITOR The syntax is very important in JavaScript Syntax means making sure all the commands and symbols are typed correctly On a PC Click Start Programs Sublime Text On a Мас Click the Sublime Text icon see page 5 for help SK STEP 2 ENTER THE CODE Sublime Text Carefully type in your math quiz questions For the question What is 8x 8 Answer 64 add the following code into your text editor for lines 1 to 6 Start JavaScript Ask a question If the user's answer is 64 then Show a message box saying Correct End JavaScript STEP 3 SAVE YOUR CODE Your text editor may Indent your lines of code automatically If It does not make sure that you indent your lines of code as shown in the examples Click File Save and type quiz html as the filename Make sure you save it in your Documents folder Just as you end a sentence with a period you should end JavaScript statements with a semicolon
STEP 4 VIEW YOUR WORK Documents que han What is 8x8 Refresh Open your Documents folder and double click the quiz html file Your program should run in your web browser Test your page by answering correctly You should get the Correct message Then refresh your page and give the wrong answer You should not receive the message Cancel OK STEP 5 RANDOMIZE Change your code in the following way so random numbers are picked for the question Create a random number Make a variable called a between 0 and 1 4 Round to the nearest whole number Multiply it by 10 ouw Sublime Text Make variable a using the code example above Following the first example make a variable b Use the sign to join the string what is to the value stored in the variable a Check to see if the answer entered is the same as a multiplied by b 8 KEY CONCEPTS STEP 6 SAVE AND REFRESH Save your new code Refresh your browser to see the changes Each time you refresh it you should get a new random question VARIABLES Variables are part of a program that stores information Each variable is given a name that is used to point to a part of the computer's memory A value is then stored in that part of the memory In this quiz variables are used to store the random numbers and the user's input IF STATEMENTS Normally each line of code works one after the other An IF statement works differently It checks if a particular condition such as the correct answer is true before running a certain piece of code Enjoy playing your quiz CUSTOMIZE Change your code so it asks harder questions using bigger 7 numbers
