Common Mistakes in JavaScript

Use Of Assignment Operator
If a programmer coincidentally uses an assignment operator (=), instead of a comparison operator (==) in an if statement, it will generate errors or unexpected results.
[php]
<!DOCTYPE html>
<html>
<body>

<p id="test"></p>

<script>
var x = 5;
document.getElementById("test").innerHTML = Boolean(x == 10);
</script>

</body>
</html>
[/php]
OUTPUT :



Use Strict in JavaScript

“use strict”, it defines that the javascript code should be executed in strict mode.

Declaration of strict mode: we can declare strict mode by adding “use strict” to beggining of a js function.
[php]
<!DOCTYPE html>
<html>
<body>

<h1>With "use strict":</h1>
<h3>Using a variable without declaring it, is not allowed.</h3>

<p>Activate debugging in your browser (F12) to see the error report.</p>

<script>
"use strict";
a = 45.32; // This will cause an error (a is not defined).
</script>

</body>
</html>
[/php]
OUTPUT :


With “use strict”:

Using a variable without declaring it, is not allowed.

Activate debugging in your browser (F12) to see the error report.


Hoisting in JavaScript

It is a javascripts default behavior of mmoving to the top. In JavaScript we can used a variable before it has been declared.
[php]
<!DOCTYPE html>
<html>
<body>

<p id="demo"></p>

<script>
var x; // Declare x
x = 5; // Assign 5 to x

elem = document.getElementById("demo");
elem.innerHTML = x;
</script>

</body>
</html> [/php]
OUTPUT :



5

Debugging in JavaScript

There is very difficulties to write JavaScript code without a debugger. Might your code contain syntax errors, or logical errors, that are difficult to diagnose.
Searching errors on your code is called debugging.
[php]
<!DOCTYPE html>
<html>
<body>

<h1>First Web Page</h1>

<p>
Activate debugging in your browser (Chrome, IE, Firefox) with F12, and select "Console" in the debugger menu.
</p>

<script>
a = 5;
b = 6;
c = a + b;
console.log(c);
</script>

</body>
</html>
[/php]
OUTPUT :


First Web Page

Activate debugging in your browser (Chrome, IE, Firefox) with F12, and select “Console” in the debugger menu.


finally Statement in JavaScript

Finally block provides you benifits of executing your code after try and catch block. the codes on the finally block will execute always when try and catch executed or not.
Syntax
try {
Block of code to try
}
catch(err) {
Block of code to handle errors
}
finally {
Block of code to be executed regardless of the try / catch result
}
[php]
<!DOCTYPE html>
<html>
<body>

<p>Please input a number between 50 and 100:</p>

<input id="test" type="text">
<button type="button" onclick="myFunction()">Test Input</button>

<p id="message"></p>

<script>
function myFunction() {
var message, x;
message = document.getElementById("message");
message.innerHTML = "";
x = document.getElementById("test").value;
try {
if(x == "") throw "is empty";
if(isNaN(x)) throw "is not a number";
x = Number(x);
if(x > 100) throw "is too high";
if(x < 50) throw "is too low";
}
catch(err) {
message.innerHTML = "Input " + err;
}
finally {
document.getElementById("test").value = "";
}
}
</script>

</body>
</html>[/php]
OUTPUT :


Please input a number between 50 and 100:



Error Handling in JavaScript

Try and Catch blocks are used to define errors in JavaScript and throw statement is used to handle this error.
The try statement allows to define a block of code to be tested for errors while it is being executed.
The catch statement allows to define a block of code to be executed, if an error occurs in the try block.
Syntax
try {
Block of code to try
}
catch(err) {
Block of code to handle errors
}
[php]
<!DOCTYPE html>
<html>
<body>

<p>Please input a number between 3 and 9:</p>

<input id="demo" type="text">
<button type="button" onclick="myFunction()">Test Input</button>
<p id="message"></p>

<script>
function myFunction() {
var message, x;
message = document.getElementById("message");
message.innerHTML = "";
x = document.getElementById("demo").value;
try {
if(x == "") throw "empty";
if(isNaN(x)) throw "not a number";
x = Number(x);
if(x < 3) throw "too low";
if(x > 9) throw "too high";
}
catch(err) {
message.innerHTML = "Input is " + err;
}
}
</script>

</body>
</html>
[/php]
OUTPUT :


Please input a number between 3 and 9:



Errors In JavaScriprt

An error is a condition or a situation where a block of code which are in running state suddenly stop executing.
When our JavaScript code is executing different type of error can occur. These can from a code(writtern by programmer), due to wrong input.
[php]
<!DOCTYPE html>
<html>
<body>

<p id="demo"></p>

<script>
try {
addlert("Welcome Crazyeducation!");
}
catch(err) {
document.getElementById("demo").innerHTML = err.message;
}
</script>

</body>
</html>
[/php]
OUTPUT :



Regular Expressions in JavaScript

a sequence of characters that forms a search pattern is known as Regular expression.
Syntax
/pattern/modifiers;

Example : http://localhost/programming/java.

[php]
<!DOCTYPE html>
<html>
<body>

<p>Search a string for "crazyeducation", and display the position of the match:</p>

<button onclick="myFunction()">Try it</button>

<p id="demo"></p>

<script>
function myFunction() {
var str = "Visit crazyeducation!";
var n = str.search("crazyeducation");
document.getElementById("demo").innerHTML = n;
}
</script>

</body>
</html>[/php]
OUTPUT :


Search a string for “crazyeducation”, and display the position of the match:


Automatic Type Conversion in JavaScript

JavaScript always try to automatically convert value of wrong data type to right data type.
[php]
<!DOCTYPE html>
<html>
<body>

<p id="test"></p>

<script>
var x = [];
document.getElementById("test").innerHTML =
(5 + null) + "<br>" +
("5" + null) + "<br>" +
("5" + 2) + "<br>" +
("5" – 2) + "<br>" +
("5" * "2") + "<br>" +
("5" / "2") + "<br>"
</script>

</body>
</html>
[/ph]
<!DOCTYPE html>
<html>
<body>

<p id="test"></p>

<script>
var x = [];
document.getElementById("test").innerHTML =
(5 + null) + "<br>" +
("5" + null) + "<br>" +
("5" + 2) + "<br>" +
("5" – 2) + "<br>" +
("5" * "2") + "<br>" +
("5" / "2") + "<br>"
</script>

</body>
</html>
[/php]
OUTPUT :



Conversion From String To Number

In JavaScript we use the Number() method to convert a string to number.
[php]
<!DOCTYPE html>
<html>
<body>

<p>Click to see converted result</p>

<button onclick="myFunction()">See Result</button>

<p id="demo"></p>

<script>
function myFunction() {
var n = "333";
var num = Number(n);
document.getElementById("demo").innerHTML = num;
}
</script>

</body>
</html>[/php]
OUTPUT :


Click to see converted result