Programming Concept Visual Programming Visual Basic tsaiwncsie nctu

有趣的程式設計� Programming Concept 視覺化程式設計 Visual Programming (Visual Basic) 蔡文能 tsaiwn@csie. nctu. edu. tw 計概

Agenda Programming Concepts Ø Ø Ø An informal introduction Language Basics Flow Control (流程控制) Introduction to Visual BASIC Language Event Driven concept VB IDE (整合發展環境) Java example 計概 2

Program 程式 = 規劃事情讓電腦做 Programs = Algorithms + Data Structures 寫程式基本招式 (第三代語言) + (物件導向) Ø Ø Ø 計概宣告指述(敘述) Declaration statement 設定值指述 Assignment statement 控制指述 Control statement 子程式(副程式或函數)定義與叫用類別(Class)與物件導向(Object Oriented) 3

電腦如何運作? Memory address Fetch, Decode, Execute Instruction CPU Pointer IP 0 1 2. 系統區 . . 程式+靜態data SP Stack Pointer HEAP . . . 9875 9876 計概 STACK 系統區 6

Generations of programming languages 5 GL ? Prolog ? 機器語言組合語言計概高階語言 HLL VHLL非常高階語言 4 GL 7

1 st-generation : Machine Language 010100100101001001 0010 01001001010 10100110 4 a a 6 80 20 2 f 3 a 9 d 81 3 e 計概 8

2 nd-generation : Assembly Language Load 100 Loadi 100 Load [100] Load R 5, 100 Load R 5, [100] Store R 5, 100 Move AX, [100] Move [100], ax 計概 ADD AX, BX Sub AX, BX OR ax, dx JLT there JMP there CMP AX, 200 JGE there Push AX 9

The evolution of programming paradigms 計概 10

A function that computes the average of a list of numbers constructed from the simpler functions Sum, Count, and Divide 計概 11

The composition of a typical imperative program or program unit 計概 12

The same variable declarations in different languages 計概 13

A two-dimensional array (陣列) with two rows and nine columns INTEGER Scores(2, 9) 計概 int Scores[2][9]; 14

印出根號 2 的 C 程式 /* 寫個程式印出根號 2 */ #include<stdio. h> C型式的註解請抄入 stdio. h 檔 C++型式的註解 double sqrt(double); // #include<math. h> int main( ) { printf(" sqrt 根號 2 =%fn ", sqrt(2. 0) ); // C++ 式的註解 comment printf("Bye bye!n"); return 0; } sqrt 是程式庫裡的一個函數(function, 函式) 計概 15

印出根號 3的 C 程式 /* 寫個程式印出根號 3 */ 強調是C的 #include<stdio. h> extern "C" double sqrt(double); // #include<math. h> int main( ) { printf(" sqrt 根號 3 =%fn ", sqrt(3. 0) ); // C++ 式的註解 comment printf("Bye bye!n"); 每次要重改程式嗎? return 0; C++ 與 C 文法略有不同 } 計概 16

印出根號 x 的 C 程式 /* 寫個程式印出根號 x */ #include <stdio. h> #include<math. h> double y; 使用變數 int main( ) { printf(" Give me x : " ); scanf("%lf " , &y); &y傳 address printf("Sqrt(%f)=%fn", y, sqrt(y) ); return 0; } 計概 17

會一直讀入 x 並印出根號 x 的 C 程式 (使用 while loop) #include <stdio. h> #include <math. h> int main( ) /* This program can find square root of any number that >=0 and will stop when you enter a value that < 0 阿版權是蔡文能的, 歡迎拷貝分享初學者! */ { float onevar; /* 變數名稱隨便我取的啦 */ double ans; /* 用來放答案 */ printf("Find square root of X. Negative value will cease the programn"); printf("X=? "); /* 還是問"X=? " 比較簡潔有力, 不用說onevar */ scanf("%f", &onevar); while(onevar >=0 ) { /*只要onevar大於或等於零我們就一直重複做{. . . } */ ans=sqrt(onevar); /*其實sqrt的參數也應該為double 型別*/ printf(" SQRT(%f)=%fn", onevar, ans); printf("X=? "); scanf("%f", &onevar); } /* while(onevar */ return 0; } 計概 18

