JavaScript

JavaScript is a programming language, created in 1995, specifically designed to work with websites, or HTML and CSS based web pages hosted in web browsers.

HTML, CSS and JavaScript are the core technologies that every web page is built with.

For more on history and workings of JavaScript I recommend What is JavaScript? on MDN, as well as the Crockford on JavaScript lecture series by Douglas Crockford, one of the architects of the language.

One thing we should clear up right now:

JavaScript is not Java.

It has no relationship to Java. They are completely separate languages that happen to have similar sounding names.

https://www.akawebdesign.com/2009/09/30/java-vs-javascript/

https://templecoding.com/blog/2013/06/10/four-good-books-to-change-the-way-you-see-write-javascript/

Now that we've cleared that up, let's talk about what JavaScript is.

JavaScript is the scripting language packaged with all web browsers. It adds functionality to web sites to allow things that can't be done with static HTML and CSS such as animation, interaction and other time based possibilities.

We reviewed HTML and CSS, and I'm going to assume everyone is familiar with what a web browser is, let's pause for a moment and discuss what we know about web browsers.

Static vs Dynamic

You have probably heard these terms before, what do they mean to you?

Static and dynamic are important terms to keep in mind when talking about programming. Some of the work we do in class will be static, meaning there is no change over time.

Ultimately our projects will include animation and interaction, making them dynamic. The content will change given user input over time.

The JavaScript console

Because every browser uses JavaScript, we can write JavaScript without even opening a text editor or creating a file. We can start writing JavaScript directly in the browser window you currently have open, by using the JavaScript console.

For this class I will be using the Google Chrome browser. To open the console in Chrome, you can use the following shortcuts or use the menu: View > Developer > JavaScript Console.

Mac Windows
Command + Alt + J Control + Shift + J
CAj VSj

If you're on another browser you can either Google how to open the console or switch to Chrome.

The console is an awesome tool for developers. We can type JavaScript code directly into the console and it will immediately be evaluated. Try something simple just to see it work.

Type an expression into the console and then hit R (Enter) to see it be evaluated.

2 + 2
// 4

So JavaScript can do basic arithmetic. Cool.

The console is used mostly for debugging, which is a process that developers do when something in their code is not doing what they want it to do. The console is useful for evaluating statements and functions and sending messages from the code to the console, where the developer can see it, but the user typically would not.

We'll talk more about debugging in a later lesson.

For now, we're just going to use the console to demonstrate some of the properties and possibilities of JavaScript.

Expressions

2 + 2 is a simple JavaScript expression. JavaScript interprets the expression and returns a result. This is a very simple version of everything that happens in a computer program. The programmer asks the computer to evaluate a series of expressions and statements and the computer returns a result.

Let's look at some more arithmetic expressions.

1 - 1
// 0
2 * 5
// 10
12 / 4
// 3

Expressions can also be grouped using parentheses.

2 + 2 * 5
// 12
(2 + 2) * 5
// 20

Errors

If you ask JavaScript to evaluate an expression it doesn't understand, it will return an error.

2 2
Uncaught SyntaxError: Unexpected number

Here, the JavaScript compiler is telling you that it didn't expect a number, because we forgot to add an arithmetic operator between the first and seconds values.

Notice that the error isn't very specific. It didn't say, "You forgot the plus sign, idiot." JavaScript doesn't actually know what we intended to write. There's lots of different signs that could have gone there.

JavaScript will only understand expressions written in the format it expects. Unlike other humans, it can't guess what a programmer "meant" when they mistyped something. So it will give us an error that attempts to explain the issue.

Boolean expressions

Something that we often need to do in a program is make a decision based on different values. To do this, we can use boolean expressions, which evaluate whether a statement is true or false.

The == operator is used to evaluate a boolean statement.

1 == 1
// true
2 + 2 == 4
// true
2 + 2 == 5
// false

We can also compare the relative values of numbers using <, less than, and >, greater than.

3 < 4
// true
99 > 100
// false

We can also use <=, less than or equal to and >=, greater than or equal to.

0 <= 1
// true
1 <= 1
// true
0 >= 1
// false
1 >= 0
// true

Integers and Floats

The numbers we have been using so far are all whole numbers, or integers, numbers that do not have a decimal point value.

JavaScript also uses floats, or numbers with decimal points.

3 / 4
// 0.75

However, JavaScript considers both integers and floats to be numbers. They are not separate types.

typeof 1
// "number"
typeof 0.5
// "number"

Data Types

So far we have seen two types of data in JavaScript, numbers and booleans.

The third primitive data type is the string. A string is a series of characters. It's kind of like a word or a sentence.

In JavaScript, single or double quotation marks are used to contain a string.

"I am a string."
'me too.'
typeof "I'm a string"

We'll talk more about strings and other data types in later lessons.

Environment objects and properties

JavaScript has some nice built-in values that are set up for us to use and interact with the environment we're working with. In this case the environment is the Chrome browser.

navigator
navigator.userAgent
window
window.innerWidth
document
document.body