Javascript week 5 questions for reflection

1.     What are the roles of 'name' and 'id' attributes in HTML tags? What is an appropriate use of both?

Name and Id attribute is used to get the required element from the document.

< input type="text" name="email" id=”txtEmail”/>

Id attribute accepts unique values, which can be used to identify the element from the document by using getElementById method

var vObjEmail = document.getElementById(“txtEmail”);

Name specifies the name of an element. Document.getElementsByName can be used to get elements with the specified names.

By using getElementById & getElementsByName, we can avoid traversing across intermediate nodes and hard coding paths.

2.     Which pointers does each node in the DOM tree typically have?

Each element on the HTML page is considered as node in the DOM tree.

Each node has parentNode and childNode property. Using parentNode parent object of node is obtained and using childNode, array of child nodes is obtained.

3.     Given a node object from a DOM tree, how do we determine if it is a text node or a regular node?

nodeName property gives information about the node’s type. By checking the nodeName property of a node, we can determine if it’s a text node or regular node.

If the nodeName property is “#text”,it is text node.

4.     Why is it better to use either trickling or bubbling of events? Why not just give the event to the node on which it was invoked?

Suppose there is element inside an element and both have click events. And the click event of element 2 is fired first then click event of element1 is called event bubbling. And reverse is click event of element 1 is fired then click event of element 2 is called event capturing.

We can decide whether to register event handler in capturing or bubbling phase. This is done through addEventListener() method

element1.addEventListener('click',doSomething2,true)

element2.addEventListener('click',doSomething,false)

If the last argument is true, event is set to capturing phase, if false it is set to bubbling phase.

5.     Can you think of one situation where you would want to prevent the browser from submitting a form after a user has clicked on the 'submit' button? How would you achieve this?

Suppose there are some validations that must be satisfied before submitting data to server. In that case, we can validate data using JavaScript on button click, if all validation is done then save data otherwise return from the function.

This is done by using “return false” or event.preventDefault(); which will stop further propagation of events.

Javascript week 4 questions for reflection

1.      In JavaScript, functions are first class objects. What does it mean to be a first class object?

In JavaScript, functions can be passed, returned and stored just like any other value.

First class object is an entity which is constructed dynamically, passed as parameter, returned from method and assigned to variable.

E.g. function attachEventToBtn () {

btnOk.click = function () {

                alert (‘Click’);

}

}

                E.g. var vResults = validateFileName ();

2.      Functions and variables share the same namespace. What does this mean and what important implication does this have?

Function and variables share the same namespace means, function and variables can have same name.

E.g. var foo = function foo() {

  alert('Yes');

};

foo();

alert(foo); 

3.      Douglas Crockford equates JavaScript functions with Lambdas, and also mentions that they are a secure construct. Can you do some research and reflect on what he means by 'secure construct'?

As Douglas Crockford mention JavaScript functions are source to enormous expressive power and it’s secure. Secure in the sense that functions have well defined scopes, which keeps code enchant. 

4.      Can you explain the concept of a closure?

Closure means even after parent function is returned, inner function defined with the parent function can have access to parent function variables.

E.g. function attachEventToBtn () {

btnOk.style.display = ‘none’;

btnOk.parentNode.innerHTML = ‘<input type="button" id=”btnSave” value="Save"/>’ + btnOk.parentNode.innerHTML;

btnSave.click = function () {

                alert (‘Click’);

btnOk.click();

}

}

5.      What is the difference between a function and a method?

Function can be referred as variable, which can be stored & return value and used as parameter.

As function is used like value, it can be stored in Objects. And a function in objects is called as Method.

6.      In JavaScript there is no implicit type checking of arguments passed to functions. This could lead to bugs if programmers are not careful about what they pass to functions. If you create a function, how would you protect it from well-meaning but careless programmers?

As JavaScript is loosely typed language, we cannot declare argument type in function declaration. If we pass wrong type, it will break the code. In order to protect the code we can use the typeof () operator to check the type of argument passed to the function.

7.      JavaScript functions have implicit access to something called this. this points to different things depending on how the function was created. Can you explain why we need this, and what it represents in different type of functions?

In most of the languages this refers to the current object initiated by class. In JavaScript this refers to the object owned by the method, but it depends on how it is called.

function setStyle(){

this.style.color='Gray';

}

In above case setStyle will refer to window

element.onclick=setStyle()

In above case it will refer the element