Friday, 8 December 2017

JavaScript | Common mistakes by developers in JavaScript

Mostly developers face many issues because of silly programming mistakes.

Mistakes are,

Equality checks
We check the variables for certain values, but there are two types of operators, we can use. I suggest using strict operators over type converting.

Type converting operator like == converts operands, if they are not of the same type. To demonstrate or test, you can try the following statements and see the output.

Example
"1" == 1
Output: true

So, the mistakes of using == operator result in TRUE value for 1==”1”, which can be wrong in a real scenario. Therefore, it is always advisable to use type strict operators.

Strict operators like === don’t convert operands and returns true, if the operands are strictly equal.

"1" === 1
Output: false

Concatenation
In Javascript, we use "+" operator for concatenation & addition. Now, another common mistake is to use mix numbers & string operands.

Example
var y = ‘10’;  
var x= 1 + y;
Output: 110  

Use function parseInt in such scenario to rescue you, otherwise you’ll spend time in debugging.

var x= 1 + parseInt(y);
Output: 11

Float point numbers
Programming languages are not always correct to match the floating point numbers.

Example
var a = 0.1;  
var b = 0.2;  
var c= a + b;  
(a === 0.3)
Output: false because h is 0.30000000000000004  

Floating numbers are saved in 64 bits. Hence, the right way to do is:

var h = (f * 10 + g * 10) / 10; // h is 0/3  
(h === 0.3)
Output: true 

JavaScript | innerHTML Property in JavaScript

innerHTML property can be used to modify an HTML document. innerHTML property exists in all the types of the major Browsers. When you use innerHTML, you can change the page's content without refreshing the page. This can make your Website feel quicker and more responsive to user input.

Syntax
The syntax for using innerHTML looks like this:
document.getElementById('ID of element').innerHTML = new HTML content;

getElementById: getElementById refers to the HTML element using its ID.
new HTML content: Data is the new content to go into the element.

<!DOCTYPE html>
<html>
<body>
    <p id="demo" onclick="changeInnerHTML()">Click me to change my HTML content (innerHTML).</p>

    <script>
        function changeInnerHTML() {
            document.getElementById("demo").innerHTML = "Paragraph changed!";
        }
    </script>
</body>
</html>


JavaScript | Scope and Events in JavaScript

Scope in JavaScript
The scope defines the accessibility of a variable, objects, and function. It is nothing but the boundary line.

There are only two types of scope:
1. Local Scope
2. Global Scope


Local Scope
It defines that something is only accessible in a limited scope. When you declare a variable within the function, it becomes local to that function. It's not accessible to the other functions or outside the function.

Example
<!DOCTYPE html> 
<html> 
<title>Scope in JavaScript</title> 
 
<head></head> 
 
<body> 
    <script language='javascript'>
        printName();
        document.write("<br>Outside the function<br>"); 
        //cannot access the name variable to outside  
        document.write("My name is " + name); 
        document.write(); 
 
        function printName() { 
            //local variable declaration means local scope  
            var name = "Algos"; 
            document.write("Inside the function<br>");
            document.write("My name is " + name); 
        } 
    </script> 
</body> 
</html>

Output
Inside the function
My name is Algos
Outside the function
My name is


Global Scope
It can be accessible to the other functions, as it becomes global to all. You can access it within the function. It is defined anywhere in your JavaScript code.

Example
<!DOCTYPE html> 
<html> 
<title>Scope in JavaScript</title> 
<head></head> 
<body> 
    <script language='javascript'> 
        document.write("Global Scope in JavaScript</br>"); 
        //global variabe declaration  
        var name = "Algos"; //it can be accessible to all within JavaScript code  
        printName(); 
 
        function printName() { 
            //access the test variable,  
            //it can be accessible because it is global in scope  
            document.write("My Name is " + name); 
        } 
    </script> 
</body> 
</html> 

Output
Global Scope in JavaScript
My Name is Algos


Events in JavaScript
All the objects have properties and methods. Some objects also have "events". Every element on a Web page has certain events that can trigger invocation of the event handlers. The "event handler" is a command that is used to specify the actions in response to an event. Attributes are inserted into HTML tags to define the events and event handlers.

Different types of events are listed below:
1. Mouse click event.
2. Web page or an image loading.
3. Moussing over a hot spot on the web page.
4. Selecting an input box in an HTML form.
5. Submitting an HTML form.
6. Keystroke.

Example: onclick event
<!DOCTYPE html> 
<html>
<head>onlcick event example</head> 
    <body> <button onclick="clickme()">Click me</button> 
        <script language='javascript'> 
            function clickme() { 
                alert("onclick Event of Button"); 
            } 
        </script> 
    </body> 
</html> 


JavaScript | isNaN() Function

NaN, standing for not a number, is a numeric data type value representing an undefined or unrepresentable value, especially in floating-point calculations.

The isNaN() function determines whether a value is an illegal number (Not-a-Number). This function returns true if the value equates to NaN. Otherwise, it returns false.


This function is different from the Number specific Number.isNaN() method. The global isNaN() function, converts the tested value to a Number, then tests it.

Number.isNaN() does not convert the values to a Number, and will not return true for any value that is not of the type Number.

isNaN(123)
Output: false
isNaN(-1.23)
Output: false
isNaN(5-2)
Output: false
isNaN(0)
Output: false
isNaN('123')
Output: false
isNaN('')
Output: false
isNaN(true)
Output: false

isNaN(undefined)
Output: true
isNaN('NaN')
Output: true
isNaN(NaN)
Output: true
isNaN(0 / 0)
Output: true
isNaN('Hello')
Output: true
isNaN('2005/12/12')
Output: true


Related Posts Plugin for WordPress, Blogger...