Skip to content

javascript notes

Inline wherever, internal,external file,

Internal:
———————–
1. Immediate: used inside the head tag
2. Deferred: used inside body then it is called deferred,
Wait until all the body elements loaded.
3. Hybrid: Mixed.
—————————
Datatypes in javascript:
6 datatypes: Number,String,Object,Boolean,null,undefined.

var x = 100;
By default only object available is windows.
NULL is a value in js.

var a = new Array[2];
var a = new Array[1][2]; //2 d

if you do a[3] if size is 2 then go error will come – arrays can grown and shrink any time.
delete a[2] – it deletes second index.

3 CATEGORIES of object in javascript:
Native – Array,String,Math,Image,Object,Function,Constructor,Option
Host   – window, document,forms,
Userdefined objects

Pixels – collection of byte – rgb and opacity and can be saved in array.
Can prefetch images using images.

Every element of type array can be anything.

Creating objects in javascripts:
===================================
var arr = new Array(5); // Not square brackets!.
arr[0] = 100;

typeof keyword gives us the datatype of the variable.
Should always use var keyword.

var x= “abc” //string datatype
x =  new String(“abc”) ; //here x is object.
var z = “des”

But variable do not have properties and methods.
Objects hold certain properties and methods.
Function which are Constructors : Otherwise first letter should be capital.
function test(){}
var customObject = new test(); //object and a new object.

customObject.StringValue=”abc”;
var xyz = new test();//xyz does not have StringValue

Blueprint of an object – when you create a new object – the new property added
is not available to other objects.

this is a keyword in javascript.
If you remove the this from the StringValue then it becomes a local variable.
function test() { this.StringValue=”yes”;}

To attach a method to a class we do the following
function Circle(radius){this.radius=radius; this.getArea=getArea; this.getCircum=getCircum;}

