JavaScript Tutorial

JavaScript is the world's most popular programming language.

JavaScript is the programming language of the Web.

JavaScript is easy to learn.

What is JavaScript?

  • JavaScript is the world's most popular programming language
  • JavaScript is the programming language of the Web
  • JavaScript is easy to learn
  • JavaScript can change HTML content and attributes
  • JavaScript can change CSS styles
  • JavaScript can hide and show HTML elements
  • JavaScript can be used to validate data before it's submitted to the server
  • JavaScript can be used to create cookies

JavaScript and HTML

JavaScript appeared in Netscape, a long time ago, in 1995.

JavaScript was initially called LiveScript. But Netscape wanted to make it look like Java to attract Java developers.

Today, JavaScript is fully integrated in all modern browsers.

JavaScript Example:






My Web Page


My Paragraph

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 Attributes

This example changes an HTML image by changing the src (source) attribute:

// Changes the image
document.getElementById("myImage").src = "landscape.jpg";

JavaScript Can Change CSS Styles

This example changes the style of an HTML element:

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

JavaScript Code

JavaScript code (or just JavaScript) is a sequence of JavaScript statements.

A computer program is a list of "instructions" to be "executed" by the computer.

In programming, these program instructions are called statements.

JavaScript is a programming language that computers can understand.

var x, y, z;  // Declare variables
x = 5;        // Assign the value 5 to x
y = 6;        // Assign the value 6 to y
z = x + y;    // Assign the sum of x and y to z

JavaScript Functions

A JavaScript function is defined with the function keyword, followed by a name, followed by parentheses.

function myFunction(a, b) {
  return a * b;
}

Function names can contain letters, digits, underscores, and dollar signs (same rules as variables).

JavaScript Variables

JavaScript variables are containers for storing data values.

Declaring Variables

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

JavaScript Data Types

JavaScript variables can hold numbers, strings, and more:

var length = 16;                               // Number
var lastName = "Johnson";                      // String
var cars = ["Saab", "Volvo", "BMW"];         // Array
var person = {firstName:"John", lastName:"Doe"}; // Object

JavaScript Operators

JavaScript uses arithmetic operators (+, -, *, /) to compute values:

(5 + 6) * 10

JavaScript uses an assignment operator (=) to assign values to variables:

var x, y;
x = 5;
y = 6;

JavaScript Arithmetic

Arithmetic operators perform arithmetic on numbers (literals or variables).

var a = 3;
var x = (100 + 50) * a;

JavaScript Arithmetic Operators

  • + Addition
  • - Subtraction
  • * Multiplication
  • / Division
  • % Modulus (Division Remainder)
  • ++ Increment
  • -- Decrement

JavaScript Assignment

The assignment operator (=) assigns a value to a variable.

var x = 10;

Assignment Operators

x = y      // x = y
x += y     // x = x + y
x -= y     // x = x - y
x *= y     // x = x * y
x /= y     // x = x / y

JavaScript Data Types

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

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

JavaScript Types

  • Number
  • String
  • Boolean
  • Object
  • Undefined

JavaScript Objects

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

var person = {
  firstName: "John",
  lastName: "Doe",
  age: 50,
  eyeColor: "blue"
};

The values are written as name:value pairs (name and value separated by a colon).

JavaScript Arrays

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

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

You access an array element by referring to the index number.

var name = cars[0];

JavaScript Conditions

Conditional statements are used to perform different actions based on different conditions.

If Statement

if (time < 10) {
  greeting = "Good morning";
} else if (time < 20) {
  greeting = "Good day";
} else {
  greeting = "Good evening";
}

JavaScript Loops

Loops can execute a block of code a number of times.

For Loop

for (i = 0; i < 5; i++) {
  text += "The number is " + i + "
";
}

While Loop

while (i < 10) {
  text += "The number is " + i;
  i++;
}

JavaScript Events

HTML events are "things" that happen to HTML elements when something occurs.

Common HTML Events

  • onchange - An HTML element has been changed
  • onclick - The user clicks an HTML element
  • onmouseover - The user moves the mouse over an HTML element
  • onmouseout - The user moves the mouse away from an HTML element
  • onkeydown - The user pushes a keyboard key
  • onload - The browser has finished loading the page

JavaScript Strings

A JavaScript string stores a series of characters.

var answer = "It's alright";
var answer = "He is called 'Johnny'";
var answer = 'He is called "Johnny"';

String Methods

var txt = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
var sln = txt.length;  // Returns the length of txt
Try it Yourself >>