Javascript From the Scratch

By-Bhanu P Chaudhary

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

 Core Javascript contain a core set of objects, such as array, Date and Math and other language elements such as operators, control Structures and statements.

 Client Side Javascript === core language + Objects to control a browser and a Document Object Model*. Server Side Javascript === core language Objects that require to run JS on server . *The DOM defines the way in which HTML document objects are exposed to your script.

ECMAScript Specification It is standardized version which behaves in 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 Web Consortium).

 JAVASCRIPT IS CaSE SENSITIVE so Null != null != NULL or any other variation.

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

Variables Variable are symbolic names for values . Name of vaiable is also called Identifier.
Javascript Identifier must start from letter, underscore(_), or dollar sign .Subsequent digit can be numbers(0-9) Declaring Variables var x = 4 ; y = 452;

Variable Scope No block Statement Scope

if (true) { var x = 5;
} console.log(x); this will return 5.

Function Scope .

GLobal variables . In webpages global variables become property of window object.

Contants Read Only Entity. Cannot change value or redeclared. const g = 5; Rarely Used

Literals Fixed Values, not variables that you LITERALLY provide in your script. Array literals Boolean literals Floating-point literals Integers Object literals String literals

Array Literal also Array Objects A list of zero or expression ,each called array 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

Expressions and Operators

Expression-- A valid unit of code that resolves to a value x = 7 ; evaluates to 7 whereas 3+4 is also an expression evaluting to 7

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

Assignment Operators An assignment operator assigns a value to its left operand based on the value of its right operand. x = y assigns value of y to x.
Shorthand operator x += y x -= y x *= y x /= y x %= y x <<= y x >>= y x >>>= y x &= y x ^= y x |= y Meaning x=x+y x=x-y x=x*y x=x/y x=x%y x = x << y x = x >> y x = x >>> y x=x&y x=x^y x=x|y

Comparison operators A comparison operator compares its operands and returns a logical value based 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)

String Operators
JavaScript provides the following special operators: Conditional operator Comma operator delete in instanceof new this typeof void

Conditional Operator Only operator that takes 3 operands. Its Syntax is :

condition ? val1 : val2 If condition is true , the operator has value val1 else it has val2. Example var status = (age >= 18) ? "adult" : "minor" ;

instanceof The instanceof operator returns true if the specified object is of the specified object type. The syntax is:
objectName instanceof objectType Used When you need the type of object at runtimeto catch errors or exceptions. Ex:
var theDay = new Date(1995, 12, 17); if (theDay instanceof Date) { // statements here will executed }

new new operator is used to create an instance of 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);

this 'this' keyword is used to refer to the current object or the calling object. Ex:
<FORM NAME="myForm"> Form name:<INPUT TYPE="text" NAME="text1" VALUE="Beluga"/> <INPUT NAME="button1" TYPE="button" VALUE="Show Form Name" onClick="this.form.text1.value = this.form.name;"/> </FORM>

typeof This operator returns a string that indicates 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 use typeof operator to find out the type of variable: The typeof operator returns the following results for these variables: typeof myFun; // returns "function" typeof shape; // returns "string" typeof size; // returns "number" typeof today; // returns "object" typeof dontExist; // returns "undefined"

Operator Precendence Better use brackets :-P But just for record
Operator type member call / create instance negation/increment multiply/divide addition/subtraction Individual operators . [] () new ! ~ - + ++ -- typeof void delete */% +-

Statements (Control Flow) Javascript supports a compact set of statements, specifically control flow statements. Expression is also statements. Use semicolons to separate statements.

Block Statement Used to group statements. Block is delimited by a pair of curly brackets ex: {
statement 1; statement 2;

} There is no Block scope in JS but function scope

Contional Statements A statements is a set of commands that executes 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 }

The following values will evaluate to false: false undefined null 0 NaN the empty string ("")

More Statements in next lecture .

 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 .

THANK YOU