Algorithms Forum: 2017-12-03

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>

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>

<body>

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>

<body>

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>

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

Algorithms Forum

Pages

Friday 8 December 2017

JavaScript | Common mistakes by developers in JavaScript

JavaScript | innerHTML Property in JavaScript

JavaScript | Scope and Events in JavaScript

JavaScript | isNaN() Function