Lecture # 9 JavaScript Programming I

Today Questions: From notes/reading/life? Spreadsheet Review Preview Lab # 4 1.Introduce: How can I write a program in JavaScript? 2.Explain: JavaScript Functions, Branching (If, Else) System Functions, For Loops, Widgets 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 convert currency Put JavaScript together with Event Handling

Today Questions: From notes/reading/life? Spreadsheet Review Preview Lab # 4 1.Introduce: How can I write a program in JavaScript? 2.Explain: JavaScript Functions, Branching (If, Else) System Functions, For Loops, Widgets 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 convert currency Put JavaScript together with Event Handling

Spreadsheets II Review What data structure allows cells to take on different Formatting (Bold, Italic, Underline, different fonts, sizes, colors, etc.)?

Spreadsheets II Review What data structure allows cells to take on different Formatting (Bold, Italic, Underline, different fonts, sizes, colors, etc.)? Records: Cell Contents

Spreadsheets II Review Dynamic Recomputation: What is it?

Spreadsheets II Review Dynamic Recomputation: What is it? When you change a value, all of the values that it feeds into, are automatically updated.

Spreadsheets II Review Why is Dynamic Recomputation cool/good/efficient?

Spreadsheets II Review Why is Dynamic Recomputation cool/good/efficient? It makes it so that you don’t have to go through and update everything yourself, as you would have to do with a calculator or paper/pencil, for example.

Spreadsheets II Review What is the Algorithm for Dynamic recomputation?

Spreadsheets II Review What is the Algorithm for Dynamic recomputation? Use a Tree!:

Spreadsheets II Review What is the Algorithm for Dynamic recomputation? Maintain pointers (links) from a cell, A, to all of the cells, B, that reference A. 5 A 8 B1 4 B2 Use a Tree!:

Spreadsheets II Review What is the Algorithm for Dynamic recomputation? Maintain pointers (links) from a cell, A, to all of the cells, B, that reference A. Similarly, from B to all of the cells, C, that reference B. 5 A 8 B1 4 B2 13 C1 3 C2.. Use a Tree!:

Spreadsheets II Review What is the Algorithm for Dynamic recomputation? Maintain pointers (links) from a cell, A, to all of the cells, B, that reference A. Similarly, from B to all of the cells, C, that reference B. When the value in cell A is changed, 5 A 8 B1 4 B2 13 C1 3 C2.. Use a Tree!:

Spreadsheets II Review What is the Algorithm for Dynamic recomputation? Maintain pointers (links) from a cell, A, to all of the cells, B, that reference A. Similarly, from B to all of the cells, C, that reference B. When the value in cell A is changed, follow the links to all cells, B, that reference A and update (recomputed) those too. Do this recursively from B to C, etc. 5 A 8 B1 4 B2 13 C1 3 C2.. Use a Tree!:

Today Questions: From notes/reading/life? Spreadsheet Review Preview Lab # 4 1.Introduce: How can I write a program in JavaScript? 2.Explain: JavaScript Functions, Branching (If, Else) System Functions, For Loops, Widgets 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 convert currency Put JavaScript together with Event Handling

Today Questions: From notes/reading/life? Spreadsheet Review Preview Lab # 4 1.Introduce: How can I write a program in JavaScript? 2.Explain: JavaScript Functions, Branching (If, Else) System Functions, For Loops, Widgets 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 convert currency Put JavaScript together with Event Handling

Java Script Programming

What is JavaScript? JavaScript is a scripting language - a scripting language is a lightweight programming language. –A JavaScript defines lines of executable computer code. –A JavaScript is usually embedded directly in HTML pages. –JavaScript is an interpreted language (means that scripts execute without preliminary compilation). JavaScript was designed to add interactivity and programming to HTML web pages. –Performs calculations such as totaling the price or computing sales tax. –Verifies data such as with credit card applications. –Adapts the display to user needs.

Why JavaScript? JavaScript is used in millions of Web pages to improve the design, validate forms, and much more. JavaScript is the most popular scripting language on the internet. JavaScript works in all major browsers Everyone can use JavaScript without purchasing a license. JavaScript is supported by all major browsers, like Firefox, Chrome and Internet Explorer.

Basic JavaScript The content of the element is a JavaScript program. We can use variables and expressions such as, –Pay = payRate*hours; –Tax = Pay*taxRate; We can use built-in system functions. –alert(), document.write(), document.writeln() –Math.random(), Math.round() We can write and reuse our own functions

Review: HTML Forms HTML forms are used to create web pages that accept user input Forms allow the user to communicate information back to the web server Forms allow web servers to generate “dynamic” web pages, and to “personalize” pages for the individual user Forms contain labels, text boxes, buttons, etc.

Review: CGI Programs After the user enters the information, they press the “submit” button to send the information to the web server The attribute tells the web browser where to send the information The action URL is the address of a CGI program that is running on a web server The CGI program reads the user input sent by the browser, and then sends a dynamically generated HTML page back to the browser

Review: Server-side vs. Client-side Server-side scripts run on the Server, where the web pages are stored Client-side scripts run on the Client’s computer, where the user is CGI scripts are usually server-side

Review: Event Handling Text Box Title: Button

Basic JavaScript Everything inside is a program Usually use We can use variables and expressions –Pay = payRate*hours We can write and reuse our own functions

What are the variable names? HTML Form Widgets Demo Title: US Citizen: Freshman Sophomore Junior Senior Type your address here. red yellow