p 4. c – 練習想 Algorithm(1/2) /* This program can find square root of any number that >=0 and will stop when you enter a value that < 0 */ /* This version is trying to show you that we can write our function/procedure to solve the problem, though the mysqrt() is actually calling the system standard function. We will rewrite the mysqrt() in next version. ***************/ void hello(void); /*我會用到一個沒參數的函數叫hello() */ double mysqrt(double); /*也會叫用一個叫mysqrt()的函數, 參數是一個double數 */ #include <math. h> /* sqrt()是在math. h內宣告的 */ int main() /* 主程式開始囉 */ { float x; hello(); /* give the user some message */ printf("X=? "); scanf("%f", &x); while(x >=0 ) { printf(" SQRT(%f)=%7. 3 fn", x, mysqrt(x) ); printf("X=? "); scanf("%f", &x); } /* while */ return 0; } /*******主程式到此為止******/ 自己如何寫求 SQRT? 計概 20

p 4. c – 練習想 Algorithm(2/2) /*…*/ void hello() { printf("This program will ask you to input a value, say X. "); printf("Then it will find the square root of X. "); printf("The above process will continue. . . "); printf("Negative value will cease the program. "); } /* hello() */ double mysqrt(double y) { double myans; myans = -1. 0; if(y < 0) printf(" can not process negative number"); else myans = sqrt(y); /* 還沒想好, 先借用程式庫的 sqrt( ) */ return myans; } /*mysqrt*/ 自己如何寫求 SQRT? 計概 21

p 5. c – mysqrt( ) Algorithm(1/2) void hello(void); /*我發誓我會用到一個沒參數的函數叫hello() */ double mysqrt(double); /*也會叫用一個叫mysqrt()的函數, 參數是一個double數 */ int main() /* 主程式開始囉 */ { float x; hello(); /* give the user some message */ printf("X=? "); scanf("%f", &x); while(x >=0 ) { printf(" SQRT(%f)=%7. 3 fn", x, mysqrt(x) ); printf("X=? "); scanf("%f", &x); } /* while */ return 0; } /*******主程式到此為止******/ void hello() { printf("This program will ask you to input a value, say X. "); printf("Then it will find the square root of X. "); printf("The above process will continue. . . "); printf("Negative value will cease the program. "); } /* hello() */ 自己如何寫求 SQRT? 計概 22

p 5. c – mysqrt( ) Algorithm(2/2) double mysqrt(double x) { /* 這次真的要自己寫求平方根的部份囉! */ double myans; myans = -1; if(x < 0) printf(" can not process negative numbern"); else { myans = 0; /* we guess the root is zero */ while(myans*myans < x) myans++; /* 猜 0, 1, 2, . . . 直到太大 */ if(myans*myans>x){ myans =myans-1; /*太大了, 快減掉一 ; 可寫成myans--*/ while(myans*myans < x) myans = myans+0. 1; }; if(myans*myans>x){ myans-=0. 1; /* this means : myans = myans -0. 1 */ while(myans*myans < x) myans += 0. 01; } if(myans*myans>x){ myans -= 0. 01; while(myans*myans < x) myans += 0. 001; } /* I think the precison is good enought now */ } /*else*/ return myans; /** return myans value as our answer */ } /* end of mysqrt*/ 自己如何寫求 SQRT? 計概 23

九九乘法表 p 6. c #include <stdio. h> int main() { int i, j; printf("n. X |"); for(i=1; i <= 9; i++) printf("%5 d", i); printf("n"); for(i=1 ; i <= 10 ; i++) printf("---- "); for(i=1 ; i<= 9 ; i++) { printf("n%d |" , i); for(j=1 ; j <= 9 ; j++) printf("%5 d", i*j); } printf("n======n"); return 0; } 練習兩層的 for loop 計概 26

九九乘法表 p 6. c 核心 #include <stdio. h> 練習兩層的 int main() { int i, k; for(i=1 ; i<= 9 ; i++) { printf("第%d 列: " , i); for(k=1 ; k <= 9 ; k++) printf("%5 d", i*k); printf("n"); } printf("n. Bye bye!n"); return 0; } 計概 for loop 27

Language Basics Variables and Data types Operators Ø Arithmetic Operators Ø Relational and Conditional Operators Ø Shift and Logical Operators Ø Assignment Operators Ø Other Operators Expressions, Statements, and Blocks Control Flow Statements Ø The while and do-while Statements Ø The for Statement Ø The if/else Statements Ø The switch Statement Ø Exception Handling Statements Ø Branching Statements 計概任何高階電腦語言都該有的指述: ü /* 註解 */ //也是註解 ü宣告/定義變數和常數 ü運算符號與運算式和 Assignment = • 算術, 關係運算, 邏輯 ü{ compound statements; } ü控制指述(control statements) ØSequence ØAlternative (selection) • if-else, switch ØLoop: for, while, do while ØFunction/procedure call 28

