Skip to content
GitLab
Commit c84dc689 authored by O'Reilly Media, Inc.'s avatar O'Reilly Media, Inc.
Browse files

Initial commit

parents
Hide whitespace changes
Inline Side-by-side
JS examples/chapter01/house/house1.html 0 → 100644
View file @ c84dc689
<html>
<head>
<title>House Finder</title>
</head>
<body>
<div id="frame">
<div class="heading">Ready to find a new house?</div>
<div id="left">
<img src="house.png" alt="House" />
</div>
<form name="orderform">
<div class="field">Enter your annual income: <input id="income" type="text" size="12" /></div>
<div class="field">Enter the number of bedrooms: <input id="bedrooms" type="text" size="6" /></div>
<div class="field">Enter your ZIP code: <input id="zip" type="text" size="10" /></div>
</form>
</div>
</body>
</html>
JS examples/chapter01/house/house2.html 0 → 100644
View file @ c84dc689
<html>
<head>
<title>House Finder</title>
<style type="text/css">
body {
font:14px arial;
text-align:center;
}
#frame {
width:400px;
}
#left {
float:left;
width:110px;
}
div.heading {
font:16px arial;
font-weight:bold;
margin-bottom:15px;
}
div.field {
margin-bottom:10px;
text-align:right;
}
</style>
</head>
<body>
<div id="frame">
<div class="heading">Ready to find a new house?</div>
<div id="left">
<img src="house.png" alt="House" />
</div>
<form name="orderform">
<div class="field">Enter your annual income: <input id="income" type="text" size="12" /></div>
<div class="field">Enter the number of bedrooms: <input id="bedrooms" type="text" size="6" /></div>
<div class="field">Enter your ZIP code: <input id="zip" type="text" size="10" /></div>
</form>
</div>
</body>
</html>
JS examples/chapter01/house/house3.html 0 → 100644
View file @ c84dc689
<html>
<head>
<title>House Finder</title>
<style type="text/css">
body {
font:14px arial;
text-align:center;
}
#frame {
width:400px;
}
#header {
font:16px arial;
font-weight:bold;
margin-bottom:15px;
}
#left {
float:left;
width:110px;
}
div.field {
margin-bottom:10px;
text-align:right;
}
</style>
<script type="text/javascript">
function validateNumber(value) {
// Validate the number
// if (!isNumber(value))
alert("Please enter a number.");
}
function validateZIPCode() {
// Validate the ZIP code
// if (!isZIPCode(value))
alert("Please enter a ZIP code in the form XXXXX.");
}
function calcPrice() {
var maxPrice = document.getElementById("income").value * 4;
alert("You can afford a house that costs up to $" + maxPrice + ".");
}
function findHouses(form) {
var bedrooms = document.getElementById("bedrooms").value;
var zipCode = document.getElementById("zip").value;
// Display a list of matching houses from the server
form.submit();
}
</script>
</head>
<body>
<div id="frame">
<div id="header">Ready to find a new house?</div>
<div id="left">
<img src="house.png" alt="House" />
</div>
<form name="orderform" action="..." method="POST">
<div class="field">Enter your annual income:
<input id="income" type="text" size="12" onblur="validateNumber(this.value)"/></div>
<div class="field">Enter the number of bedrooms:
<input id="bedrooms" type="text" size="6" onblur="validateNumber(this.value)"/></div>
<div class="field">Enter your ZIP code:
<input id="zip" type="text" size="10" onblur="validateZIPCode(this.value)"/></div>
<input type="button" value="Calculate Price" onclick="calcPrice();" />
<input type="button" value="Shop for Houses" onclick="findHouses(this.form);" />
</form>
</div>
</body>
</html>
JS examples/chapter01/house/housematches.html 0 → 100644
View file @ c84dc689
<html>
<head>
<title>House Finder - Matches</title>
<style type="text/css">
body {
font:14px arial;
text-align:center;
}
#frame {
width:400px;
}
div.heading {
font:16px arial;
font-weight:bold;
margin-bottom:15px;
}
</style>
</head>
<body>
<div id="frame">
<div class="heading">The following houses were found:</div>
<p>110 Elm Street <input type="button" value="View" /></p>
<p>400 Maple Lane <input type="button" value="View" /></p>
<p>847 Main Street <input type="button" value="View" /></p>
</div>
</body>
</html>
JS examples/chapter01/irock/irock1.html 0 → 100644
View file @ c84dc689
<html>
<head>
<title>iRock - The Virtual Pet Rock</title>
</head>
<body>
<div style="margin-top:100px; text-align:center">
<img id="rockImg" src="rock.png" alt="iRock" />
</div>
</body>
</html>
JS examples/chapter01/irock/irock2.html 0 → 100644
View file @ c84dc689
<html>
<head>
<title>iRock - The Virtual Pet Rock</title>
</head>
<body onload="alert('Hello, I am your pet rock.');">
<div style="margin-top:100px; text-align:center">
<img id="rockImg" src="rock.png" alt="iRock" />
</div>
</body>
</html>
JS examples/chapter01/irock/irock3.html 0 → 100644
View file @ c84dc689
<html>
<head>
<title>iRock - The Virtual Pet Rock</title>
<script type="text/javascript">
function touchRock() {
var userName = prompt("What is your name?", "Enter your name here.");
if (userName) {
alert("It is good to meet you, " + userName + ".");
document.getElementById("rockImg").src = "rock_happy.png";
}
}
</script>
</head>
<body onload="alert('Hello, I am your pet rock.');">
<div style="margin-top:100px; text-align:center">
<img id="rockImg" src="rock.png" alt="iRock" style="cursor:pointer" onclick="touchRock();" />
</div>
</body>
</html>
JS examples/chapter02/donuts/donuts.css 0 → 100644
View file @ c84dc689
body {
font:14px arial;
text-align:center;
}
#frame {
margin-top:15px;
width:440px;
}
#left {
float:left;
width:130px;
}
div.heading {
font:20px arial;
font-weight:bold;
margin-bottom:5px;
}
div.subheading {
font:15px arial;
font-style:italic;
margin-bottom:10px;
}
div.field {
margin-bottom:5px;
text-align:right;
}
JS examples/chapter02/donuts/donuts.php 0 → 100644
View file @ c84dc689
<html>
<body>
<?php
$num = rand(1000, 10000);
$name = $_POST['name'];
$minutes = $_POST['pickupminutes'];
$total = $_POST['total'];
echo "<h1>Duncan's Just-In-Time Donuts</h1>";
echo "<h2>Order Confirmation</h2>";
echo "<strong>Order #" . $num . "</strong><br />";
echo "Customer name: " . $name . "<br />";
echo "Ready in: " . $minutes . " minutes<br />";
echo "Total: <em>" . $total . "</em>";
?>
</body>
</html>
JS examples/chapter02/donuts/donuts1.html 0 → 100644
View file @ c84dc689
<html>
<head>
<title>Duncan's Just-In-Time Donuts</title>
<link rel="stylesheet" type="text/css" href="donuts.css" />
<script type="text/javascript">
function updateOrder() {
const TAXRATE;
const DONUTPRICE;
var numCakeDonuts = document.getElementById("cakedonuts").value;
var numGlazedDonuts = document.getElementById("glazeddonuts").value;
var subTotal = (numCakeDonuts + numGlazedDonuts) * DONUTPRICE;
var tax = subTotal * TAXRATE;
var total = subTotal + tax;
document.getElementById("subtotal").value = "$" + subTotal.toFixed(2);
document.getElementById("tax").value = "$" + tax.toFixed(2);
document.getElementById("total").value = "$" + total.toFixed(2);
}
function placeOrder(form) {
// Submit the order to the server
form.submit();
}
</script>
</head>
<body>
<div id="frame">
<div class="heading">Duncan's Just-In-Time Donuts</div>
<div class="subheading">All donuts 50 cents each, cake or glazed!</div>
<div id="left">
<img src="donuttime.png" alt="Just-In-Time Donuts" />
</div>
<form name="orderform" action="donuts.php" method="POST">
<div class="field">
Name: <input type="text" id="name" name="name" value="" />
</div>
<div class="field">
# of cake donuts: <input type="text" id="cakedonuts" name="cakedonuts" value=""
onchange="updateOrder();" />
</div>
<div class="field">
# of glazed donuts: <input type="text" id="glazeddonuts" name="glazeddonuts" value=""
onchange="updateOrder();" />
</div>
<div class="field">
Minutes 'til pickup: <input type="text" id="pickupminutes" name="pickupminutes" value="" />
</div>
<div class="field">
Subtotal: <input type="text" id="subtotal" name="subtotal" value="" readonly="readonly" />
</div>
<div class="field">
Tax: <input type="text" id="tax" name="tax" value="" readonly="readonly" />
</div>
<div class="field">
Total: <input type="text" id="total" name="total" value="" readonly="readonly" />
</div>
<div class="field">
<input type="button" value="Place Order" onclick="placeOrder(this.form);" />
</div>
</form>
</div>
</body>
</html>
JS examples/chapter02/donuts/donuts2.html 0 → 100644
View file @ c84dc689
<html>
<head>
<title>Duncan's Just-In-Time Donuts</title>
<link rel="stylesheet" type="text/css" href="donuts.css" />
<script type="text/javascript">
function updateOrder() {
const TAXRATE = 0.0925;
const DONUTPRICE = 0.50;
var numCakeDonuts = document.getElementById("cakedonuts").value;
var numGlazedDonuts = document.getElementById("glazeddonuts").value;
var subTotal = (numCakeDonuts + numGlazedDonuts) * DONUTPRICE;
var tax = subTotal * TAXRATE;
var total = subTotal + tax;
document.getElementById("subtotal").value = "$" + subTotal.toFixed(2);
document.getElementById("tax").value = "$" + tax.toFixed(2);
document.getElementById("total").value = "$" + total.toFixed(2);
}
function placeOrder(form) {
// Submit the order to the server
form.submit();
}
</script>
</head>
<body>
<div id="frame">
<div class="heading">Duncan's Just-In-Time Donuts</div>
<div class="subheading">All donuts 50 cents each, cake or glazed!</div>
<div id="left">
<img src="donuttime.png" alt="Just-In-Time Donuts" />
</div>
<form name="orderform" action="donuts.php" method="POST">
<div class="field">
Name: <input type="text" id="name" name="name" value="" />
</div>
<div class="field">
# of cake donuts: <input type="text" id="cakedonuts" name="cakedonuts" value=""
onchange="updateOrder();" />
</div>
<div class="field">
# of glazed donuts: <input type="text" id="glazeddonuts" name="glazeddonuts" value=""
onchange="updateOrder();" />
</div>
<div class="field">
Minutes 'til pickup: <input type="text" id="pickupminutes" name="pickupminutes" value="" />
</div>
<div class="field">
Subtotal: <input type="text" id="subtotal" name="subtotal" value="" readonly="readonly" />
</div>
<div class="field">
Tax: <input type="text" id="tax" name="tax" value="" readonly="readonly" />
</div>
<div class="field">
Total: <input type="text" id="total" name="total" value="" readonly="readonly" />
</div>
<div class="field">
<input type="button" value="Place Order" onclick="placeOrder(this.form);" />
</div>
</form>
</div>
</body>
</html>
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment

© 2021 O’Reilly Media, Inc. All trademarks and registered trademarks appearing on oreilly.com are the property of their respective owners. Terms of Service • Privacy Policy • Editorial Independence