8/13/2019 Javascript From the Scratch Part 1
1/31
Javascript From the Scratch
By-Bhanu P Chaudhary
8/13/2019 Javascript From the Scratch Part 1
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
8/13/2019 Javascript From the Scratch Part 1
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.
8/13/2019 Javascript From the Scratch Part 1
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.
8/13/2019 Javascript From the Scratch Part 1
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).
8/13/2019 Javascript From the Scratch Part 1
6/31
JAVASCRIPT IS CaSE SENSITIVE
so Null != null != NULL or any other
variation.
8/13/2019 Javascript From the Scratch Part 1
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/13/2019 Javascript From the Scratch Part 1
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;
8/13/2019 Javascript From the Scratch Part 1
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.
8/13/2019 Javascript From the Scratch Part 1
10/31
Contants
Read Only Entity. Cannot change value orredeclared.
const g = 5;
Rarely Used
8/13/2019 Javascript From the Scratch Part 1
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
8/13/2019 Javascript From the Scratch Part 1
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
8/13/2019 Javascript From the Scratch Part 1
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
8/13/2019 Javascript From the Scratch Part 1
14/31
Operators
Assignment operators Comparison operators
Arithmetic operators
Bitwise operators Logical operators
String operators
Special operators
8/13/2019 Javascript From the Scratch Part 1
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
8/13/2019 Javascript From the Scratch Part 1
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)
8/13/2019 Javascript From the Scratch Part 1
17/31
String Operators
JavaScript provides the following special operators:
Conditional operator
Comma operator
delete in
instanceof
new
this
typeof
void
8/13/2019 Javascript From the Scratch Part 1
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" ;
8/13/2019 Javascript From the Scratch Part 1
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
}
8/13/2019 Javascript From the Scratch Part 1
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);
8/13/2019 Javascript From the Scratch Part 1
21/31
this
'this' keyword is used to refer to thecurrent object or the calling object.
Ex:
Form name:
8/13/2019 Javascript From the Scratch Part 1
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
8/13/2019 Javascript From the Scratch Part 1
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"
8/13/2019 Javascript From the Scratch Part 1
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 + -
8/13/2019 Javascript From the Scratch Part 1
25/31
Statements (Control Flow)
Javascript supports a compact set ofstatements, specifically control flow
statements.
Expression is also statements. Usesemicolons to separate statements.
8/13/2019 Javascript From the Scratch Part 1
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
8/13/2019 Javascript From the Scratch Part 1
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
}
8/13/2019 Javascript From the Scratch Part 1
28/31
The following values will evaluate to false:
false
undefined null
0
NaN
the empty string ("")
8/13/2019 Javascript From the Scratch Part 1
29/31
More Statements in next lecture .
8/13/2019 Javascript From the Scratch Part 1
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 .
8/13/2019 Javascript From the Scratch Part 1
31/31
THANK YOU