2ProgramStructureI - (CS1301) Introduction to Computer...

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

View Full Document Right Arrow Icon

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

View Full DocumentRight Arrow Icon

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

View Full DocumentRight Arrow Icon
This is the end of the preview. Sign up to access the rest of the document.

Unformatted text preview: (CS1301) Introduction to Computer Programming City Univ of HK / Dept of CS / Helena Wong 2. Program Structure I - 1 http://www.cs.cityu.edu.hk/~helena Program Structure I Program Structure I Functions and Variables Introduction to Functions Example: Marks to Grade Conversion Parameters and Return Statement Flowchart Comments Example: Find Highest Mark Introduction to Variables Use of Local Variables and Global Variables Example: Counter [Please switch off your phone] (CS1301) Introduction to Computer Programming City Univ of HK / Dept of CS / Helena Wong 2. Program Structure I - 2 http://www.cs.cityu.edu.hk/~helena Introduction to Functions An Example: Marks to Grade 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="true" ../> The button has the name "Convert" (the value attribute). It accepts the onclick event and shows the grades: <input type =" button " value =" Convert " onclick ="." /> (CS1301) Introduction to Computer Programming City Univ of HK / Dept of CS / Helena Wong 2. Program Structure I - 3 http://www.cs.cityu.edu.hk/~helena <HTML> <HEAD><TITLE>CS1301 DEMO</TITLE></HEAD> <BODY> <h2>MARKS TO GRADE CONVERSION</h2> <form name="F1"> <table border="1"> <tr> <td align="center" width="20%">Subject</td> <td align="center" width="20%">Chinese</td> <td align="center" width="20%">English</td> <td align="center" width="20%">Mathematics</td> </tr> <tr> <td align="center">Mark</td> <td align="center"> <input type="text" name="CMark" size="4"/> </td> <td align="center"> <input type="text" name="EMark" size="4"/> </td> <td align="center"> <input type="text" name="MMark" size="4"/> </td> </tr> <tr> <td align="center">Grade</td> <td align="center"> <input type="text" name="CGrade" readonly="true" size="4"/> </td> <td align="center"> <input type="text" name="EGrade" readonly="true" size="4"/> </td> <td align="center"> <input type="text" name="MGrade" readonly="true" size="4"/> </td> </tr> </table> MARKS TO GRADE CONVERSION Version 1: By writing inline JavaScript (CS1301) Introduction to Computer Programming City Univ of HK / Dept of CS / Helena Wong 2. Program Structure I - 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) document.F1.EGrade.value='B'; else if (document.F1.EMark.value>45) document.F1.EGrade.value='C'; else document.F1.EGrade.value='F';document....
View Full Document

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

Page1 / 30

2ProgramStructureI - (CS1301) Introduction to Computer...

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