Menu
×
   ❮     
HTML CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO W3.CSS C C++ C# BOOTSTRAP REACT MYSQL JQUERY EXCEL XML DJANGO NUMPY PANDAS NODEJS R TYPESCRIPT ANGULAR GIT POSTGRESQL MONGODB ASP AI GO KOTLIN SASS VUE DSA GEN AI SCIPY AWS CYBERSECURITY DATA SCIENCE
     ❯   

What is JavaScript?


HTML

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:

The Light Bulb

Try it Yourself »


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.


×

Contact Sales

If you want to use W3Schools services as an educational institution, team or enterprise, send us an e-mail:
sales@w3schools.com

Report Error

If you want to report an error, or if you want to make a suggestion, send us an e-mail:
help@w3schools.com

W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.

Copyright 1999-2024 by Refsnes Data. All Rights Reserved. W3Schools is Powered by W3.CSS.