Javascript From the Scratch Part 1

8/13/2019 Javascript From the Scratch Part 1

1/31

Javascript From the Scratch

By-Bhanu P Chaudhary


2/31

Resources and Tools

Mozilla Developer Network Brackets.io or UYFE(Use Your Favourite

Editor)

Developer Tools Console

In case you face something unknown

Google Stackoverflow


3/31

Core Javascript contain a core set ofobjects, such as array, Date and Math

and other language elements such as

operators, control Structures and

statements.


4/31

Client Side Javascript === core language+

Objects to control a browser and aDocument Object Model*.

Server Side Javascript === core language

Objects that require to run JS on server .

*The DOM defines the way in which HTMLdocument objects are exposed to yourscript.


5/31

ECMAScript Specification

It is standardized version which behavesin same way in all applications that follow

the standard.

Maintained by Ecma International. Javascript is a superset of Ecmascript .

DOM is not a part of Ecmascript but is

standardized by W3C(World Wide WebConsortium).


6/31

JAVASCRIPT IS CaSE SENSITIVE

so Null != null != NULL or any other

variation.


7/31

Values ,Variables and Literals

Values --> Numbers - 97.32

Boolean - true /false

String - "Gangnum" null

undefined - value not defined

Data Type Conversion - Dynamic Language

Automatic data type conversion


8/31

Variables

Variable are symbolic names for values . Name of vaiable is also called Identifier.

Javascript Identifier must start from letter,

underscore(_), or dollar sign .Subsequentdigit can be numbers(0-9)

Declaring Variables -

var x = 4 ;

y = 452;


9/31

Variable Scope

No block Statement Scopeif (true) {

var x = 5;

}

console.log(x); this will return 5.

Function Scope .

GLobal variables . In webpages global

variables become property of window

object.


10/31

Contants

Read Only Entity. Cannot change value orredeclared.

const g = 5;

Rarely Used


11/31

Literals

Fixed Values, not variables that youLITERALLY provide in your script.

Array literals

Boolean literals Floating-point literals

Integers

Object literals

String literals


12/31

Array Literal also Array Objects

A list of zero or expression ,each calledarray element , enclosed in square

brackets([ ])

var os = ["windows", "linux", "Debian","Unix"] . os is a Array with 4 elements and

os.length = 4.

Accesing Individual element is faciliated [ ].

os[3] == Unix


13/31

Expressions and Operators

Expression-- A valid unit of code thatresolves to a value

x = 7 ; evaluates to 7 whereas 3+4 is also

an expression evaluting to 7


14/31

Operators

Assignment operators Comparison operators

Arithmetic operators

Bitwise operators Logical operators

String operators

Special operators


15/31

Assignment Operators

An assignment operator assigns a value toits left operand based on the value of itsright operand. x = y assigns value of y to x.

Shorthand operator Meaning

x += y x = x + yx -= y x = x - y

x *= y x = x * y

x /= y x = x / y

x %= y x = x % y

x > y

x >>>= y x = x >>> y

x &= y x = x & y

x ^= y x = x ^ y

x |= y x = x | y


16/31

Comparison operators

A comparison operator compares itsoperands and returns a logical valuebased on whether the comparison is true.

Operands can be numerical, string, logical

or object values.Types Description

== EQUAL(returns true for samevalue)

=== Strictly Equal(checks value +type)

!= Not Equal(checks for value)

!== Strictly not Equal(checks value+type)


17/31

String Operators

JavaScript provides the following special operators:

Conditional operator

Comma operator

delete in

instanceof

new

this

typeof

void


18/31

Conditional Operator

Only operator that takes 3 operands. Its Syntax is :

condition ? val1 : val2

If condition is true , the operator has value val1else it has val2.

Example

var status = (age >= 18) ? "adult" : "minor" ;


19/31

instanceof

The instanceof operator returns true if thespecified object is of the specified objecttype. The syntax is:

objectName instanceof objectType

Used When you need the type of object atruntimeto catch errors or exceptions.

Ex:var theDay = new Date(1995, 12, 17);

if (theDay instanceof Date) {

// statements here will executed

}


20/31

new

new operator is used to create an instanceof a user-defined object type or one of

predefined object types ex: Array,Boolean,

Object .

Syntax : var objectName = new objectType([param1, param2, ...,

paramN]);

Ex: var randomDay = new Date(1995, 12, 17);


21/31

this

'this' keyword is used to refer to thecurrent object or the calling object.

Ex:

Form name:


22/31

typeof

This operator returns a string thatindicates the type of unevaluted operand.

Helps you better understand Javascript

Suppose You Define the following Variables:var myFun = new Function("5 + 2");

var shape = "round";

var size = 1;

var today = new Date();

We can se t peof operator to find o t the


23/31

We can use typeof operator to find out the

type of variable:

The typeof operator returns the followingresults for these variables:

typeof myFun; // returns "function" typeof shape; // returns "string"

typeof size; // returns "number"

typeof today; // returns "object" typeof dontExist; // returns "undefined"


24/31

Operator Precendence

Better use brackets :-P But just for recordOperator type Individual operators

member . []

call / create instance () newnegation/increment ! ~ - + ++ -- typeof void delete

multiply/divide * / %

addition/subtraction + -


25/31

Statements (Control Flow)

Javascript supports a compact set ofstatements, specifically control flow

statements.

Expression is also statements. Usesemicolons to separate statements.


26/31

Block Statement

Used to group statements. Block isdelimited by a pair of curly brackets

ex: {statement 1;

statement 2;

}

There is no Block scope in JS but function

scope


27/31

Contional Statements

A statements is a set of commands thatexecutes if a specified condition is true.

if...else statement

ex:if (condition) { statement_1_runs_if_condition_is_true statement_2_runs_if_condition_is_true

} else {

statement_3_runs_if_condition_is_false

statement_4_runs_if_condition_is_false

}


28/31

The following values will evaluate to false:

false

undefined null

0

NaN

the empty string ("")


29/31

More Statements in next lecture .


30/31

Next Lecture

More Statements

Objects

Functions

Inheritance Closures

Asynchronous Javascript and synchronous

Materials of this lecture were taken from MDN .wjicj is available under

CC-BY-SA license. The speaker is also a contributer to MDN .


31/31

THANK YOU

Documents

Javascript From the Scratch Part 1