GPA Calculator Project JavaScript For Web Developing CS175 – Spring 2008 Won Liu Final Project Presentation 5/20/2008

5/20/2008 Page 2 Ohlone GPA Calculator A class project that requested from Ohlone Student Transfer Center Calculate students Grade Point Average

5/20/2008 Page 3 Features 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

5/20/2008 Page 5 Layout 2: Use Radio button for the session choice

5/20/2008 Page 6 Comparisons 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 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) 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 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) 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 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 Discoveries 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) 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(" "); else { radio1 = document.createElement("input"); radio1.type = “radio”; radio1.name=“radio1” ….. }

5/20/2008 Page 14 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”, “, need to comment it out Help in syntax error

5/20/2008 Page 15 Link to the working code <a href=“ Calculator <a href=“ Calculator2

5/20/2008 Page 16 Acknowledgement - 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