10 Important things that programmers should know.
Every programmer should know below 10 things for codding effectively.
1) Coding Style:
Our code writing should be clean and clear to read and debugging properly properly .Some suggestive rules are —
i) No space between function name and parentheses.
ii) A space between parameter.
iii) Curly brace { on the same line, after a space.
iv) An empty betwwen logical blocks
v) Line shouldn’t too long
vi) Horizontal space should be 2 or 4 spaces.
vii) Spaces around a nested call
viii) Give a semicolon after each statement etc.
2) Throwing our own error:
JavaScript has many built-in constructors for standard errors: Error, SyntaxError, ReferenceError, TypeError and others. We can use them to create error objects as well.
For instance, in signup system user name is must. Without name it shows an error like as –
///throwing our own errorlet json = ‘{“age”:30}’;try{let user = JSON.parse(json);if(!user.name) throw new SyntaxError(“SyntaxError:name is undefined”);//alert(user.name);} catch(err){console.log(err.message , err.name);}
3) try-catch-finally:
The finally clause is often used when we start doing something and want to finalize it in any case of outcome. If try block have any error then the work flow like-
try>catch>finally
If try block has no error then it works like-
try >finally
try {//work} catch (e) {//handle errors} finally {//cleanup the working space}
4) global-catch:
Let’s imagine we’ve got a fatal error outside of try..catch, and the script died. Like a programming error or some other terrible thing. Node.js has process.on(“uncaughtException”) for that. And in the browser we can assign a function to the special window.onerror property, that will run in case of an uncaught error.
<script>window.onerror = function(message, url, line, col, error) {alert(`${message}\n At ${line}:${col} of ${url}`);};function readData() {badFunc(); // Whoops, something went wrong!}readData();</script>
5)Custom made errors:
We can create our own error by extending Error class like as –
class Error{constructor(message){this.name = “build-in-error”;}}class CustomError extends Error{constructor(message) {super(message);this.name = “custom error”;}}try{throw new CustomError(“custom message”);} catch (e){console.log(e.message);console.log(e.name);}
5) DOM,DOM tree and Nodes:
DOM means Document Object Model.Whenever we want to run a website,browser try to create a DOM tree of the page that we want to see.We can control out website style through JavaScript document object.
For instance —
Document.body.style.background = ‘red’;
By using this statement we can change webpage background.
The DOM consists of a tree structure of nested nodes, which is often referred to as the ‘DOM tree’.In DOM tree tags are element node, text outside of element is a text node and also have comment node that is not execute during page load.
<!DOCTYPE html><html lang=”en”><head><title>Document</title></head><body><h1>Element Node</h1><! — comment node →</body></html>
6) Beware: “innerHTML+=” does a full overwrite:
Usually we use += as a shortcut addition but in DOM it means overwrite. In other words, innerHTML+= does this:
i) The old contents is removed.
ii) The new innerHTML is written instead a concatenation of the old and the new one.
7) Create node and insert in Dom tree by using documentFragment:
A common use for DocumentFragment is to create one, assemble a DOM subtree within it, then append or insert the fragment into the DOM using Node interface methods such as appendChild() or insertBefore().
function getListContent() {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(getListContent());
8) Modify the document:
Methods to create new nodes:
i) document.createElement(tag) creates an element with the given tag.
ii) document.createTextNode(value) creates a text node (rarely used).
iii) element.cloneNode(deep) clones the element, if deep==true then with all descendants.
Insertion and removal:
i) node.append(…nodes or strings) to append a node at the end
ii) node.prepend(…nodes or strings) is used for preappend a node.
iii) node.before(…nodes or strings) is used to insert right before node.
iv) node.after(…nodes or strings) is used to insert right after node
v) node.replaceWith(…nodes[, strings]) is used to replace node.
vi) node.remove() is used to remove a node.
9) Classname Vs classlist:
Using “classList”, we can add or remove a class without affecting any others the element may have. But if we assign “className”, it will wipe out any existing classes while adding the new one (or if we assign an empty string it will wipe out all of them).
Assigning “className” can be a convenience for cases where you are certain no other classes will be used on the element, but I would normally use the “classList” methods exclusively.And “classList” also has handy “toggle” and “replace” methods.
Example:
//class listif (checked){listItem.classList.add(‘responded’);}else{listItem.classList.remove(‘responded’);}//classNameif (checked){listItem.className = ‘responded’;}else{listItem.className = ‘’;}
10) Styles with classes:
Normally we are used to style by using a separated css file. But we can declare CSS classes and style in the HTML tag. There are two general way are —
i) Create a class or id in CSS.
<body class=’bg-color’><h1 id=’heading’>This is the h1 tag</h1><p class=’paragraph’>Lorem ipsum dolor sit amet</p><script>function(){}</script></body>
ii) Property directly in the html element:
<li style=’font-size: 30px’>Item</li>That’s all for today
