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:
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
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:
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:
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.
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":
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 »
Full JavaScript Tutorial
This has been a short description of JavaScript.
For a full JavaScript tutorial go to W3Schools JavaScript Tutorial.
For a full JavaScript reference go to W3Schools JavaScript Reference.
