Comments and Objects in JavaScript: Day 3

Introduction

This article explains some basic concepts of JavaScript used in Web Applications, like comments, objects, etc.

Before reading this article, I highly recommend reading the previous parts,

Comments in JavaScript

In JavaScript, comments are used for skipping that statement from execution; using comments, you make code more readable and understandable for anyone. Code functionality is clearer using comments. The following comments are used in JavaScript:

  1. Single Line Comment
  2. Multi-line comment

Single Line Comment in JavaScript

When you want to comment out a single statement, then a single-line comment is used; it starts with "//". JavaScript ignores this line. Using this, you can comment out an entire line. 

The following example uses a single-line comment to explain the code,

<!DOCTYPE html>    
<html>    
<title>JavaScript Comments</title>    
<head></head>    
<body>    
<script language="javascript">    
    //Single line comment    
    //Addition of two numbers    
    var a = 25;    
    var b = 75;    
    var c = a + b; //addition of a and b is store in c variable    
    document.write("Addition of " + a + " and " + b + " is " + c);    
</script>    
</body>    
</html>   

Output

Addition of 25 and 75 is 100

Multi-line Comment in JavaScript

A multi-line comment is used with a group or code block that you want to comment out. A multi-line comment starts with /* and ends with */. JavaScript skips the code block between this. 

In the following example, a group of statements is commented out using multi-line comments.

<!DOCTYPE html>    
<html>    
<title>JavaScript Comments</title>    
<head></head>    
<body>    
<script language="javascript">    
    /*  
    var a = 25;  
    var b = 75;  
    var c = a + b; //addition of a and b is store in c variable  
    document.write("Addition of " + a + " and " + b + " is " + c);  
    */    
    function Print() {    
        document.write("Example of Multi-line Comments in JavaScript");    
    }    
    Print();    
</script>    
</body>    
</html>   

Output

Example of Multi-line Comments in JavaScript

Objects in JavaScript

An object is a thing, just like things in the real world. Objects are a way to organize variables. In the web browser, objects include the browser window, forms and buttons, and so on. (For example, cars, books, dogs, and money.)

Properties and Methods in JavaScript

Every object has its properties and methods. Properties define the characteristics of an object. (For example, color, name, length.) Methods that can be done on objects.

(For example, alert, confirm, and open.)

The following is the syntax of properties:

objectName.propName or objectName[“property”]

The following is the syntax of methods,

methodName : function () { Statements; }   

Example

The following demo example explains the concept of objects, properties, and methods. In this example, an object is created named "employee". It has the property's name and city. Creating the method for this object employee and call.

<!DOCTYPE html>    
<html>    
<title>JavaScript Objects</title>    
<head></head>    
<body>    
<script language="javascript">    
    var employee = new Object(); //Creating an object    
    
    //Assigning properties to an object 'employee'    
    employee.name = "Jeetendra";    
    employee.city = "Pune";    
    
    //Assigning method to an object 'employee'    
    employee.info = function () {    
        document.write("Name : " + this.name + " City : " + this.city);    
    }    
    
    //calling the method    
    employee.info();    
</script>    
</body>    
</html>   

Output

Name: Jeetendra City : Pune

"this" in JavaScript

An object can be referred to using "this" in JavaScript. You cannot set the value for this. It is not a variable; it's a keyword.

Deleting Properties

You can delete properties from objects.

Syntax 

delete objectName.propName;  

Example

In the following example, you can understand how to delete properties from objects. Here I deleted the "company" property of the object "employee".

<!DOCTYPE html>    
<html>    
<title>JavaScript Objects</title>    
<head></head>    
<body>    
<script language="javascript">    
    var employee = new Object(); //Creating an object    
    
    //Assigning properties to an object 'employee'    
    employee.name = "Jeetendra";    
    employee.city = "Pune";    
    employee.id = "1072";    
    employee.company = "GNS";    
    
    //deleting properties of object 'employee'    
    delete employee.company;    
    
    //Assigning method to an object 'employee'    
    employee.info = function () {    
        document.write("Name : " + this.name + " City : " + this.city);    
        document.write("ID : " + this.id + " Company : " + this.company);    
    }    
    //calling the method    
    employee.info();    
</script>    
</body>    
</html>   

Output

Name : Jeetendra City : PuneID : 1072 Company : undefined

In the preceding output, you can see that I deleted the property company; its value is printed as "undefined".

Built-in Objects in JavaScript

Some built-in objects of JavaScript offer more advanced operations like the following: 

  1. Math Objects in JavaScript
  2. Date Objects in JavaScript
  3. String Objects in JavaScript

Math Objects in JavaScript

It provides methods for many mathematical calculations like abs(), log(), pow(), sqrt() and so on.

Syntax

Math.methodName(value);   

Example

<!DOCTYPE html>    
<html>    
<title>JavaScript Objects</title>    
<head></head>    
<body>    
<script language="javascript">    
    //Math object example    
    var n = 4;    
    var res = Math.sqrt(n);    
    document.write("Square of " + n + " is " + res);    
</script>    
</body>    
</html>   

Output

Square of 4 is 2

Date Objects in JavaScript

It provides the methods to get the current day, month, and year.

Syntax

dateObject.methodName();  

Example

<!DOCTYPE html>    
<html>    
<title>JavaScript Objects</title>    
<head></head>    
<body>    
<script language="javascript">    
    //Date object example    
    var date = new Date();    
    var res = date.getFullYear();    
    document.write("Current Date is " + date + " and Year is " + res);    
</script>    
</body>    
</html>   

Output

Current Date is Thu Nov 27, 2014, 23:22:37 GMT+0530 (India Standard Time) and Year is 2014

String Objects in JavaScript

It provides the methods and properties for string manipulation and formatting. 

Syntax

stringName.methodName();   

Example

<!DOCTYPE html>    
<html>    
<title>JavaScript Objects</title>    
<head></head>    
<body>    
<script language="javascript">    
    //String object example    
    var str = "C# Corner";    
    var bld = str.bold();    
    document.write("First String is " + str + " After formatting " + bld);    
</script>    
</body>    
</html>   

Output

First String is C# Corner After formatting C# Corner.

Summary

I hope you understand the concepts of objects in JavaScript. If you have any suggestions regarding this article, then please contact me. 

Reference

  1. Scope and Events in JavaScript: Day 4
  2. Array in JavaScript: Day 5
  3. Page Re-direction in JavaScript: Day 6
  4. Errors and Exception Handling in JavaScript: Day 7
  5. Debugging in JavaScript: Day 8
  6. Hosting in JavaScript: Day 9