Lesson 5 Introduction to Human Computer Interaction

Lesson 5 Introduction to Human Computer Interaction

1. Introduction to HCI Instructor: Ellen Grace Porras

2. Visual Basic.Net 2 Elements Design Variables Dimension Data Types

3. Elements 3 Button Message Box Textbox Radio Button Checkbox

4. Button with Math Functions Syntax: ADDITION MessageBox.Show (10 + 5) 4 ADDITION

5. Syntax: SUBTRACTION MessageBox.Show (10 - 5) 5 Button with Math Functions SUBTRACTION

6. Syntax: MULTIPLICATION MessageBox.Show (10 * 5) 6 Button with Math Functions MULTIPLICATION

7. Syntax: DIVISION MessageBox.Show (10 / 5) 7 Button with Math Functions DIVISION

8. Text Box + Button Math Functions Syntax: Textbox1.text = 10+3 Textbox1.text = 10-3 Textbox1.text = 10*3 Textbox1.text = 10/3 8 ADDITION Answer: SUBTRACTION MULTIPLICATION DIVISION

9. Two Text Boxes + Button +Messagebox Math Functions Syntax: Addition MessageBox.Show(Textbox1.Text ++ Textbox2.Text) 9 ADDITION 10 First Number: SUBTRACTION MULTIPLICATION DIVISION Second Number: 5 Message Box //Answer here 15

10. Two Text Boxes + Button +Messagebox Math Functions Syntax: Addition MessageBox.Show(Textbox1.Text - Textbox2.Text) 10 ADDITION 10 First Number: SUBTRACTION MULTIPLICATION DIVISION Second Number: 5 Message Box //Answer here 10

11. Two Text Boxes + Button +Messagebox Math Functions Syntax: Addition MessageBox.Show(Textbox1.Text * Textbox2.Text) 11 ADDITION 10 First Number: SUBTRACTION MULTIPLICATION DIVISION Second Number: 5 Message Box //Answer here 50

12. Two Text Boxes + Button +Messagebox Math Functions Syntax: Addition MessageBox.Show(Textbox1.Text / Textbox2.Text) 12 ADDITION 10 First Number: SUBTRACTION MULTIPLICATION DIVISION Second Number: 5 Message Box //Answer here 2

13. Two Text Boxes + Button and Textbox Math Functions Syntax: Addition: Textbox3.text = Textbox1.Text ++ Textbox2.Text Subtraction: Textbox3.text = Textbox1.Text - Textbox2.Text Multiplication: Textbox3.text = Textbox1.Text * Textbox2.Text Division: Textbox3.text = Textbox1.Text / Textbox2.Text 13 ADDITION 10 First Number: SUBTRACTION MULTIPLICATION DIVISION Second Number: 5 15 Answer:

14. 14 Data types determine the type of data that any variable can store. Variables belonging to different data types are allocated different amounts of space in the memory. There are various data types in VB.NET. They include: Boolean : Its value can be either True or False. Char : Single character Date : Date values Integer : Whole numbers String : Text values What are Data Types?

15. Variables 15

16. 16 Dim

17. Declare a variable Mymessage as a string with a value “Hello BSIT 2nd Year” Dim Mymessage As String = "Hello BSIT 2nd Year!” MessageBox.Show ( Mymessage ) //Or Dim Mymessage As String = "Hello BSIT 2nd Year!” Textbox1.Text = Mymessage 17 Example: String

18. Example: Integer Declare a variable Mynumber as integer with a value of 10. Show the output using MessageBox . Dim Mynumber As Ingteger = 10 MessageBox.Show ( Mynumber ) //or this Dim Mynumber As Ingteger = 10 TextBox1.Text = Mynumber 18

19. Example: String and Integer Declare a variable Mynumber as integer with a value of 10 and Mymessage as string with a value of “Hello”. Show the output using MessageBox . Dim Mynumber As Ingteger = 10 Dim Mymessage As String = “Hello” MessageBox.Show ( Mymessage & Mynumber ) 19

20. Check your knowledge Display “Good Morning!” using a MessageBox Display “Information Technology” using TextBox3 Declare the variables firstname , lastname as string. Display the fullname using textbox2. 20

21. Let’s check your Knowledge Declare a variable firstname , lastname and fullname as String. Combine all the variables to show the FULLNAME on a Messagebox. 21 Your Full name is FULL NAME Enter First name: Ellen Grace Porras Enter last name: Message Box Your full name is: Ellen Grace Porras

22. Let’s check your Knowledge Declare a variable firstname , lastname and fullname as String. Combine all the variables to show the FULLNAME on a Messagebox. 22 Your Full name is FULL NAME Enter First name: Ellen Grace Porras Enter last name: Message Box Ellen Grace Porras

23. Let’s check your Knowledge Declare a variable firstname , lastname and fullname as String. Combine all the variable to show the FULL NAME on a Messagebox. Dim firstname , lastname , fullname As String firstname =Textbox1.Text lastname = Textbox2. Text fullname = Textbox1. Text + “ ” + Textbox2.Text Messagebox.Show ( “Your full name is: “ + fullname ) 23

24. Let’s try with math functions Declare a variable num1, num2 and answer as integer. Show the output using MessageBox . Dim num1, num2, answer As Ingteger num1=5 num2 =10 answer =num1+num2 MessageBox.Show(answer) 24

25. Let’s try with math functions Declare a variable num1, num2 and answer as integer. Show the output using MessageBox . Dim num1, num2, answer As Ingteger num1=Textbox1.Text num2 = Textbox1.Text answer =num1+num2 MessageBox.Show(answer) 25

26. Let’s try with math functions Declare a variable num1, num2 and answer as integer. Show the output using Textbox. Dim num1, num2, answer As Ingteger num1=Textbox1.Text num2 = Textbox2.Text answer =num1+num2 Textbox3.text = answer Textbox1.Clear Textbox2.Clear 26

27. Activity 1: Convert ft to cm Design: Text Box and Button 27 Convert CONVERTER (ft to cm) Enter ft: Answer:

28. Activity 1: Convert ft to cm Dim ft, answer As Ingteger ft=Textbox1.Text answer =ft*30.48 Textbox2.Text = answer 28 Convert CONVERTER (ft to cm) Enter ft: Answer:

29. Activity 2: Get the area of a Rectangle Design: Text Box and Button 29 Compute Area of a Rectangle Length: Width: Area:

30. Activity 2: Get the area of a Rectangle Dim lngth , wid,area As Ingteger lngth =Textbox1.Text wid =Textbox2.Text area = lngth * wid Textbox3.Text = area 30 Compute Area of a Rectangle Length: Width: Area:

31. ASSIGNMENT Declare variables for username and password as string Given: Username=“Admin” Password=“Pass123” Conditions: If the user entered correct username and password on textbox1 and textbox2, print on a messagebox “Welcome to Visual Basic” If the user entered incorrect username on textbox1, print on a messagebox “incorrect username” If the user entered incorrect password on textbox2, print on a messagebox “incorrect password” 31 LOG IN LOG IN FORM USERNAME: PASSWORD:

32. Thank you Presenter name: Ellen Grace D. Porras Email address: [email protected]