Lecture # 10 JavaScript Programming II

Today Questions: From notes/reading/life? Review Homework # 2 1.Introduce: How make widgets work with JavaScript? 2.Explain: Text Concatenation, Referring to Widgets, Document Trees, More Forms, Demos 3.Demo: JavaScript Magic – follow along on laptop 4.Practice: You solve a problem with a JavaScript 5.Evaluate: Share and evaluate your solution 6.Re-practice:Write a JavaScript function to fill a text area Wrap JavaScript Functions around widgets

Today Questions: From notes/reading/life? Review Homework # 2 1.Introduce: How make widgets work with JavaScript? 2.Explain: Text Concatenation, Referring to Widgets, Document Trees, More Forms, Demos 3.Demo: JavaScript Magic – follow along on laptop 4.Practice: You solve a problem with a JavaScript 5.Evaluate: Share and evaluate your solution 6.Re-practice:Write a JavaScript function to fill a text area Wrap JavaScript Functions around widgets

Today Questions: From notes/reading/life? Review Homework # 2 1.Introduce: How make widgets work with JavaScript? 2.Explain: Text Concatenation, Referring to Widgets, Document Trees, More Forms, Demos 3.Demo: JavaScript Magic – follow along on laptop 4.Practice: You solve a problem with a JavaScript 5.Evaluate: Share and evaluate your solution 6.Re-practice:Write a JavaScript function to fill a text area Wrap JavaScript Functions around widgets

Review How to write functions Return statements If-else Calling a function you wrote when an event occurs Concatenating strings Using document.write() and alert()

What is the general algorithm for collecting text data into a string?

1.Initialize string (possibly string="")

What is the general algorithm for collecting text data into a string? 1.Initialize string (possibly string="") 2. Add/append other text to the string recursively (string=string + "more text")

How do we refer to a widget? To refer to the checkbox: document.myform.mybox (mybox[i] if >1 box) To refer to the status of the checkbox (true or false): document.myform.mybox[i].checked To refer to the value of the checkbox: document.myform.mybox[i].value

Document Trees Form One Address Should we keep it? Small Medium Large Form Two <form name=“secondForm” Pepperoni Sausage Pineapple Limburger and Onion <input type="button" name="myButton" value=“My Button">

Document Trees document firstForm secondForm addresskeepersize topping myButton valuechecked value [0] checked [1] checked [2] checked

Document Tree Path Names document firstForm secondForm addresskeepersize topping myButton valuechecked value [0] checked [1] checked [2] checked document.firstForm.address.value=“1075 North”; document.secondForm (is a form) document.secondForm.myButton (is a button) document.secondForm.myButton.value (is a string) if (document.firstForm.keeper.checked) {…} if (document.firstForm.size[2].checked) {…}

Widget Review Text Box: size, maxlength, name, value Button: value, name Check Box: checked, name Radio Buttons (array): checked, name Selection List: size, name –Each option: selected Text Area: cols, rows, name

Event Handling Predefined events –onClick –mouseOver When the event happens, we can tell a certain function to execute The Event Handler is the function you call This is called Event Handling

More Form Widget Events Button, Check Box, Radio Buttons –onclick Text Box, Text Area –onchange, onfocus, onblur, onselect Selection List –onchange, onclick, onfocus, onblur

Today Questions: From notes/reading/life? Review Homework # 2 1.Introduce: How make widgets work with JavaScript? 2.Explain: Text Concatenation, Referring to Widgets, Document Trees, More Forms, Demos 3.Demo: JavaScript Magic – follow along on laptop 4.Practice: You solve a problem with a JavaScript 5.Evaluate: Share and evaluate your solution 6.Re-practice:Write a JavaScript function to fill a text area Wrap JavaScript Functions around widgets

Payroll Demos

Text Style Demos

Today Questions: From notes/reading/life? Review Homework # 2 1.Introduce: How make widgets work with JavaScript? 2.Explain: Text Concatenation, Referring to Widgets, Document Trees, More Forms, Demos 3.Demo: JavaScript Magic – follow along on laptop 4.Practice: You solve a problem with a JavaScript 5.Evaluate: Share and evaluate your solution 6.Re-practice:Write a JavaScript function to fill a text area Wrap JavaScript Functions around widgets

Group Exercise: Check Style Change + Radio Create a form that looks like this: So that when the boxes and radio buttons are checked or set, the corresponding changes automatically appear in the text box. You have 5minutes

Group Exercise: Check Style Change Now add Radio Buttons: Program the “Set the Style” button so that when the boxes are checked, and the button is clicked, the corres- ponding text appears in the text box. You have 10 minutes

Common Bugs Spelling and capitalization (JavaScript is CaSE senSItivE) Bad punctuation (missing ; or “) Mismatched brackets, parenthesis, or quotes Forgetting () when creating or calling a function Functions should be in tags inside the header Calling a widget by its label, rather than its name