JavaScript Tutorial by Example

This page teaches you the basics of JavaScript in 30 minutes.

Running JavaScript

[see How to Run JavaScript]

[see JS: How to Use Browser Console]

Printing

To print, use alert or console.log.

/* this is
multi-line
comment */

// this is single line comment

alert("hello"); // popup a dialog

console.log("hello"); // print to browser's console

To see the output of console.log, open your browser's JavaScript console.

[see JS: How to Use Browser Console]

Semicolon can be omitted most of the time. When to insert semicolon is complex. For now, just follow examples in this tutorial. For detail, see JS: Semicolon Rules.

String

Quoting String

Use double quote or single quote for string. There's basically no difference between the two.

let s1 = "Mary's cat";  // double quote
let s2 = 'Mary\'s cat'; // single quote, with escape

Use \n for newline.

// use \n for newline
let ss = "cat\ndog";

console.log(ss); // prints 2 lines

Literal newline in string is not allowed. Use backslash to continue a line.

// illegal syntax. Literal newline is not allowed
let s = "a
b";

// use backslash to continue a line
let s = "c\
d";

console.log(s); // prints cd

String length

"abc".length; // 3

Note: no parenthesis after “length”. (because “length” is a “property”, not “method”.)

[see JS: Property Overview]

[see JS: String.prototype]

Substring

string.slice(begin_index) → returns a substring from begin_index to end of string.

string.slice(begin_index, end_index) → returns a substring from begin_index to end_index, not including the end_index.

• Index starts at 0.
• Index can be negative. When negative, it counts from right. The last character's position is -1.

[see JS: String.prototype.slice]

// get substring example using .slice()

let ss = "01234";

console.log(ss.slice(1));       // 1234

console.log(ss.slice(1,3));     // 12

console.log(ss.slice(1,-1));    // 123

console.log(ss.slice(1,0));     // "" empty

console.log(ss.slice(-3,-1));   // 23

Join String

String join. Use the plus operator +.

// string join
console.log( "tiger" + "rabbit"); // tigerrabbit

String Methods

[see JS: String.prototype]

Arithmetic Operators

Basic arithmetic.

3 + 4;      // 7
3 - 4;      // -1
3 * 4;      // 12
3 / 4;      // 0.75

10 % 3;     // 1 → remainder (mod)
-(3+4);     // -7 → negation

Math.pow(2,3);    // 8 → exponential
Math.pow(2,1/2);  // 1.4142135623730951 → square root

Assignment Operators

Assignment returns a value.

// assignment returns a value
let z = 5; // returns 5
console.log((z = 5)*2); // 10

JavaScript also supports x++ and others.

[see JS: Operators]

Number

JavaScript doesn't have int/float distinction. They are just type “number”. It's similar to other language's “float”.

console.log(typeof 3); // prints "number"
console.log(typeof 3.028487); // prints "number"

Convert Decimal to Integer

You can use {Math.ceiling(), Math.floor(), Math.round()} to get integer.

let x = 3.5847;

let f = Math.floor( x );
let c = Math.ceil( x );

console.log(f); // prints 3
console.log(c); // prints 4

console.log(Math.round( 3.54 )); // prints 4
console.log(Math.round( 3.55 )); // prints 4

[see JS: Math Object]

String/Number Conversion

[see JS: Convert String to Number]

Variables

The following are ways to declare and or assign variable.

// declare variable
let x;

// declare multiple variables
let a, b, c;

// declare variable and assign
let x = 4;

// declare variable and assign multiple variables
let a = 1, b = 2, c = 3;

// declare multiple variables, some with value
let a, b = 2, c;

[see JS: Variable]

Data Types

Variable doesn't have type. Value has type.

JavaScript datatypes are:

• undefined
• null
• true, false
• string
• number
• symbol
• object. (this includes array, function, regex, ….)

[see JS: Data Types]

True and False

true and false are builtin boolean data types.

Zero, empty string, undefined, null, NaN, eval to false in a “if” statement. Everything else eval to true.

[see JS: true, false]

Logic Operators

true && true //  true. The “and” operator

true || true //  true. The “or” operator

!true // false. The “negation” operator

Comparison Operators

3 < 4;         // true
3 > 4;         //  false

3 == 3;        // true.
3 == "3";      // true.  note: 「==」 does automatic type conversion
3 === "3";     // false.  True if both sides are same type and equal

3 != 4;        // true. The 「!=」 is the negation of 「==」
3 !== 4;       // true. The 「!==」 is the negation of 「===」

What is the difference between == and ===?

== does automatic type conversion. === does not.

You should always use === instead of ==. When testing for boolean, always be as explicit as possible. Don't rely on what the language considers as true.

If Then Else

Simple “if” statement.

if (3 < 4) {console.log("yes");}

“if else” statement.

if (3 <= 4) {console.log("yes");}
else {console.log("no");}

“else if” chain.

let x = 3;
if (x == 1) {console.log("is 1");}
else if (x == 2) {console.log("is 2");}
else if (x == 3) {console.log("is 3");}
else {console.log("not found");}

[see JS: Branch Control: if then else, switch]

Iteration; Loop

The most useful loop syntax is “for” loop.

for (let i=0; i < 9; i++) { console.log(i); }

[see JS: for while do Loop]

Array

[see JS: Array Basics]

Define Function

Example of defining a function:

function ff(x, y) { return x + y;}
console.log(ff(3, 4)); // 7

If the function does not have a return statement, it returns undefined.

JavaScript is a functional language. The definition of a function returns a value of type “function” that represent the function. You can pass a function as argument into a function. Function can return a function. You can also have nested function. Understanding how functions can be passed around is essential, because it is heavily used in JavaScript code.

For detail, see: JS: Functional Programing

JavaScript Object

[see JS: Object Basics]