for Loop vs. while Loop (C語言) for(i=1 ; i<= 9 ; i++) { /* Loop body */ } i=1; for( ; i<= 9 ; ) { /* Loop body */ i++; } 計概這三個寫法意義完全一樣 i=1; while( i<= 9 ) { /* Loop body */ i++; } 29

for Loop vs. while Loop (C 語言)流程 for( ; ; ) ; ; while( ) { ; ; } 計概 == 0 != 0 30

C/C++ Data Types int - Whole number long - Large whole numbers (4 bytes integer) short - small whole numbers (-32768 ~ =32767) float - Single precision floating point numbers 7 digits of accuracy. double - Double precision floating point numbers 15 digits of accuracy boolean - true or false (新版 C++ only) char - 任何文字符號計概 34

What is Object? Class? (2/2) object is an instance of some class 文法上, C++的class 就是以前的 struct class Student { public: /* …與寫 struct 同 */ }; struct Node { private: /* …與寫 class 同 */ }; ADT(Abstract Data Type): 把資料與其相關函數 (data and their related functions)集合在一個程式單元(program unit), 例如 class 裡面; 讓東西用起來更像東西! 這就是物件導向的概念! 計概 38

The complete program preparation process 計概 39

Compiler vs. Interpreter Compiler Ø Source code Object code Interpreter Ø Source code Object code Result Data 計概 40

http: //wikipedia. org/ 計概 42

Visual Basic 6. 0群組 Microsoft Visual Basic 6. 0 具線上手冊應用程式安裝精靈計概 44

VB 程式通常包括: Forms : a form is a program used to display information to the user, and to hold controls that allow the user to interact with the program. Controls : control are the user interface (UI) elements that users interact with to input new data into a program , and to allow programs to display data to users Ø Control (控制項), 又稱圖形介面元件(Graphics UI Component), 在 Unix系統則通稱 widget Code: Programmers need to add code to forms and controls to animate the program ie. To tell VB what actions to perform when users interact with the programs UI. 計概 61

Event-Driven Programming Procedural (linear) programming vs. Event-driven Programming Events (at run time) Ø Ø Ø single mouse click of command button, form, option button, etc. , ( CLICK event for that control) pressing most keys (KEYPRESS event) double mouse click (DBLCLICK event for that control) Event Handlers (event subroutines) Private cmd. Mybutton_Click( ) End Sub 計概 62

Open Course Ware (OCW) in MIT 知識共享 http: //www. ocw. mit. edu 計概 64

http: //www. twocw. net 計概 65

Objects, events and Properties (attributes) Objects Ø Ø Ø Ø Forms Text boxes Labels buttons Group boxes Check boxes Combo / list boxes Radio buttons Events Ø Ø Properties (Attributes) Ø Ø 計概 Click button on mouse Double click button on mouse Press a function key Event procedures ü Action to be taken when the event occurs Text Font Colour Name 71

Forms Windows style screen Populated with objects Objects have controls (Events) A program can contain several forms A form is a blank screen, default background grey The form has properties, such as name and caption (default form 1), background colour, height, width, etc. The form can be populated with objects - labels to display set text, text boxes to represent fields, check boxes, option buttons, list boxes to cause actions to happen. 計概 72

Labels Use the label icon from the toolbox. Add a label to the form. Right click on the new object to get a menu. Choose properties. Change the label name and Text. 計概 73

Buttons Use the command button icon from the toolbox. Add a button to the form. Right click on the new object to get a menu. Choose properties. Change the button name and text. Right click on the object to View Code. Click on (general) to find the object. 計概 74

Text boxes Use the text box icon from the toolbox. Add a text to the form. Right click on the new object to get a menu. Choose properties. Change the text box name and text. Text Boxes are usually used for user input, not output. 計概 75

VB Variables Declaring Variables Ø There a number of ways of declaring variables the most common one is the DIM statement Ø Dim identifier as Data Type Dim Customer. Name as string Dim Total. Sold as integer Scope of Variables Ø Ø Ø 計概 Global - used in all procedures Modular - accessible from all procedures of a form Local - only used within the procedure where it is declared. 76

