Some Cool Hecks of Javascript

Try-catch: Sometimes errors can happen in our script and this is a common thing for all programmers. Our scripts can immediately stop in case of an error. But we can do something better with the error. We can save our script from dying and for this try-catch blocks can help us.

try {
// code
} catch (error) {
// error handling
}

We can write our code in try block. This block will execute first. If there were no error, then catch will be ignored. This will return our expected result.
In the same way, if an error occur in try block, the block execution will stop. Then catch block will execute. Catch block will take a parameter. We can use this parameter to see what error happened.
NB: It won’t kill our script.

Throw Statement: Throw statement returns a user-defined exception. When an error occurs Javascript stops its execution and return an error. But throw statement allows you to create a custom error. The exception can be a JavaScript String, a Number, a Boolean or an Object:

Syntax: throw <expression>

function getArea(width, height) {
if (isNaN(width) || isNaN(height)) {
throw “Parameter is not a number!”;
}
}

Ex-2:

try {
if(x == “”) throw “is Empty”;
if(isNaN(x)) throw “not a number”;
if(x > 10) throw “too high”;
if(x < 5) throw “too low”;
}
catch(err) {
console.log(err.message);
}

DOM Tree: DOM stands for Document Object Model. According to DOM, every HTML tag is an object. There is the use of nested tags. The nested tags are children of enclosing tag. All the objects of DOM tree can access by Javascript and they are modifiable. With DOM javascript get all the power to create dynamic HTML. What can we do with DOM?

  1. change all the HTML elements
  2. change all the HTML attributes
  3. Change CSS style
  4. Remove HTML existing elements and attributes
  5. Add new HTML elements and attributes
  6. And many more….

DOM Navigation: This is very important to know that how DOM navigate? ‘Document’ is the entry point of DOM. That means if we want to access all the things from document we have to start with ‘document’ point. After that, we can access any other node. All nodes of DOM:
The entire document is a document node
All HTML element is an element node
The text inside HTML elements are text node
HTML attributes are attribute node
All comments are comment node

DOM Node Classes: Each DOM node belongs to the corresponding built-in class. Node classes are:
1. eventTaget
2. Node
3. Element
4. HTMLelement

Node Type: The nodeType property returns the node type, as a number, of the specified node. If the node is an element node, the nodeType property will return 1. If the node is an attribute node, the nodeType property will return 2. If the node is a text node, the nodeType property will return 3. If the node is a comment node, the nodeType property will return 8. This property is read-only.

let elem = document.body;// let’s examine what it is?
alert(elem.nodeType); // 1 => element
// and the first child is…
alert(elem.firstChild.nodeType); // 3 => text
// for the document object, the type is 9
alert( document.nodeType ); // 9

Node removal: node.remove() is used to remove node:

let div = document.createElement(‘div’);
div.className = “alert”;
div.innerHTML = “<strong>Hi there!</strong> You’ve read an important message.”;
document.body.append(div);
setTimeout(() => div.remove(), 1000);

Document Fragment: DocumentFragment is a special DOM node that serves as a wrapper to pass around lists of nodes. We can append other nodes to it, but when we insert it somewhere, then its content is inserted instead.

function getContent() {
let fragment = new DocumentFragment();
for(let i=1; i<=3; i++) {
let li = document.createElement(‘li’);
li.append(i);
fragment.append(li);
}
return fragment;
}
ul.append(getContent()); // (*)

iOS Enthusiast