PROJECT 1
COMPUTERS CAN’T DO THINGS ON THEIR OWN. They need a computer program to tell them what to do, and they need people to write those computer programs. The people who write the code to make computers do all sort of things are called computer programmers.
A computer program is a group of instructions that can be understood and followed by a computer. Another name for a computer program is software. Computer programming, also known as coding, is what we call it when we write these instructions.
Figure 1-1 shows a computer program.
Figure 1-1: The computer program you'll make in this book!
Right now, this computer code may look confusing, but after you’ve read this book, you'll understand how to read it and even write it yourself!
The computers of today are much more powerful than ever before. It used to take a whole room of computers to do what we can now do with even the smallest computer. One thing all computers have in common, no matter how powerful, is that they need computer programs to do anything and they need computer programmers to write these programs.
Computer programs help people to do many things, including the following:
Can you think of other things that computers can do?
All computer programs begin with an idea. Before you start writing any code, it's important to think about what you want your program to do. Use your imagination and dream big!
Here are some helpful questions to think about before you begin coding:
Every computer program is written using a computer programming language. Programming languages allow you to write instructions that can be translated (or compiled) into machine language. These programming languages are eventually turned into binary codes, which use zeros and ones to form letters, numbers, and symbols that can be put together to perform tasks.
At the heart of every computer is a central processing unit (CPU), shown in Figure 1-2.
Source: https://commons.wikimedia.org/wiki/File:Cpu.jpg
Figure 1-2: At the heart of every computer is a CPU.
The CPU is made up of millions of tiny, very fast switches (called transistors) that can be on or off. The position of these switches determines what the computer will do. Software, written by programmers, tells these switches when to turn on or off by using binary codes.
Every single thing that a computer does is the result of a different combination of many zeros and ones. For example, to represent a lowercase letter a, computers use the following binary code:
0110 0001
Each zero or one in a binary number is called a bit, and a combination of eight bits is called a byte. When you hear the words kilobyte, megabyte, and gigabyte used to tell how big a file is, what that means is the number of bytes it takes to store the file.
Table 1-1 lists the most common storage sizes.
TABLE 1-1 HOW MANY BYTES IS THAT?
Name |
Number of Bytes |
What It Can Store |
Kilobyte (KB) |
1,024 |
Two to three paragraphs of text |
Megabyte (MB) |
1,048,576 |
800 pages of a book |
Gigabyte |
1,079,741,824 |
1,000 books |
Terabyte |
1,099,511,627,776 |
1 million books |
Petabyte (PB) |
1,125,899,906,842,624 |
Several copies of every book ever written! |
A typical small computer program might contain anywhere from a couple kilobytes to a couple megabytes of instructions, images, and other data. You don’t have enough time in your busy day to type out thousands of ones and zeros. Because computers can’t understand what you mean when you speak your language, if you want to tell a computer what to do, you need to learn to write in languages that computers can understand.
People have created hundreds of different computer languages. In this book, we focus on the three languages that make the World Wide Web work: HTML, CSS, and JavaScript. Together, these three languages can be used for so many different things, including building apps for an iPhone; making super cool, interactive websites; and even designing videogames that you can play on your computer!
In the early days of the Internet, web pages only included plain text. Some of the text varied in size, and sometimes there were links between different web pages. This was made possible by a computer language called HTML.
HTML stands for Hypertext Markup Language, which is a fancy way of saying that HTML can be used to turn text into links, but it can also do much more, as you’ll soon see.
In those early days, there weren’t different fonts or pretty layouts. We barely had any pictures, and there certainly wasn’t any animation! Figure 1-3 is an example of one of the first web pages.
Figure 1-3: An example of one of the first web pages.
We aren’t complaining, though. When the web was new, it was really exciting to click from one page to another and discover new things. Even more exciting was how easy it was for anyone to publish things and have anyone else on the Internet be able to read it!
Pictures, colors, forms, and many other features were introduced very quickly after this. CSS was invented to make web pages look prettier (see Figure 1-4)!
Figure 1-4: CSS Creatures lets you make your own creature using CSS!
CSS stands for Cascading Style Sheets. It adds styles — like colors, borders, and backgrounds — to HTML code.
Soon, people wanted ways to be able to play games, create animation, and make web pages that would respond to commands and clicks. In other words, people wanted interactivity!
To make web pages interactive, JavaScript was created. Whenever you visit a website and see something moving, or you see things appearing and changing on the page, chances are, it’s JavaScript at work.
To see some great examples of websites that combine HTML, CSS, and JavaScript to do amazing things, open up your web browser and visit the following sites:
http://naturevalleytrailview.com; see Figure 1-5): Nature Valley Trail View has more than 300 miles of National Parks trails captured and preserved using a combination of HTML, CSS, and JavaScript.www.drawastickman.com; see Figure 1-6): Draw a Stickman is a super fun website where you can draw your own character and creatively interact with different episodes, all powered by JavaScript and HTML!www.amplifon.co.uk/interactive-ear; see Figure 1-7): The interactive ear lets you learn and explore how ears work. Best of all, this site was built using the languages you'll learn in this book!
Figure 1-5: Exploring the trail!
Figure 1-6: Your custom stickman can go on adventures!
Figure 1-7: The human ear is so interesting!
Every task you complete requires a set of tools, and writing computer code requires some special tools as well. Instead of things like hammers and pencils, JavaScript programmers use tools that are found on the Internet. You’ll only need a web browser and an Internet connection to complete all the projects in this book.
Let’s move on and get your toolbox organized.
The one essential tool that you need for working with JavaScript is a web browser. You have many different web browsers to choose from, and nearly all of them will do a great job running JavaScript. You probably already have a web browser on your computer.
The most widely used web browsers today are Mozilla Firefox, Apple Safari, Google Chrome, and Microsoft Internet Explorer. For this book, we’ll be using Chrome, which is currently the most popular web browser and has a number of great tools for working with JavaScript.
If you don’t already have Chrome installed, you’ll need to download and install it. You can install Chrome by opening any other web browser and going to www.google.com/chrome/browser/desktop. Follow the instructions found on that page (shown in Figure 1-8) to install Chrome on your computer. When you have Chrome installed, start it up.
Figure 1-8: Installing the Chrome web browser is easy!
We’d like to introduce you to our favorite JavaScript playground: JSFiddle. Instead of swings and slides, you’ll be playing with JavaScript statements, HTML tags, and CSS styles.
JSFiddle lets you write and experiment with code from within your web browser. You can use it to try out code, get feedback on your code, share your code, and even work on programs with your friends!
JSFiddle is what we’ll be using throughout this book to experiment with HTML, CSS, and JavaScript. It’s called JSFiddle because you can use it to “fiddle” with code. So, let the fiddling begin!
To get started with JSFiddle, open your Chrome web browser and type http://jsfiddle.net into the address bar. You’ll see a screen that looks like Figure 1-9.
Figure 1-9: The JSFiddle home page, your new playground.
JSFiddle is made up of three panes where you can enter each of the three types of web code: HTML, CSS, and JavaScript. The fourth pane is the Result pane, where you can see the results of what you type inside the other boxes. The toolbar on the left lets you add a title and description to your project and has some other advanced features we won’t worry about for this book. The top toolbar has buttons for running, saving, and cleaning up your code.
You can resize any of the panes in JSFiddle by clicking and dragging the border that separates them.
For now, we’re going to focus on the JavaScript pane. Follow these steps to run your first JSFiddle program:
alert("Hi, everyone!");
Congratulations! You just wrote your first JavaScript program! Running JavaScript isn’t the only great thing JSFiddle can do. With JSFiddle, you can also use the HTML and CSS panes to run code that works together with your JavaScript code. You'll see each of these panes in more detail in the next few sections. But first, let's take a quick look at what JSFiddle is capable of doing!
The CSS pane in JSFiddle is located in the upper-right corner. CSS allows you to change how stuff such as text and graphics look. If you want to change the color of the text on your page, you use CSS.
Follow these steps to try out changes to one of our programs:
Go to http://jsfiddle.net/watzthis/oboLdy4p.
Make sure to type this address carefully, including the capital letters in the right spots. If the animation doesn’t work for you, check that the address starts with http:// and not https:// and fix that.
Take a closer look at each of the four main areas of the screen: Three of them have some code in them, and the Result pane is displaying floating bubbles animation.
Can you figure what any of this code might do?
Look at the CSS pane in the upper right: You see three lines of code.
You may need to click and drag on the border of the CSS pane to make it bigger so that you can see everything in it.
Find the code that reads border: 3px solid yellow; and change it to border: 8px solid black;.
Make sure not to type a period at the end of what you’re typing. The period ends our sentence, but it doesn’t end the code you’re typing.
The bubbles are now much thicker (as shown in Figure 1-10)!
Figure 1-10: The bubbles have thick walls!
Based on the change that you just made and the effect that it had, what do you think the part of the code that says solid does? To find out, try the following steps:
In the CSS pane, change the first value after border: to a smaller number (such as 2 or 3) and click Run.
The circles get thin again!
This tells what style the border of the bubbles should be!
Now take a look at the third value after border:, which is currently set to black. This controls the color of the bubbles.
Follow these steps to change the color of the bubbles:
Your bubbles are now your favorite color!
Now take a look at the HTML pane, in the upper-left corner. Compared to the CSS and JavaScript panes, this one doesn’t have very much in it!
HTML is used to create structure for web pages and containers for JavaScript programs to run in. In the case of this Bubbles program, the HTML just creates the place on the page for the bubbles to go into.
But you can do much more with HTML! To make some changes to the HTML for the Bubbles demo, try the following:
<h1>I love bubbles!</h1>
Your HTML pane should now have the following HTML code:
<div id="o"></div>
<h1>I love bubbles!</h1>
HTML code works by adding special codes around regular text. Adding codes to text in this way is called marking up text.
Figure 1-11: The bubbles now have a special message below them!
In HTML, <h1> and </h1> are known as tags. Tags around text tell the browser that the text represents something special. In this case, <h1> represents a first-level header, the largest and most important header on the page.
Another very useful HTML tag is the <p> tag, which marks paragraphs. To insert a <p> tag, follow these steps:
Type <p> and then type any message that you want to display.
JSFiddle automatically creates your closing </p> tag.
The JavaScript pane, in the lower-left part of JSFiddle, is where really interesting things happen.
Many of the bubbles, but not all of them, are now larger than they were before.
Based on the behavior of the bubbles when you changed the value of max, can you guess what will happen if you change the line that reads min = 12? Try it out and see if your guess is correct! If you guessed that max controls the maximum size of the bubbles and min controls the minimum size of the bubbles, you’re absolutely right.
The next two lines in the JavaScript pane are bubbles = 100 and timerDelay = 8000.
Try changing both of these values and see what happens. By playing around with these values (or maybe just by guessing), you’ll discover that bubbles = 100 tells how many bubbles there should be, and timerDelay has something to do with how fast the bubbles rise.
Now that you’ve created your own personalized version of the Bubbles demo, it’s time to show your friends!
Click the Share button in the top toolbar.
You’ll see the options to copy the address for your Bubbles demo, to view the program in full-screen mode, and to share your program on Facebook or Twitter.
If you want to share your programs on Facebook or Twitter, remember to tag us (@watzthisco on Twitter or www.facebook.com/watzthisco), and we’ll check out your creations!
Figure 1-12 Highlighting the full-screen URL.
The bubbles display onscreen without the code panes.
If the Bubbles demo doesn’t work for you in full-screen mode, try changing the https in the browser address bar to http and press Return or Enter.
If you want to return to the original Bubbles program, you can do so by going back to our public dashboard at https://jsfiddle.net/user/forkids/fiddles.
In this chapter, you learned what computer programmers do and experimented with writing some code in JSFiddle. In the next chapter, we explore the language of JavaScript and show you the special rules of writing in JavaScript.