VB Module-Level. Variables Module-Level Declaration - Place the declarations for module-level variable & constants in the general declaration section for the form. (General Declarations Section) Option Explicit Dim Module Level variables Const Module level constants Private Sub cmd. Calculate_Click () Dim local variables Const local constants end sub Private Sub cmd. Summarise_Click () Dim local variables Const local constants end sub 計概 77

Example: Temperature conversion Objects on the form: A label and text box for Fahrenheit (Fahr) Ø A label and text box for Celsius (Cels) Ø A button for Fahr. To. C Ø A button for Cto. Fahr An exit button Ø 華氏攝氏轉換計概 78

Add code for temperature conversion To declare a global variable you have to create a module: Click on Project menu Ø select Add module Set name to property to Globals. Module Then Input Option explicit public temp As Single This allows the variable temp to be used in all subroutines. 計概 79

Full code for conversion Private Sub Cto. Fahr_Click() dim temp as double temp = Val(Cels. Text) temp = (temp * 9 / 5) + 32 Fahr. Text = temp End Sub Private Sub Fahr. To. C_Click() dim temp as double temp = Val(Fahr. Text) temp = (temp - 32) * 5 / 9 Cels. Text = temp End Sub Private Sub Exit_Click() End Sub 計概 80

VB Data Types Integer (int) - Whole number Long (lng)- Large whole numbers Single (sng) - Single precision floating point numbers 6 digits of accuracy. Double (dbl) - Double precision floating point numbers 14 digits of accuracy Boolean (bln) - true or false String (str) - Alphanumeric data Date (dtm) - an 8 character date Currency (cur) - Decimal fractions Variant - this is the default data type, it can contain any type of data. See the following web page for more detail on each data type http: //msdn. microsoft. com/library/default. asp? url=/library/en -us/vblr 7/html/vagrp. Data. Type. asp 計概 81

http: //msdn. microsoft. com/library/default. asp? url=/library/en-us/vblr 7/html/vagrp. Data. Type. asp 計概 82

VB的邏輯判斷 IF…THEN…ENDIF 當程式需要判斷不同的條件成立下執行不同的指令時，就需要用 IF 敘述進行，用法與 FORTRAN中類似 VB If(A > B) Then Print “A>B” Else. If(A<B) Then Print “A<B” Else Print “A=B” Endif 計概 FORTRAN If(A. GT. B) Then Write(*, *) ‘A>B’ Else If(A. LT. B) Then Write(*, *) ‘A<B’ Else Write(*, *) ‘A=B’ Endif 83

BASIC 的流程控制：迴圈與 FORTRAN 中的 DO……ENDDO 類用法似， VB的語法為 For…Next 或 While … WEND 實例：等差級數求和： VB 語法 SUM=0 For I=1 to 10 SUM=SUM+I Next I Print I, SUM FORTRAN 語法 ISUM=0 Do I=1, 10 ISUM=ISUM+I Enddo Write(*, *) I, SUM 問題：此輸出結果為何？計概 84

For Loop (九九乘法表 BASIC版) For i = 1 to 9 step 1 print i; ": " for k = 1 to 9 print " "; i*k; next k print Next i 計概兩層的 for loop 85

九九乘法表 C 語言版本 #include <stdio. h> 兩層的 for int main( ) { int i, k; for(i=1 ; i<= 9 ; i++) { printf("第%d 列: " , i); for(k=1 ; k <= 9 ; k++) printf("%5 d", i*k); printf("n"); } printf("n. Bye bye!n"); return 0; } 計概 for(k=1 ; k <= 9 ; k++) printf("%5 d", i*k); loop 86

While Loop BASIC 語言 i=1 While ( i<= 9 ) do REM Loop body i=i+1 Wend 計概 C 語言 i=1; while( i<= 9 ) { /* Loop body */ i++; } 87

VB Programming Summary Components of Visual Basic Ø GUI, programming language, IDE Entering the IDE Ø menu bar, toolbars, toolbox, form window Event Driven Programming Developing a VB Project Ø Ø design interface set properties (design time) write the code (do the programming) test (run) the project Save the project Open an existing project Print the interface, properties, and code 計概 88

Types of Java Programs Applications Ø A standalone program just like a console applications for C/C++. Applets Ø A plug-in program inside a web page. (runs in a web browser) Servlets Ø A plug-in program inside a web page but running on server side. JSP (Java Server Page) Ø Ø 計概 An HTML-like text program with Java code. Similar to ASP and PHP. 89

