javascript Archives

Form Handling and Validation in JavaScript

March 23, 2019

HTML form validation can be done with JS.

Form validation normally used on the server, after the user had fill up all the data and then hit the submit button.

If the data entered by a user was incorrect or was something missing, the server will send all the data back to the user and request that the form need to be resubmitted with correct information.

JS provides a way to validate form’s data on the user’s computer before sending it to the web server. In Form validation, there will be two functions.

Basic − the form will checked to make sure all the mandatory fields are filled in. It would require just a loop in the form and check for data.
Data Format − the data must be checked for correct form and value. Developer’s code must include with logic to test correctness of data.

Different types of form validation

There are two types of validation:

Client-side validation is validation that occurs before the data has been submitted to the server.

Client side validation is performed by a web browser, before input is sent to a web server.

Client side validation check data and then send to server in avoid unnecessary server call

Server-side validation is validation which occurs after the data has been submitted.

This is performed by a web server, after input has been sent to the server.

A response is sent back to the user to tell what corrections to make,If the data fails authentication.

EXAMPLE

<html>

<head>
    <script>
        functionmyForm() {
            varjsx = document.forms["myjsForm"]["firstname"].value;
            if (jsx == "") {
                alert("Please fill the Name");
                return false;
            }
        }
    </script>
</head>

<body>

    <form name="myjsForm" action="" onsubmit="return myForm()" method="post">
        Name:
        <input type="text" name="firstname">
        <input type="submit" value="hit">
    </form>
</body>

</html>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

<html>

<head>

