Comments and Objects in JavaScript

Introduction

 
In the previous chapter, we learned about Client-side vs Server-side Programming Languages and how a client-side programming language works with an example program.
 
In this chapter, we will learn about 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 object 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 property's 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

 
In this article, we learned about some basic concepts of JavaScript used in Web Applications, like comments, objects, and so on.
Author
Jeetendra Gund
45 30.7k 3m
Next » Enable Disable Anchor Tags (Links)

©2024 C# Corner.