Java Language Basics Variables and Data types Operators Ø Arithmetic Operators Ø Relational and Conditional Operators Ø Shift and Logical Operators Ø Assignment Operators Ø Other Operators Expressions, Statements, and Blocks Control Flow Statements Ø The while and do-while Statements Ø The for Statement Ø The if/else Statements Ø The switch Statement Ø Exception Handling Statements Ø Branching Statements 計概任何高階電腦語言都該有的指述: ü /* 註解 */ //也是註解 ü宣告/定義變數和常數 ü運算符號與運算式和 Assignment = • 算術, 關係運算, 邏輯 ü{ compound statements; } ü控制指述(control statements) ØSequence ØAlternative (selection) • if-else, switch ØLoop: for, while, do while ØFunction/procedure call 90

Variables and Types in Java Primitive (simple) types Ø Ø Ø Ø boolean (1 bit) byte (8 bit, signed) char (16 bit, UNICODE) short (16 bit, signed) int (32 bit, signed) long (64 bit, signed) float (32 bit, IEEE 754) double (64 bit, IEEE 754) Reference types (use pointers to access) Ø Ø Ø 計概 array types class types interface types 91

My. First. Coffee. java (Applet sample) p 1/2 import java. applet. Applet; import java. awt. *; // Graphics, Font, Color, . . . public class My. First. Coffee extends Applet { /////// 注意檔名要與 Class 名相同 String s; // global 變數以便後續 function 也可用 public void init ( ) { //通常寫只會做一次的作 s= get. Parameter("MSG"); // 抓<applet> 裡的參數 MSG放s } public void paint (Graphics g) { if(s == null ) s= "Ha Ha Ha !n. Heeee!"; // 在appletviewer抓不到ㄟ, 阿只好. . . (bug? 可能 HTML沒寫好) g. clear. Rect(0, 0, get. Size(). width, get. Size(). height); g. set. Color(Color. blue); // 所有顏色常數是小寫 ! 怪哉? 因為可以改 g. set. Font( new Font("Courier", Font. BOLD, 32) ); set. Background(Color. green); //這是Applet的method g. draw. String("Hey You!", 44, 80 ); 計概 92

My. First. Coffee. java (p 2/2) g. set. Color(Color. red); // 所有顏色常數是小寫 ! 變數! g. draw. Rect(55, 160 -32, 20*s. length() , 36); // red g. set. Color(Color. yellow); g. fill. Rect(57, 160 -32+2, 20*s. length()-4 , 36 -4); /// g. set. Font( new Font("Courier", Font. PLAIN, 24) ); g. draw. String("s. length()="+s. length(), 60, 220); g. set. Font( new Font("Courier", Font. BOLD, 32) ); g. set. Color(Color. magenta); // magenta g. draw. String(s, 60, 160 ); g. set. Font( new Font("標楷體", Font. BOLD, 32) ); g. set. Color(Color. orange); // orange g. draw. String(s, 60, 280 ); } } 計概 93

HTML to run My. First. Coffee <HTML> <BODY> <HR width=66%> <APPLET code="My. First. Coffee. class" width=580 height=320> <PARAM name="MSG" value="I am Big Head Lee 李大頭!"> <param name="P 2" value = "No use this time"> </applet>  <HR width=88%> </body> 注意: 該. class檔在Server上要與此 HTML 檔放 </html> 一起; 否則要在 <applet …>裡指定 codebase 計概 94

Applet My. First. Coffee is running 要如何把 HTML 檔 run 起來? 當然可放到 WEB 網站. 若在 Windows XP, 則直接執行該 HTML 檔即可! 計概 95

