Download Javascript Functions-Programming Environment-Lab Task and more Lecture notes Programming Languages in PDF only on Docsity!
< html > < head > < title > JavaScript Functions </ title > < script type =" text / javascript " > function sumAll () { // no minimum number of arguments if ( arguments. length < 1) return null ; sum = 0 for ( var i =0; i < arguments. length ; i ++) sum = sum + arguments [ i ] return sum } </ script > </ head > < body >
Exercises with JavaScript Functions
Output :
< script type =" text / javascript " > document. writeln (" sumAll () = "+ sumAll ()+" < br / >") document. writeln (" sumAll (2) = "+ sumAll (2)+" < br / >") document. writeln (" sumAll (2 ,3) = "+ sumAll (2 ,3)+" < br / >") document. writeln (" sumAll (2 ,3 ,4) = "+ sumAll (2 ,3 ,4)+" < br / >") </ script > < noscript > JavaScript not supported or enabled </ noscript > </ body > </ html >
b. Save the code to a file named jsDemo3.html in $HOME/public_html/.
c. Open a terminal, go to the directory in which the file has been stored and make the file readable for everyone by using
chmod a+r $HOME/public_html/jsDemo3.html
You will only have to do so once. File permissions should not change while you con- tinue to edit the file.
d. Now open a web browser and access the URL
http://www.csc.liv.ac.uk/∼{user}/jsDemo3.html
where {user} should be replaced by your departmental user name. If everything is working correctly, then you should be shown the following in your web browser: Exercises with JavaScript Functions
Output : sumAll () = null sumAll (2) = 2 sumAll (2 ,3) = 5 sumAll (2 ,3 ,4) = 9
If not, open the error console in your web browser and track down the errors in your code. e. In the definition of sumAll we have used a variable sum. We have learned that one of the distinctions that JavaScript makes with respect to variables that are introduced in a function is whether they are local (only accessible from within the function) or global (accessible from elsewhere in the code). Is sum local or global? Let us test that by adding the following code before the last -tag in your file: document. writeln (" sum = "+ sum +" < br / >")
Save the file again. Clear the output shown in the error console, then refresh the page in your web browser. What does the additional output tell you about whether sum is local or global? f. If your conclusion is that sum is global, then change the code for the function sumAll so that it will be local. Test that any change you make has the desired effect. Once you have confirmed that sum is local comment out the line of code introduced in step 1e.
Also add the following code at the end of the JavaScript code in the body section of jsDemo3.html: Array. prototype. bubble_sort = bubble_sort array = [2 ,4 ,3 ,9 ,6 ,8 ,5 ,1] document. writeln ("
bubble sort method </ p >") document. writeln (" < table border = ’1 px ’ cellpadding = ’5 px ’ >") document. writeln (" < tr > < td > array before sorting "+ " </ td > < td >"+ array. join (" , ")+" </ td > </ tr >") sorted = array. splice (). bubble_sort () // splice creates copy document. writeln (" < tr > < td > array after sorting of copy "+ " </ td > < td >"+ array. join (" , ")+" </ td > </ tr >") sorted = array. bubble_sort () document. writeln (" < tr > < td > array after sorting of itself "+ " </ td > < td >"+ array. join (" , ")+" </ td > </ tr >") document. writeln (" < tr > < td > sorted array </ td > < td >"+ sorted. join (" , ")+" </ td > </ tr >") document. writeln (" </ table >")
Save the file. Clear the output shown in the error console, then refresh the page in your web browser. As the additional output indicates array.bubble_sort() does not (yet) return a sorted array. Make sure that you understand what the line Array.prototype.bubble_sort = bubble_sort does and why the output is as it is. Expand the definition of bubble_sort2, re-using code from bubble_sort, so that array.bubble_sort() does return a sorted array. Hint: Take the code from bubble_sort and replace the appropriate occurrences of array by the keyword this. d. Extend Array with a method peek: array.peek() returns the first item of array with- out changing array if array has at least one element. If array has length 0, then the value undefined should be returned. Test you method using arrays of varying length.
- In the lectures we have also considered various aspects of objects in JavaScript, in par- ticular, the way instance variables and ‘class’ variables are declared and how these can be made public or private. The following exercise is intended to reinforce those considerations. We want to define an employee object. To keep the example simple, we assume that the only attributes of an employee are a name and a salary. The first should be public , the second private. Obviously, we need a method to obtain information on an employee’s salary as well as a method that allows us to change it. Finally, we want to keep track of how many employees there are in total and we want to keep that number private. The total number of employee’s should be automatically incremented each time a new employee object is created.
a. Create a constructor function for employee objects and add it to head section of jsDemo3.html. b. Test your definition of the employee constructor by adding the following code to the body section of jsDemo3.html:
var e = [] var e [0] = new Employee (" Hal Smith " , 30000) var e [1] = new Employee (" Tim Peck " , 20000) var e [2] = new Employee (" Ari Bell " ,18000) document. writeln (" e [0]. name = "+ e [0]. name +" < br / >") // prints Hal Smith document. writeln (" e [0]. salary = "+ e [0]. salary +" < br / >") // prints undefined document. writeln (" e [0] ’ s salary = "+ e [0]. getSalary ()+" < br / >") // prints 30000 document. writeln (" e [1] ’ s name = "+ e [1]. getName ()+" < br / >") // prints Tim Peck document. writeln (" e [1] ’ s salary = "+ e [1]. getSalary ()+" < br / >") // prints 20000 e [1]. name = " Tom Beck " e [1]. setSalary (25000) document. writeln (" e [1] ’ s name = "+ e [1]. getName ()+" < br / >") // prints Tom Beck document. writeln (" e [1] ’ s salary = "+ e [1]. getSalary ()+" < br / >") // prints 25000 document. writeln (" Employees : "+ e [1]. getEmployeeCount ()+ " < br / >") // prints Employees : 3
Save the file. Clear the output shown in the error console, then refresh the page in your web browser. c. Since the total employee count is not really an attribute of a particular employee, it is a bit odd that we obtain that count by using an expressions like e[1].employeeCount(). Is it possible to define employeeCount() in such a way that we could use the expression Employee.employeeCount() instead? If so, modify your code accordingly and test your solution by replacing document. writeln (" Employees : "+ e [1]. getEmployeeCount ()+ " < br / >") // prints Employees : 3
with document. writeln (" Employees : "+ Employee. getEmployeeCount ()+ " < br / >") // prints Employees : 3
and checking that you get the correct output after you have saved the file and refreshed the page in the browser.
d. Being able to ‘create’ new employees is obviously nice, but sometime we also have to ‘delete’ an existing employee. Can we extend our definition of Employee by a method remove that deletes a particular employee object and at the same time decrements the total employee count? If so, modify your code accordingly and test your solution by adding the code e [0]. remove () document. writeln (" Employees : "+ Employee. getEmployeeCount ()+ " < br / >") // prints Employees : 2
and checking that you get the correct output after you have saved the file and refreshed the page in the browser.
