• Home
  • Groups

JavaScript Data Types

JavaScript Data Types

JavaScript variables can hold many data types: numbers, strings, objects and more:

var length = 16;                               // Number
var lastName = "Johnson";                      // String
var x = {firstName:"John", lastName:"Doe"};    // Object

The Concept of Data Types

In programming, data types is an important concept.

To be able to operate on variables, it is important to know something about the type.

Without data types, a computer cannot safely solve this:

var x = 16 + "Volvo";

Does it make any sense to add “Volvo” to sixteen? Will it produce an error or will it produce a result?

JavaScript will treat the example above as:

var x = "16" + "Volvo";

When adding a number and a string, JavaScript will treat the number as a string.

Example

var x = 16 + "Volvo";

Example

var x = "Volvo" + 16;

JavaScript evaluates expressions from left to right. Different sequences can produce different results:

JavaScript:

var x = 16 + 4 + "Volvo";

Result:

20Volvo

JavaScript:

var x = "Volvo" + 16 + 4;

Result:

Volvo164

In the first example, JavaScript treats 16 and 4 as numbers, until it reaches “Volvo”.

In the second example, since the first operand is a string, all operands are treated as strings.


JavaScript Types are Dynamic.

JavaScript has dynamic types. This means that the same variable can be used to hold different data types:

Example

var x;           // Now x is undefined
x = 5;           // Now x is a Number
x = "John";      // Now x is a String

JavaScript Syntax

JavaScript Values

The JavaScript syntax defines two types of values: Fixed values and variable values.

Fixed values are called literals. Variable values are called variables.


JavaScript Literals

The most important rules for writing fixed values are:

Numbers are written with or without decimals:

Strings are text, written within double or single quotes:

JavaScript Variables

In a programming language, variables are used to store data values.

JavaScript uses the var keyword to declare variables.

An equal sign is used to assign values to variables.

In this example, x is defined as a variable. Then, x is assigned (given) the value 6:

JavaScript Statements

JavaScript Programs
A computer program is a list of “instructions” to be “executed” by a computer.

In a programming language, these programming instructions are called statements.

A JavaScript program is a list of programming statements.

In HTML, JavaScript programs are executed by the web browser.

JavaScript Statements
JavaScript statements are composed of:

Values, Operators, Expressions, Keywords, and Comments.

This statement tells the browser to write “Hello Dolly.” inside an HTML element with id=”demo”:

JavaScript Output

JavaScript Display Possibilities

JavaScript can “display” data in different ways:

Writing into an HTML element, using innerHTML.
Writing into the HTML output using document.write().
Writing into an alert box, using window.alert().
Writing into the browser console, using console.log().
Using innerHTML
To access an HTML element, JavaScript can use the document.getElementById(id) method.

The id attribute defines the HTML element. The innerHTML property defines the HTML content:

JavaScript Where To

JavaScript Functions and Events
A JavaScript function is a block of JavaScript code, that can be executed when “called” for.

For example, a function can be called when an event occurs, like when the user clicks a button.

JavaScript inor
You can place any number of scripts in an HTML document.

Scripts can be placed in the, or in thesection of an HTML page, or in both.

JavaScript Introduction

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”:

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

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:

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

JavaScript Can Hide HTML Elements

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

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