What is JavaScript?

JavaScript is the Programming Language for the Web.

JavaScript can update and change both HTML and CSS.

JavaScript can calculate, manipulate and validate data.

---

JavaScript Quickstart Tutorial

This tutorial will take a quick look at the most important JavaScript data types.

JavaScript variables can be:

• Numbers
• Strings
• Objects
• Arrays
• Functions

---

JavaScript Variables

JavaScript variables are containers for storing data values.

In this example, x, y, and z, are variables:

Example

var x = 5;
var y = 6;
var z = x + y;

Try it Yourself »

From the example above, you can expect:

• x stores the value 5
• y stores the value 6
• z stores the value 11

---

JavaScript Numbers

JavaScript has only one type of number. Numbers can be written with or without decimals.

Example

var x = 3.14;    // A number with decimals
var y = 3;       // A number without decimals

Try it yourself »

All numbers are stored as double precision floating point numbers.

The maximum number of decimals is 17, but floating point is not always 100% accurate:

Example

var x = 0.2 + 0.1;         // x will be 0.30000000000000004

Try it yourself »

---

JavaScript Strings

Strings store text. Strings are written inside quotes. You can use single or double quotes:

Example

var carname = "Volvo XC60";  // Double quotes
var carname = 'Volvo XC60';  // Single quotes

Try it Yourself »

The length of a string is found in the built in property length:

Example

var txt = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
var sln = txt.length;

Try it Yourself »

---

---

JavaScript Objects

You have already learned that JavaScript variables are containers for data values.

This code assigns a simple value (Fiat) to a variable named car:

var car = "Fiat";

Try it Yourself »

Objects are variables too. But objects can contain many values.

This code assigns many values (Fiat, 500, white) to a variable named car:

var car = {type:"Fiat", model:"500", color:"white"};

Try it Yourself »

---

JavaScript Arrays

JavaScript arrays are used to store multiple values in a single variable.

Example

var cars = ["Saab", "Volvo", "BMW"];

Try it Yourself »

---

JavaScript Functions

A JavaScript function is a block of code designed to perform a particular task.

A JavaScript function is executed when "something" invokes it (calls it).

Example

function myFunction(p1, p2) {
    return p1 * p2;              // The function returns the product of p1 and p2
}

Try it Yourself »

---

What can JavaScript Do?

This section contains some examples of what JavaScript can do:

• JavaScript Can Change HTML Content
• JavaScript Can Change HTML Attribute Values
• JavaScript Can Change HTML Styles (CSS)
• JavaScript Can Hide HTML Elements
• JavaScript Can Show HTML Elements

---

JavaScript Can Change HTML Content

One of many JavaScript HTML methods is getElementById().

This example uses the method to "find" an HTML element (with id="demo") and changes the element content (innerHTML) to "Hello JavaScript":

Example

document.getElementById("demo").innerHTML = "Hello JavaScript";

Try it Yourself »

JavaScript Can Change HTML Attribute Values

In this example JavaScript changes the value of the src (source) attribute of an <img> tag:

JavaScript Can Change HTML Styles (CSS)

Changing the style of an HTML element, is a variant of changing an HTML attribute:

Example

document.getElementById("demo").style.fontSize = "35px";
or
document.getElementById('demo').style.fontSize = '35px';

Try it Yourself »

---

JavaScript Can Hide HTML Elements

Hiding HTML elements can be done by changing the display style:

Example

document.getElementById("demo").style.display = "none";
or
document.getElementById('demo').style.display = 'none';

Try it Yourself »

---

JavaScript Can Show HTML Elements

Showing hidden HTML elements can also be done by changing the display style:

Example

document.getElementById("demo").style.display = "block";
or
document.getElementById('demo').style.display = 'block';

Try it Yourself »