3ProgramStructureII - Program Structure II Functions...

Info iconThis preview shows pages 1–5. Sign up to view the full content.

View Full Document Right Arrow Icon
(CS1301) Introduction to Computer Programming City Univ of HK / Dept of CS / Helena Wong 3. Program Structure II - 1 http://www.cs.cityu.edu.hk/~helena Program Structure II Program Structure II Functions Example: Marks to Grades Conversion Parameters and Return Statement Use of Variables Comments Flowchart Example: Find Highest Mark Introduction to Variables Use of Local Variables and Global Variables Example: Counter [Please switch off your phone]
Background image of page 1

Info iconThis preview has intentionally blurred sections. Sign up to view the full version.

View Full DocumentRight Arrow Icon
(CS1301) Introduction to Computer Programming City Univ of HK / Dept of CS / Helena Wong 3. Program Structure II - 2 http://www.cs.cityu.edu.hk/~helena Introduction to Functions An Example: Marks to Grades Conversion 4 Grades: F: 0-45 C: 46-65 B: 66-80 A: 81-100 65 80 90 C B A The design: The header The table containing marks and grades The marks, grades, and the button are elements of a form , specified by <input. .> . Marks are text boxes where the user can type: <input  type="text"  ../> Grades are read-only text boxes: <input  type="text"   readonly="readonly"  ../> The button has the name "Convert" (the value attribute). It accepts the onclick event and shows the grades: <input  type =" button "   value =" Convert "   onclick ="…."  /> MARKS TO GRADES CONVERSION
Background image of page 2
(CS1301) Introduction to Computer Programming City Univ of HK / Dept of CS / Helena Wong 3. Program Structure II - 3 http://www.cs.cityu.edu.hk/~helena <htm l> <he a d><title >C S 1301 DEMO </title ></he a d> <body> <h2>MARKS TO GRADES CONVERSION</h2> <form name="F1"> <ta b le  b o rde r=" 1" > <tr> <td align="center" style="width:25%">Subject</td> <td align="center" style="width:25%">Chinese</td> <td align="center" style="width:25%">English</td> <td align="center" style="width:25%">Mathematics</td> </tr> <tr> <td align="center">Mark</td> <td align="center"> <input type="text" name="CMark" size="4"/> </td> <td a lig n=" c e nte r" > <input type="text" name="EMark" size="4"/> </td> <td a lig n=" c e nte r" > <input type="text" name="MMark" size="4"/> </td> </tr> <tr> <td align="center">Grade</td> <td align="center"> <input type="text" name="CGrade" readonly="readonly" size="4"/> </td> <td a lig n=" c e nte r" > <input type="text" name="EGrade" readonly="readonly" size="4"/> </td> <td a lig n=" c e nte r" > <input type="text" name="MGrade" readonly="readonly" size="4"/> </td> </tr> </table> Version 1: By writing inline JavaScript MARKS TO GRADES CONVERSION The code (Page 1):
Background image of page 3

Info iconThis preview has intentionally blurred sections. Sign up to view the full version.

View Full DocumentRight Arrow Icon
(CS1301) Introduction to Computer Programming City Univ of HK / Dept of CS / Helena Wong 3. Program Structure II - 4 http://www.cs.cityu.edu.hk/~helena <input type="button" value="Convert" onclick=" if (document.F1.CMark.value>80) document.F1.CGrade.value='A'; else if (document.F1.CMark.value>65) document.F1.CGrade.value='B'; else if (document.F1.CMark.value>45) document.F1.CGrade.value='C'; else document.F1.CGrade.value='F'; if (document.F1.EMark.value>80) document.F1.EGrade.value='A'; else if (document.F1.EMark.value>65)
Background image of page 4
Image of page 5
This is the end of the preview. Sign up to access the rest of the document.

This note was uploaded on 03/10/2012 for the course CS 1301 taught by Professor Dr.wong during the Winter '08 term at City University of Hong Kong.

Page1 / 12

3ProgramStructureII - Program Structure II Functions...

This preview shows document pages 1 - 5. Sign up to view the full document.

View Full Document Right Arrow Icon
Ask a homework question - tutors are online