ENGR/CS 101 CS Session Lecture 4 Log into Windows/ACENET (reboot if - - PowerPoint PPT Presentation

ENGR/CS 101 CS Session Lecture 4

 Log into Windows/ACENET (reboot if in Linux)  Start Microsoft Visual Studio 2012  Open DotChaser project  Everyone have a GUI designed?

Lecture 4 ENGR/CS 101 Computer Science Session 1

Outline

 Dot Chaser game project implementation

 C# programming language  Implement update score

 Event handlers  Types, variables, expressions, assignment  Accessing properties

 Implement move dot

 Methods  Random number generator

Lecture 4 ENGR/CS 101 Computer Science Session 2

MS Visual Studio

 Integrated Development Environment (IDE)

 GUI designer  Editor  Compiler  Linker  Loader  Debugger

Lecture 4 ENGR/CS 101 Computer Science Session 3

C# Programming Language

 Developed by Microsoft for .NET framework  Syntax similar to C++ and Java  Semantics similar to Java  Object-oriented - won't cover in this class  Integrated with GUI designer

Lecture 4 ENGR/CS 101 Computer Science Session 4

Classes

 C# program statements are organized in

classes.

 Each application is a class containing the

code generated by the GUI designer for the GUI elements of the program, and code written by the programmer to store, manipulate, and display data.

Lecture 4 ENGR/CS 101 Computer Science Session 5

Lecture 4 ENGR/CS 101 Computer Science Session 6

Anatomy of a program

 Constants: named values.  Variables: named memory locations that

store values, i.e. the data.

 Executable statements: instructions of

computation, i.e. the algorithm.

 Methods: subprograms (or functions) that

can be called from multiple places in a program

Events and Handlers

 GUI elements are always waiting for data, but

computation only happens when an event

• ccurs.

 Input devices cause events that the GUI then

• handles. For example:

 Mouse events include: Click, DoubleClick,

MouseDown, MouseMove, MouseUp, Rollover

 Keyboard events include: KeyPress

Lecture 4 ENGR/CS 101 Computer Science Session 7

Events and Handlers

 Double-clicking on a form element in the GUI

designer brings up the code view of the form. MSVS creates a skeleton program.

 It also creates a handler method stub for the

most common event for the element type and attaches it to the element. E.g., Click event for the dot button.

 When a user clicks the dot button, this handler

method is run to respond to the event.

Lecture 4 ENGR/CS 101 Computer Science Session 8

Events and Handlers

Lecture 4 ENGR/CS 101 Computer Science Session 9

Event handler code for dot click goes here! Initialization code goes here! Application data goes here!

C# Programs

 The IDE tries to be helpful by creating the parts

• f code that all C# program have. This includes:

 using statements that cause (pre-defined) method

names in libraries like System to become known. (A method is the same thing as a function.)

 namespace and class definition names based on the

project name given.

 Form1( ) constructor method. This code is executed

first when the program is launched. Initialization code goes here.

Lecture 4 ENGR/CS 101 Computer Science Session 10

Review

 Basic Rule for Dot Chaser Game

 When a user clicks on the dot, her score

increases by 1

 Data

 An integer named score

 Algorithm

 Compute new numeric score  Update user interface score

Lecture 4 ENGR/CS 101 Computer Science Session 11

Lecture 4 ENGR/CS 101 Computer Science Session 12

Constants & Variables

 Have a name

 Must start with a letter  Uses only letters, digits, and underscore (_)  Cannot be a reserved word of the language

 Have a type

 Specifies what kind of value may be stored.

 Have a value

 Stored as bits (binary digits)

Lecture 4 ENGR/CS 101 Computer Science Session 13

Data types

 Primitive types: built into low-level machine.

E.g., integers, characters, real numbers

 Abstract types (or objects): combination of

types to represent complex values

 Predefined by language: String, Array, List,…  Written by programmer: Employee, Account,…

Types and Variables

 A variable is a named memory location that

holds a value. All memory is in bits.

 The type determine how the bits are interpreted

into a value. Numbers are in binary. Characters are mapped to binary numbers. E.g., ASCII or Unicode.

 C# types include

 int for integers (e.g., 5, -25, 0)  char for characters (e.g. 'A', 'b', '7', '%')  string (e.g. "Hello!")

Lecture 4 ENGR/CS 101 Computer Science Session 14

Types and Variables

 Variables are declared by giving type and name  Syntax is: <type> <var1>, <var2>, ..., <varn>;  Example:

int score; // player's score

 // marks the beginning of a comment to the end

• f the line. Comments are ignored by the

compiler and used for writing notes.

Lecture 4 ENGR/CS 101 Computer Science Session 15

Assignments and Expressions

 Assignment means to store a value into a

variable.

 Syntax is: <var> = <expression>;  The expression is evaluated and the result is

stored in the variable. An expression can be:

 A literal. E.g., 12 or 'A'  A variable. E.g., score  A method call. (More on this later.)  An expression of one or more literals, variables, or

method calls connected by operators.

Lecture 4 ENGR/CS 101 Computer Science Session 16

Application Data

 Application data is declared inside the

application class. It is initialized in the class constructor (a special kind of function with the same name as the class).

 Write the declaration for the variable that

keeps track of the score in the Dot Chaser game.

 Write the code to initialize the score to 0 in

the Form1 constructor.

Lecture 4 ENGR/CS 101 Computer Science Session 17

dot_Click Event Handler

 The event handler for clicking on the dot must

increment the score and move the dot.

 The specific algorithm for incrementing the

score is:

• 1. Increment score by one
• 2. Display the new score by updating the score label

Lecture 4 ENGR/CS 101 Computer Science Session 18

Properties

 GUI element properties are variables that can

be accessed in program code using "dot" notation: <name>.<property>

 E.g., scoreLbl.Text, dot.BackColor

Lecture 4 ENGR/CS 101 Computer Science Session 19

dot_Click Event Handler

 Here is the code to update the score that

goes inside the handler:

// add one to the score score = score + 1; // display the new score scoreLbl.Text = score.ToString();

 After you type in this code, test your program.

The score should increment each time you click the dot.

Lecture 4 ENGR/CS 101 Computer Science Session 20

Moving the Dot

 In addition to updating the score, the dot

click handler must move the dot.

 The algorithm for moving a dot is:

• 1. Compute random x and y coordinates for the

top-left corner of the dot.

• 2. Set the location of the dot button
• use the dot.setBounds( ) method to do this

Lecture 4 ENGR/CS 101 Computer Science Session 21

Random Objects

 To get a random number, we need a Random

• bject. We declare one in the application

data area:

Random rnd;

 We create one in the constructor

rnd = new Random();

 Random objects have a method called Next

that returns a number between 0 and its argument.

Lecture 4 ENGR/CS 101 Computer Science Session 22

Methods

 There are two times we want to move the dot:

 When the dot is clicked  When the time period is up

 To avoid copying the dot moving code, a

better way to add this functionality is to use a method (also called a function).

 Methods are used to encapsulate

computational ideas, such as moving a dot.

Lecture 4 ENGR/CS 101 Computer Science Session 23

Methods

 Consider a (mathematical) function as a black

box that receives data and returns an unnamed result.

 A method is the programming code equivalent

Lecture 4 ENGR/CS 101 Computer Science Session 24

f(x, y, z, ...)

x y z

. . .

Method Analysis & Design

 A method is like a mini-program. We ask the

same questions as when designing a main program or event handler.

 Identify the data (and their types) being provided

by the caller

 In the case of moving a dot, the caller doesn't

need to provide anything

 Write the steps of an algorithm

 These were given previously for moving the dot

Lecture 4 ENGR/CS 101 Computer Science Session 25

Methods

 Method declaration syntax is:

private <return type> <name> (<parameter list>) { <local variable declarations> <computation statements> return <result>; // if needed }

 Parameters are the names given to the received

• data. They are declared like variables.

 The type of the result must match the declared

returned type. (Private is a magic word.)

Lecture 4 ENGR/CS 101 Computer Science Session 26

Computing coordinates

 The location of the dot button is determined

by the coordinates of the upper-left corner that are relative to the upper-left corner of the game area panel

 What is the range of the x and y coordinates

• f the dot?

 To make things easier to type, declare and

initialize variables to hold the width and height of the game area and the dot.

Lecture 4 ENGR/CS 101 Computer Science Session 27

dot_Move( )

 Here is the code for the method that moves the

• dot. It does not need to receive data.

private void dot_Move() { // Pick random (x,y) coordinates // inside the game area // Button is anchored at left-top int x = rnd.Next(areaWidth-dotWidth); int y = rnd.Next(areaHeight-dotHeight); dot.SetBounds(x, y, dotWidth, dotHeight); }  void mean the method does not return a result

Lecture 4 ENGR/CS 101 Computer Science Session 28

Method Call

 A method is used by calling it with arguments

that are the data being sent into the method.

 The arguments, if any, correspond to the

parameters by position. The argument values are used to initialize the parameter variables before the method is executed.

 If a method returns a result, it must be saved

using an assignment statement. E.g. the calls to rnd.Next() on previous slide.

Lecture 4 ENGR/CS 101 Computer Science Session 29

dot_Click Event Handler

 Here is the code to move the dot that goes

inside the handler:

// move the dot dot_Move(); // no arguments // no returned result

 After you type in this code, test your program.

The dot should move and the score should increment each time you click the dot.

Lecture 4 ENGR/CS 101 Computer Science Session 30