JavaScript Crash Course - w3resource

JavaScript

Course

Created by w3resource.com / @w3resource

Instructions

Go through major sections using left or right arrow key
Play within a section using up or down arrow key
Press escape to see a slide overview
Click on Live JSBin (available in most slides) to access JSBin editor with code

JavaScript, The Language of the Web

JAVASCRIPT IS EVERYWHERE

Write once, run everywhere

Web Browser
Desktop (browser, command line)
Mobile Phone & Apps
Server (node.js)
Embeded System

JAVASCRIPT LANGUAGE

Interpreted
C-style syntax
Dynamic Typing
Object-Oriented
Prototype-based
Functions
Single-Threaded

JAVASCRIPT BASICS

Hello world

JS Bin

Values

JavaScript recognizes the following types of primitive values.

Numbers : 125, 14.24586
Logical (Boolean) : true, false
Strings : "JavaScript"
null : A special keyword denoting a null value; null is also a primitive value.
undefined : A top-level property whose value is undefined.

VARIABLES

A JavaScript variable must start with a letter (A-Z, a-z), underscore (_), or dollar sign ($), subsequent characters can also be digits (0-9).

- Declaring variables -

Using the keyword var. For example, var x = 100. Can be used to declare both local and global variables.
Assigning it a value. For example, x = 100. It declares a global variable and cannot be changed at the local level.

ALWAYS DECLARE YOUR VARIABLES WITH VAR!!!

Literals & Expressions

Use literals to represent values in JavaScript which are fixed values, not variables.

Array literals
Boolean literals
Integers
Floating-point literals
Object literals
String literals

Boolean literals

The Boolean type has two literal values :

true
false

Integers

Integers can be expressed in decimal (base 10), hexadecimal (base 16), and octal (base 8). An integer must have at least one digit (0-9).

No comma or blanks are allowed within an integer.
It does not contain any fractional part.
It can be either positive or negative, if no sign precedes it is assumed to be positive.

Floating-point literals

A floating number has the following parts.

A decimal integer.
A decimal point ('.').
A fraction.
An exponent.

The exponent part is an "e" or "E" followed by an integer, which can be signed (preceded by "+" or "-").

Expressions

An expression is any valid unit of code that resolves to a value. Conceptually, there are two types of expressions: those that assign a value to a variable (a = 12) and those that simply have a value (5-3).

Expression categories

Arithmetic: evaluates to a number, for example 120.230.
String: evaluates to a character string, for example, "w3r" or "2001".
Logical: evaluates to true or false.
Object: evaluates to an object.

Operators

JavaScript has the following types of operators.

Assignment operators
Comparison operators
Arithmetic operators
Bitwise operators
Logical operators
String operators
Special operators

Arithmetic operators

addition (+), subtraction (-), multiplication (*), and division (/). In addition, JavaScript provides the following arithmetic operators.

Assignment operators (1/2)

Shorthand	Expression	Description
a +=b	a = a + b	Adds 2 numbers and assigns the result to the first.
a -= b	a = a - b	Subtracts 2 numbers and assigns the result to the first.
a *= b	a = a*b	Multiplies 2 numbers and assigns the result to the first.
a /=b	a = a/b	Divides 2 numbers and assigns the result to the first.
a %= b	a = a%b	Computes the modulus of 2 numbers and assigns the result to the first.

Assignment operators (2/2)

a<<=b	a = a<<b	Performs a left shift and assigns the result to the first operand.
a>>=b	a = a>>b	Performs a sign-propagating right shift and assigns the result to the first operand.
a>>>=b	a = a>>>b	Performs a zero-fill right shift and assigns the result to the first operand.
a&= b	a = a&b	Performs a bitwise AND and assigns the result to the first operand.
a^= b	a = a^b	Performs a bitwise XOR and assigns the result to the first operand.
a \|=b	a = a\|b	Performs a bitwise OR and assigns the result to the first operand.

Comparison Operators(1/2)

Operator	Comparisons	Description
Equal (==)	x == y	Returns true if the operands are equal.
Strict equal (===)	x === y	Returns true if the operands are equal and of the same type.
Not equal (!=)	x != y	Returns true if the operands are not equal.
Strict not equal (!==)	x !== y	Returns true if the operands are not equal and/or not of the same type.

Comparison Operators(2/2)

Operator	Comparisons	Description
Greater than (>)	x>y	Returns true if the left operand is greater than the right operand.
Greater than or equal (>=)	x>=y	Returns true if the left operand is greater than or equal to the right operand.
Less than (<)	x<y	Returns true if the left operand is less than the right operand.
Less than or equal (<=)	x<=y	Returns true if the left operand is less than or equal to the right operand.

Bitwise Operators(1/2)

Operator	Usage	Description
Bitwise AND	a & b	Returns a one in each bit position if bits of both left and right operands are ones.
Bitwise OR	a \| b	Returns a one in each bit if bits of either left or right operand is one.
Bitwise XOR	a ^ b	Returns a one in a bit position if bits of one but not both left and right operand are one.
Bitwise NOT	~ a	Flips the bits of its operand.

Bitwise Operators(2/2)

Operator	Usage	Description
Left shift	a << b	Shifts a in binary representation b bits to the left, shifting in zeros from the right.
Sign-propagating right shift	a >> b	Shifts a in binary representation b bits to the right, discarding bits shifted off.
Zero-fill right shift	a >>> b	Shifts a in binary representation b bits to the right, discarding bits shifted off, and shifting in zeros from the left.

Logical Operators

Operator	Usage	Description
Logical AND &&	a && b	is true if both a and b are true.
Logical OR \|\|	a \|\| b	is true if either a or b is true.
Logical NOT !	!a	is true if a is not true.

String Operators

When working with JavaScript strings sometimes you need to join two or more strings together in to a single string. Joining multiple strings together is known as concatenation.

The concatenation operator (+) concatenates two or more string values together and return another string which is the union of the two operand strings.

Special Operators

JavaScript has the following special operators.

Comma operator
new operators
delete operators
in operators
instanceof operators
this operators
typeof operators
void operators

new Operator

The new operator is used to create an instance of a user-defined object type or of one of the predefined object types Array, Boolean, Date, Function, Image, Number, Object, Option, RegExp, or String.

Syntax : var objectName = new objectType([param1, param2, ..., paramN]);

this Operator

The this operator is used to refer the current object. In general, this refers to the calling object in a method.

Syntax : this["propertyName"]

// Output // Click here to do nothing ``` Live JS Bin

Label statement

Label statement provides an identifier for a statement that lets you refer to it using a break or continue statement.