Use the Copy Text button to put the above javascript code on the clipboard.
Paste it into your Notebook ++.
Save it as "Style4.css".
Style5.css
Use the Copy Text button to put the above javascript code on the clipboard.
Paste it into your Notebook ++.
Save it as "Style5.css"
Style6.css
Use the Copy Text button to put the above javascript code on the clipboard.
Paste it into your Notebook ++.
Save it as "Style6.css".
Day 4: JavaScript code for Straight Line Depreciation
Now we have to take the information from the html web page and do some calculations and then return the answers to the web page.
Here is the code.
straight line javascript code
Use the Copy Text button to put the above javascript code on the clipboard.
Paste it into your application between the script tags. <Script> and </Script>
Save your application.
Now lets look at each line of javaScript code and see what it does.
First we declare the function that we referred to on the button click action. The word function is followed by the name of the function and ()
Next a left facing curly brace, { indicates the beginning of the function. A right facing, } curly brace indicates the end of the function. I usually type both curly braces and then insert some spaces between them. Just so I do not forget to put in the last curly brace.
var asset = document.getElementById("asset").value; This line declares a variable called asset and sets it equal to what the user typed as the name of the asset to be depreciated.
var cost = document.getElementById("cost").value; This line declares a variable called cost and takes the information form the user as to the value of the asset to be depreciated.
Remember in your html code you gave each item an id
GetElementById is the keyword that gets that information form the web page.
The getElementById() method returns the element that has the ID attribute with the specified value.
Each id should be unique on a page.
var residualValue= document.getElementById("residualValue").value; This line gets the scrap or residual value form the web page
var life= document.getElementById("life").value; Gets the information as to the life of the asset, or how many years of useful service it has.
Now we have all the information to start determining straight line depreciation.
Straight line depreciation simply takes the value of the asset - the residual value and divides that number by the number of years of usefulness of the asset.
The number arrived at is the deprecition for the asst each year.
var depreciation = (cost-residualValue)/life; This is the line that calculates what we are looking for.
At this point, I usually add a line of code that tells me if my calculations worked and are correct alert("Depreciation = " + depreciation);
I have commented it out in the code above using // to begin the line
You can limit the amount entered using the number input control, however, the user can just enter a number in the box. We need to limit the number of years in another way also.
The lines that state if (life>20){ does just that. The next line alerts the user that the number of years was too high. The two lines that follow set life and depreciaton to zero
document.getElementById("depreciableAsset").innerHTML = "Asset to be Depreciated " + asset; This line is a better alternative to the alert method. It takes the name of the asset to be depreciated and returns it back to the web page (html code) to <p id="depreciableAsset"></p> tag
The line : document.getElementById("straightLine").innerHTML = "Yearly Depreciation " + depreciation; print the yearly depreciation amount into the HTML section under the <p id="straightLine"></p> tag.
The next section of the code creates a schedule of depreciation.
The first line
var accDep=0;
initializes a variable for accumulated Depreciation and sets the value equal to zero.
The next line
var text = "";
initialzes a variable called text and sets its value to null.
The next line
var i = 0;
initializes the variable i which is the counter in the Do While Loop.
var year=1
initializes the year variable and sets it value to 1. This is necessary, since loops always startwith item 0 and we need the years to be displayed starting with year 1.
The next line begins a loop and continues to go thru the code between the curly braces until the life of the asset is reached
while (i < life) {
accDep = accDep + depreciation;
This line adds up each year's depreciation.
The next line
accumDep=parseFloat.accumDep
Puts the variable into decimal format.
cost=cost-depreciation
calculates the newly depreciated value of the asset.
The next three lines get the year, accumulated depreciation and book value of the asset and assign them to the text variable.
The next line
i++;
adds one to the loop.
One is added to the year variable in the loop
year++;
The } ends the While loop.
The next } ends the function.
Save your application.
Day 5: Testing the Straight-Line Application
You should now have enough code to test out the straight line portion of the application. Let's use some numbers that we know are accurate examples of straight line depreciation.
I found my old college accounting book, the one that I used when I taught accounting at our community college.
The example had office equipment valued at $5,200 with a residual value of $400 and a life of four years.
The results were as follows:
Yearly depreciation was $1,200. First year's accumulated depreciation $1,200 and book value $4,000
Yearly depreciation was $1,200. Second year's accumulated depreciation $2,400 and book value $2,800
Yearly depreciation was $1,200. Third year's accumulated depreciation $3,600 and book value $1,600
Yearly depreciation was $1,200. Fourth year's accumulated depreciation $4,800 and book value $400
Run your code and see if your results match the numbers above. If not, correct and retry. If you need to, check the finished aplication link at the beginning of the tutorial.