JavaScript Basics

In the previous sections we talked about how HTML and CSS are the basic building blocks of a webpage. The third and final building block of a webpage is JavaScript. Like CSS, it's not required to make a webpage, but most pages use it. Unlike HTML and CSS, JavaScript is an actual programming language. You can use it to perform tasks like solving math problems, showing popups to the user, and changing the layout on a page. JavaScript has become really powerful in the last few years, but the best part is that it's very easy to learn the basics.

Basic JavaScript

If you know other programming languages like Java, or C, then you'll see a lot of similarities to JavaScript. Unlike those languages, JavaScript execution simply starts at the top of the files and goes to the bottom in order-- there's no main() function that gets called. That means a "Hello World" program can be as simple as this:

console.log("Hello World");

JavaScript allows you use variables, but unlike some other languages, variables do not have types. You just declare variables using the var keyword like this:

var x = 5;
var y = 10;
var sum = x + y;
console.log("The sum is: " + sum);

Because variables don't have types, you can reassign them after creation. For example:

//Comments are supported too!
var x = 5;
console.log("The value of x is: " + x); //This prints "5"
x = "Hello World";
console.log("The value of x is: " + x); //This prints "Hello World"
x = 123.456;
console.log("The value of x is: " + x); //This prints "123.456"

JavaScript Functions

Functions in JavaScript work similarly to other languages, allowing you to write some code once and then re-use it later. Since JavaScript does not have variable types, you don't need to specify a return value on your functions.

function sayHello() {
    console.log("Hello World!");
}
sayHello(); //Prints "Hello World"
sayHello(); //Prints "Hello World"

You can pass arguments to functions just like you'd expect. Again, these arguments do not have types:

function sayHello(name) {
    console.log("Hello there, " + name);
}
sayHello("Bob"); //Prints "Hello there, Bob"
sayHello("Sally"); //Prints "Hello there, Sally"

JavaScript Objects

If you're used to other object-oriented languages like Java or C, you might be wondering where the classes and objects are in JavaScript. JavaScript does support objects, but it's not strictly object-oriented. In JavaScript objects are just a collection of values and functions wrapped together. You can define one using curly braces. Here's an example:

//Define 2 objects
var personA = {
    name: "Emily",
    age: 20,
    job: "Systems Architect"
}

var personB = {
    name: "John",
    age: 17,
    job: "Software Engineer"
}

//Reference those objects
console.log("PersonA is named" + personA.name);
console.log("PersonB is named" + personB.name);

//Update those object values
personA.age = 21;
personB.job = "Freelance Designer";

More on JavaScript

JavaScript is a huge language that has changed a lot since it was created. There's a lot to learn about it, but now you know the basics. Take a look at some of the resources below if you want get a more in-depth understanding of JavaScript. In the next section we'll go over actually using some JavaScript in a webpage.

Recommended Reading

Mozilla Developer Network JS Guide Code Academy JS Course