JavaScript Tutorial by Example
This page will teach you the basics of JavaScript in 30 minutes.
Running JavaScript
Printing
To print, use alert or console.log.
/* this is comment */ // this is comment too. 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
JavaScript: How to Use Browser's JS Console.
Semicolon can be omitted most of the time, but you should always add a semicolon, because if you don't, the compiler sometimes will get it wrong, resulting hard-to-find bugs. 〔➤see JavaScript: Semicolon〕
String
Quoting String
Use double quote or single quote for string. There's basically no difference between the two.
var s1 = "Mary's cat"; // double quote var s2 = 'Mary\'s cat'; // single quote, with escape
Use \n for newline.
ES 2015 §ECMAScript Language: Lexical Grammar#sec-literals-string-literals
// use \n for newline var 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 var s = "a b"; // use backslash to continue a line var 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 JavaScript: Property Overview〕 〔➤see JavaScript: String Methods〕 )
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. Right-most position is -1.
// get substring example using .slice() var 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
- There's no “interpolation” to embed a variable inside a string. Just use
"some" + varname + "apples". - There's no “printf()” nor “format()”. 〔➤see JavaScript: Format Number〕
String Methods
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 var z = 5; // returns 5 console.log((z = 5)*2); // 10
JavaScript also supports {x++,++x,x--,--x,x += y, …}.
〔➤see JavaScript 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.
var x = 3.5847; var f = Math.floor( x ); var 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
String/Number Conversion
JavaScript: Convert String to Number
Variables
The following are ways to declare and or assign variable.
// declare variable var x;
// declare multiple variables var a, b, c;
// declare variable and assign var x = 4;
// declare variable and assign multiple variables var a = 1, b = 2, c = 3;
// declare multiple variables, some with value var a, b = 2, c;
For detail, see: JavaScript Tutorial: Variable, Local Variable
Data Types
Variable doesn't have type. Value has type.
JavaScript datatypes are:
undefinednulltrue,false- string
- number
- object. (this includes array, function, regex, ….)
For detail, see: JavaScript: Data Types
True ＆ 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.
For detail, see: JavaScript: What's 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.
var 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");}
For detail and switch statement, and “if else” expression, see: JavaScript Tutorial: Branch Control.
Iteration; Loop
The most useful loop syntax is “for” loop.
for (var i=0; i < 9; i++) { console.log(i); }
For {while, do … while, continue, break}, see: JavaScript Tutorial: Loop/Iteration
Array
Regex (Regular Expressions for String Pattern Matching)
Here's a basics example.
// check if a pattern matches var xx = "mary@example.com"; console.log(xx.search(/@.+com/)); // 4 console.log(xx.search(/z/)); // -1 not found
Typical use of regex in “if” statement.
var xlink = "http://google.com/"; var search_result = xlink.search(/oo/); if ( search_result !== -1) { console.log("found match"); console.log(search_result); // 8 ← the index of match } else { console.log("not found"); }
Regex replacement.
// example of regex replace // add a alt attribute to a HTML image tag. var x1 = '<img src="cat.jpg">'; var x2 = x1.replace(/<img src="([-_\w]+)\.jpg">/, '<img src="$1.jpg" alt="$1">'); console.log(x2); // prints <img src="cat.jpg" alt="cat">
Example of match without global flag. Get all captured patterns.
// example of regex “match” method, capture groups // capture the attribute values in a image tag var xx = '<img class="pict" src="cat.jpg" alt="my cat" width="600" height="400">'; var result = xx.match(/<img class="([^"]+)" src="([^"]+)" alt="([^"]+)" width="([^"]+)" height="([^"]+)">/); console.log(result[0]); // <img class="i" src="cat.jpg" alt="my cat" width="600" height="400"> console.log(result[1]); // pict console.log(result[2]); // cat.jpg console.log(result[3]); // my cat console.log(result[4]); // 600 console.log(result[5]); // 400
For detail, see: JavaScript: String Methods for Regex.
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 any non-trivial code.
For detail, see: JavaScript: Functional Programing