Homework 1 Numbering System Conversion

Quiz 1 Numbering System Conversion

Extra Credit - Javascript Financial Calculator

LABAR Extra Credit Project

This assignment is to be done during your one hour lab by arrangement (LABAR). This assignment requires you to write your first javascript to declare, assign and display three variables of the string, number, and boolean types respectively.

In this extra credit assignment, you are to create a compound interest payment calculator as in the example below that takes the loan amount, term, and apr interest in HTML FORM, and have a submit button to calculate the payment. The annual APR interest is a compound calculation, that the annual interest shall become capital. Here is a demo Interest Calculator:

Loan Amount:
Loan Term: years
APR Interest:

Payment:

---

You may implement the solution using the following code examples:

1. Type cast the input type to number
javascript to read and convert the input text string from coresponding html FORM text INPUT to an integer variable:

var years = parseInt(document.block.par.value);


// parseInt is the function converts string to integer
// document is the built-in object, like document.write
// block is the html form name below
// par is the html input name below

corresponding html:

<form id="block" name="block">
<input type="text" name="par"/>
...
</form>

javascript to write the result to corresponding html FORM text INPUT:

document.blog.par.value=result;

2. html FORM text INPUT
to disallow the user to alter its value:

<input name="name_of_input_field" disabled="disabled" type="text" />

to act as a button on mouse click perform javascript function:

<input onclick="function();" type="submit" value="Label" />


// type has to be "submit"
// "function();" should be "the_name_of_your_function();"
// "Label" should be "the_button_label_to_be_displayed_on_screen"

3. javascript function declaration:

function name_of_the_function(par1,par2,...) {
...
}

4. javascript defensive programing
In case the user enters a text string instead of number, the following script would reset the variable to default value:

if((variable <= 0)||(isNaN(variable))) variable = 1;   // isNaN() returns true if the number variable is not a number // in this example, the default value is 1

5. an example formula is shown in the following example:

for( i=term; i>0; i--){
principal = principal*(1 + apr/100);
}
payment = principal/term;

