JavaScript

Comments and Objects in JavaScript: Day 3

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

Introduction

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

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

When you want to comment out a single statement then a single line comment is used. It starts with "//". Using this you can comment out an entire line. This line is ignored by JavaScript.

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

  1. <!DOCTYPE html>  
  2. <html>  
  3. <title>JavaScript Comments</title>  
  4. <head></head>  
  5. <body>  
  6. <script language="javascript">  
  7.     //Single line comment  
  8.     //Addition of two numbers  
  9.     var a = 25;  
  10.     var b = 75;  
  11.     var c = a + b; //addition of a and b is store in c variable  
  12.     document.write("Addition of " + a + " and " + b + " is " + c);  
  13. </script>  
  14. </body>  
  15. </html>  

Output: Addition of 25 and 75 is 100

Multi-line Comment

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 */. The code block between this is skipped by JavaScript.

In the following example, a group of statements is commented out using multi-line comments.
  1. <!DOCTYPE html>  
  2. <html>  
  3. <title>JavaScript Comments</title>  
  4. <head></head>  
  5. <body>  
  6. <script language="javascript">  
  7.     /* 
  8.     var a = 25; 
  9.     var b = 75; 
  10.     var c = a + b; //addition of a and b is store in c variable 
  11.     document.write("Addition of " + a + " and " + b + " is " + c); 
  12.     */  
  13.     function Print() {  
  14.         document.write("Example of Multi-line Comments in JavaScript");  
  15.     }  
  16.     Print();  
  17. </script>  
  18. </body>  
  19. </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 itself, forms and buttons and so on. (For example cars, books, dogs, money.)

Properties and Methods

Every objects has its own 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:
  1. 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 properties name and city. Creating the method for this object employee and call.
  1. <!DOCTYPE html>  
  2. <html>  
  3. <title>JavaScript Objects</title>  
  4. <head></head>  
  5. <body>  
  6. <script language="javascript">  
  7.     var employee = new Object(); //Creating an object  
  8.   
  9.     //Assigning properties to an object 'employee'  
  10.     employee.name = "Jeetendra";  
  11.     employee.city = "Pune";  
  12.   
  13.     //Assigning method to an object 'employee'  
  14.     employee.info = function () {  
  15.         document.write("Name : " + this.name + " City : " + this.city);  
  16.     }  
  17.   
  18.     //calling the method  
  19.     employee.info();  
  20. </script>  
  21. </body>  
  22. </html>  

Output: Name : Jeetendra City : Pune

"this" in JavaScript

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

Deleting Properties

You can delete properties from objects.

Syntax:

  1. 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".
  1. <!DOCTYPE html>  
  2. <html>  
  3. <title>JavaScript Objects</title>  
  4. <head></head>  
  5. <body>  
  6. <script language="javascript">  
  7.     var employee = new Object(); //Creating an object  
  8.   
  9.     //Assigning properties to an object 'employee'  
  10.     employee.name = "Jeetendra";  
  11.     employee.city = "Pune";  
  12.     employee.id = "1072";  
  13.     employee.company = "GNS";  
  14.   
  15.     //deleting properties of object 'employee'  
  16.     delete employee.company;  
  17.   
  18.     //Assigning method to an object 'employee'  
  19.     employee.info = function () {  
  20.         document.write("Name : " + this.name + " City : " + this.city);  
  21.         document.write("ID : " + this.id + " Company : " + this.company);  
  22.     }  
  23.     //calling the method  
  24.     employee.info();  
  25. </script>  
  26. </body>  
  27. </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

There are some built-in objects of JavaScript that offer more advanced operations like the following: 
  1. Math Objects
  2. Date Objects
  3. String Objects

Math Objects

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

Syntax:

  1. Math.methodName(value);  
Example:
  1. <!DOCTYPE html>  
  2. <html>  
  3. <title>JavaScript Objects</title>  
  4. <head></head>  
  5. <body>  
  6. <script language="javascript">  
  7.     //Math object example  
  8.     var n = 4;  
  9.     var res = Math.sqrt(n);  
  10.     document.write("Square of " + n + " is " + res);  
  11. </script>  
  12. </body>  
  13. </html>  
Output: Square of 4 is 2

Date Objects

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

Syntax:
  1. dateObject.methodName();  
Example:
  1. <!DOCTYPE html>  
  2. <html>  
  3. <title>JavaScript Objects</title>  
  4. <head></head>  
  5. <body>  
  6. <script language="javascript">  
  7.     //Date object example  
  8.     var date = new Date();  
  9.     var res = date.getFullYear();  
  10.     document.write("Current Date is " + date + " and Year is " + res);  
  11. </script>  
  12. </body>  
  13. </html>  
Output: Current Date is Thu Nov 27 2014 23:22:37 GMT+0530 (India Standard Time) and Year is 2014

String Objects

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

Syntax:
  1. stringName.methodName();  
Example:
  1. <!DOCTYPE html>  
  2. <html>  
  3. <title>JavaScript Objects</title>  
  4. <head></head>  
  5. <body>  
  6. <script language="javascript">  
  7.     //String object example  
  8.     var str = "C# Corner";  
  9.     var bld = str.bold();  
  10.     document.write("First String is " + str + " After formatting " + bld);  
  11. </script>  
  12. </body>  
  13. </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 suggestion regarding this article then please contact me. 

Up Next
    Ebook Download
    View all
    Learn
    View all
    Get Started

    You need to be a premium member to use this feature. To access it, you'll have to upgrade your membership.

    Become a sharper developer and jumpstart your career.

    Basic

    $0

    $

    . 00

    monthly

    For Basic members:

    • Standard Profile
    • Access learning courses
    • Access free e-books
    • 1x point
    Premium

    $20

    $

    . 00

    monthly

    For Premium members:

    • Earn 2x reward points
    • Premium profile with Verified check
    • Premium Avatar with status update
    • Learning courses
    • Unlimited Certifications and badges on profile
    • Unlimited Book downloads
    • Access to Premium content
    • Online Training
    • Unlimited PDF conversions and downloads
    • Professional Resume Writing
    • Interview Preparations Guide
    • 25 messages per month
    • 1 "Kodzu" avatar, basic
    Elite

    $45

    $

    . 00

    monthly

    For Elite members:

    • Bundle E-books
    • Access to all Learn Series
    • Unlimited Apply Jobs