Monday, 2 October 2017

The HTML Attributes Never Change!



First things first! What is an HTML attribute?
The html attributes provide additional information about or to the element. For instance value is an attribute below:

<input id="inpt" type="text" value="Roy"/>

Of-course id and type are attributes too, but lets stick to value for the sake of this post.

Without beating the bushes now, lets get to the point!

"An html attribute may or may not have a corresponding DOM property. Similarly the DOM properties may or may not have the corresponding html attribute". For example, the html attribute "value" has a corresponding DOM property "value".

The key point is that attribute values do not change but their corresponding DOM properties do. Consider the following input element:


The attribute "value" is initialized with the value "Roy". Now let's assume that the user changes the value of the input by typing something. Let's observe the values of the attribute and the DOM property.

As can be seen in the grab above, the user changes the value of the input field, the attribute has however not changed and still contains the old value, "Roy", whereas the DOM property is updated to new value "Amjad".

Can you name an attribute, that does not have a corresponding DOM property and vice versa?

Saturday, 23 September 2017

Calling The Super Function In JavaScript



With prototypal inheritance in JavaScript how would you call the super version of a function. Consider Dept that inherits from College as below:


Now you wanted to call displayName() on oDept and you could do that as below:


All of this is simple and cool, but what if you wanted to call the displayName() of College as well from the displayName() in Dept? Something as below:


Notice line-27 where there is an attempt to call the super (College) version of the displayName(). This is however a futile exercise here, as the super is undefined and not recognized. We need to find a way to accomplish this though. Take a look at the solution below:


The trick lies in line-35. Notice that we store the reference to the prototype of Dept in the property uber. You may want to call it super or anything else. Finally it allows us to call the super version of displayName at line number 27.

None of this was possible if we didn't ensure that we had line-34 in place though. Read here if you are wondering why!


The HTML Attributes Never Change!

First things first! What is an HTML attribute? The html attributes provide additional information about or to the element . For instan...