Screen Input and Output

	The form of <form>

Manipulating Data

	Last time, we saw JS put text (4) in the source file before finishing the page
	Now we see JS
	create buttons
	and windows,
	and manipulate
	data in the finished
	page

Forms

	Input & Output in JS are given in forms
		Inside <form> tags
		Notice
			type
			value
			relationship to text

More Forms

		Notice
			type
			name
			size
			relationship to text

Radio Control

		Notice
			type
			name (common)
			relationship to text

Input/Output

	Windows are input or output based on your point of view …
		Programming uses computer’s view
			It’s obvious that buttons are inputs
			Windows are inputs, but if the computer puts information in them, they’re outputs

Events Cause Processing

	After drawing a page, browsers sit idle waiting for something to happen … when we give input, it cause events
	Processing the input is the task of an event handler
		Event types
			onClick
			onChange
			onMouseOver

Observe Actions

‘onClick’ Event for Buttons

		Event handlers say what
		to do if event happens …
		“put ‘Smiley’ in the output
		window”

‘onClick’ for Buttons

		Notice …
			‘onClick’ event does
			the task: place ‘Smiley’
			in the output window

x.value

		Notice …
			the value of a text
			window is the contents
			of the window
			x.value

‘onChange’ Event

		Notice
			names
			+ is concatenate

Name A Different Window

Result

Conditional

	Conditionals test if an expression is true or not
			General form …
			if (<Boolean expression>)
			<Then statement>;
			For example
			if (day == "Friday")
			evening_plan = "party";

If-Then-Else

	Branch both ways with If-Then-Else
			if (<Boolean expression>)
			<Then statement>;
			else
			<Else Statement>;
			Example … if ((year%4)== 0) {
			leapYear = true;
			febDays = febDays+1;
			}
			else
			leapYear = false;

Project 2: Exercise

Purple Concentrate