GPA Calculator Project

JavaScript For Web DevelopingCS175 – Spring 2008

Won Liu

Final Project Presentation 5/20/2008

5/20/2008 Page 2

Ohlone GPA CalculatorOhlone GPA Calculator

• A class project that requested from Ohlone Student Transfer Center

• Calculate students Grade Point Average

5/20/2008 Page 3

FeaturesFeatures

• Build the GPA Matrix/table cells and rows dynamically using the DOM Model, HTML code along with Javascript functions

• Perform user input validation & error handling

• Calculate the grade point for a course dynamically

• Implement two different screen layouts

5/20/2008 Page 4

Layout 1: Text fields for both Semester & Quarter sessions Layout 1: Text fields for both Semester & Quarter sessions

5/20/2008 Page 5

Layout 2: Use Radio button for the session choice Layout 2: Use Radio button for the session choice

5/20/2008 Page 6

Comparisons of Two LayoutsComparisons of Two Layouts

• Layout 1: • Straight forward

• More validations on two text fields

• Layout 2:• Less validations

• IE 6 does not support DOM-insertion of Radio button. A bit Chanllenging in making a dynamically created radio box worked in the IE browser

5/20/2008 Page 7

Coding ExcertCoding Excert

• Use the insertRow method to insert / create a table row.• Use the insertCell method to insert / create a table cell to a table

row• Use createElement method to create an instance of the element

for the specified tag in the table cell• e.g. document.createElement('select');

• Use setAttribute method or object.attributeName to set the attributes for the tag• e.g. course.setAttribute (“type”, “text”); • course.type = “text”;

5/20/2008 Page 8

Coding Excert (continued)Coding Excert (continued)

• Assign an event handler to the text field created via DOM methods

• e.g. sel.onchange = function() {check(row) };

• or text.onchange = function() {validation (text)};

• Note: onchange must be lower case

• Use appendChild method to append a new created element to the table cell

5/20/2008 Page 9

What I have LearnedWhat I have Learned

• Be able to apply the following techniques that I learned from this class and make this GPA project worked• DOM Model – Dynamically creates table rows and cells.

• Browser detection

• HTML forms and control elements.

• String manipulations (chatAt(), indexOf() )

• Math.pow() & Math.round()

• Functions, loops, ..etc.

5/20/2008 Page 10

What I have Learned (continued)What I have Learned (continued)

• New thing I learned by doing this project:• Dynamically adding new table rows

• An event handler is case-sensitive (lower case) when attach to a dynamically created element

• A solution to create a radio box inside of a dynamically created table cell to get around the IE browser 6.0 problem

• A JavaScript Verifier, JSLint

5/20/2008 Page 11

Difficulity EncounteredDifficulity Encountered

• Not much difficulity, except :

• Lack of knowledge on JavaScript debugging tool • I often just sprinkling alert() around the code to locate the

problem; if alert box didn’t appear, (e.g. mis-typing a ‘ for a ‘’ sytax error), need to go through code line by line or put more alert(); not efficient

• IE silently failed • The Radio button was created, but unable to be checked.

Went through code line by line, couldn’t figure out why.

• The same code (for Layout 2) works on FireFox Browser but not on IE browser

5/20/2008 Page 12

DiscoveriesDiscoveries

• When defining event handler in HTML inline, the case is in-sensitive. But when defining event handler in JavaScript, the case is sensitive. The event handler should be always lowercase

• text.onchange = function() {validation (text)};

5/20/2008 Page 13

Discoveries (contonied) Discoveries (contonied)

• Window IE 6 does not support DOM-insertion of Radio button• After several searches, I discovered that IE doesn’t allow the name

attribute to be changed after the element is created. The Radio button can’t be set in a DOM compatible way during creation.

• Tried out a couple of work-around & found out a solution

• Work- around solution ( very easy after figured it out )• If (IE_browser)

• radio1 = document.createElement("<input type='radio' name='radio1' id=‘radio1' >");

• else { radio1 = document.createElement("input");

• radio1.type = “radio”; radio1.name=“radio1” ….. }

5/20/2008 Page 14

Discoveries (continued)Discoveries (continued)

• Explored JSLint, the JavaScript Syntax Checker & Verifier

• Scan JavaScript source code. If a problem is found, returns a message describing the problem and an approximate location within the source

• Identify missing “;” or a “unclosed” string.

• Identify variables without “var” as “implied global”

• Identify function was used before was defined

• However, always complains the “hiding line” , “<!—” after the <script language=“JavaScript”>, need to comment it out

• Help in syntax error

5/20/2008 Page 15

Link to the working codeLink to the working code

• <a

• href=“http://207.62.192.204/~gen91/project/gpa.html”>GPA Calculator</a>

• <a

• href=“http://207.62.192.204/~gen91/project/gpa-radio.html”>GPA Calculator2</a>

5/20/2008 Page 16

Acknowledgement - ThanksAcknowledgement - Thanks

• I want to thank Professor Degallier for teaching us. His professionalizm, prompt relies, and wonderful class setup ( class page, discussion board) really inspire me to learn

• I had fun and really enjoyed this class

• I also want to thank classmates for sharing their works, good and open discussions