2. Homework
• Submit a brief essay on which do you prefer –
client side scripting versus server side
scripting and why?
• Read JavaScript chapters 6 ,7, 8
3. Web Technology Stack
Data – What does it know?
Behavior – What does it do?
Behavior – What does it do?
Presentation – What does it look like?
Structure – What does this logically mean?
Richness
of the
Experience
5. Design by fiat
“I read about JavaScript and it’s
really cool. So let’s refactor the
future value app. Do me a favor,
make the background orange…I’m
a huge Jeremy Lin fan.”
15. The world’s most misunderstood
programming language
“JavaScript has so much
expressive power that you
can get a lot done without
knowing what your doing.”
--Douglas Crockford
16. Introduction of JavaScript
JavaScript is an interpreted
programming or script
language invented by Netscape
programmer Brendan Eich
JavaScript allows web
developers to manipulate the
DOM on the client-side
17. Scripting Languages and
the First Browser War
JavaScript JScript
Sept 1995 Nov 1996
Proprietary
JScript is identical to JavaScript but…
•Some JavaScript commands not supported in JScript
•Some JScript commands not supported in JavaScript
18. European Computer Manufacturing
Association Takes Over
ECMAScript
Jun 1997
Standard
ECMAScript is based on JavaScript, Jscript, and
ActionScript
•ECMA-262 5th edition codifies de facto interpretations of
the language specification that have become common
among browsers
21. Agenda
• Basic JavaScript skills
⇒ How to include JavaScript
• How to use objects
• How to code control statements
• How to create and use functions
27. A bit more on Statements
Statements define what will and how something
will be done. Types:
• Conditional Statements
• Loop Statements
• Object Manipulation Statements
• Exception Handling Statements
• Comment Statements
52. JavaScript Variables
are Dynamically Typed
Any variable in JavaScript can hold any data type
•The data type can change midway through the
program
var month;
month = April;
month = 12;
54. A little on Objects
Objects refers to things, such as windows, documents,
images, tables, forms, buttons or links, etc.
•An object has properties (values) and has methods
(functions) associated to that object.
55. Built ins Objects
• JavaScript Object Model
• Document Object Model
• Browser Object Model
60. Agenda
• Basic JavaScript skills
• How to use objects
⇒ Objects, properties & methods
⇒ How to use window objects & document objects
• How to code control statements
• How to create and use functions
69. Agenda
• Basic JavaScript skills
• How to use objects
⇒ Objects, properties & methods
⇒ How to use window objects & document objects
⇒ How to use number, strings, & date objects
⇒ How to get & display with a Textbox object
• How to code control statements
• How to create and use functions
73. Agenda
• Basic JavaScript skills
• How to use objects
• How to code control statements
⇒ How to code conditional expressions
• How to create and use functions
78. More common Programmer errors
1. Missing quotations marks for strings
2. Mismatching single/double quotation marks
3. Referencing objects that don’t yet exists
4. Using methods with objects that don’t support those
methods
5. Using proper identifiers
6. Proper placement
Adapted from www.javascriptsource.com/debug
79. Agenda
• Basic JavaScript skills
• How to use objects
• How to code control statements
⇒ How to code conditional expressions
⇒ How to code if statement
• How to create and use functions
84. Agenda
• Basic JavaScript skills
• How to use objects
• How to code control statements
⇒ How to code conditional expressions
⇒ How to code if statements
⇒ How to code while and for statements
• How to create and use functions
85. for / while
Loop through statement block
as long as a condition is true
statement True
condition
block
False
88. Agenda
• Basic JavaScript skills
• How to use objects
• How to code control statements
• How to create and use functions
⇒ How to create and call a function
89. What is a Function?
A set of statements that return reliable
results.
Also known as subprogram, procedure,
subroutine
89
95. Agenda
• Basic JavaScript skills
• How to use objects
• How to code control statements
• How to create and use functions
⇒ How to create and call a function
⇒ How to code an event handler
96. Calling a function
• There are two common ways to call a
function:
1. From another function
2. From an event
103. display_results.php
// get the data from the form
$investment = $_POST['investment'];
$interest_rate = $_POST['interest_rate'];
$years = $_POST['years'];
// validate investment entry
if ( empty($investment) ) {
$error_message = 'Investment is a required field.';
} else if ( !is_numeric($investment) ) {
$error_message =
'Investment must be a valid number.';
} else if ( $investment <= 0 ) {
$error_message =
'Investment must be greater than zero.';
104. display_results.php
// validate interest rate entry
} else if ( empty($interest_rate) ) {
$error_message =
'Interest rate is a required field.';
} else if ( !is_numeric($interest_rate) ) {
$error_message =
'Interest rate must be a valid number.';
} else if ( $interest_rate <= 0 ) {
$error_message =
'Interest rate must be greater than zero.';
// set error message to empty string
} else {
$error_message = '';
}
// if an error message exists, go to the index page
if ($error_message != '') {
include('index.php');
exit(); }
107. js/future_value.js
// Create main calculation function
// Get the user entries from the first three text boxes
// Set output text box value to be an empty string
// Test the three input values for validity
// Calculate future value
// Return output rounded to 2 decimal places
// Auto load focus
108. js/future_value.js
// Create main calculation function
calculate_click = function () {
// Get the user entries from the first three text boxes
// Return output rounded to 2 decimal places
}
// Auto load focus
109. js/future_value.js
// Get the user entries from the first three text boxes
var $investment;
var $investment = document.getElementById("investment").value;
var $investment = parseFloat( $investment );
var $interest_rate;
var $interest_rate =
document.getElementById("interest_rate").value;
var $interest_rate = parseFloat( $interest_rate );
var $years;
var $years = document.getElementById("years").value;
var $years = parseFloat( $years );
111. js/future_value.js
// Test the three input values for validity
if (isNaN($investment) || $investment <= 0) {
alert("Investment must be a valid numbernand
greater than zero.");
} else if(isNaN($interest_rate) || $interest_rate <= 0) {
alert("Rate must be a valid numbernand
greater than zero.");
} else if(isNaN($years) || $years <= 0) {
alert("Years must be a valid numbernand
greater than zero.");
} else {
//calculate future value
//return output rounded to 2 decimal places
}
114. js/future_value.js
} else {
//calculate future value
//return output rounded to 2 decimal places
document.getElementById("future_value").value =
$future_value.toFixed(2);
}
115. js/future_value.js
// auto load focus
window.onload = function () {
document.getElementById("investment").focus();
}
03/04/12 6:00 PM Slide 1
116. Pop Quiz
True or False: Can I declare a variable, obtain
input and convert to a floating point numerical
value all at once?
117. Pop Quiz
True via object chaining
// Get the user entries from the first three text boxes
var $investment = parseFloat (
document.getElementById("investment").value );
var $interest_rate = parseFloat(
document.getElementById("interest_rate").value );
var $years = parseFloat (
document.getElementById("years").value );
118. Murach’s uses a JavaScript helper function
/* Create a $ helper function that returns any DOM element
value */
var $ = function (id) {
return document.getElementById(id);
}
/* Get the data from the user by calling the $ helper
function */
var investment = parseFloat( $("investment").value );
var annualRate = parseFloat( $("rate").value );
var years = parseInt( $("years").value );
/* Set the intial value of the fourth text box to be an
empty string by calling the $ helper function */
$("future_value").value = "";
119. Replace JavaScript Function with HTML5 attribute
// auto load focus
window.onload = function () {
document.getElementById("investment").focus();
}
<label for="investment">Investment:</label>
<input type="text" name="investment" id="investment"
autofocus /><br /-->
120. Homework
• Submit a brief essay on which do you prefer –
client side scripting versus server side
scripting and why?
• Read JavaScript chapters 6 ,7, 8