Monday, June 18, 2018

Javascript Insights with DOM

Javascript Insights with Sudhir :


document.getElementbyId('btnResolve');

Is this a Javascript?? --> Mostly No i.e really a lot of this is DOM i.e DOM implemented in javascript

DOM is a interface that supposed to be language neutral, that allows you to manipulate HTML , listen to event handlers and things like that..
so document.getElementbyId is actually a DOM API method which javascript implements


DOM API that allows you to manipulate HTML, listen to event handler ..etc

What  happens if below html page is loaded in browser ... i.e after we enter the URL in browser and hit enter

<html>
   <head>
          <script type='text/javascript>
               alert('hello sudhiR');
          </script>
 </head>
<body>
     <h1>HELLO WORLD</h1>
 </body>
</html>

Whenever we hit enter , our browser sends an GET request for content to server and the server is going to respond with an HTTP response . In it, its going to include the html i.e string with html tags as above.
--> The browser is going to pass it off to its something like webkit , that will start processing the HTML , it'll parse it and it will start building DOM elements  up one-by-one like
<html>  --> parsed in to document element
head element to head to DOM and  when we get a script tag it goes to javascript interpreter i.e something like v8 which processes javascript and tokenize and we get a popup , untill then all browser processing totally gets freezed until user hits ok and DOM is going take over again

So until the whole DOM is loaded DOMContentLoaded or DOMContentReady will not fire/execute (i.e not fire untill the script executed) i.e untill whole html is processed

DOM creation engines --> webkit , Firefox, trident IE etc...


Doubt: If loaded or access the DOM elemnts in that script tag which is inside head , I think we get undefined.
may be that is why we load at end of body
Bottom Load your scripts..and top load CSS 

Javascript Features:
Javascript is a synonym of ECMAScript , ES is a standard and Javascript is like trademark 

Javascript is dynamic.. 
Most other Compiled languages like C .., what happens is we write our C code, we compile it and what compiler does it read that code and convert to in to ByteCode and execute that ... that bytecode is loaded in memory and computer goes instruction by instruction..reading through memory and operating something elese 

In dynamic languages like.. there is no distinction b/w the memory that's used for code and the memory that's used for data

Type travels with value and not with variable.. 2 



Anything you can do with an object can be done with a function in Javascript.. 
Create a function, can return a function with inner function, can pass functions as arguments..
The above..is which is dynamically created..

DOM is Javascript representation of HTML and a  browser.
there for you to manipulate HTML page, change whats going inside a browser , its an interface provided to javascript

DataTypes OPerators and Primitives:


Undefined: Actually going to refer to a pointer , that points hasn't been set. i.e not set this variable or defined yet.
var foo; --> undefined

null --> actually references to null pointer --> i.e its by intent i.e manually set to null. where undefined is not declared which is by mistake


assignment is we are actually taking a pointer and assigning to the address of variable in memory, i.e we have some object in our memory stack and we gonna point foo to that address

No need to use () with new operator,
Delete is deletes a property i.e it doesn't actually delete data , i.e deletes the reference to the object



Memory Stack implementation in browser:
Memory allocation of browser--> kind of very old one






That diagram is before delete.. i.e variables are just pointer to actual memory in call object or context


so delete is not actually removing data from memory, it just removes the reference, i.e we are working with pointers either reallocating , reassigning them 


So when you have name object it will have some address location and when its assigned to me i.e me.name has address "xxx" location of the object {first:"justin"}, so when me.name is copied to other varibale name then the value stored in me.name is refrence to object i.e address location of {first:"justin"}, so when we delete the property on me i.e me.name it will stop referencing the object {first:"justin"} but the other variable name still has reference or address location of object {first:"jsutin"}

What if delete me--> stille name.first work? --> yes

and important thing about delete is it delete attribute or properties of an object or variable and not variable itself.

delete will return true or false , it returns true if syntax is correct i.e dot something , and false if syntax is wrong
i.e if delete a.name --> true, if you again type same command it will return true bcz it doesnot bother wether that property exists or not 

delete a.some --> returns true

delete a --> false

 

Why Array is a object , because its stored in memory as below, keys will be integers


so typeOf will return the most base type, except for function which is  a special case in javascript








Gotcha:

when you check in browser typeof name or just type name you will get string i.e "[object Object]"

beacuse name is default property in window object which is string , if you want you can just type name in console , will return ""



When Primitive types are compared, with === then they go through the value and type





Now because they are composite types i.e objects its going to check by reference i.e its actually going to check by address of where these objects are in memory . as they are two different objects created in memory they have two different addresses , therefore false


Triple equals  in a primitive case compares value at the two addresses and a composite case we 're going to compare the addresses of left and right









Javascript doesn't have block level scope  , so i of this kind is global , its in global call object, so its gonna out the value of i at any given time