Download
1 / 26
260 likes | 276 Views
This chapter reviews fundamental programming concepts, JavaScript programs, GUI development, event-based programming, and the importance of learning programming. Learn about variables, data types, booleans, conditionals, input/output, and event-driven programming. Explore making software intuitive for users through GUI design principles and event handling in JavaScript. Practice enhancing user interfaces with buttons, text boxes, and radio buttons, while improving user experience through efficient design techniques. Dive into JavaScript programming to create engaging and user-friendly applications.
E N D
CSC 110 – Fluency in Information TechnologyChapter 19: A JavaScript Program Dr. Curry Guinn
Today’s Class • Review: Fundamental Programming concepts • Review: A JavaScript Program • Graphical User Interfaces • Buttons, Text Boxes, and Radio Buttons • Event-Based Programming • Putting it together
Why Learn Programming? • Understanding better how a computer works • Algorithms • Fundamental concepts in problem-solving • Almost every programming language has exactly the same structures as JavaScript • Basic, C, C++, Pascal, Fortran, COBOL, APL, PL/1, Java, QuakeC
Fundamental Concepts: Variables and Data Types • Variables: Containers for values • Data Types: Containers can hold different types of values • String “dog” ‘a man, a plan, a canal, Panama’ • Number (3, -14, 3.22222) • Boolean (true, false)
Fundamental Concepts in Programming: Assignment • Assignment: Giving a value to a variable • Syntax: x = 3; total = sum + sum * tax; name = first + ‘ ‘ + last;
Fundamental Concepts: Booleans • Booleans: Have a value of true or false • Comparisons (<, >, ==, >=, <=, !=) (x < 99) (name == “Mary Smith”) • Combining booleans (AND, OR, NOT) (x < 99) && (price > 1.00) (first == ‘Mary’) || !(last == “Smith”)
Fundamental Concepts: Conditionals • Conditionals allow programs to execute different sets of instructions depending on the values of variables if (waterTemp < 32) waterState = “Frozen”; if (waterTemp < 32) waterState = “Frozen”; else { if (waterTemp < 212) waterState = “Liquid”; else waterState = “Gas”; }
Input/Output • Use prompt for simple user input var dollarAmount = prompt("Enter amount in U.S. dollars:"); • Use alert to display message alert(“You have “ + dollarAmount + “ dollars.”);
Lab Work Have your program produce the following input dialog
Have your program compute the exchange rate and baht (www.xe.com to find tell the number of Thailand the exchange rate)
Conversion to baht (file) <html> <head> <title> Conversion to Thailand Baht </title> </head> <body> <script language="Javascript"> var dollars = prompt("How many U.S. dollars do you have? "); var baht = 38.6 * dollars; alert("You have " + baht + " Thailand baht."); </script> </body> </html>
The Espresso Stand • The JavaScript code
Graphical User Interfaces • The point is to make software easy for users • Sometimes you see the term “user-centric design” • Programmers often will create interfaces that make the programmer’s job easier rather than making the user’s life easier • “Enter your phone number without spaces, dashes, or parenthesis” • http://unixwiz.net/ndos-shame.html • “Enter your credit card number (no spaces)”
GUIs • GUIs make the user’s life easier by • Using consistent metaphors • Using buttons or menus to enter data rather than typing (in general) • Minimizing typing • Present information graphically • Organize information in easy-to-digest form
GUIs in HTML • As we have already seen (Ch.4), HTML provides means to format the display of text and images • HTML allow allows use to put interactive buttons, text boxes, and radio buttons on the screen. • We place these controls inside of <form> … </form> tags.
The Espresso Stand • The Link
Event-Driven Programming • The program is driven by what the user does • The user generates events • The program reacts to them • We must write JavaScript code to react to each event
Event Handling • Notice that each input control has an attribute for handling the event • Buttons: onClick = ‘ ‘ • Text: onChange = ‘ ‘ • Within those quotes, we can put JavaScript code that we want to have executed when the event is generated.
Handling the Shots Buttons • If the user clicks on the “1” button, we want to set the variable “shots” to 1. <input type=button value = “ 1 “ onClick = ‘shots = 1’>
Handling the Size Buttons • If the user clicks on the “S” button, we want to set the variable “ounces” to 8. <input type=button value = “ S “ onClick = ‘ounces = 8’>
Handling the Drink Buttons • If the user clicks on the “Latte” button, we want to set the variable “drink” to “latte”. <input type=button value = “ LATTE “ onClick = ‘drink = “latte”’>
Handling the Clear • If the user hits Clear, we want all the variables reset <input type=button value = “ Clear “ onClick = ‘drink = “none”; shots = 1; ounce=8; document.Bean.price.value=“0.00”’>
How do we initialize variables? • Create a script <script language=‘JavaScript’> var shots = 1; var drink = “none”; var ounce = 8; </script>
Handling the total button • Use the javascript we had in our original program to compute the total • Insert that code into the <input type=button value = “ Total “ onClick = ‘…….’> document.Bean.price.value = price;
At the end of lab, • I’ll assign Out-of-Class Assignment 6 on Monday
Wrap-up • Read Chapters 19-20 • Those due 10/15 • Turn in Chapter 1 of your study guide, part of your final exam by 10/17
