Recommended
More Related Content
What's hot
What's hot (20)
Similar to U2A3
Similar to U2A3 (20)
More from pfefferteacher
More from pfefferteacher (6)
Recently uploaded
Recently uploaded (20)
U2A3
- 1. Principles of Program Design: Problem Solving with JavaScript
- 2. Using Existing JavaScript Objects • Types of objects – Document (refers to the Web page where the text in HTML are displayed. This object is instantiated automatically when an HTML file is open in a browser. – Array – (will cover later on – for storing multiple values in a single variable) – Date - (for retrieving and using dates - Date objects are static, not dynamic. The computer time is ticking, but date objects, once created, are not.) – Boolean - (for objects that can be classified as true or false) – Math – (allows you to perform mathematical tasks on numbers.) 2
- 3. – Documents are instantiated automatically when an HTML file is opened in a Web Browser. – When a web page is loaded, the browser creates a Document Object Model of the page. – The DOM is a hierarchy of elements belonging to a document – Example – the <head> and <body> sections are the doc’s major sections. – There are lots of other objects defined in the DOM – i.e. window, button and form objects. • Static properties – One value for the whole class – Example: The constant value PI for the Math object • Static methods – Can be called independently of a separate object 3 Documents and the DOM ( Document Object Model)
- 4. Numbers and Math Image taken from: http://www.stsd.org/webpages/cyurconic/news.cfm?subpage=67815
- 5. Math and Numbers • JavaScript has only one type of number. • Numbers can be written with, or without, decimals: • Math allows you to perform mathematical tasks on numbers and provides programmers with numerous built-in methods. • Math is not a constructor. All properties/methods of Math can be called by using Math as an object, without creating it. • Check out the various methods in the w3schools links provided Image taken from: http://www.amazingclassroom.com/ Image taken from: netperusal.com www.netpursual.com
- 6. String Methods Image taken from: http://papiervalise.typepad.com/scissor_variations/2012/08/diy-ombre-string.html
- 7. Important String Stuff • A JavaScript string stores a series of characters like "John Doe". • A string can be any text inside double or single quotes: • Remember with strings the first letter is at index position 0. • The last letter is always at the length of the string -1. • The middle letter is always at the length of the string /2 School 012345 There are a gazillion built-in String Methods – some are listed and explained here: http://www.w3schools.com/jsref/jsref_obj_string.asp
- 8. Graphical User Interfaces • Graphical user interface (GUI) – Resembles a paper form in which users enter data 8 • Creating GUI form – Created with HTML tags in <body> section – Two attributes: • name assigns a name to the form • action manipulates user’s entry • Elements of a form – Buttons, text boxes, radio buttons, check boxes and other graphical items used to interact with a program – You don’t need the script section when creating a form – each element is created with an <input> tage and all are empty • Tag ends with />
- 9. Graphical User Interfaces (cont’d.) • Radio buttons – Group of circular buttons – Used to select an item from a group – Type value: “radio” – name attribute of all buttons must be identical • Ensures only one is selected – value attribute holds text • Can be passed as argument when action is taken – Label appears as text after the end of the <input> tag 9
- 10. Graphical User Interfaces (cont’d.) • Text boxes- gives the user a place to enter text and to give the programmer a label with text that can be changed. – Type value: “text” – Value of name attribute is different for each box – Can be set to read-only – value attribute can be assigned and displayed as prompt – size attribute can be specified • Limits number of characters 10 • Buttons – used to initiate an action – Type value: “button” – Value of name attribute is different for each button – value attribute specifies displayed text
- 11. How to create a form: • Check out the example of how to create a form with radio buttons and text boxes on pgs 110 – 111 in your textbook. • In this form, when you click one radio button, the others are deselected. • Some text boxes let you type in them, some don’t • If you don’t want the user to be able to enter text in a box, you will make it read only. (readonly = “true”) 11
- 12. 12 Your task in this lesson (Hands-on Activity 3-4) is to create a form for use on a Flower shop’s Web site. •The form should have a single text box for the user to enter his or her name. •Under the text box should be a group of radio buttons for 3 different types of flowers: Roses, Carnations and Daisies. •Below the radio buttons should be a button labeled Request Info, with a read only text box under it for displaying a thank you to the user for his/her request for information. At this point, this program doesn’t need and functions or onclick attributes for the graphical elements – Just the form – and your comments :-) Could look something like this: Image source: http://www.wpclipart.com/