Introduction to Objects
Introduction to Objects
Fundamentals of Objects
Introduction
An object is a list of values and/or actions. The primary formula to create an object is:
var object-name {};
To create an object, you can start with the var keyword, a name, and curly brackets. Here is an example:
<script>
var storeItem = {};
</script>
Introduction to the Properties of an Object
The primary type of member that an object can have is created by attaching a name of a variable to the name of its object and assigning a value to it. Such a member is called a property of the object. In reality, to attach a property to an object, you have various options.
To add a property to an object, type the name of the object, a period, a name for the new property, and assign the desired value. Here are examples:
<script>
var storeItem = {};
storeItem.itemNumber = 270384;
storeItem.name = 'Blue Striped Dress';
storeItem.unitPrice = 138.95;
</script>
In the same way, you can keep adding new members to the object.
After attaching properties to an object, you can access those properties and use each as you see fit. To access a property, use the name of its object, a property, and the name of the property.
Adding Members Locally
Another technique to create an object is to attach its properties in the body of the object. The formula to follow is:
var object-name = {
member_1,
member_n,
. . .
member_n
};
This time, in the curly vrackets, declare each property. The formula to create a property is:
property-name: value
Provide a name and its value for each property. Use the colon instead of the assignment and omit the var keyword. You can add just one property if you want. If you need to provide more than one property, separate them with commas. Here is an example:
var bill = {
basicFee: 35.85,
dvr: 10.65,
sports: 8.95
};
To access a property outside the class, type the name of the object, a period, and the name of the property. Here are examples:
@{
ViewBag.Title = "Salary Evaluation";
}
<h2>Bill Evaluation</h2>
<div class="container">
<form name="BillEvaluation" method="post">
<fieldset>
<legend>Cable TV Services</legend>
<div>
<label for="CableTVBasicFee">Cable TV Basic Fee:</label>
<input type="number" id="CableTVBasicFee" name="CableTVBasicFee" value="0.00" />
</div>
<div>
<label for="DVRService">DVR Service:</label>
<input type="number" id="DVRService" name="DVRService" value="0.00" />
</div>
<div>
<label for="SportPackage">Sport Package:</label>
<input type="number" id="SportsPackage" name="SportsPackage" value="0.00" />
</div>
</fieldset>
</form>
</div>
@Scripts.Render("~/bundles/jquery")
<script type="text/javascript" language="JavaScript">
'use strict';
var bill = {
basicFee: 35.85,
dvr: 10.65,
sports: 8.95
};
$(document).ready(function () {
$("input[name='CableTVBasicFee']").val(bill.basicFee);
$("input[name='DVRService']").val(bill.dvr);
$("input[name='SportsPackage']").val(bill.sports);
});
</script>
Updating a Property
At any time, you can change the value of a property. To do this, access the property by the name of its object and assign the desired name to it. Here is an example:
<script type="text/javascript" language="JavaScript">
var bill = {
basicFee: 35.85,
dvr: 10.65,
sports: 8.95
};
$(document).ready(function () {
bill.dvr = 14.95;
$("input[name='CableTVBasicFee']").val(bill.basicFee);
$("input[name='DVRService']").val(bill.dvr);
$("input[name='SportsPackage']").val(bill.sports);
});
</script>
This would produce:
Introduction to the Methods of an Object
Overview
In the body of an object, you can create a function. Such a function becomes a member of the object. A function created as a member, in the body, of an object is called a method. To create a method, you have various options.
To attach a method to an object, in the body of the object, create a new property, followed by a colon, and define a function. The function doesn't need a name. Here is an example:
var bill = {
basicFee : 24.74,
dvr : 6.75,
sports : 9.95,
presentation : function () {
}
};
As an alternative, if you had first created an object with an empty body, attach a new property to the object and assign an anonymous function to it. The formula to follow is:
var object-name {};
. . .
object-name.property-name = function() {};
Here is an example:
var bill = {};
bill.basicFee = 24.74;
bill.dvr = 6.75;
bill.sports = 9.95;
bill.presentation = function () {
}
To access a member of the class in the method, precede it with the name of the object and a period. Here are examples:
<script>
var bill = {
basicFee: 24.74,
dvr: 6.75,
sports: 9.95,
presentation: function () {
$("input[name='CableTVBasicFee']").val(bill.basicFee);
$("input[name='DVRService']").val(bill.dvr);
$("input[name='SportsPackage']").val(bill.sports);
}
};
</script>
To access a method outside the object, type the name of the object, a period, the name of the property, and parentheses. Here is an example:
@{
ViewBag.Title = "Salary Evaluation";
}
<h2>Bill Evaluation</h2>
<div class="container">
<form name="BillEvaluation" method="post">
<fieldset>
<legend>Cable TV Services</legend>
<div>
<label for="CableTVBasicFee">Cable TV Basic Fee:</label>
<input type="number" id="CableTVBasicFee" name="CableTVBasicFee" value="0.00" />
</div>
<div>
<label for="DVRService">DVR Service:</label>
<input type="number" id="DVRService" name="DVRService" value="0.00" />
</div>
<div>
<label for="SportPackage">Sport Package:</label>
<input type="number" id="SportsPackage" name="SportsPackage" value="0.00" />
</div>
</fieldset>
</form>
</div>
@Scripts.Render("~/bundles/jquery")
<script type="text/javascript" language="JavaScript">
'use strict';
var bill = {
basicFee: 24.74,
dvr: 6.75,
sports: 9.95,
presentation: function () {
$("input[name='CableTVBasicFee']").val(bill.basicFee);
$("input[name='DVRService']").val(bill.dvr);
$("input[name='SportsPackage']").val(bill.sports);
}
};
$(document).ready(function () {
bill.presentation();
});
</script>
A Method that Returns a Value
A method can be made to return a value. To do this, follow the same rule for a function. Here is an example:
var bill = {
basicFee: 35.85,
dvr: 10.65,
sports: 8.95,
subTotal: function () {
return bill.basicFee + bill.dvr + bill.sports;
}
};
To access the return value of the method outside the class, you can declare a variable and assign the method to it. Here is an example:
@{
ViewBag.Title = "Salary Evaluation";
}
<h2>Bill Evaluation</h2>
<div class="container">
<form name="BillEvaluation" method="post">
<fieldset>
<legend>Cable TV Services</legend>
<div>
<label for="CableTVBasicFee">Cable TV Basic Fee:</label>
<input type="number" id="CableTVBasicFee" name="CableTVBasicFee" value="0.00" />
</div>
<div>
<label for="DVRService">DVR Service:</label>
<input type="number" id="DVRService" name="DVRService" value="0.00" />
</div>
<div>
<label for="SportPackage">Sport Package:</label>
<input type="number" id="SportsPackage" name="SportsPackage" value="0.00" />
</div>
<div>
<label for="subTotal">Sub-Total:</label>
<input type="number" id="subTotal" name="subTotal" value="0.00" />
</div>
</fieldset>
</form>
</div>
@Scripts.Render("~/bundles/jquery")
<script type="text/javascript" language="JavaScript">
'use strict';
var bill = {
basicFee: 35.85,
dvr: 10.65,
sports: 8.95,
subTotal: function () {
return bill.basicFee + bill.dvr + bill.sports;
}
};
$(document).ready(function () {
$("input[name*='Fee']").val(bill.basicFee);
$("input[name*='DVR']").val(bill.dvr);
$("input[name*='Sport']").val(bill.sports);
$("input[name*='Total']").val(bill.subTotal());
});
</script>
Methods and Parameters
Like a regular function, a method of an object can use one or more parameters. When defining the method, add the name of each parameter in the parentheses of the method, In the body of the method, you can use or ignore the parameter.
When calling a method that uses a parameter, you must pass an argument. If the method uses more than one parameter, pass the arguments in the appropriate order. Here is an example:
@{
ViewBag.Title = "Salary Evaluation";
}
<h2>Bill Evaluation</h2>
<div class="container">
<form name="BillEvaluation" method="post">
<fieldset>
<legend>Cable TV Services</legend>
<div>
<label for="CableTVBasicFee">Cable TV Basic Fee:</label>
<input type="number" id="CableTVBasicFee" name="CableTVBasicFee" value="0.00" />
</div>
<div>
<label for="DVRService">DVR Service:</label>
<input type="number" id="DVRService" name="DVRService" value="0.00" />
</div>
<div>
<label for="SportPackage">Sport Package:</label>
<input type="number" id="SportsPackage" name="SportsPackage" value="0.00" />
</div>
<div>
<label for="subTotal">Sub-Total:</label>
<input type="number" id="subTotal" name="subTotal" value="0.00" />
</div>
<div>
<label for="countyTaxes">County Taxes:</label>
<input type="number" id="countyTaxes" name="countyTaxes" value="0.00" />
</div>
</fieldset>
</form>
</div>
@Scripts.Render("~/bundles/jquery")
<script type="text/javascript" language="JavaScript">
'use strict';
var bill = {
basicFee: 35.85,
dvr: 10.65,
sports: 8.95,
subTotal: function () {
return bill.basicFee + bill.dvr + bill.sports;
},
localTaxes: function (rate) {
var total = bill.subTotal();
var taxes = total * rate / 100;
return taxes;
}
};
$(document).ready(function () {
$("input[name*='Fee']").val(bill.basicFee);
$("input[name*='DVR']").val(bill.dvr);
$("input[name*='Sport']").val(bill.sports);
$("input[name*='Total']").val(bill.subTotal());
$("input[name^='county']").val(bill.localTaxes(0.15));
});
</script>
Introduction to this Object
this Member
C-based languages, which includes JavaScript, have a special object named this. In JavaScript, the this object is used to indicate the area, named scope, in which it is used. In JavaScript, to access a member (a property or a method) in a function of the object, you can use the name of the object or the this object. Here are examples
<script>
var bill = {
basicFee: 35.85,
dvr: 10.65,
sports: 8.95,
subTotal: function () {
return this.basicFee + this.dvr + this.sports;
},
localTaxes: function (rate) {
var total = this.subTotal();
var taxes = total * rate / 100;
return taxes;
}
};
</script>
Scoping this Object
Outside the class, you cannot access a member of the class using the this object. In JavaScript, the this object can be used to indicate where an object can be used/accessed or not (this feature is called scope). To specify this, create an object but, instead of curly brackets, assign the this object to it. Here is an example:
var bill = this;
After this declaration, you can add members (to the object) using the name of the object as we have done so far. But this time, you can also use the this object to attach a member to the object. Here are examples:
var bill = this; this.basicFee = 38.75; bill.dvr = 11.85; this.sports = 12.50;
If you add a function to the object, as we saw previously, in the body of that function, you can access the other members of the object using either the name of the object or the this object. Here are examples:
var bill = this;
this.basicFee = 38.75;
bill.dvr = 11.85;
this.sports = 12.50;
bill.subTotal = function () {
return this.basicFee + bill.dvr + this.sports;
};
bill.localTaxes = function (rate) {
return bill.subTotal() * rate / 100;
};
This time, you can use the this object to refer to the members of the object.
this Object in jQuery
Introduction
In your jQuery code, if you create a section for an element, to refer to the child elements of the selected item, you can use the $(this) object. This would be done as follows:
$(document).ready(function () {
$("#discussion").mouseenter(function (event) {
$(this)
});
});
A Variable for this Object
If you create a section of code for an element, in that section, to store an object that represents the whole section, declare a variable and assign the $(this) object to it. Here is an example:
$(document).ready(function () {
$("#discussion").mouseenter(function (event) {
var local = $(this);
});
});
Selecting this Object
In jQuery, when you have selected an element, it may have one or more elements under it. Such elements are considered its children. Consider the following code:
<div id="discussion">
<p id="argument">Absence of evidence is not evidence of absence</p>
<ul>
<li>Absence of Evidence</li>
<li>Proof of Evidence</li>
</ul>
</div>
In this case, div is the parent of ul and its li elements. If you make a selection on the div element and create a delimiting body for it, in that delimiting body, to indicate that you want to change something on all child elements, you can use the $(this) expression. You can then apply any of the jQuery features to that expression. Here are two examples:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Argument</title>
<script src="Scripts/jquery-3.3.1.js"></script>
<style type="text/css">
.arg-contents { margin: auto;
width: 500px; }
.text-center { text-align: center; }
.red { color: #ff0000; }
.black { color: #000000; }
</style>
</head>
<body>
<h1 class="text-center">Argumentative Qualifications</h1>
<div id="contents" class="arg-contents">
<h2>Arguments</h2>
<div id="discussion">
<p id="argument">Absence of evidence is not evidence of absence</p>
<ul>
<li>Absence of Evidence</li>
<li>Proof of Evidence</li>
</ul>
</div>
</div>
<script type="text/javascript">
$(document).ready(function () {
$("#discussion").mouseenter(function (event) {
$(this).addClass("red");
});
$("#discussion").mouseleave(function (event) {
$(this).addClass("black");
});
});
</script>
</body>
</html>
|
|
||
| Previous | Copyright © 2001-2022, FunctionX | Next |
|
|
||