Programming
Week 5
LBSC 690
Information Technology
Software
•	Software models aspects of reality
–	Input and output represent the state of the world
–	Software describes how the two are related

•	Examples
–	Ballistic computations
–	Alta Vista
–	Microsoft Word
Types of Software

•	Application programs (e.g., Powerpoint)
–	What you normally think of as a “program’’
•	Compilers and interpreters 
–	Programs used to write other programs
•	Operating system (e.g., Windows XP)
–	Manages display, CPU, memory, disk, tape, 
•	Embedded program (e.g., BIOS)
–	Permanent software inside some device
Programming Languages
•	Used to specify every detail of the model

•	Special purpose
–	Able to specify an entire class of models
•	Spreadsheets (Excel, ...)
•	Databases (Access, Oracle, ...)

•	General purpose
–	Able to specify any possible model
•	JavaScript, Java, Perl, C, C++, ...
History of Programming
•	Machine language
–	Language that machine can understand
•	Assembly language
–	Assembler changes names to machine code
•	High-level languages
–	Compiler/Interpreter translates to machine language
–	FORTRAN, COBOL, C, C++, Javascript
•	Visual programming language
–	Visually arrange the interface components
–	Visual Basic, …
Machine Language
•	Everything is a binary number
–	Operations
–	Data
•	For instance

00001000	ADD
00010101	first number (21)
01010110	second number (86)
Assembly Language
•	Symbolic instruction codes and addresses
–	Symbolic instruction code “ADD”
–	Symbolic address “SUM1”
•	For instance
High level Languages
•	Procedural (modular) Programming
–	Group instructions into meaningful abstractions
–	C, Pascal, Perl
•	Object oriented programming
–	Group “data” and “methods” into “objects”
–	Naturally represents the world around us
–	C++, Java, JavaScript
Object Models
•	Represent things in the world as “objects”
–	Simplest objects are “variables”
•	Represented with a name (n, teacher, …) 
•	May be assigned a value (n=4, teacher=“Doug”, …)

•	Represent actions with “methods”
–	Simplest methods are “operations”
•	Represented with a symbol (+, -, *, /, ^, …)

•	“Classes” group objects with methods
–	Models how kinds of things behave

•	Objects are instances of classes
Data Types
•	Boolean: 	true/false
•	Numbers: 	5, 9, 3.1415926
•	Strings: 		“Hello World”
•	Variables: 	f, celsius,  
•	Class:              Temperature
•	Instance:          collegeParkTemperature
•	Method:		toCelsius(f)
Operations and Assignments
•	-x				reverse the sign of x (negation)       
•	6+5				Add  6 and 5 (numeric)   
•	“Hello” + “World” 		Concatenate two strings
•	2.1 * 3 			Multiply two values
•	x++				increase value of x by 1

•	x = 5			set the value of x to be 5
•	x += y			x = x + y
•	x *= 5			x = x * 5
Function
•	A set of codes for achieving a simple task
•	Can be reused many times

function toCelsius(f) {
	celsius = 5/9 * (f-32)
	return celsius
} 	
Statements
•	Simple assignment statements
celsius = 5/9 * (f-32)

•	Statements that invoke a method
Temperature.toCelsius(104)

•	Return a value from a method
return celsius
Basic Control Structures
•	Sequential

•	Conditional

•	Repetition

Sequential Control Structure

Conditional Selection Control Structure

if (gender == “male”) {
	greeting = “Hello, Sir”
}
else {
	greeting = “Hello, Madam”
}
Comparisons
•	x == y 		returns true if x and y are equal
•	x != y  		returns true if x and y are not equal
•	x > y		returns true if x is greater than y
•	x <= y    		returns true if x is smaller than or equal  
				to y
•	x && y		returns true if both x and y are true           
•	x || y		returns true if either x or y is true
•	!x			returns true if x is false
Repetition Control Structure

Arrays
•	A set of elements
–	For example, the number of days in each month

