JavaScript

u

PART 1 Question 1 - Using JavaScript Functions (5 marks) Write a function called letterCount (string, char) that accepts two arguments (a string and a character). The function will then calculate how many times the letter appears in the string and returns the result. Write 3 different test cases to prove the functionality of the function. Your results must be displayed to your lab03.html page as shown in Figure 1 (below). Lab 03 Part 1 Question 1 The string is: This is a string The letter 'i' appears 3 times. Figure 1. Display result for Part 1 Question 1 PART 1 Question 2 - Using JavaScript Built-in Date Functions (5 marks) The JavaScript built in Date() function is a very useful function. As a programmer, you will use it time and time again. To become familiar with the Date() functionality, please complete the following steps using JSFiddle or your choice of IDE. NOTE: In order to get JSFiddle to display to the console, you need to add the following resource: https://rawgit.com/eu81273/jsfiddle-console/master/console.js. For more information on how to do this, refer to the following link: https://stackoverflow.com/questions/39130610/how-to-get-console-inside-jsfiddle 1. Declare a variable named labDay using var and assign to it new Date() as in var labDay = new Date(). Objects such as Date require the new keyword when they are created. 2. Use console.log to display the literal string "labDay is " followed by labDay. Note the format of the date is shown with day of the week, month name, day, year, hour, minutes, seconds and time zone (Pacific Standard Time is Greenwich Mean Time minus 8 hours). 3. Use console.log to output the value labDay.toDateString(). Note the difference from the above. The hours and minutes are not shown. 4. Use console.log to output the value labDay.to TimeString(). This method only shows the time and not the date values. 5. Use console.log to display the literal string "labDay as UTC is " followed by labDay.getTime(). This method shows the UTC (Universal Time Co-ordinated) format -- the number of milliseconds since midnight January 1, 1970. 6. Use console.log to output the string labDay.getDay() + "/" + labDay.getMonth() + " / " + labDay.getYear(). Note that the values returned from the methods getDay() and getMonth() are zero-based. The getYear() returns the number of years since 1900. 7. Use console.log to output the string labDay.getHours() + ":" + labDay.getMinutes(). 8. Change the new Date() in step 1 to new Date(2017, 5, 15) and re run the script. Note the changes in the display. Another way to create a Date is to use Date.now(). Declare a variable now using var and assign to it Date.now(). 9. Use console.log to output the value of now. Notice it is not the string version of the day, month, and year, but rather the UTC format. Date.now() is the same as (new Date()).getTime(). 10. Declare a variable errorDate with var and assign to it new Date(2016, 33, 1). The 33 value is the month number for the year 2016 but JavaScript will see that it is more than 11 and scale the actual date forward by (33 minus 11) months. 11. Use console.log to output errorDate. Note that this date value has been set forward into 2018 October because of the incorrect month value used in the previous step. 12. Another way to define dates is to provide the string literal as "October 23, 2017" for example. What happens if there is an error in the string literal? Define a variable named invalidDate with var and assign to it new Date("Funuary 3, 2018"). 13. Use console.log to output invalidDate. It should show Invalid Date...this is a string literal. JavaScript code can verify if a date is valid by comparing with this string. 14. You may have noticed that the weekday and month names are displaying in their shortened rm (e.g. Mon,Tue, Jan, Feb, etc). JavaScript has options to change that display format and the language as well (in case your web site is catering to languages other than English). Declare a variable named options using var and assign to it the following object literal: { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' } 15. Use console.log to output labDay.toLocaleString('de-DE', options). The toLocalString() method accepts argument values to switch the language display to other languages and display formats. The 'de-DE' locale is for the German language. 16. The only way to add time to a Date object is to use the UTC representation (the number of milliseconds since Jan 1, 1970) and add in the amount of extra milliseconds for a forward date (or subtract milliseconds for a prior date -- yes, that is how you get a JavaScript Date for a time before Jan 1, 1970). The next part will demonstrate how to add in enough milliseconds to a Date object to push it into the next day. 17. Declare a variable msDay with var and assign to it the expression that calculates the number of milliseconds in one day (hint: 24 hours in one day, 60 minutes in one hour, 60 seconds in one minute, 1000 milliseconds in one second). 18. Declare a variable mslabDay with var and assign to it labDay.getTime(). 19. Assign to labDay a new Date( mslabDay + msDay) to create a new date (tomorrow). 20. Use console.log to display the labDay variable. It should show as June 16's date with the same hour and minute. Now that you are more familiar with the date function, please complete the following task: You are working in the payroll department at a post-secondary institution and you are responsible for calculating the monthly salary for each employee. An employee works 7.5 hours a day but only during weekdays. You need to write a function that calculates the exact payout for an employee at the end of the month based on the number of "working" days in that month. You need to input the month and year to calculate the number of working days. You will also need to accept the hourly wage (as input from the user) to find out how much an employee will make for the month. I will get you started with solving the problem by providing a function that will give you the number of days in a month: function daysInMonth (month, year) { // Use 1 for Jan, 2 for Feb, etc. return new Date (year, month, 0).getDate(); } For the above function, you can accept input from the user for month in the range of 1-12. JavaScript uses the numerical value in the range of 0-11. The reason why this function works is because with JavaScript, day o the last day of the previous month. In this way we can get a numerical value for the total number of days in the month. You can test this function by displaying the result to the console. For example: console.log(daysInMonth(1, 2019)); //returns 31 Once you have the number of days in the month, you will need to add up the weekdays in the month. HINT: each weekday has a number assigned to it. You can use this knowledge to write code that excludes weekend days. Once you have finished writing the code, your output should look something like what is shown in Figure 2 below: Part 1 Question 2 Month: December Year: 2017 Weekdays: 21 Salary: $50.00 Pay: $7875.00 Figure 2. Example result displayed for Part 1 Question 2 PART 2 - JavaScript Error Handling (10 marks) Please complete the following exercises and provide the output in the labo3.html file(as shown in Figure 3 below): 1. To prevent your application from crashing unexpectedly due to a runtime error, you can write code that handles any exception. These are runtime errors that occur due to unwanted error conditions that you have anticipated during the code design and want to handle gracefully within the code so that the user does not have an unpleasant experience dealing with a mysterious error. 2. Declare a function named calcFutureValue which accepts three arguments: principal, rate, and years. Inside the function if the principal value is less than or equal to zero, throw an error like this: new Error("Principal value must be greater than zero"). If the rate value is less than or equal to zero, throw an error: new Error("Rate value must be greater than zero"). If the years value is less than or equal to zero, throw an error: new Error("Years value must be greater than zero"). 3. Checking the argument values first within a function is good coding practice. You do not want the function to perform calculations on invalid amounts. Now that the function arguments have been properly vetted, the function can proceed to do its work. Next: Declare a variable monthlyRate using var and assign to it the expression rate divided by twelve divided by 100. Declare a variable months using var and assign to it the expression years multiplied by twelve. Declare a variable futureValue using var and assign to it the value of zero Define an iteration loop that will loop months number of times and inside the body of iteration loop assign to futureValue the expression of (futureValue + principal) times (one plus monthlyRate) Return the futureValue fixed to two decimal places. . . 4. Now we can test the function calcFutureValue by passing values in to the function. Declare a variable investment and assign to it the value of 10. Declare a variable annualRate and assign to it the value of 4; Declare a variable years and assign to it the value of 5; Call the function and pass in the values. Display the results to the console (console.log(calcFutureValue(investment, annualRate, years)); . 5. Do not forget the function expression needs a semicolon at the end. Run the script. The display should read 665.20. 6. Modify the values of investment, annualRate, and years to confirm the error messages are created appropriately when the script is run. The catch block is used when the try block encounters an error thrown by the code. 7. Now implement the calcFutureValue() function as part of your labo3.html webpage. The function MUST be implemented (called) from an external javaScript file. If you do not do this, you will lose marks. 8. To test your newly created function, call the function 3 times within your code and display in your lab03.html page as shown in Figure 3 below. As you can see in the Figure 3 example below, the third call should test that the throw is working correctly. The result of the throw will display as an error in the console (accessed in Chrome by clicking on the right hand menu/More Tools/Developer Tools) and/or in the HTML page as shown in Figure 3. HINT: You will need to revise the code within your try/catch statement to display the error in the labo3.html page. The final result of your Lab code should similar to you see Figure 3 belo Lab 03 Part 1 Question 1 The string is: This is a string The letter i appears 3 times. Part 1 Question 2 Month: December Year: 2018 Weekdays: 21 Salary: $50.00 Pay: $7875.00 Part 2 Question 1 The future value is: 665.20 The future value is: 6828.94 ERROR: Principal must be more than 0 Figure 3. Example output display for Lab 03