1 / 26

CSC 110 – Fluency in Information Technology Chapter 19: A JavaScript Program

CSC 110 – Fluency in Information Technology Chapter 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.

nhampton
Download Presentation

CSC 110 – Fluency in Information Technology Chapter 19: A JavaScript Program

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. CSC 110 – Fluency in Information TechnologyChapter 19: A JavaScript Program Dr. Curry Guinn

  2. 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

  3. 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

  4. 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)

  5. Fundamental Concepts in Programming: Assignment • Assignment: Giving a value to a variable • Syntax: x = 3; total = sum + sum * tax; name = first + ‘ ‘ + last;

  6. 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”)

  7. 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”; }

  8. 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.”);

  9. Lab Work Have your program produce the following input dialog

  10. Have your program compute the exchange rate and baht (www.xe.com to find tell the number of Thailand the exchange rate)

  11. 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>

  12. The Espresso Stand • The JavaScript code

  13. 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)”

  14. 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

  15. 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.

  16. The Espresso Stand • The Link

  17. 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

  18. 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.

  19. 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’>

  20. 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’>

  21. 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”’>

  22. 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”’>

  23. How do we initialize variables? • Create a script <script language=‘JavaScript’> var shots = 1; var drink = “none”; var ounce = 8; </script>

  24. 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;

  25. At the end of lab, • I’ll assign Out-of-Class Assignment 6 on Monday

  26. 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

More Related