INNER FUNCTION:
=====================
Function within a function.
function Circle(radius)
{
function getArea(){  var x= 2*radius ;//radius is LOCAL here, last sent to Constructor}
//function getArea(){  var x= 2*this.radius ;//radius is INSTANCE here, last sent to Constructor}
this.radius = radius;
this.getArea = getArea;
}
Inner functions can access local variables within outer functions.
Local variable and instance variable are segregated per instance variable.

Or we do:
function Circle(){
this.getArea=function(){} // INLINE FUNCTION
}
==================================================================================
Function can be used as : 4 difft ways.
data : as variable information
class definition   : blueprint
method             : associated with an object. has the implicit this.
anonymous function :
Argument            :

==============================================================================

Function :Global scope, bound to scope of object – and that object can be in any scope
Method : bound to an object and has an implicit this.

==============================================================================
4 invocation ways of Function
method      invocation pattern : name needed
function    invocation pattern : name needed
constructor invocation pattern : name needed
call/apply  invocation pattern : name not needed
==============================================================================

By default each function is called in the scope called “call” .
Scopes: global, object scope, call object
=================================
Function is a native object. (F caps).
= function literal :  any function created.

function can be created by Function native object.
We call it Function constructor:  smaller syntax.

var myFunc(“para1″,”para2”, “return para1 + para2”);
: this is equal to function myFunc2(){ para1, para2){return para1 + para2;}

every function is converted to object.
For this Function native object: every time 3 different objects are created.
So if you called a normal function 10 times – then only 1 instance of object created.

But Function can be used as blueprint for creating dynamically new functions.
==================================================================
new Fn() //1
Fn()     // Function constructor – optional to use NEW key word – so equal to the first line
fn(){}
function abc(){}  //object gets created – associated with call scope.

//Each function = object we can add methods, properties
==================================================================
Implicit parameters to a function at runtime there are two implicit parameters available
1. this
2. arguments

If function takes 3 param and 2 passed the third is assumed to be undefined
if function takes 5 param and 10 are passed – the function is still executed.

//Unnamed argument: This allows to access all the arguments.
Named argument can be accessed otherwise also with name also.
arguments is an array.length.

for ( z in customers) //for in loop in javascript.
{
alert(z.name);
}

If function is defined multiple times then the last definition is used.
Object
^
|
Function

var a = new Object(); //to create an object.
================================
Prototype property is ONLY available to the object CONSTRUCTOR  and not to its objects.
Like available to Circle and not BigCircle or SmallCircle.

Prototype is a property which is of type Object that is why we can keep adding
properties. Even for those object that are created in past – also get these properties and those all in future.

Javascript interpreter.Lexical Scope:
Prototype property cannot change the value of the instance variables.
because prototype – is loaded before constructor is called.

javascript: objects are always passed by reference and never by value.
prototype is an object.

var arr=[ function(){console.debug(“hi”);}, function(){console.debug(“dust”);}];
call arr[0]; //Unable to call function

//Different object
function Car() {
this.color=”red”;
}
function BMW() {
this.wheels=4;
}
function Santro() {
this.wheels=4;
}
var c = new Car();
BMW.prototype    = c;
Santro.prototype = c;

c.color = “green”;
var b = new BMW();
console.debug(“Bmw color is :” + b.color);

Three learnings:
===================================
Prototype information added after inheritance recvd by all objects,.
Modification to base Car object recvd by all child objects.
Modification to alternate Car object not impacting other child objects.

===================================
Exercise:
===================================
Slideshow with image object.
Validate length of the arguments: If type of values not supplied.
Throw error.sum(a,b,c,d); Alert to be displayed.
Account – Saving,Current,DMAT Account
===================================
Sax not used – because read only and need to insert nodes in it.
Dom parser used: coz we have to update nodes also.

Document object : its a DOM object.
createDocumentFragment(),createElement(),createTextNode()
documentElement: Html element node. deleteElement,appendElement,replaceElement
childNodes,firstChild,
Child nodes does not count attribute. it only counts child nodes.
nodeValue only holds for text element.
==============================

delete property. or array element.
to check if the property belongs to that class.
Object class has a method named hasOwnProperty.
if(c1.hasOwnProperty(“propertyName”)) then delete.

Any object that we create is javascript has a prototypal linkage to the orignal Object property.

=================================
navigator.appName, window.ActiveXObject
xmlParser.async=”false” // dont make it asynch.

submit/form.

xmlReq = new window.XMLHttpRequest();
window.ActiveXObject  // xmlReq = new ActiveXObject(“Microsoft.XMLHTTP”);

0 – not initialized
1 – initialized
2 –  ?
3 = response recvd
4 – request complete, onReadyStateChange

xhr.onreadystatechange = handleData.
responseText and responseXML
data.split(“,”)
firstChild.nodeValue();

===============================================================
JSON: Object literal
array [ , , , , ]
object {        }
value : number,string,Object,boolean,null,undefined or Array.

===============================================================
6 error objects: Error, (Name of the error and message of the error);
e.name : 6 types : of errors – name of the Constructor
e.message : details
undefined data
RangeError,SyntaxError,TypeError,EvalError,URIError,ReferenceError

Can extend Error – or create custom error throw{name:”Custom” , message:”Message”}
=================================

Every Function is having two methods : call and apply.
When you dont know the name of the function.
call and apply both call the function: Difference among two is:
call(this,a,b,c);
apply(this,[a,b,c]);

Event handling: Bubble and Capture

RegEx:
/pattern/
new RegExp(“pattern”);

Pattern matching
============================================
Position matching ^
Special char matching
Character class match
Repetition matching (5{3}
Alternation and grouping matching (OR and AND)
Back reference matching. ([] and \)
============================================
switch will come in the end and apply on the patter
/i ignore case
/gi global search and ignore case
/\d+/g = digit one or more  – all digits are returned
(305)-3453
(\[/(-\””\g) – replace above chars
split(/\s *,\s*/) – remove spaces before after , and returns array

For applying regex: String class has 4 methods
match(regex); returns array
replace() , replaces in string
search(regEx) : searches returns index or -1.true.false

RegEx
test(): a string for pattern match: mostly used method.:equal to using search.
exec() : equal to match as well as split

var pattern = /php/i
pattern.test(“PHP is your friends” ); returns true;

Sample use of the patterns:
(^-*\d+$)|(^-*\d+\.\d+$)

Date matching:
/^\d{1,2}(\-|\\|.)\d{1,2}\1\d{4}$/

Here \1 is BACK REFERENCING to last ().
Upto 9 back references back references can be used in a string
==============================================================
NO BLOCK SCOPE:
local variable.  variables are not scoped by any block – they are scoped by function

When we call the function : the calling scope can be in some other namespace
the function when declared can be in other namespace.

Definition and execution takes place in the same scope: Lexical scope

CLOSURE: INNER FUNCTION
=============================================================
Function within function is called nested function.
It has access to the member of the outer function.

Achieve authorized access to property which belongs to outer function.
Closure: Function returns function.
So the inner function has a pointer to the outer function data.
We do it for authorized access to data. This is like private access to the data.

function sayHello(name){
var text = “hello + name;
var sayAlert = function(){alert(text);}
return sayAlert;
}

Local variables are not copied they are kept by reference. they are still in strack frame
in memory even when outer function exists.

eval : used and it results in closure. in eval you can even create new local variable.
When you use Function it does not create closure.  since objects created every time!.
======================================
EventListener

obj.addEventListener(‘nameofEvent’, referenceToFunction, phase);
obj.attachEvent (‘onclick’ //IE
obj.detachEvent

Phase is a boolean value that can have two values:

Bubbling phase: false : Event happened on child, if not happ, handled by parent, if not handler destroyed by engine/
Capture phase : true  :

Default is true, bubbling event.  that is traditional way.
Capture ?
Event phases: 1,2,3
1: capture phase
2: bubble parent
3: last bubble.
eventObject.eventPhase

target,relatedTarget,keyCode, ctrkKey,altKey,shiftKey,altKey,
detail,prevValue, nextValue,source
=============================================================
preventDefault
eventObj.cancelable – cance envet after being firest
eventObj.stopPropagation
eventObj.bubbles property : type of event : Capture or bubble

document.createEvent
initUIEvent : UI
initMouseEvent : Mouse
initEvent  : Generic?
initMutationEvents : dom tree
===========================
Global abatement  : Example

var BMS = {};
var BMS.Bank = new Bank();

No comments yet

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: