Javascript crash course for programmers

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

How long does it take to learn JavaScript for a programmer?

‌If you're learning on your own, it can take six to nine months to become proficient in JavaScript. Some of that time is spent learning how to think like a programmer — helpful for when you move on to learning other programming languages.

Can I master JavaScript in 3 months?

However, unlike CSS and HTML, JavaScript is not something that can be aced in just two weeks. But, it can be done in just three months! Most employers will be happy to hire you as their web developers if you just master some of the JavaScript basics. Of course, learning never stops.

Can I learn programming with JavaScript?

That said, JavaScript's appeal isn't confined to its functionality. It's also one of the most intuitive programming languages to learn and use; often, it's one of the first that newbie developers learn when they start to code. “JavaScript is very easy to implement,” writes one tech journalist for Web Platform.

Can I learn JavaScript in 2 months?

While JavaScript is a step up from the most fundamental web development skills (languages like HTML and CSS, which can be learned in under a month), you can still expect to learn JS basics in a matter of months, not years—and that's whether you learn through online classes or teach yourself through book study.