•	Each element is assigned an index
–	A number used to refer to that element
•	For example, x[4] is the fifth element (count from zero!)
–	Arrays and repetitions work naturally together
Programming for the Web
•	Common Gateway Interface (CGI) [Server side]
–	Forms encode field values into a URL
–	CGI passes field values to a Perl program
–	Program generates a web page as a response

•	JavaScript [Client-side, interpreted]
–	Human-readable “source code” sent to the browser
–	Web browser runs the program

•	Java applets [Client-side, compiled]
–	Machine-readable “bytecode” sent to browser
–	Web browser runs the program
JavaScript
<HTML>
<HEAD>
	<TITLE>My first script</TITLE>
</HEAD>
<BODY BGCOLOR=WHITE>
<H1>
	<SCRIPT LANGUAGE=JAVASCRIPT TYPE="TEXT/JAVASCRIPT">
		document.write("Hello, world!")
	</SCRIPT>
</H1>
</BODY></HTML>

Try it at http://www.umiacs.umd.edu/~daqingd/Courses/firstscript.html
Handling Events
•	Events: 
–	actions that users perform while visiting the page
–	Embedded in modern GUI 

•	Use event handlers to response events
–	Event handlers triggered by events
–	Examples of event handlers in Javascript
•	onMouseover: the mouse moved over an object
•	onMouseout: the mouse moved off an object
•	onClick: the user clicked on an object

A Simple  rollover.html
•	Open Netscape, not IE
•	Type in URL http://www.umiacs.umd.edu/~daqingd/Courses/rollover.htm
•	Move mouse over and away the image
•	View source
–	flyer, tank are variables (“new Image”)
–	flyer.src specifies the value
–	Event handlers “onMouseover” and “onMouseoff”
–	Name of the image is defined by NAME = “images”
–	<!– Hide script from old browsers …
–	If (document.images) { … to test browser function
Using Function
•	Repetitive tasks => functions
•	Load  http://www.umiacs.umd.edu/~daqingd/Courses/multirollover1.htm
•	View sources
•	Load http://www.umiacs.umd.edu/~daqingd/Courses/multirollover2.htm 
•	View sources
–	Function chgImg handle changing images for all
–	Program is shorter and clearer
–	document.textField equal to document[“textField”]
Hands On: 
Adopt a JavaScript Program
•	Launch a Web browser
–	Internet Explorer would be the best choice
•	http://www.umiacs.umd.edu/~daqingd/Courses/selector.htm

•	See how it behaves if you are 13 (or 65)

•	View source and read the program

•	Save a local copy

•	Make some changes and see how it works
JavaScript Resources
•	Google “javascript”
–	More than you want to read

•	Dr Allen’s javascript page
–	http://www.glue.umd.edu/~rba/COURSES/TECHNOLOGY/JAVASCRIPT/

•	Engineering and Physical Sciences Library
 Discussion Point: 
Mythical Person-Month
•	Why is software development different from manufacturing car?

•	If it would take one person three months, why does it take four people SIX months?
Programming is Creative Activity
•	Three stages
–	Planning
–	Realization
–	testing
•	Hard to estimate right 
•	Pressure to estimate too low
•	Assume everything will go well
Estimating Completion Time
•	Rules of thumb
–	1/3 specification
–	1/6 coding
–	1/2 test planning, testing, and fixing!
•	Add time for coding to learn as you go, but don’t take time away from the other parts!
–	Reread the section on “gutless estimating” if you are tempted
Person /= Months
•	Interchangeable only when partitions 
–	not sequential constrained
–	not involve communication among them
–	no training needed
•	Otherwise, 
–	Keep sequential 
–	Effort of communication added
–	Effort of training added
–	More people means more communications
Communications
•	Sort of like continuous training
–	Who needs to know what I just learned?
•	Can be minimized by good partitioning
–	Limit the number of interfaces
•	Can be facilitated by computers
–	Asynchronous communication techniques
•	Email, private newsgroups, voice mail