Lecture # 9
JavaScript Programming I
Today
1.
2.
3.
4.
5.
6.
Questions: From notes/reading/life?
Spreadsheet Review
Preview Lab # 4
Introduce: How can I write a program in JavaScript?
Explain:
JavaScript Functions, Branching (If, Else)
System Functions, For Loops, Widgets
Demo:
JavaScript Magic – follow along on laptop
Practice:
You solve a problem with a JavaScript
Evaluate: Share and evaluate your solution
Re-practice: Write a JavaScript function to convert currency
Put JavaScript together with Event Handling
Today
1.
2.
3.
4.
5.
6.
Questions: From notes/reading/life?
Spreadsheet Review
Preview Lab # 4
Introduce: How can I write a program in JavaScript?
Explain:
JavaScript Functions, Branching (If, Else)
System Functions, For Loops, Widgets
Demo:
JavaScript Magic – follow along on laptop
Practice:
You solve a problem with a JavaScript
Evaluate: Share and evaluate your solution
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.)?
Cell Contents
Records:
Value
Bold
Italic
Underline
Align
Font
FontSize
FillColor
TextColor
Jane
TRUE
FALSE
FALSE
0 - Auto
Arial
10
Yellow
Red
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?
Use a Tree!:
•
Maintain pointers (links) from a cell, A,
to all of the cells, B, that reference A.
A
5
B1
8
B2
4
Spreadsheets II Review
What is the Algorithm for Dynamic recomputation?
Use a Tree!:
•
Maintain pointers (links) from a cell, A,
to all of the cells, B, that reference A.
A
•
Similarly, from B to all of the cells, 5
C, that reference B.
B1
8
B2
4
C1
13 ..
C2 ..
3
Spreadsheets II Review
What is the Algorithm for Dynamic recomputation?
Use a Tree!:
•
Maintain pointers (links) from a cell, A,
to all of the cells, B, that reference A.
A
•
Similarly, from B to all of the cells, 5
C, that reference B.
•
When the value in cell A is changed,
B1
8
B2
4
C1
13 ..
C2 ..
3
Spreadsheets II Review
What is the Algorithm for Dynamic recomputation?
Use a Tree!:
•
Maintain pointers (links) from a cell, A,
to all of the cells, B, that reference A.
A
•
Similarly, from B to all of the cells, 5
C, that reference B.
•
B1
8
B2
4
C1
13 ..
C2 ..
3
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,
Today
1.
2.
3.
4.
5.
6.
Questions: From notes/reading/life?
Spreadsheet Review
Preview Lab # 4
Introduce: How can I write a program in JavaScript?
Explain:
JavaScript Functions, Branching (If, Else)
System Functions, For Loops, Widgets
Demo:
JavaScript Magic – follow along on laptop
Practice:
You solve a problem with a JavaScript
Evaluate: Share and evaluate your solution
Re-practice: Write a JavaScript function to convert currency
Put JavaScript together with Event Handling
Today
1.
2.
3.
4.
5.
6.
Questions: From notes/reading/life?
Spreadsheet Review
Preview Lab # 4
Introduce: How can I write a program in JavaScript?
Explain:
JavaScript Functions, Branching (If, Else)
System Functions, For Loops, Widgets
Demo:
JavaScript Magic – follow along on laptop
Practice:
You solve a problem with a JavaScript
Evaluate: Share and evaluate your solution
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 <script> 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 <form action=“URL”> 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
<tr>
<td><h2>Text Box</h2></td>
<td>Title: <input type="text" size="20" maxlength="30"
name="title" value=""
onchange="window.alert(demoform.title.value)" >
</td>
</tr>
<tr>
<td><h2>Button</h2></td>
<td><input type="button" value="GO!" name="go"
onclick="window.alert(demoform.title.value)" >
</td>
</tr>
Basic JavaScript
• Everything inside <script> is a program
• Usually use <script language=“JavaScript”>
• We can use variables and expressions
– Pay = payRate*hours
• We can write and reuse our own functions
What are the variable names?
<FORM name=demoform>
<H1>HTML Form Widgets Demo</H1>
Title: <INPUT maxLength=30 name=title><br>
<INPUT type=button value=GO! name=go><br>
US Citizen: <INPUT type=checkbox CHECKED
name=citizen> <br>
Freshman<INPUT type=radio CHECKED name=year>
Sophomore<INPUT type=radio name=year>
Junior<INPUT type=radio name=year>
Senior<INPUT type=radio name=year> <br>
<TEXTAREA name=address rows=10>Type your address
here.</TEXTAREA>
<br>
<SELECT size=1 name=color>
<OPTION selected>red
<OPTION>yellow</OPTION>
</SELECT>
</FORM></BODY></HTML>
What are the variable names?
<FORM name=demoform>
<H1>HTML Form Widgets Demo</H1>
Title: <INPUT maxLength=30 name=title><br>
<INPUT type=button value=GO! name=go><br>
US Citizen: <INPUT type=checkbox CHECKED
name=citizen> <br>
Freshman<INPUT type=radio CHECKED name=year> All the
Sophomore<INPUT type=radio name= year>
same
Junior<INPUT type=radio name=year>
name
Senior<INPUT type=radio name=year> <br>
<TEXTAREA name=address rows=10>Type your address
here.</TEXTAREA>
<br>
<SELECT size=1 name=color>
<OPTION selected>red
<OPTION>yellow</OPTION>
</SELECT>
</FORM></BODY></HTML>
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).
Functions
• To create a function
function funcName( arg1, arg2, . . . )
{
JavaScript Code
Must have the
}
same name!
Reserved word
• 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!
An example function
function pay(payRate,hours)
{
return payRate*hours;
}
An example function
function pay(payRate,hours)
{
return payRate*hours;
}
Variables
Today
1.
2.
3.
4.
5.
6.
Questions: From notes/reading/life?
Spreadsheet Review
Preview Lab # 4
Introduce: How can I write a program in JavaScript?
Explain:
JavaScript Functions, Branching (If, Else)
System Functions, For Loops, Widgets
Demo:
JavaScript Magic – follow along on laptop
Practice:
You solve a problem with a JavaScript
Evaluate: Share and evaluate your solution
Re-practice: Write a JavaScript function to convert currency
Put JavaScript together with Event Handling
Function Demo
<Script language=“JavaScript”>
function sayHello()
{
window.alert("Hello " + demoform.title.value)
}
</Script>
<INPUT type=“button” name=“go” value=“GO!”
onclick=sayHello() >
Putting Strings Together
(concatenation)
•
•
•
•
Use the “+” sign to put strings together.
“Hello” + “There” equals “HelloThere”
“Hello” + “ There” equals “Hello There”
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
<html>
<head>
<Script language=“JavaScript”>
function sayHello()
{
alert("Hello " + demoform.title.value)
}
</Script></head>
<body><form>
<INPUT type=button value=GO! name=go onclick=sayHello() >
</form></body>
</html>
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(“<b>”+ var1+ “</b>”);
outputs “<b>Forever</b>” 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
Concatenate Operator
Function Demo
<html>
<head>
<script>
function sayHello()
{
window.alert("Hello " + myForm.go.value);
}
</script>
</head>
<body>
<form name="myForm">
<input type="button" name="go" value="GO!"
onclick=sayHello() />
</form>
</body>
<html>
Three Programming Constructs
Sequential
Do first part
to completion
Do second part
to completion
Conditional
True
Test Cond.
False
Iterative
Test Cond.
True
Subtask 1
Subtask 2
Subtask 1
False
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
<form name="myForm"></form>
myForm.myName.value
<input type="text" name="myName" size="25" />
<input type="checkbox" name="clothes" value="Tie" />Tie
<input type="checkbox" name="clothes" value="Hat" />Hat
myForm.clothes[0].value
<input type="checkbox" name="clothes" value="Coat"
/>Coat
myForm.clothes[0].checked
<input type="radio" name="year" value="Soph" />Sophomore
<input type="radio" name="year" value="Jun" />Junior
<input type="radio" name="year" value="Sen" />Senior
myForm.year[1].value
<select name="color">
<option value="R">red</option>
<option value="G">green</option>
<option value="B">blue</option>
</select>
my Form.year[1].checked
myForm.color.value
myForm.color[2].value
myForm.color[2].selected
<textarea name="myBox" cols="25" rows="2">
</textarea>
myForm.myBox.value
Today
1.
2.
3.
4.
5.
6.
Questions: From notes/reading/life?
Spreadsheet Review
Preview Lab # 4
Introduce: How can I write a program in JavaScript?
Explain:
JavaScript Functions, Branching (If, Else)
System Functions, For Loops, Widgets
Demo:
JavaScript Magic – follow along on laptop
Practice:
You solve a problem with a JavaScript
Evaluate: Share and evaluate your solution
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
1.
2.
3.
4.
5.
6.
Questions: From notes/reading/life?
Spreadsheet Review
Preview Lab # 4
Introduce: How can I write a program in JavaScript?
Explain:
JavaScript Functions, Branching (If, Else)
System Functions, For Loops, Widgets
Demo:
JavaScript Magic – follow along on laptop
Practice:
You solve a problem with a JavaScript
Evaluate: Share and evaluate your solution
Re-practice: Write a JavaScript function to convert currency
Put JavaScript together with Event Handling
Today
1.
2.
3.
4.
5.
6.
Questions: From notes/reading/life?
Spreadsheet Review
Preview Lab # 4
Introduce: How can I write a program in JavaScript?
Explain:
JavaScript Functions, Branching (If, Else)
System Functions, For Loops, Widgets
Demo:
JavaScript Magic – follow along on laptop
Practice:
You solve a problem with a JavaScript
Evaluate: Share and evaluate your solution
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
?
myForm.myName.value
<tr>
<td><h2>Text Box</h2>
</td>
<td>Name <input type="text" name="myName"
id="title" size="20" maxlength="30" />
</td>
</tr>
Check Box
?
myForm.citizen.checked
<tr>
<td><h2>Check Box</h2>
</td>
<td>US Citizen:
<input type="checkbox" checked="checked"
name="citizen" id="citizen" value="US" />
</td>
</tr>
Radio Buttons
?
myForm.year[0].checked
<tr>
<td><h2>Radio Buttons</h2>
</td>
<td>
<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
</td>
</tr>
Text Area
?
myForm.address.value
<tr>
<td><h2>Text Area</h2></td>
<td><textarea name="address" id="address"
cols="20" rows="10">Type your address here.
</textarea>
</td>
</tr>
Selection List
?
myForm.color[0].selected
<tr>
<td><h2>Selection List</h2></td>
<td>
<select name="color" id="color" size="1">
<option value="R" selected="selected">red</option>
<option value="G">green</option>
<option value="B">blue</option>
<option value="C">cyan</option>
<option value="M">magenta</option>
<option value="Y">yellow</option>
</select>
</td>
</tr>