<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Linda 2002 Practice</title>
<script type="text/javascript">
var window1
var window2
function makeWindows()
{
window1 = window.open("","", "Height=300, width=300");
window2 = window.open("","", "Height=300, width=300");
}
function writeData()
{
window1.document.write("<h1>Greetings</h1>, my name is Window one.");
window2.document.write("Greetings, <h1>my</h1> name is Window two.");
}
makeWindows();
if(window.confirm("Add data to Windows?"))
{
writeData();
}
</script>
</head>
<body>
</body>
</html>
LAB #3 JavaScript
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<style type="text/css" media="all">
.focused {
color:dark grey;
font-family:arial,san-serif;
padding:7px;
border:1px solid black;
line-height:3;
width:400px;
height:300px;
}
.unFocused {
color:grey;
font-family:arial,san-serif;
padding:7px;
border:1px solid silver;
line-height:3;
width:400px;
height:300px;
}
table {margin-left:auto;
margin-right:auto;}
</style>
<script style="text/javascript">
var newPerson;
function createPerson(){
// need to use the keyword this, this used inside a function makes it a constructor function
this.firstName = "";
this.lastName = "";
this.number = "";
this.areaCode = "";
}
function assignValues(){
alert("hello! function");
newPerson = new createPerson();
newPerson.firstName = document.getElementById('firstName').value;
newPerson.lastName = document.getElementById('lastName').value;
newPerson.areaCode = document.getElementById('areaCode').value;
newPerson.number = document.getElementById('number').value;
window.alert(newPerson.firstName);
displayValues();
}
function displayValues(){
// var results = newPerson.lastName + ", " + newPerson.firstName + ", " + newPerson.areaCode + " " + newPerson.number;
var results = generateResults()
document.getElementById('displayResults').innerHTML = results;
document.getElementById("entryForm").className = "unFocused";
document.getElementById("displayResults").className="focused";
}
function generateResults(){
var genResults;
var fullName;
var fullNumber;
if (newPerson.firstName != "" && newPerson.lastName != "")
fullName = newPerson.lastName + ", " + newPerson.firstName + " ";
else if (newPerson.firstName != "" && newPerson.lastName == "")
fullName = newPerson.firstName + " ";
else if (newPerson.firstName == "" && newPerson.lastName != "")
fullName = newPerson.lastName + " ";
else
fullName = "unknown";
if (newPerson.areaCode != "" && newPerson.number != "")
fullNumber = "(" + newPerson.areaCode + ") " + newPerson.number;
else
fullNumber = "";
genResults = fullName + fullNumber;
return genResults;
}
function focusOnForm(){
document.getElementById("entryForm").className = "focused";
document.getElementById("displayResults").className="unFocused";
}
function clearValues() {
document.getElementById("firstName").value = "";
document.getElementById("lastName").value = "";
document.getElementById('areaCode').value = "";
document.getElementById('number').value = "";
}
</script>
</head>
<body onload="focusOnForm()">
<table>
<tr colspan="2">
<td>
<form id="entryForm">
First Name: <input type="text" id="firstName" onclick="focusOnForm()"></input>
<BR/>
Last Name: <input type="text" id="lastName" onclick="focusOnForm()"></input>
Area Code: <input type="text" id="areaCode" onclick="focusOnForm()"></input>
Phone Number: <input type="text" id="number" onclick="focusOnForm()"></input>
<BR/>
<input type="button" value="submit" onclick="assignValues()"></input> </input>
</form>
</td>
<td>
<div id="displayResults">
</div>
</td>
</tr>
</table>
</body>
</html>
No comments:
Post a Comment