What are the variable names? HTML Form Widgets Demo Title: US Citizen: Freshman Sophomore Junior Senior Type your address here. red yellow All the same name

Functions In JavaScript, you can make functions yourself, and there are also predefined functions. A function is a reusable code-block that will be executed by an event, or when the function is called. A function consists of a piece of computation that takes 0 or more arguments (input data) and returns a value (output data).

To create a function function funcName( arg1, arg2,... ) { JavaScript Code } To call a function –funcName( argExp1, argExp2,... ) –Each argument is assigned to each parameter –The body { } of the function is executed. Must have the same number! Functions Must have the same name! Reserved word

An example function function pay(payRate,hours) { return payRate*hours; }

An example function function pay(payRate,hours) { return payRate*hours; } Variables

Today Questions: From notes/reading/life? Spreadsheet Review Preview Lab # 4 1.Introduce: How can I write a program in JavaScript? 2.Explain: JavaScript Functions, Branching (If, Else) System Functions, For Loops, Widgets 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 convert currency Put JavaScript together with Event Handling

Function Demo function sayHello() { window.alert("Hello " + demoform.title.value) }

Putting Strings Together (concatenation) Use the “+” sign to put strings together. “Hello” + “There” equals “HelloThere” If var1==“Good” and var2==“Bye”, then var1+var2 equals “GoodBye” If we want a space in there, we would use: var1 + “ ” + var2 which equals “Good Bye”

Functions with If and Else function evaluatePay() { if (demoform.totalPay.value < 100) { alert("You earn less than 100 dollars") } else { alert("You earn more than 100 dollars.") }

Functions with If and Else Demo

Example function sayHello() { alert("Hello " + demoform.title.value) }

Writing Information Document.write() writes out what is in the parenthesis, and the browser reads it the same way it reads an HTML file If var1==“Forever”, Document.write(“ ”+ var1+ “ ”); outputs “ Forever ” which the browser displays as Forever

Predefined System Functions document.write("HTML text"); –Writes its parameter out as if it were HTML document.writeln("HTML text"); –Writes one or more HTML expressions, followed by a carriage return, to a document in the specified window. window.alert("HTML text"); –Used to “alert” the user –Can be used to debug program

Function Demo function sayHello() { window.alert("Hello " + myForm.go.value); } <input type="button" name="go" value="GO!" onclick=sayHello() /> Concatenate Operator

Three Programming Constructs Do first part to completion Do second part to completion Sequential Subtask 1 Subtask 2 Test Cond. True False Conditional Subtask 1 Iterative Test Cond. False True

Conditional Demo function evaluatePay() { if (myForm.pay.value < 100) {alert("You earn less than 100 dollars"); } else {alert("You earn more than 100 dollars."); } My Pay: <input type="text" name="pay" onchange=evaluatePay() />

Iterative Demo function countDown() { for (i = 5; i >= 0; i = i - 1) { document.write( i + " "); } <input type="button" value="Count Down" onclick=countDown() />

Widgets red green blue Sophomore Junior Senior Tie Hat Coat myForm.clothes[0].value myForm.clothes[0].checked myForm.year[1].value my Form.year[1].checked myForm.color.value myForm.color[2].value myForm.color[2].selected myForm.myBox.value myForm.myName.value

Today Questions: From notes/reading/life? Spreadsheet Review Preview Lab # 4 1.Introduce: How can I write a program in JavaScript? 2.Explain: JavaScript Functions, Branching (If, Else) System Functions, For Loops, Widgets 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 convert currency Put JavaScript together with Event Handling

10-minute Personal Exercise Create a form that looks like this: Input a number for Hourly Wage Input a number for Number of Hours Worked When the button is clicked, call a Javascript Function CalcPay that calculates pays as: Hourly Wage * Number of Hours Worked Output the result through a “window.alert()”

5-minute Personal Exercise Create a form that looks like this: Now modify your javascript function: if the total pay is less than $200 output the total pay with the additional string “You are below the poverty level, even for a student.” Output the result through a “window.alert()”

Today Questions: From notes/reading/life? Spreadsheet Review Preview Lab # 4 1.Introduce: How can I write a program in JavaScript? 2.Explain: JavaScript Functions, Branching (If, Else) System Functions, For Loops, Widgets 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 convert currency Put JavaScript together with Event Handling

Today Questions: From notes/reading/life? Spreadsheet Review Preview Lab # 4 1.Introduce: How can I write a program in JavaScript? 2.Explain: JavaScript Functions, Branching (If, Else) System Functions, For Loops, Widgets 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:Take the follow practice quiz: Quiz Time Write a JavaScript function to convert currency Put JavaScript together with Event Handling

Quiz Time

Text Box Text Box Name <input type="text" name="myName" id="title" size="20" maxlength="30" /> ? myForm.myName.value

Check Box Check Box US Citizen: <input type="checkbox" checked="checked" name="citizen" id="citizen" value="US" /> myForm.citizen.checked ?

Radio Buttons Radio Buttons <input type="radio" name="year" id="y1" checked="checked" value="Fresh" />Freshman <input type="radio" name="year" id="y2" value="Soph" />Sophomore <input type="radio" name="year" id="y3" value="Jun" />Junior <input type="radio" name="year" id="y4" value="Sen" />Senior myForm.year[0].checked ?

Text Area Text Area <textarea name="address" id="address" cols="20" rows="10">Type your address here. myForm.address.value ?

Selection List Selection List red green blue cyan magenta yellow ? myForm.color[0].selected