Gi. java: A Simple Application using GUI (p 1. /4) 計概 import java. awt. *; import java. awt. event. *; public class Gi. Gi implements Action. Listener{ Frame f = new Frame("Window 2001"); Button b 1, b 2, b 3; Panel p; Button n, bq, big; int x. Size=300, y. Size=200; Dimension dim = Toolkit. get. Default. Toolkit(). get. Screen. Size (); Text. Area tx= new Text. Area("Hey 我愛 Gi. Gi", 5, 20, Text. Area. SCROLLBARS_HORIZONTAL_ONLY) ; public static void main( String s[]) { new Gi. Gi(); } /* More on next page. . . */ 96

Gi. java (p 2. /4) public Gi. Gi() { // Constructor f. set. Size(x. Size, y. Size); f. set. Location(100, 100); tx. append("n=== ==== Text. Area tx="); tx. append(" new Text. Area("Hey 我愛 Gi. Gi", 5, 20, "); tx. append( " Text. Area. SCROLLBARS_HORIZONTAL_ONLY); n"); tx. append( "If 如果 Gi. Gi 不漂亮, 你還會覺得她的歌好聽嗎? n"); b 1=new Button("111"); b 2=new Button("222"); p = new Panel(); n= new Button("Haha. Hehehe"); p. add(n); bq=new Button("Quit"); p. add(bq); bq. set. Background(new Color(38, 38)); bq. set. Foreground(Color. red); big=new Button("Bigger"); p. add(big); big. set. Foreground(new Color(255, 0, 0)); n. set. Background(Color. green); 計概 97

Gi. java (p 3. /4) n. add. Action. Listener(this); //有事交給此程式中 // 的action. Performed() b 1. add. Action. Listener(this); bq. add. Action. Listener(this); big. add. Action. Listener(this); f. add(tx, "Center"); //文字擺中間 f. add(b 1, "West"); ; f. add(b 2, "East"); f. add(p, "South"); f. show(); } /* Gi. Gi – the constructor */ 計概 98

Gi. java (p 4. /4) public void action. Performed(Action. Event evt){ if(evt. get. Source() == n){ n. set. Background(Color. red); n. set. Label(" 777 "); } /* evt. . . == n */ if(evt. get. Source() == b 1) n. set. Label("Eleven"); if(evt. get. Source() == bq) System. exit(0); if(evt. get. Source() == big){ x. Size = (int) (x. Size*1. 2); if(x. Size>dim. width) x. Size= dim. width; y. Size = (int) (y. Size*1. 2); if(y. Size>dim. height) y. Size= dim. height; tx. append("n"+x. Size+ ", " + y. Size); f. set. Size(x. Size, y. Size); } f. validate(); // so that Layout Manager. . . } /* action. Performed */ } /* public class Gi. Gi */ 計概 99

Run the Gi. java Press the Bigger button 計概 100

Press the 111 button 計概 101

Press the Eleven button 計概 102

Press the Bigger button again 計概 103

Gi. Gi 2. java: A VERY Simple Application import java. awt. *; import java. awt. event. *; If you don’t public class Gi. Gi 2 { understand the Frame f = new Frame("Window 2002"); previous example, Button b 1, b 2, b 3; Panel p; Button n; try this simple ont public static void main( String s[ ]) { new Gi. Gi 2( ); /* so that easily to change to Applet */ } public Gi. Gi 2( ) { // Constructor f. set. Size(300, 200); b 1=new Button("111"); b 2=new Button("222"); p = new Panel(); n= new Button("Haha. Hehehe"); p. add(n); n. set. Background(Color. green); f. add(b 1, "West"); f. add(b 2, "East"); f. add(p, "South"); /* Frame uses Boarder Layout manager */ f. show( ); } 計概} 104

Run the Gi. Gi 2. javac Gi. Gi 2. java Gi. Gi 2 計概 105

Gi. Gi 3. java – stepwise refinement (p 1/2) import java. awt. *; import java. awt. event. *; public class Gi. Gi 3 implements Action. Listener{ Frame f = new Frame("Window 2003"); Button b 1, b 2, b 3; Panel p; Button n; public static void main( String s[ ]) { new Gi. Gi 3(); /* easy to change to Applet */ } Let us add event handler 計概 106

Gi. Gi 3. java (p 2/2) public Gi. Gi 3( ) { // Constructor f. set. Size(300, 200); b 1=new Button("111"); b 2=new Button("222"); p = new Panel( ); f. add(p, "South"); f. add(b 1, "West"); f. add(b 2, "East"); Button bq = new Button("Quit"); n= new Button("Haha. Hehehe"); p. add(n); p. add(bq); n. set. Background(Color. green); n. add. Action. Listener(this); b 1. add. Action. Listener(this); f. show(); } public void action. Performed (Action. Event evt){ if(evt. get. Source() == n){ n. set. Background(Color. red); n. set. Label(" 777 "); } if(evt. get. Source() == b 1) n. set. Label("Eleven"); f. show(); // so that Layout Manager. . . } 計概} Let us add event handler 107