CS 1100: Web Development: Client-Side Coding

Week 8: An Introduction to JavaScript

This reading draws from a page by David Humphrey.

What is JavaScript?

We will now learn the third language of web development, JavaScript, which is sometimes shortened to JS.

JavaScript is a lightweight programming language meant to be embedded in other environments, most notably web browsers. It is one of the most popular programming languages in the world, perhaps the most popular, and has been for many years. Learning JavaScript is a valuable investment for any web developer, because so much of the web is built using JS.

You will often hear JavaScript described as a scripting language. This term denotes a programming language that is designed for writing code that acts on an existing system, rather than for building systems from scratch. We can certainly use JavaScript to build entire systems — it is, for example, one of the languages used to implement our editor, VS Code — but its greatest strengths lie in manipulating web pages.

JavaScript is an evolving language. You will hear it referred to by a number of different names, including ECMAScript, ES, ES5, and ES6. The "ECMA" in ECMAScript refers to the European Computer Manufacturers Association, which is the standards body responsible for the JS language. As the JS standard evolves, the language definition goes through different versions, adding or changing features and syntax. In this course, we will focus on ES6 (ECMAScript 6) and newer versions, which is supported by all web browsers.

One last note: The readings for this unit are all called "JavaScript & the DOM". What is the DOM? It refers to the domain object model, which is the way the web browser exposes a web page and its styling to our JavaScript code. We will begin to learn about it soon.

Running JavaScript Code

JavaScript is meant to be executed within a host environment. For us, the primary environment will be a web browser. We will run JavaScript code in two main ways. We may use a third method if we venture into processing data for our web pages.

JavaScript Embedded in a Web Page

The original purpose of JavaScript was for creators of web pages to embed JS code within HTML. Using the script element, we can include JavaScript in our web pages and then let the browser execute the code as part of presenting the pages to a user.

All major browsers support JavaScript, including Chrome, Safari, Firefox, and Edge.

This is our ultimate goal for learning to program in JavaScript.

Interactive JavaScript

While learning JavaScript, we will execute JS code interactively, by typing code into a window where another program will run it. This will allow us to experiment with small pieces of JavaScript and learn how they work.

The developer tools in all of our browsers include a console, a simple program that reads JavaScript code, evaluates it, and prints the result. The consoles in the different browsers all work in fundamentally the same way, though they differ around the edges sometimes.

The console in our devtools will be our primary way of executing JavaScript for the first two weeks of our study. See the next section for an introduction to using the console.

Node.js

We will also use node.js, a standalone version of the V8 JavaScript engine that drives Chrome, as a tool for learning and executing JS code. VS Code provides support for using Node within the editor. We'll install Node on our computers soon.

Note:: node.js also enables us to execute JavaScript code in a third way, by running a file of JS statements in the same way that a web browser does. This can be valuable for using JavaScript to help us process data for our web pages.

Using the JavaScript Console in a Browser's Developer Tools

You can open the JavaScript console for your browsers from their title menus:

Each browser also has a keyboard shortcut to open the console:

Opening a JavaScript console will usually create a lower panel in the browser window. Here is what that looks like in Chrome (on a Mac; the look-and-feel will differ on other platforms):

a fresh JavaScript console in Google Chrome
a fresh JavaScript console in Google Chrome

The cursor starts to the right of the > in the console window. Here's what the browser looks like after I type 3 + 5:

the JavaScript console after I enter 3 + 5
the JavaScript console after I enter 3 + 5

Notice the light gray text beneath 3 + 5. The JavaScript engine is anticipating the answer. When I hit return, the engine displays the answer:

the JavaScript console after I enter hit return
the JavaScript console after I hit return

Notice the answer 8 is now the same color as the text I typed. This is the value of the expression 3 + 5. It appears after a <· character, which serves as the output indicator.

Here is what the console looks like after I enter a few more JavaScript expressions: 'Eugene', 'Northern' + ' ' + 'Iowan', and 42.

the JavaScript console after I enter a few more expressions
the JavaScript console after I enter a few more expressions

Now that we know how to execute JavaScript in the console, we are ready to learn the many kinds of JS expressions and statements.

Play around in the JavaScript console for a few minutes. Enter some numbers and a few arithmetic expressions.
Does it always give the answer you expect?

JavaScript Resources

Most online JavaScript resources assume some background with programming, which make them less useful for a course like ours. Many of the resources we use will be material on the course web site, written specifically for you.

If you are a beginning programmer, these resources may be helpful to you:

If you are a more experienced programmer who wants to go deeper with JavScript, these resources may be helpful to you:

The weekly readings and daily session notes in this unit will include pointers to specific readings when appropriate.