1
Hello, World!
In this Chapter
Learn why JavaScript is awesome
Get your feet wet by creating a simple example
Preview what to expect in subsequent chapters
The Hypertext Markup Language (HTML) is all about displaying things, and Cascading Style Sheets (CSS) is all about making things look good. Using the two of them, you can create some pretty nifty-looking stuff, such as the weather app you can see at http://bit.ly/kirupaWeather. Figure 1.1 shows what this weather app looks like.
FIGURE 1.1
An example of a layout designed entirely using CSS
Despite how nifty sites built using only CSS and HTML look, they are pretty static. They don’t adapt or react to what we are doing. It’s almost like watching a great Seinfeld episode over and over again. It’s fun for a while, but it gets boring eventually. The web today isn’t static. The sites we use often, such as those shown in Figure 1.2, have a certain level of interactivity and personalization that goes well beyond what HTML and CSS by themselves can provide.
FIGURE 1.2
Examples of various websites that rely heavily on JavaScript for their proper functioning
To make our content come alive, we will need some outside help. What we need is JavaScript!
What Is JavaScript?
JavaScript is a modern-day programming language that is a peer of HTML and CSS. In a nutshell, it allows us to add interactivity to our documents. Here’s a short list of just some of the things we can do with JavaScript:
Listen for events like a mouse click and then do something.
Modify the HTML and CSS of our page after the page has loaded.
Make things move around the screen in interesting ways.
Create awesome games that work in the browser.
Communicate data between the server and the client.
Interact with a webcam, microphone, and other devices.
Do things on a backend server via a framework such as Node or Deno.
This flexibility has made JavaScript one of the most popular programming languages ever, as you can see in Figure 1.3.
FIGURE 1.3
Chart of popular programming languages, where you can see that JavaScript is on top!
This growth in popularity isn’t showing any signs of slowing down. We can find JavaScript powering apps running on a variety of devices well beyond what existed when JavaScript was first introduced many years ago (see Figure 1.4).
FIGURE 1.4
JavaScript can power apps running on a variety of devices.
This proliferation is partly helped by modern web frameworks like React, Vue, Next.js, Nuxt, and more, which build powerful abstractions on top of JavaScript that make creating rich and complex web apps easy, productive, and fun!
What JavaScript Looks Like
The way we write JavaScript is sort of like composing a formal letter—sort of. We put together words that often resemble everyday English to tell our browser what to do. The following example shows some old-fashioned, fresh outta-the-oven JavaScript:
let defaultName = "JavaScript"; function sayHello(name) { if (name == null) { alert("Hello, " + defaultName + "!"); } else { alert("Hello, " + name + "!"); } }
Don’t worry if you don’t know what any of that means. Just pay attention to what the code looks like. Notice that we see a lot of English words such as function, if, else, alert, and name. In addition to the English words, we also have a lot of bizarre symbols and characters from the parts of our keyboard that we probably rarely use. We’ll be using them plenty really soon, and we’ll also fully understand what everything in this code does as well.
Anyway, that’s enough background information for now. At this point, you might be expecting me to provide a history of JavaScript and the people and companies behind making it work, but I’m not going to bore you with stuff like that. Instead, I want you to get your hands dirty by writing some JavaScript. By the end of this chapter, I want you to have created something simple that displays some text in your browser.
Hello, World!
Right now, you might feel a bit unprepared to start writing code. This is especially true if you aren’t all that familiar with programming in general. As you’ll soon find out, JavaScript isn’t nearly as annoying and complicated as it might seem to be. We’re going to build our example together, so let’s get started.
Tip
To start writing JavaScript, you need to have basic familiarity with building a web page, using a code editor, and adding some HTML and CSS. If you aren’t too familiar with these basics, I encourage you not only to finish the example in this chapter but also to read the optional “Building Your First Interactive Web Page” chapter at https://bit.ly/firstFullApp.
The HTML Document
The first thing we need is an HTML document. This document will host the JavaScript we will be writing. Next, launch your favorite code editor. If you don’t have one, I encourage you to use Visual Studio Code, which is the code editor you will be seeing used throughout this book. After you’ve launched your favorite code editor, go ahead and create a new file. In Visual Studio Code, you will see a tab labeled Untitled-1, similar to the screenshot in Figure 1.5.
FIGURE 1.5
The Untitled-1 tab in Visual Studio Code
Save this newly created file by going to File | Save. You will be asked to give this file a name and specify where you would like to save it. Give this file the name hello_world.htm and save it to your Desktop. After you have saved this file, add the following HTML into it:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>An Interesting Title Goes Here</title> <style> </style> </head> <body> <script> </script> </body> </html>
After you’ve added this HTML, save your document to confirm these changes. It’s time to take a look at what our page looks like in a browser.
In either File Explorer or Finder, navigate to your Desktop folder and double-click hello_world.htm. You will see your default browser appearing and displaying the name of this file. You should see something that looks like what is shown in Figure 1.6.
FIGURE 1.6
Titled tab in Visual Studio Code
If everything worked out well, you should see a blank page! No, there isn’t anything wrong here. While our page has content, there is nothing visible going on. That’s fine because we’ll fix that shortly. The key to making this fix is for you to go back to your code editor and focus on the <script> tag that you see toward the bottom of your HTML:
<script> </script>
This tag acts as a container where you can place any JavaScript you want to run inside it. What we want to do is display the words hello, world! in a dialog that appears when you load your HTML page. To make this happen, inside your script region, add the following line:
<script>
alert("hello, world!");
</script>Save your HTML file and run it in your browser. What do you see once your page has loaded? You should see a dialog appear that looks like Figure 1.7.
FIGURE 1.7
Your “hello, world!” dialog should look like this.
If this is your first attempt at writing JavaScript, congratulations! Now, let’s look at what you just did.
Statements, Expressions, and Functions
We (well, mostly you) just wrote a very simple JavaScript statement. A statement is a logical set of instructions that tell your browser what to do. A typical application will have many, MANY statements. In our case, we just have one:
alert("hello, world!");You can tell something is a statement by looking at the last character in it. It is usually a semicolon (;), just like what you see here.
Inside a statement, you will see all sorts of funky JavaScript jargon. Our code, despite being just one line, is no exception. You have this weird thing called alert that makes an appearance. This is an example of a common English word that behaves similarly in the JavaScript world. It is responsible for getting your attention by displaying some text.
To be more precise, the word alert is something known as a function. You will use functions all the time; a function is a reusable chunk of code that does something. The “something” it does could be defined by you, defined by some third-party library you are using, or it could be defined by the JavaScript framework itself. In our case, the code that gives your alert function the magical ability to display a dialog with a message you pass to it lives deep inside the browser. All you really need to know is that if you want to use the alert function, simply call it and pass in the text you want it to display. Everything else is taken care of for you.
Getting back to our example, the text you want to display is hello, world!, and notice how I am specifying it. I wrap the words inside quotation marks:
<script>
alert("hello, world!");
</script>Whenever you are dealing with text (more commonly known as strings), you will always wrap them inside a single quote or a double quote. I know that seems weird, but every programming language has its own quirks. This is one of the many quirks you will see as you further explore JavaScript. We’ll look at strings in greater detail shortly; for now, just enjoy the view.
Let’s go one step further. Instead of displaying hello, world!, change the text you are displaying to show your first and last names instead. Here is an example of what my code looks like when I use my name:
<script>
alert("Kirupa Chinnathambi!");
</script>If you run your application, you will see your name appear in the dialog (see Figure 1.8).
FIGURE 1.8
The dialog box now displays your name.
Pretty straightforward, right? You can replace the contents of your string with all sorts of stuff—the name of your pet, your favorite TV show, and so on—and JavaScript will display it.
Note
We bucketed a lot of the code we see in JavaScript as being statements. While that is true, there is a special type of statement called an expression. An expression defines a line of code that returns or generates a value. We’ll cover expressions in later chapters, but I wanted to make you aware of them now, just as a heads-up.