knowledge

Xpeho knowledge database

View project on GitHub

Javascript

Javascript is a programming language that is used to make web pages interactive. It is the most popular programming language in the world.

It was created by Brendan Eich in 1995. It was originally called Mocha, but was renamed to LiveScript. It was renamed to Javascript in 1996.

Table of Contents

How to install ?

No installation is required. You can start coding in Javascript right away in a web page or in a web browser console.

Example

This example shows how to display a message in the console.

console.log("Hello World"); // Display a message in the console

Use it in HTML

Javascript can be used directly in HTML with the <script> tag.

<html>
<head>
    <title>My first Javascript</title>
    <script>
        function sayHello() {
            console.log("Hello World");
        }
    </script>
</head>
<body>
    <h1>My first Javascript</h1>
    <p>Click the button to display a message.</p>
    <button onclick="sayHello()">Click me</button>
</body>
</html>

Hint

Open script_tag.js file with your web browser to test.

Use it in a web browser console

Open the web browser console and type the following:

console.log("Hello World");

Import js file in HTML

You can also use an external Javascript file in HTML.

Create a file called sayHello.js and add the following code:

function sayHello() {
    console.log("Hello World");
}

Then, add the following code in your HTML file:

<html>
<head>
    <title>My first Javascript</title>
</head>
<body>
    <h1>My first Javascript</h1>
    <p>Click the button to display a message.</p>
    <button onclick="sayHello()">Click me</button>
    <script src="sayHello.js"></script>
</body>
</html>

Hint

Open import_script.html file with your web browser to test.

Variables

Variables are containers for storing data values.

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

More info

Data Types

In Javascript, there are 5 different data types that can contain values:

  • String
  • Number
  • Boolean
  • Object
  • Array

String

A string is a series of characters like “Hello World”.

var carName = "Volvo";

Number

A number can be a positive or negative integer or floating point number.

var x = 34.00;

Boolean

A boolean can only have two values: true or false.

var x = 5;
var y = 5;
var z = 6;
(x == y) // Returns true
(x == z) // Returns false

Hint

Open the file language/2_variables.js to see more examples.

Object

An object is a collection of properties, and a property is an association between a name (or key) and a value.

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

Hint

Open the file language/2_objects.js to see more examples.

Array

An array is a special variable, which can hold more than one value at a time.

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

Hint

Open the file language/3_arrays.js to see more examples.

Operators

Operators are used to assign values, compare values, perform arithmetic operations, and more.

Operator Description Example
= Assigns values x = y
== Compares values (without type conversion) x == y
=== Compares values (with type conversion) x === y
!= Compares values (without type conversion) x != y
!== Compares values (with type conversion) x !== y
> Greater than x > y
< Less than x < y
>= Greater than or equal to x >= y
<= Less than or equal to x <= y
+ Addition x + y
- Subtraction x - y
* Multiplication x * y
/ Division x / y
% Modulus x % y
++ Increment x++
– Decrement x–
+= Addition assignment x += y
-= Subtraction assignment x -= y
*= Multiplication assignment x *= y
/= Division assignment x /= y
%= Modulus assignment x %= y
&& Logical and x && y
|| Logical or x || y
! Logical not !x
? : Ternary operator x ? y : z

Hint

Open the file language/4_operators.js to see more examples.

Conditions

Conditions are used to perform different actions based on different conditions.

var time = new Date().getHours();
if (time < 10) {
    greeting = "Good morning";
} else if (time < 20) {
    greeting = "Good day";
} else {
    greeting = "Good evening";
}

Hint

Open the file language/5_conditions.js to see more examples.

Loops

Loops are used to perform the same action over and over again, each time with a different value.

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

Hint

Open the file language/6_loops.js to see more examples.

Functions

Functions are used to perform certain actions, and they are executed when “something” invokes them (calls them).

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

Hint

Open the file language/7_functions.js to see more examples.