Assignment 10 - Javascript Simple Calculator (PL's note js pages 16 to 27)

LABAR Project 10

This assignment is to be done during your one hour lab by arrangement (LABAR). This assignment requires you to write your first javascript to declare, assign and display three variables of the string, number, and boolean types respectively.

In this assignment, Assignment #10, you are to create a simple calculator as in the HTML Form below. This calculator can:

• add, substract, multiply, and divide the two numbers entered;
• after the math operator button is pressed, the result shall be placed inside the Answer field;
• after the Clear, "C" button is pressed, all fields shall be cleared.

Enter a number:
Enter a number:

Answer =

The above html form code is listed below:

<FORM NAME="Calculator" METHOD="post"> <P>Enter a number: <INPUT TYPE=TEXT NAME="input_A" SIZE=10></P> <P>Enter a number: <INPUT TYPE=TEXT NAME="input_B" SIZE=10></P> <P><INPUT TYPE="button" VALUE="+" name="AddButton" onClick="CalculateSum(this.form.input_A.value, this.form.input_B.value, this.form)"> <INPUT TYPE="button" VALUE="-" name="AddButton" onClick="CalculateSub(this.form.input_A.value, this.form.input_B.value, this.form)"> <INPUT TYPE="button" VALUE="*" name="AddButton" onClick="CalculateMul(this.form.input_A.value, this.form.input_B.value, this.form)"> <INPUT TYPE="button" VALUE="/" name="AddButton" onClick="CalculateDiv(this.form.input_A.value, this.form.input_B.value, this.form)"> <INPUT TYPE="button" VALUE="C" name="ClearButton" onClick="ClearForm(this.form)"></P> <P>Answer = <INPUT TYPE=TEXT NAME="Answer" SIZE=12></P> </FORM>

---

Sample Code:

Javascript Adder

 <SCRIPT type="text/javascript"> function CalculateSum(Atext, Btext, form){ var A = parseFloat(Atext); var B = parseFloat(Btext); form.Answer.value = A + B; } function ClearForm(form){ form.input_A.value = ""; form.input_B.value = ""; form.Answer.value = ""; } </SCRIPT> <P><FONT SIZE="+2">Simple Adder</FONT></P> <FORM NAME="Calculator" METHOD="post"> <P>Enter a number: <INPUT TYPE=TEXT NAME="input_A" SIZE=10></P> <P>Enter a number: <INPUT TYPE=TEXT NAME="input_B" SIZE=10></P> <P><INPUT TYPE="button" VALUE="Add Numbers" name="AddButton" onClick="CalculateSum(this.form.input_A.value, this.form.input_B.value, this.form)"></P> <P><INPUT TYPE="button" VALUE="Clear Fields" name="ClearButton" onClick="ClearForm(this.form)"></P> <P>Answer = <INPUT TYPE=TEXT NAME="Answer" SIZE=12></P> </FORM>

Try this adder out!

Simple Adder

Enter a number:
Enter a number:


Answer =

Assignment 9 - Javascript Decision Statement and Input Box (PL's note js p.10 - 14)

LABAR Project 9

This assignment is to be done during your one hour lab by arrangement (LABAR). This assignment requires you to create a javascript function to take in two variables and print the difference if the first one is larger, else print the sum:

Step 1 - declare two number variables: var1 and var2;
Step 2 - prompt and obtain the value of var1 then var2 (one at a time) and print both variables on the screen;
Step 3 - if the var1 is greater than var2 , then print the difference of var1 and var2, else print the sum of var1 and var2.

And use an html tag onclick attribute to envoke this javascript function.

Note: The following envelope HTML code has to be included for the .html file in order for your javascript to execute correctly:
<HTML> <HEAD> <TITLE> Page Title </TITLE> </HEAD> <BODY> <SCRIPT type="text/vbscript"> ...your JavaScript... </SCRIPT> ...your html code... </BODY> </HTML>

---

Example
The following javascript example can be found on the PL's note p.11
<script type="text/javascript"> function procedure1(){ var hours=prompt("Hours worked", "40.00"); var pay_rate=prompt("Hourly rate", "10.00"); var overtime=0; var base_pay=0; if(hours>40){overtime=(hours-40)*pay_rate*.5; } base_pay=hours*pay_rate; document.write("Hours worked: ", hours, " hours(s)<br>"); document.write("Pay rate: $", pay_rate, " per hour <br>"); document.write("Overtime: $", overtime, "<br>"); document.write("Total pay $: $", base_pay+overtime, "<br>"); } </script> <input onclick="procedure1();" type="submit" value="Click to start this sample" />

Click the button to execute the sample javascript:

Assignment 8 - Flowchart to Javascript

LABAR Project 8

This assignment is to be done during your one hour lab by arrangement (LABAR). This assignment requires you to create a javascript from a flowchart. This assignment is to ensure that you learn how to better write javascript through the flowchart, especially the flow control.

And use an html tag onclick attribute to envoke this javascript function.

Note: The following envelope HTML code has to be included for the .html file in order for your javascript to execute correctly:
<HTML> <HEAD> <TITLE> Page Title </TITLE> </HEAD> <BODY> <SCRIPT type="text/vbscript"> ...your JavaScript... </SCRIPT> ...your html code... </BODY> </HTML>

---

Assignment 7 - Javascript variables (PL's note js pages 1 to 9)

LABAR Project 7

This assignment is to be done during your one hour lab by arrangement (LABAR). This assignment requires you to write your first javascript to declare, assign and display three variables of the string, number, and boolean types respectively.

Variables (on page 3 of PL's note) are entities that can change. In this assignment, you are to write your first javascript. 

• Frist, declare 3 variables: var1, var2, and var3 as the string, number, and boolean types respectively. 
• Next, print the value of all (3) variables. 
• Then, assign new values to all (3) variables. Then, print the value of all (3) variables. 

Please submit your javascript work in .html file through webCT-assignment.

Note: The following envelope HTML code has to be included for the .html file in order for your javascript to execute correctly:
<HTML> <HEAD> <TITLE> Page Title </TITLE> </HEAD> <BODY> <SCRIPT type="text/javascript"> ...your JavaScript... </SCRIPT> ...your html code... </BODY> </HTML>

---

Example

place the example here

Assignment 6 - Flowchart from a description

LABAR Project 6

This assignment is to be done during your one hour lab by arrangement (LABAR). This assignment requires you to create a flowchart diagram from the description below. The simple flowchart symbols: start and end symbols, arrows (flow), process, input/output, conditional or decision, as defined in wikipedia are used in this assignment.

You are expected to create a flowchart based on the following description:

"The Computer Science Department offers both Comsc105 and Comsc145 every semester. For me to be able to transfer to a 4-year University, I will need to have passing grade on both Comsc105 and Comsc145. I plan to take the Comsc105 next Fall semester 2010, and take the Comsc145 the Spring semester 2011.

The school has a budget shortfall next fiscal year, 2010-2011. Some classes maybe cut. If the budget cut is more than 5%, the Computer Science Department will offer only Comsc145 in Fall semester and offer only the Comsc145 in Spring 2011.

Please submit your flowchart work in Word (.doc or .docx file) through webCT-assignment. You can drag and drop the built-in flowchart symbols in Word (Insert -> Shape -> Flowchart) to create your flowchart.

---

Example

The following description is translated into a flowchart, a logical flow of stages represented by symbols:

"The rain has been pouring for the last few days, and the refrigerator is low in stock. It is not safe to drive around in the rain. It seems the sun is breaking out. I am looking out the window every 10 minitues to see if the rain stops, so I can go shopping to fill up the frige. Then tell all my friends to come and have a party in my home tonight."

Click to enlarge

Note: The Input/Output symbol represent activities coming in and going out of the system.

Assignment 5 - HTML Form and Input (PL's note p.15)

LABAR Project 5

This assignment is to be done during your one hour lab by arrangement (LABAR). This assignment requires you to create a HTML form with input based on the description below:

Design a questionnaire to poll the student's opinion in the state budget cut. Start with name and age text field and followed by the 3 questions :

1. Your opinion on the state cut the budget in education in stead of the prison: 5 being strongly agree, and 1 being strongly disagree.
2. In your opinion, any, all, or none of following budget should be cut: transportation, education, law enforcement, welfare, and/or border security.
3. Your political affiliation: Republican, Democrat, other, and none.

Please submit your html work (file with extension of .html) through webCT-assignment. After uploading your answer HTML file, make sure you click on the submit button.

You may utilize different types of Input tags: TEXT, RADIO, CHECKBOX, SUBMIT, and BUTTON to complete this questionnaire.  

---

Example
An HTML Form utilizes the Input tags of TEXT, PASSWORD, CHECKBOX, RADIO, and SUBMIT:

<form name="example"> Your Name<input name="name" size="40" type="text" /> Password<input name="pswd" size="25" type="password" /> Favorite food <input checked="checked" name="food" type="checkbox" value="Pizza" />Pizza <input name="food" type="checkbox" value="Hamburger" />Hamburger Gender <input name="sex" type="radio" value="F" />female <input name="sex" type="radio" value="M" />male <input type="submit" /></form>

Your Name
Password
Favorite food
Pizza
Hamburger
Gender
female
male

Assignment 4 - HTML alignment, tables, and images (PL's note: p10 - p14)

LABAR Project 4

This assignment is to be done during your one hour lab by arrangement (LABAR). This assignment requires you to create an HTML page that has:

• a center aligned table (at the center of a page);
• and this table shall have at least 2 columns, with the leftmost column align to right , and rightmost column align to left;
• one of the cells contain hyperlink; and 
• one of the cell contain an image.

You can use any text and image for this assignment.

Please submit your html work (file with extension of .html) through webCT-assignment. After uploading your answer HTML file, make sure you click on the submit button.

Note: The following envelope HTML code has to be included in your .html file for proper execution:
<HTML> <HEAD> <TITLE> Page Title </TITLE> </HEAD> <BODY> ...your html code... </BODY> </HTML>

---

Example
An example 2x3 (2 columns, 3 rows) table that contains text, hyperlinks, and images. The table cells of the left column is aligned to the left; and the right column to the right.

<table align="center" border="2" style="width: 400px;"> <tr> <td align="left"><a href="http://www.google.com/">GOOGLE</a></td><td align="right">upper right</td> </tr><tr> <td align="left">middle left</td> <td><img align="right" alt="" border="0" src="http://site1.wikianswers.com/templates/icons/discuss-btn.gif" /></td> </tr><tr> <td><img align="left" alt="" border="0" src="http://i598.photobucket.com/albums/tt61/austis48/5star.png" /></td> <td align="right">lower right</td> </tr> </table>

The above html is displayed as below:

GOOGLE	upper right
middle left
	lower right

Assignment 3 - HTML font, links, and graphics (PL's note: p1 - p14)

LABAR Project 3

This assignment is to be done during your one hour lab by arrangement (LABAR). This assignment requires you to create an HTML page that contains (not limited to) the following tags: <hr> <hr> <ul> <ol> <li> <b> <font> <small> <big>

You can use any text for this assignment.

Please submit your html work (file with extension of .html) through webCT-assignment. After uploading your answer HTML file, make sure you click on the submit button.

Note: The following envelope HTML code has to be included for your .html file to execute correctly:
<HTML> <HEAD> <TITLE> Page Title </TITLE> </HEAD> <BODY> ...your html code... </BODY> </HTML>

---

Example
Some sample html list with different fonts:

<html> <head> Page Title </head> <body> Unordered List <ul><li><font color="blue">Blue<i><small> text</small></i><b> Weird characters</b></font> Back to regular color and typeface.</li> <li>Special Character <Fried rice></li> <li>Hamburger hot dog Apple pie</li> </ul> End of menu Ordered List <ol><li>Normal size</li> <li><big>Big size</big></li> <li><small>Small size</small></li> </ol> </body> </html>

The above html is displayed as below:

Unordered List

• Blue text Weird characters
  Back to regular color and typeface.
• Special Character
  <Fried rice>
• Hamburger
  hot dog
  Apple pie

End of menu

Ordered List

1. Normal size
2. Big size
3. Small size

Assignment 2 - Submit 5 websites

LABAR Project 2

This assignment is to be done during your one hour lab by arrangement (LABAR). This assignment requires you to submit 5 websites that you visit on a regular basis and tell why they are your top 5 useful sites. What compels you to visit them on a regular basis? 

You can list the websites that you most frequently visit, most useful for your job, or even having most fun when you visit. Also provide an explanation to why you select the site as one of your top choices. 

Please submit your work (in Word or plain text file) through webCT-assignment. After uploading your answer file, make sure you click on the submit button.

---

Examples

• http://mail.google.com/ - to access my email where I can be connected at all time, so long there is a computer/smart phone connected to the Internet.
• http://finance.yahoo.com/ - to access my stock portfolio where I can quickly access the real time market information.

Assignment 1 - Build a PC on paper

LABAR Project 1

This assignment is to be done during your one hour lab by arrangement (LABAR). This assignment requires you to build a virtual computer from the motherboard up.  You can go to several computer stores that have individual components and price it out or you can complete this all online and submit your finished “masterpiece” in webct.dvc.edu, assignments link.  This project will build as the COMSC100 course discusses each of these topics.

1.) What do you want your computer to be able to do?  This is the first question you have to ask yourself before you can pick the right one.  Once you know this, and you can do some research on what’s available before deciding, then go to step 2

2.) Research motherboards

a.     There are different manufacturers, types, and styles. Find the one that best fits your answer to step 1.  Price is no object.  Remember, this is a virtual machine you are building.

b.    List the features that will be important to you and why you chose this motherboard

c.     Take a copy of the motherboard you have chosen and place in Microsoft Word or Paint.  Paint will allow you to resize it, crop (cut parts out/modify) or group components together.  You might want to use a table in MS Word or the alignment and crop tools

3.) List the components you will need i.e. case, memory, hard drive, processor, graphics card, sound card, printer card, there may be more as your project continues. List the purpose of each component.  You can list the purpose of each component as the project goes along if that works better for you. This will give you a guide for the rest of the project.

4.) Research cases

a.     Find the case that is right for the motherboard you chose in step 2.

b.    Take a copy of the case you have chosen and place in Microsoft Word or Paint.  Paint will allow you to resize it, crop (cut parts out/modify) or group components together.  You might want to use a table in MS Word or the alignment and crop tools

c.     List the features that will be important to you and why you chose this case

5.) Research microprocessors

a.     Find the processor that is right for the motherboard you chose in step 2.

b.    Take a copy of the processor you have chosen and place in Microsoft Word or Paint.  Paint will allow you to resize it, crop (cut parts out/modify) or group components together.  You might want to use a table in MS Word or the alignment and crop tools

c.     List the features that will be important to you and why you chose this processor

6.) Continue researching the components that you will need to build your computer.

a.     Find each component that is right for the motherboard you chose in step 2.

b.    Take a copy of each component you have chosen and place in Microsoft Word or Paint.  Paint will allow you to resize it, crop (cut parts out/modify) or group components together.  You might want to use a table in MS Word or the alignment and crop tools

c.     List the features that will be important to you and why you chose each component until you have a complete system

7.) Research and add the peripherals you will need.

a.     Find each peripheral that is right for your needs

b.    Take a copy of each peripheral you have chosen and place in Microsoft Word or Paint.  Paint will allow you to resize it, crop (cut parts out/modify) or group components together.  You might want to use a table in MS Word or the alignment and crop tools

c.     List the features that will be important to you and why you chose each component until you have a complete system

8.) Place your components in a professional, attractive presentation in MS Word or MS Powerpoint.  Be sure to include a description of each component, its purpose, and why it was your choice. 

9.) Research the operating system and other software you will need.  Be sure to list the reasons for your decisions.

10.)    Go online or go to one of the many local computer stores, i.e. PC Systems on Willow Pass Rd., Fry’s electronics, R Computers, etc. and price out your system.  State if you will purchase your dream machine now, in the future, or never; at least not as far as you know J.

11.)    Submit your finished project according to your instructor’s instructions.

We hope you enjoy this project and learn a lot from it.  The rest of your LABAR projects will be your programming assignments in HTML and JavaScript.

Click on this reference link page that you may find useful information for this assignment.