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:
- Single Line Comment
- 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:
- Math Objects in JavaScript
- Date Objects in JavaScript
- 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
- Scope and Events in JavaScript: Day 4
- Array in JavaScript: Day 5
- Page Re-direction in JavaScript: Day 6
- Errors and Exception Handling in JavaScript: Day 7
- Debugging in JavaScript: Day 8
- Hosting in JavaScript: Day 9