functionmyForm() {

varjsx = document.forms["myjsForm"]["firstname"].value;

if (jsx == "") {

alert("Please fill the Name");

return false;

}

</script>

</head>

<body>

Name:

</form>

</body>

</html>

OUTPUT

Form field (firstname) is empty, so the function alerts a message, and returns false value.

Data Validation

Data validation is the process for ensuring that user input is clean, correct.

Validation tasks are:

Is user filled in all required fields?
Is user entered a valid date?
Is user entered text in a numeric field?

Some Validation HTML Input Attributes:

Disabled – This is specifies that the input element should be disabled

Max – This is specifies the maximum value of an input element

Min – This is specifies the minimum value of an input element

Pattern – This is specifies the value pattern of an input element

Required – This is specifies that the input field requires an element

Type – This is specifies the type of an input element

Form Example

<html>

<head>
    <script>
        functionmyJs() {
            var name = document.forms["RegForm"]["Name"];
            var address = document.forms["RegForm"]["Address"];
            var email = document.forms["RegForm"]["EMail"];
            var phone = document.forms["RegForm"]["Telephone"];
            var password = document.forms["RegForm"]["Password"];

            if (name.value == "") {
                window.alert("Please enter your name.");
                name.focus();
                return false;
            }

            if (address.value == "") {
                window.alert("Please enter your address.");
                name.focus();
                return false;
            }

            if (email.value == "") {
                window.alert("Please enter a valid e-mail address.");
                email.focus();
                return false;
            }

            if (email.value.indexOf("@", 0) < 0) {
                window.alert("Please enter a valid e-mail address.");
                email.focus();
                return false;
            }

            if (email.value.indexOf(".", 0) < 0) {
                window.alert("Please enter a valid e-mail address.");
                email.focus();
                return false;
            }

            if (phone.value == "") {
                window.alert("Please enter your telephone number.");
                phone.focus();
                return false;
            }

            if (password.value == "") {
                window.alert("Please enter your password");
                password.focus();
                returnflase;
            }
            return true;
        }
    </script>

</head>

<body>
    <form name="RegForm" action="" onsubmit="return myJs()" method="post">
        <p>Name:
            <input type="text" name="Name">
        </p>
        <br>
        <p> Address:
            <input type="text" name="Address">
        </p>
        <br>
        <p>E-mail Address:
            <input type="text" name="EMail">
        </p>
        <br>
        <p>Password:
            <input type="text" name="Password">
        </p>
        <br>
        <p>Telephone:
            <input type="text" name="Telephone">
        </p>
        <br>
        <p>
            <input type="submit" value="send" name="Submit">
        </p>
    </form>
</body>

</html>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

<html>

<head>

functionmyJs() {

var name = document.forms["RegForm"]["Name"];

var address = document.forms["RegForm"]["Address"];

var email = document.forms["RegForm"]["EMail"];

var phone = document.forms["RegForm"]["Telephone"];

var password = document.forms["RegForm"]["Password"];

if (name.value == "") {

window.alert("Please enter your name.");

name.focus();

return false;

}

if (address.value == "") {

window.alert("Please enter your address.");

name.focus();

return false;

}

if (email.value == "") {

window.alert("Please enter a valid e-mail address.");

email.focus();

return false;

}

if (email.value.indexOf("@", 0) < 0) {

window.alert("Please enter a valid e-mail address.");

email.focus();

return false;

}

if (email.value.indexOf(".", 0) < 0) {

window.alert("Please enter a valid e-mail address.");

email.focus();

return false;

}

if (phone.value == "") {

window.alert("Please enter your telephone number.");

phone.focus();

return false;

}

if (password.value == "") {

window.alert("Please enter your password");

password.focus();

returnflase;

}

return true;

}

</script>

</head>

<body>

<p>Name:

</p>

<br>

<p> Address:

</p>

<br>

<p>E-mail Address:

</p>

<br>

<p>Password:

</p>

<br>

<p>Telephone:

</p>

<br>

<p>

</p>

</form>

</body>

</html>

Please follow and like us:

What are Cookies?

Normally, Cookies store user information in small text files.on your computer.

A cookie is a piece of data that is stored on your browser to be accessed by your browser. Cookies are also saved as key/value pairs.

Cookies will remember information about the user, when server forgets everything about the user after the connection is shut down.

When a user visits a web page, The name of user can be stored in a cookie.
Next time the user visits the page, the cookie “remembers” the name.

How It Works ?

Server sends some data to the visitor’s browser in the form of a cookie. The browser may accept the cookie. When the visitor go to another page, the browser sends the same cookie to the server.

Cookies are a plain text data record of 5 variable −

Expires − The date the cookie will expire
Domain − The domain name of thewebsite.
Path − The path to the directory or web page that set the cookie.
Secure − The cookie may only be retrieved with a secure server.
Name value – Cookies are set and retrieved in the form of key-value pairs

Create a Cookie with JavaScript

JS can create, read, and delete cookies with the document.cookie property.

A cookie can be created like this:

document.cookie = “username=Ram Das”;

Example

<html>

<head>

    <script type="text/javascript">
        functionWriteCookie() {
            if (document.myform.customer.value == "") {
                alert("Enter value!");
                return;
            }
            cookievalue = escape(document.myform.customer.value) + ";";
            document.cookie = "name=" + cookievalue;
            document.write("Setting Cookies : " + "name=" + cookievalue);
        }
    </script>
</head>

<body>
    <form name="myform" action="">
        <p>Enter name:
            <input type="text" name="ename" />
        </p>
        <br>
        <p>
            <input type="button" value="Set Cookie" onclick="WriteCookie();" />
        </p>
        <br>
    </form>
</body>

</html>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

<html>

<head>

functionWriteCookie() {

if (document.myform.customer.value == "") {

alert("Enter value!");

return;

}

cookievalue = escape(document.myform.customer.value) + ";";

document.cookie = "name=" + cookievalue;

document.write("Setting Cookies : " + "name=" + cookievalue);

}

</script>

</head>

<body>

<p>Enter name:

</p>

<br>

<p>

</p>

<br>

</form>

</body>

</html>

Read a Cookie with JavaScript

With JS, cookies can be read like this:

var x = document.cookie;

Example

<html>

<head>
    <script type="text/javascript">
        functionReadCookie() {
            varallcookies = document.cookie;
            document.write("All Cookies : " + allcookies);
            cookiearray = allcookies.split(';');
            for (var i = 0; i < cookiearray.length; i++) {
                name = cookiearray[i].split('=')[0];
                value = cookiearray[i].split('=')[1];
                document.write("Key is : " + name + " and Value is : " + value);
            }
        }
    </script>
</head>

<body>
    <form name="myform" action="">
        <input type="button" value="Get Cookie" onclick="ReadCookie()" />
    </form>
</body>

</html>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

<html>

<head>

functionReadCookie() {

varallcookies = document.cookie;

document.write("All Cookies : " + allcookies);

cookiearray = allcookies.split(';');

for (var i = 0; i < cookiearray.length; i++) {

name = cookiearray[i].split('=')[0];

value = cookiearray[i].split('=')[1];

document.write("Key is : " + name + " and Value is : " + value);

}

</script>

</head>

<body>

</form>

</body>

</html>

Change a Cookie with JavaScript

With JS, cookies can be changed like this:

document.cookie = “username=John Smith; expires=Thu, 18 Dec 2013 12:00:00 UTC; path=/”;

Example

In this example the cookie extend the expiry date by 1 Month.

<html>

<head>
    <script type="text/javascript">
        functionWriteCookie() {
            var now = new Date();
            now.setMonth(now.getMonth() + 1);
            cookievalue = escape(document.myform.customer.value) + ";"

            document.cookie = "name=" + cookievalue;
            document.cookie = "expires=" + now.toUTCString() + ";"
            document.write("Setting Cookies : " + "name=" + cookievalue);
        }
    </script>
</head>

<body>
    <form name="myform" action="">
        <p>Enter name:
            <input type="text" name="name" />
        </p>
        <br>
        <input type="button" value="Set Cookie" onclick="WriteCookie()" />
    </form>
</body>

</html>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

<html>

<head>

functionWriteCookie() {

var now = new Date();

now.setMonth(now.getMonth() + 1);

cookievalue = escape(document.myform.customer.value) + ";"

document.cookie = "name=" + cookievalue;

document.cookie = "expires=" + now.toUTCString() + ";"

document.write("Setting Cookies : " + "name=" + cookievalue);

}

</script>

</head>

<body>

<p>Enter name:

</p>

<br>

</form>

</body>

</html>

Delete a Cookie with JavaScript

With JS, cookies can be delete like this:

Just set the expires parameter to a passed date:

document.cookie = “username=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;”;

Example

<html>

<head>
    <script type="text/javascript">
        functionWriteCookie() {
            var now = new Date();
            now.setMonth(now.getMonth() - 1);
            cookievalue = escape(document.myform.customer.value) + ";"

            document.cookie = "name=" + cookievalue;
            document.cookie = "expires=" + now.toUTCString() + ";"
            document.write("Setting Cookies : " + "name=" + cookievalue);
        }
    </script>
</head>

<body>
    <form name="myform" action="">
        <p>Enter name:
            <input type="text" name="name" />
        </p>
        <input type="button" value="Set Cookie" onclick="WriteCookie()" />
    </form>
</body>

</html>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

<html>

<head>

functionWriteCookie() {

var now = new Date();

now.setMonth(now.getMonth() - 1);

cookievalue = escape(document.myform.customer.value) + ";"

document.cookie = "name=" + cookievalue;

document.cookie = "expires=" + now.toUTCString() + ";"

document.write("Setting Cookies : " + "name=" + cookievalue);

}

</script>

</head>

<body>

<p>Enter name:

</p>

</form>

</body>

</html>

Full Example

<html>

<head>
    <script>
        functionsetCookie(jsname, jsvalue, jsdays) {
            varjsd = new Date();
            jsd.setTime(jsd.getTime() + (jsdays * 24 * 60 * 60 * 1000));
            varjsexpires = "jsexpires=" + jsd.toGMTString();
            document.cookie = jsname + "=" + jsvalue + ";" + jsexpires + ";path=/";
        }

        functiongetCookie(jsname) {
            var name = jsname + "=";
            vardecodedCookie = decodeURIComponent(document.cookie);
            varjca = decodedCookie.split(';');
            for (var i = 0; i < jca.length; i++) {
                var c = jca[i];
                while (c.charAt(0) == ' ') {
                    c = c.substring(1);
                }
                if (c.indexOf(name) == 0) {
                    returnc.substring(name.length, c.length);
                }
            }
            return "";
        }

        functioncheckCookie() {
            varjsuser = getCookie("username");
            if (jsuser != "") {
                alert("Welcome " + jsuser);
            } else {
                jsuser = prompt("Enter your name:", "");
                if (jsuser != "" && jsuser != null) {
                    setCookie("username", jsuser, 30);
                }
            }
        }
    </script>
</head>

<body onload="checkCookie()"></body>

</html>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

<html>

<head>

functionsetCookie(jsname, jsvalue, jsdays) {

varjsd = new Date();

jsd.setTime(jsd.getTime() + (jsdays * 24 * 60 * 60 * 1000));

varjsexpires = "jsexpires=" + jsd.toGMTString();

document.cookie = jsname + "=" + jsvalue + ";" + jsexpires + ";path=/";

}

functiongetCookie(jsname) {

var name = jsname + "=";

vardecodedCookie = decodeURIComponent(document.cookie);

varjca = decodedCookie.split(';');

for (var i = 0; i < jca.length; i++) {

var c = jca[i];

while (c.charAt(0) == ' ') {

c = c.substring(1);

}

if (c.indexOf(name) == 0) {

returnc.substring(name.length, c.length);

}

return "";

}

functioncheckCookie() {

varjsuser = getCookie("username");

if (jsuser != "") {

alert("Welcome " + jsuser);

} else {

jsuser = prompt("Enter your name:", "");

if (jsuser != "" && jsuser != null) {

setCookie("username", jsuser, 30);

}

</script>

</head>

</html>

Please follow and like us:

DOM in JavaScript

March 22, 2019

The DOM is an object-oriented representation of the website pages, which is modified with a scripting language JS.

The DOMstand for Document Object Model.

When a web page is loaded, the browser creates a DOM of the page.

The DOM model is a tree of Objects.

The DOM is a platform that allows programs and scripts to dynamically access and update the content and style of a document.

It is a programming interface for HTML and XML documents. It represents the document as nodes and objects.

With the object model, JS will have all the power to create dynamic HTML:

It can be change all the HTML elements in the page
It can bechange all the HTML attributes in the page
It can bechange all the CSS styles in the page
It can be remove existing HTML elements and attributes
It can be add new HTML elements and attributes
It can be react to all existing HTML events in the page
It can be create new HTML events in the page

The DOM standard is separated into three different parts:

Core DOM – For all document types
XML DOM – For XML documents
HTML DOM – For HTML documents

For example, the standard DOM specifies that

the getElementsByTagName method must return a list of all the <P> elements in the document.

varpara = document.getElementsByTagName(“P”);

alert(para[0].nodeName);

How Can Access the DOM?

There is nothing special to begin using the DOM.

Different implementations of the DOM will be happened in different browsers.

Every web browser uses some document object model to make web pages accessible via JavaScript.

That DOM programming can be simple as it is displays an alert message by using the alert() function from the window object.

For Example

When creating a script , whether it’s inline in a <script> element , you can immediately using the API for the document or window elements to manipulate the document.

Example

<html>

<head>
    <script>
        window.onload = function() {
            varmyheading = document.createElement("h1");
            varmyheading_text = document.createTextNode("Big Head!");
            myheading.appendChild(myheading_text);
            document.body.appendChild(myheading);
        }
    </script>
</head>

</html>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

<html>

<head>

window.onload = function() {

varmyheading = document.createElement("h1");

varmyheading_text = document.createTextNode("Big Head!");

myheading.appendChild(myheading_text);

document.body.appendChild(myheading);

}

</script>

</head>

</html>

From where the DOM came?

The DOM originated as a specification to allow JS and Java programs to be portable among web browsers.

Dynamic HTML was the immediate ancestor of the DOM, and it was originally thought of largely in terms of browsers.

However, when the DOM Working Group was formed, it was also joined by vendors in other domains, including HTML or XML editors and document repositories.

DOM Tree of Objects

Document –

Root element(html) –

Element(head) –

Element(title)

Text(My Title)

Element(body) –

Element(a) –

Attribute(href)

Text (My Link)

Element(h1) –

Text(My Header)

Example with DOM Method

OUTPUT

Hello World!

1	Hello World!

Finding DOM HTML Element by Id

Hello World!

This example demonstrates the getElementsById method.

OUTPUT

Hello
World!

1 2	Hello World!

This example demonstrates the getElementsById method.

The text from the intro paragraph is Hello World!

Please follow and like us:

This in Event Handlers

In HTML event handlers, this refers to the HTML element that received the event:

<html>

   <body>

       <button onclick="this.style.display='none'">Click to Remove!</button>

   </body>

</html>

1

2

3

4

5

6

7

8

9

<html>

<body>

<button onclick="this.style.display='none'">Click to Remove!</button>

</body>

</html>

This in a Function (Default)

The owner of the function is the default binding for this.

Within function, this keyword refers to the Global object.

<html>

<body>

    <p id="JavaScriptdemo"></p>

    <script>
        document.getElementById("demo").innerHTML = myFunction();
        functionmyFunction() {
            return this;
        }
    </script>

</body>

</html>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

<html>

<body>

document.getElementById("demo").innerHTML = myFunction();

functionmyFunction() {

return this;

}

</script>

</body>

</html>

OUTPUT

[object Window]

1	[object Window]

Global Scope

If a function uses ‘this’ keyword, is called from the global scope then this will point to the window object

<script>
    varmyVar = 10;
    functionWhoIsThis() {
        varmyVar = 20;

        alert("myVar = " + myVar); // 20
        alert("this.myVar = " + this.myVar); // 10
    }
    WhoIsThis(); // inferred as window.WhoIsThis()
</script>

1

2

3

4

5

6

7

8

9

10

varmyVar = 10;

functionWhoIsThis() {

varmyVar = 20;

alert("myVar = " + myVar); // 20

alert("this.myVar = " + this.myVar); // 10

}

WhoIsThis(); // inferred as window.WhoIsThis()

</script>

OUTPUT

[object Window]
myVar = 20

1 2	[object Window] myVar = 20

Example: this keyword inside inner function

<script>
    varmyVar = 10;
    functionSomeFunction() {
        functionWhoIsThis() {
            varmyVar = 20;

            alert("myVar = " + myVar); // 20
            alert("this.myVar = " + this.myVar); // 10
        }
        WhoIsThis();
    }
    SomeFunction();
</script>

1

2

3

4

5

6

7

8

9

10

11

12

13

varmyVar = 10;

functionSomeFunction() {

functionWhoIsThis() {

varmyVar = 20;

alert("myVar = " + myVar); // 20

alert("this.myVar = " + this.myVar); // 10

}

WhoIsThis();

}

SomeFunction();

</script>

OUTPUT

[object Window]
myVar = 20

1 2	[object Window] myVar = 20

Please follow and like us:

Strict Mode in JavaScript

March 17, 2019

JAVACRIPT’s strict mode, introduced in ECMAScript 5, is a way to opt in to a restricted variant of JAVACRIPT.

Strict mode is not just a subset: it intentionally has different semantics from all other normal code.

Some browsers does not support strict mode.

To run strict mode code with different behavior from browsers need to test for support for the relevant aspects of strict mode.

Strict mode code and non-strict mode code can be co existing, so scripts can opt into strict mode incrementally

Strict mode makes many changes to normal JavaScript semantics:

Eliminates some JavaScript silent errors by changing them to throw errors.
Fixes mistakes that make it difficult for JavaScript engines to perform optimizations: strict mode code can sometimes be made to run faster than identical code that’s not strict mode.

The “use strict”; Syntax

For declaring strict mode the syntax was designed to be compatible with of JS.

Compiling a numeric literal (10 + 15;) or a string literal (“Ram Das”;) in a JS program has no side effects.

It will simply compiles to a non existing variable and it will dies.

Keywords reserved for future JavaScript versions can NOT be used as variable names in strict mode

These are:

implements
interface
let
package
private
protected
public
static
yield

Simplifying variable uses

Strict mode simplifies how variable names map to particular variable definitions in code.

This is critical to fully optimizing JS code.

JS makes this basic mapping of name to variable definition in the code impossible to perform until runtime.

Strict mode will removes most cases where it will happens, so the compiler can better optimize strict mode code.

First, strict mode prohibits with.

The problem with with is that any name inside the block might map either to a property of the object passed to it, or to a variable in surrounding (or even global) scope, at run time, Strict mode makes with a syntax error, so there’s no chance for a name in a with to refer to an unknown location at run time.

Example

'use strict';
varjsx = 17;
with (obj) { // syntax error
  // If this weren't strict mode, would this be varjsx, or
  // would it instead be obj.jsx?  It's impossible in general
  // to say without running the code, so the name can't be
  // optimized.
jsx;
}

1

2

3

4

5

6

7

8

9

'use strict';

varjsx = 17;

with (obj) { // syntax error

// If this weren't strict mode, would this be varjsx, or

// would it instead be obj.jsx? It's impossible in general

// to say without running the code, so the name can't be

// optimized.

jsx;

}

JavaScript allows strictness of code using “use strict”. Write “use strict” at the top of JavaScript code or in a function to run strict mode.

Example

<html>

<body>

    <p id="JSerrorMessage"></p>

    <script>
        "use strict";
        try {
            varjsx = 1; // valid in strict mode
            jsy = 1; // error
        } catch (ex) {
            document.getElementById("JSerrorMessage").innerHTML = ex;
        }
    </script>

</body>

</html>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

<html>

<body>

"use strict";

try {

varjsx = 1; // valid in strict mode

jsy = 1; // error

} catch (ex) {

document.getElementById("JSerrorMessage").innerHTML = ex;

}

</script>

</body>

</html>

Output

ReferenceError:jsy is not defined

1	ReferenceError:jsy is not defined

Defines that JavaScript code should be executed in “strict mode”.

“use strict” is to indicate, the code should be executed within “strict mode”.

Declaring Strict Mode

Strict mode is declared by adding “use strict”; to the beginning of a script or a function.

Example

<html>

<body>
<html>

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

</body>

</html>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

<html>

<body>

<html>

<body>

"use strict";

jsx = 3.14; // This will cause an error (jsx is not defined).

</script>

</body>

</html>

Declared inside a function

<html>

<body>

    <script>
        jsx = 3.14; // This will not cause an error.
        myFunction();

        functionmyFunction() {
            "use strict";
            jsy = 3.14; // This will cause an error (jsy is not defined).
        }
    </script>

</body>

</html>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

<html>

<body>

jsx = 3.14; // This will not cause an error.

myFunction();

functionmyFunction() {

"use strict";

jsy = 3.14; // This will cause an error (jsy is not defined).

}

</script>

</body>

</html>

Please follow and like us:

Hoisting in JavaScript

March 16, 2019

What is Hoisting?

Hoisting is when the JavaScript interpreter moves all variable and function declarations to the top of the current scope.

Hoisting is done during the interpreter’s first run through the code.

The important thing is that the actual declarations are hoisted, and that assignments will be left where they are.

Hoisting is a JS mechanism where variables and functions are declarations are moved to the top before code execution.

All functions and variables that are declared are moved to the top of their scope regardless of whether their scope is global or local.

Of note however, is the fact that the hoisting mechanism only moves the declaration. The assignments are left in place.

Variable declarations are one of the most common aspects of any programming language.

However, JavaScript has a little quirk, known as hoisting, which can turn an innocent declaration into a subtle bug.

The variable and function declarations are put into memory during the compile phase , and a hoisting suggests that variable and function declarations are moved to the top of code..

Always Declare Variables At the Top !Hoisting is (to many developers) an unknown or overlooked behavior of JavaScript.

To avoid bugs, always declare all variables at the beginning of every scope.

Example

functionmanSays(sound){
    console.log(sound);
}
manSays('Hello');

1

2

3

4

functionmanSays(sound){

console.log(sound);

}

manSays('Hello');

Variable Declarations

This is a basic example:

'use strict'; 
var bar; console.log(bar); 
// undefined bar = 'bar'; 
console.log(bar); // 'bar'

1

2

3

4

'use strict';

var bar; console.log(bar);

// undefined bar = 'bar';

console.log(bar); // 'bar'

Function Declarations

Hoisting also applies to function declarations.

This is a basic example:

'use strict'; 
functionbar() 
{ 
	varbanner; 
	console.log(banner); // undefined
	banner= 'banner';
 } 
bar(); 
console.log(banner); // ReferenceError: banneris not defined

1

2

3

4

5

6

7

8

9

'use strict';

functionbar()

{

varbanner;

console.log(banner); // undefined

banner= 'banner';

}

bar();

console.log(banner); // ReferenceError: banneris not defined

Function Hoisting

Function declarations are also be hoisted. But that functions, what assigned to variables, that’s are not hoisted.

For example, the following code will work due to function declaration hoisting.

bar();
function bar() {
alert("Hello!");
}

1

2

3

4

bar();

function bar() {

alert("Hello!");

}

The variable declaration for foo is hoisted before the function call.

However, since the assignment to bar is not hoisted, an exception is thrown for trying to call a non-function variable.

Conclusion

Hoisting is an easy to understand, but often overlooked nuance.

To help avoid these bugs, many developers advocate for a single variable declaration statement at the very beginning of every scope.

Hoisting is JS’s default behavior of moving declarations to the top.

JavaScript Declarations are Hoisted

In JS, a variable can be declared after it has been used.

A variable can be used before it has been declared.

Example 1 does not give the same result as Example 2:

Example 1

<html>

<body>

    <p id="jsdemo"></p>

    <script>
        jsx = 5; // Assign 5 to jsx
        jselem = document.getElementById("jsdemo"); // Find an element 
        jselem.innerHTML = jsx; // Display jsx in the element
        varjsx; // Declare jsx
    </script>

</body>

</html>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

<html>

<body>

jsx = 5; // Assign 5 to jsx

jselem = document.getElementById("jsdemo"); // Find an element

jselem.innerHTML = jsx; // Display jsx in the element

varjsx; // Declare jsx

</script>

</body>

</html>

Output

5

1

5

Example 2

<html>

<body>

    <p id="jsdemo"></p>

    <script>
        varjsx; // Declare jsx
        jsx = 5; // Assign 5 to jsx

        jselem = document.getElementById("jsdemo"); // Find an element 
        jselem.innerHTML = jsx; // Display jsx in the element
    </script>

</body>

</html>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

<html>

<body>

varjsx; // Declare jsx

jsx = 5; // Assign 5 to jsx

jselem = document.getElementById("jsdemo"); // Find an element

jselem.innerHTML = jsx; // Display jsx in the element

</script>

</body>

</html>

5

1

5

Please follow and like us:

Data Object in JavaScript

March 4, 2019

The Date object is a datatype, Date objects are created with the new Date( ), Most of “Date” methods simply allow you to get and set the year, month, day, hour, minute, second.

If no arguments are provided, the constructor creates a JavaScript Date object for the current date and time according to system settings for timezone offset.

JavaScript can represent date and time till the year 275755.

Syntax

	new Date(); 

	new Date(value); 

	new Date(dateString);

1

2

3

4

5

new Date();

new Date(value);

new Date(dateString);

Date Properties

Date.properties-It will allows the addition of properties to a Date object.

Date.length– This property will find the length of date and display the value of Date.length. This is the number of arguments which is handled by the constructor.

Date Methods

Sr No	Mathod	Description
1	Date()	It will return today’s date and time
2	getDate()	It will return the day of the month for the specified date as per local time.
3	getDay()	It will return the day of the week for the specified date as per local time.
4	getFullYear()	It will return the year of the specified date as per local time
5	getHours()	It will return the hour in the specified date as per local time.
6	getMilliseconds()	It will return the milliseconds in the specified date as per local time.
7	getMinutes()	It will return the minutes in the specified date as per local time
8	getMonth()	It will return the month in the specified date as per local time.
9	getSeconds()	It will return the seconds in the specified date as per local time.
10	getTime()	It will return the numeric value of the specified date as the number of milliseconds
11	getTimezoneOffset()	It will return the time-zone offset in minutes for the current locale
12	getYear()	It will returns the year in the specified date of local time
13	setDate()	It will sets the day of the month for a specified date of local time.
14	setFullYear()	It will set the full year for a specified date of local time.
15	setHours()	It will set the hours for a specified date of local time
16	setMilliseconds()	This method is forsets the milliseconds for a specified date of local time.
17	setMinutes()	This method is used to set the minutes for a specified date of local time
18	setMonth()	This method is used to set the month for a specified date of local time.
19	setSeconds()	This method is used to set the seconds for a specified date of local time.
20	setTime()	This method is used to set the Date object to the time represented by a number of milliseconds.

Please follow and like us:

Math Object in JavaScript

March 4, 2019

The JavaScript Math object used to perform mathematical tasks with numbers.Math is an object that has properties and methods.

Math has no constructor. All Math’s properties and methods are static.

To refer methods and properties use Math.propertName and functions as Math.funcationName().

For example to access the constant pi use Math.PI

To call the sine function use Math.sin(valuex), where valuex is a argument. Constants are defined with the full precision of real numbers.

The math object provide properties and methods of constants and functions for mathematical.

Math’s properties and methods can be called by using Math as an object without creating it.

Syntax

Math.propertyName
Math.functionName()

1 2	Math.propertyName Math.functionName()

Example

Math.PI
Math.sin(50);

1 2	Math.PI Math.sin(50);

<html>
 <body>
    <p id="piValue"></p>
    <script>
        document.getElementById("piValue").innerHTML = Math.PI;
    </script>

   </body>
</html>

1

2

3

4

5

6

7

8

9

<html>

<body>

document.getElementById("piValue").innerHTML = Math.PI;

</script>

</body>

</html>

Math Properties (Constants)

Property	Description
E	It will return Euler’s number (approx. 2.718).
LN2	It will return tde natural logaritdm of 2 (approx. 0.693)
LN10	It will return tde natural logaritdm of 10 (approx. 2.302)
LOG2E	It will return tde base-2 logaritdm of E (approx. 1.442)
LOG10E	It will return tde base 10 logaritdm of E (approx. 0.434)
PI	It will return constant value of PI (approx. 3.14)
SQRT1_2	It will return tde square root of 1/2 (approx. 0.707)
SQRT2	It will returnstde square root of 2 (approx. 1.414)

Math Object Methods

Mathod	Description
abs(valuex)	It will return the absolute value of valuex
acos(valuex)	It will return the arccosine of valuex, in radians
asin(valuex)	It will return the arcsine of valuex, in radians
atan(valuex)	It will return the arctangent of valuex as a numeric value between -PI/2 and PI/2 radians
atan2(valuey, valuex)	It will return the arctangent of the quotient of its arguments
ceil(valuex)	It will return the value of valuex rounded up to its nearest integer
cos(valuex)	It will return the cosine of valuex (valuex is in radians)

exp(valuex)	It will return the value of Ex
floor(valuex)	It will return the value of valuex rounded down to its nearest integer
log(valuex)	It will return the natural logarithm (base E) of valuex
max(valuex,value y, valuez, …, valuen)	It will return the number with the highest value
min(valuex,valuey, valuez, …, valuen)	It will return the number with the lowest value
pow(valuex, valuey)	It will return the value of valuex to the power of valuey
random()	It will return a random number between 0 and 1
round(valuex)	It will return the value of valuex rounded to its nearest integer
sin(valuex)	It will return the sine of valuex (valuex is in radians)
sqrt(valuex)	It will return the square root of valuex
tan(valuex)	It will return the tangent of an angle

Please follow and like us:

Global in JavaScript

March 3, 2019

Global scope is a JavaScript function Scope.Scope determines the accessibility (visibility) of variables.

Variables defined inside a function are not accessible (visible) from outside the function.

A global variable is declared outside the function or declared with an object. It can be accessed from any function.

Declaring global variable within function

To declare global variables within a function, we need to use window object. For example:

window.value=90;

1	window.value=90;

Now this value can declared with in any function and can be access and used from any function.

For example:

function m(){  
	window.value=100;//declaring global variable by window object  
}  
function n(){  
	alert(window.value);//accessing global variable from other function  
}

1

2

3

4

5

6

function m(){

window.value=100;//declaring global variable by window object

}

function n(){

alert(window.value);//accessing global variable from other function

}

EXAMPLE

<html>

<body>
    <script>
        function m() {
            window.value = 100; //declaring global variable by window object  
        }

        function n() {
            alert(window.value); //accessing global variable from other function  
        }
        m();
        n();
    </script>
</body>

</html>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

<html>

<body>

function m() {

window.value = 100; //declaring global variable by window object

}

function n() {

alert(window.value); //accessing global variable from other function

}

m();

n();

</script>

</body>

</html>

OUTPUT

100

1

100

Internals of global variable

On outside a function,when a variable declare, that will add in window object. So it can be access through window object.

For example:

<html>

<body>
    <script>
        var value = 50;

        function a() {
            alert(window.value); //accessing global variable   
        }
    </script>
    <input type="button" onclick="a()" value="get global"/>
</body>

</html>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

<html>

<body>

var value = 50;

function a() {

alert(window.value); //accessing global variable

}

</script>

</body>

</html>

Global JavaScript Variables

If any variable declared outside a function, so that will becomes GLOBAL.

A global variable has global scope: All scripts and functions on a web page can access it.

<!DOCTYPE html>
<html>

<body>

    <p id="jsdemo"></p>

    <script>
        var myName = "Ayan";
        showName();

        function showName() {
            document.getElementById("jsdemo").innerHTML = "My name is " + myName;
        }
    </script>
</body>

</html>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

<!DOCTYPE html>

<html>

<body>

var myName = "Ayan";

showName();

function showName() {

document.getElementById("jsdemo").innerHTML = "My name is " + myName;

}

</script>

</body>

</html>

OUTPUT

My name is Ayan

1	My name is Ayan

Automatically Global

If a value assign to a variable that has not been declared, it will automatically turn on GLOBAL variable.

This example will declare a global variable myName, the value is assigned inside a function.

<!DOCTYPE html>
<html>
<body>

<p id="jsdemo"></p>

<script>
myFunction();
document.getElementById("jsdemo").innerHTML = "My name is " + myName;
function myFunction() {
myName = "Ayan";
}
</script>

</body>
</html>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

<!DOCTYPE html>

<html>

<body>

myFunction();

document.getElementById("jsdemo").innerHTML = "My name is " + myName;

function myFunction() {

myName = "Ayan";

}

</script>

</body>

</html>

OUTPUT

My name is Ayan

1	My name is Ayan

Global Variables in HTML

With JavaScript, the global scope is the complete
JavaScript environment.

In HTML, the global scope is the window object. All global variables belong to the window object.

<!DOCTYPE html>
<html>

<body>

    <p id="jsdemo"></p>

    <script>
        var myName = "Ayan";

        document.getElementById("jsdemo").innerHTML = "My name is " + window.myName;
    </script>

</body>

</html>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

<!DOCTYPE html>

<html>

<body>

var myName = "Ayan";

document.getElementById("jsdemo").innerHTML = "My name is " + window.myName;

</script>

</body>

</html>

OUTPUT

My name is Ayan

1	My name is Ayan

Global Properties

Property	Description
Infinity	A numeric value that represents positive/negative infinity
NaN	“Not-a-Number” value, It means there is nothing like value.
undefined	This property indicates that a variable will not assigned a value.

Global Functions

Function	Description
decodeURI()	It will decodes a URI
decodeURIComponent()	It will decodes a URI component
encodeURI()	It will encode a URI
encodeURIComponent()	It will encode a URI component
escape()	It will use encodeURI() or encodeURIComponent() instead
eval()	It willevaluates a string and executes it as if it was script code.
isFinite()	It will determine whether a value is a finite, normal number
Number()	It will convert an object’s value to a number
parseFloat()	It will parse a string and returns a floating point number
parseInt()	It will parse a string and returns an integer
String()	It will convert an object’s value to a string
unescape()	It will use decodeURI() or decodeURIComponent() instead

Please follow and like us:

Try Catch and Finally in JavaScript

March 3, 2019

The try statement tests a block of code for errors.The catch statement handles the error.

The throw statement throws or creates custom errors.With finally statement the code will be executed, after try and catch, function will return a result.

Errors will happen, when executing a code, different errors can occur.

Error handling try and catch

In many time our scripts have errors. They are occurring because of programmer mistakes, an unexpected user input, or something else.

Normally, a script immediately stops in case of an error, printing it as an error massage.

But there is a syntax construct try, catch that allows to catching errors and, instead of stop the program, do something with programmer custom massage.

The try statement consists of a try block, which contains one or more statements. {} always be used in try block.

One catch clause, or a finally clause, must be after try block to handle the error.

This gives three blocks for the try statement:

try, catch

try, finally

try, catch, finally

try and catch

The try statement allows creating a block of code for errors while it is being executed.

The catch statement allows creating a block of code to be executed, if there is any error occurs in the try block.

Syntax

try {
  code to try
}
catch(error) {
  code to handle errors
}

1

2

3

4

5

6

try {

code to try

}

catch(error) {

code to handle errors

}

OUTPUT

<html>

<body>

    <p id="jsdemo"></p>

    <script>
        try {
            adddlert("Welcome guest!");
        } catch (err) {
            document.getElementById("jsdemo").innerHTML = err.message;
        }
    </script>

</body>

</html>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

<html>

<body>

try {

adddlert("Welcome guest!");

} catch (err) {

document.getElementById("jsdemo").innerHTML = err.message;

}

</script>

</body>

</html>

OUTPUT

   adddlert is not defined

1	adddlert is not defined

The try, catch, finally Statement

Try catch finally are so called exception handling statements.

An exception is an error that occurs at run time due to an error operation during execution.

Examples of exceptions include trying to reference an undefined variable, or calling a nonexistent method.

Examples of syntax errors of exceptions:

• alert(“I am missing a closing part //syntax error

• alert(xy) //exception occur “xy” isn’t defined yet

• undefined function() //exception

Normally whenever runs an exception somewhere in code, it displays an error message to the user while aborting the execution of the remaining code.

At its simplest to use try/catch to try and run some code, and in the event of any exceptions,

User can catch programmer-generated and runtime exceptions, but cannot catch Js syntax errors.

<script type="text/javascript">
try {
         // Code to run
         } 

catch ( e ) {
         // Code to run if an exception occurs
         }
 finally {
         // Code that is always executed regardless of 
         // an exception occurring
      }
</script>

1

2

3

4

5

6

7

8

9

10

11

12

13

try {

// Code to run

}

catch ( e ) {

// Code to run if an exception occurs

}

finally {

// Code that is always executed regardless of

// an exception occurring

}

</script>

The try block followed by exactly one catch block or one finally.

When an exception occurs in the statement written inside try block, the control transferred to catch block.

In catch block exception in caught in object declared in catch “err” and the catch block is executed.

The optional finally block executes after try/catch

If exception is thrown from try block then only catch block is executed.

Nested try/catch/finally statements

Try should never be defined just by itself, but always followed by catch or finally.

Within each clause, you can define additional try/catch/finally statements following the same rule.

<html>

<body>

    <script>
        try {
            try {
                throw new Error('oops');
            } finally {
                alert('Hi!');
            }
        } catch (ex) {
            alert('There', ex.message);
        }
    </script>

</body>

</html>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

<html>

<body>

try {

throw new Error('oops');

} finally {

alert('Hi!');

}

} catch (ex) {

alert('There', ex.message);

}

</script>

</body>

</html>

Caught the exception in the inner try-block by adding a catch block

Example

<html>

<body>

    <script>
        try {
            try {
                throw new Error('oops');
            } catch (ex) {
                alert('Hello', ex.message);
            } finally {
                alert('JS');
            }
        } catch (ex) {
            alert('outer', ex.message);
        }
    </script>

</body>

</html>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

<html>

<body>

try {

throw new Error('oops');

} catch (ex) {

alert('Hello', ex.message);

} finally {

alert('JS');

}

} catch (ex) {

alert('outer', ex.message);

}

</script>

</body>

</html>

OUTPUT

"Hello"
"JS"

1 2	"Hello" "JS"

Re-throw the error

<html>

<body>
    <script>
        try {
            try {
                throw new Error('oops');
            } catch (ex) {
                alert('Hi', ex.message);
                throw ex;
            } finally {
                alert('JS');
            }
        } catch (ex) {
            console.error('outer', ex.message);
        }
    </script>

</body>

</html>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

<html>

<body>

try {

throw new Error('oops');

} catch (ex) {

alert('Hi', ex.message);

throw ex;

} finally {

alert('JS');

}

} catch (ex) {

console.error('outer', ex.message);

}

</script>

</body>

</html>

The throw Statement

throw statement to raise your built-in exceptions or customized exceptions. These exceptions can be captured and you can take an action.

The throw statement allows to create a custom error.

The exception can be a JS String, a Number, a Boolean or an Object:

throw “Too big”; // throw a text

throw 500; // throw a number

If programmer use throws together with try and catch, you can control program flow and generate custom error messages.

The finally Statement

The finally statement lets you execute code, after try and catch.

  try {
            code to try
        } catch (err) {
            code to handle errors
        } finally {
            code to be executed regardless of the
            try/catch result
        }

1

2

3

4

5

6

7

8

try {

code to try

} catch (err) {

code to handle errors

} finally {

code to be executed regardless of the

try/catch result

}

<html>

<body>

    <p>Input a number between 5 and 20:</p>

    <input id="jsdemo" type="text">
    <button type="button" onclick="checkRange()">check</button>

    <p id="info"></p>

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

</body>

</html>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

<html>

<body>

<p>Input a number between 5 and 20:</p>

<button type="button" onclick="checkRange()">check</button>

function checkRange() {

var message, x;

message = document.getElementById("info");

message.innerHTML = "";

x = document.getElementById("jsdemo").value;

try {

if (x == "") throw "is empty";

if (isNaN(x)) throw "is not a number";

x = Number(x);

if (x > 20) throw "is too high";

if (x < 5) throw "is too low";

} catch (err) {

message.innerHTML = "Input " + err;

} finally {

document.getElementById("jsdemo").value = "";

}

</script>

</body>

</html>

Please follow and like us:

Category Archives: javascript

Recent Posts

Some Validation HTML Input Attributes:

What are Cookies?

How It Works ?

Create a Cookie with JavaScript

Read a Cookie with JavaScript

Change a Cookie with JavaScript

Delete a Cookie with JavaScript

Example

How Can Access the DOM?

From where the DOM came?

DOM Tree of Objects

Finding DOM HTML Element by Id

This in Event Handlers

This in a Function (Default)

Global Scope

The “use strict”; Syntax

Simplifying variable uses

What is Hoisting?

Variable Declarations

Function Declarations

Function Hoisting

Conclusion

JavaScript Declarations are Hoisted

Date Properties

Date Methods

Math Properties (Constants)

Math Object Methods

Declaring global variable within function

Internals of global variable

Global JavaScript Variables

Automatically Global

Global Variables in HTML

Global Properties

Global Functions

Error handling try and catch

try and catch

Syntax

The try, catch, finally Statement

Nested try/catch/finally statements

The throw Statement

The finally Statement

Post navigation

Recent Posts