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.

% (Modulus) Returns the integer remainder of dividing the two operands. 16 % 5 returns 1.
++ (Increment) Unary operator. Adds one to its operand. If x is 3, then ++x returns 4, whereas x++ returns 3.
-- (Decrement) Unary operator. If x is 3, then --x returns 2, whereas x-- returns 3.
- (Unary negation) Unary operator. Returns the negation of its operand. If x is 3, then -x returns -3.

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"]

Label statement

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

JS Bin

JavaScript Objects

In JavaScript all values except the primitive types of JavaScript (true, false, numbers, strings, null and undefined) are objects.

Here objects contain -> propertyName: propertyValue pairs.

Predefined Core Objects

JavaScript has the following predefined objects.

  • Array Object
  • Boolean Object
  • Date Object
  • Function Object
  • Math Object
  • Number Object
  • RegExp Object
  • String Object

Thank you for your time and attention, Go to Home page