<!-- figure 22-1 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
.warning {
color: yellow;
border: thick dotted yellow;
}
.important-warning {
color: yellow;
border: thick dotted yellow;
font-weight: bold;
}
</style>
</head>
<body>
<div class="warning">Warning!</div>
<div class="important-warning">Important Warning!</div>
</body>
</html>
<!-- figure 22-2 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
.warning {
color: yellow;
border: thick dotted yellow;
}
.important-warning {
@extend .warning;
font-weight: bold;
}
</style>
</head>
<body>
<div class="warning">Warning!</div>
<div class="important-warning">Important Warning!</div>
</body>
</html>
<!-- figure 22-3 -->
<!DOCTYPE html>
<html lang="en-US">
<head><title>Basic page</title></head>
<body>
<script type="text/javascript">
document.write('Hello World!');
</script>
<noscript>
<p>Browser does not support JavaScript or JavaScript has been turned off.</p>
</noscript>
</body>
</html>
<!-- figure 22-4 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<script type="text/javascript">
function message() {
document.write('Hello World!');
}
</script>
</head>
<body onload="message()">
<noscript>
<p>Browser does not support JavaScript or JavaScript has been turned off.</p>
</noscript>
</body>
</html>
<!-- figure 22-5 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<script type="text/javascript" src="scripts/test.js"></script>
</head>
<body onload="message()">
</body>
</html>
<!-- figure 22-6 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
</head>
<body onload="message()">
<script type="text/javascript" src="scripts/test.js"></script>
</body>
</html>
<!-- figure 22-7 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<script type="text/javascript">
function changeBackground(color) {
document.body.style.background=color;
}
</script>
</head>
<body>
<button onclick="changeBackground('gray')">Change colour</button>
</body>
</html>
<!-- figure 22-8 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<script type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
</head>
<body>
<button onclick="$('body').css('background', 'gray')">
Change color
</button>
</body>
</html>
<!-- figure 22-11 -->
<!DOCTYPE html>
<html lang="en-US">
<head> Form </head>
<body>
<form action="php/Figure_22_12.php" method="post">
Name:<input type="text" name="name">
Age:<input type="text" name="age">
<input type="submit">
</form>
</body>
</html>
<!-- figure 22-13 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<script language="javascript" type="text/javascript">
function ajaxFunction(){
var ajaxRequest;
ajaxRequest = new XMLHttpRequest();
ajaxRequest.open("GET", "php/Figure_22_14.php", true);
ajaxRequest.send(null);
ajaxRequest.onreadystatechange = function(){
if(ajaxRequest.readyState == 4){
document.dataForm.time.value = ajaxRequest.responseText;
alert(ajaxRequest.responseText);
}
}
}
</script>
</head>
<body>
<form name="dataForm">
Current Time: <input type="text" name="time"><br>
<input type="button" onclick="ajaxFunction()" value="Check Time">
</form>
</body>
</html>
<!-- figure 22-15 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<script language="javascript" type="text/javascript">
function ajaxFunction(){
var ajaxRequest;
ajaxRequest = new XMLHttpRequest();
var uname = document.getElementById("uname").value;
var pword = document.getElementById("pword").value;
var pcode = document.getElementById("pcode").value;
var qString = "?uname=" + uname + "&pword=" + pword + "&pcode=" + pcode;
ajaxRequest.open("GET", "php/Figure_22_16.php" + qString, true);
ajaxRequest.send(null);
}
</script>
</head>
<body>
<form name="myForm">
Username:<input type="text" id="uname"><br>
Password:<input type="text" id="pword"><br>
Postcode:<input type="text" id="pcode"><br>
<input type="button" onclick="ajaxFunction()" value="submit">
</form>
</body>
</html>
<!-- figure 22-17 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<script language="javascript" type="text/javascript">
function ajaxFunction(){
var ajaxRequest;
ajaxRequest = new XMLHttpRequest();
var pcode = document.getElementById("pcode").value;
var qString = "pcode=" + pcode;
ajaxRequest.open("POST", "php/Figure_22_18.php", true);
ajaxRequest.setRequestHeader("Content-type",
"application/x-www-form-urlencoded");
ajaxRequest.send(qString);
ajaxRequest.onreadystatechange = function(){
if(ajaxRequest.readyState == 4){
listRecords.innerHTML = ajaxRequest.responseText;
}
}
}
</script>
</head>
<body>
<form>
Enter Postcode: <input type="text" id="pcode"><br>
<input type="button" onclick="ajaxFunction()" value="Search">
</form>
<div id="listRecords">Records are listed here.</div>
</body>
</html>
<!-- figure 22-19 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
/* Comment */
.home { font-size: 125%; }
.home { width: 50%; }
</style>
</head>
<body>
<!-- Comment -->
<div>...</div>
<!-- Comment -->
<script>
runApp(); // Comment
</script>
</body>
</html>
<!-- figure 22.9 -->
<!DOCTYPE html>
<html lang="en-US">
<head><title>PHP Test</title></head>
<body>
<?php echo "Hello World!"; ?>
</body>
</html>
//figure 22.12
<?php
$name=$_POST['name'];
$age=$_POST['age'];
echo "Hi"." ".$name;
echo "<p>";
echo "You are"." ".$age." "."years old";
?>
//figure 22.14
The time is:
<?php echo date("H:i:s"); ?>
The time is:
//figure 22.16
<?php
$dbhost = "localhost";
$dbuser = "root";
$dbpass = "";
$dbname = "zzforum";
mysql_connect ($dbhost, $dbuser, $dbpass);
mysql_connect ($dbhost);
$uname = $_GET ['uname']; $pword = $_GET['pword']; $pcode = $_GET['pcode'];
$query="INSERT INTO users (username, password, postcode)
VALUES ('$uname', '$pword', '$pcode')";
mysql_query ($query);
?>
//figure 22.18
<?php
$mysql_link = mysql_connect ("localhost", "root", "");
mysql_select_db("zzforum") or die(mysql_error());
$pcode = $_POST["pcode"];
$query="SELECT * FROM users WHERE postcode='$pcode'";
$query_result=mysql_query($query) or die(mysql_error());
$record_string = "<table>";
$record_string .= "<tr>";
$record_string .= "<th>Username: </th>";
$record_string .= "<th>Postcode: </th>";
$record_string .= "</tr>";
while($row = mysql_fetch_array($query_result)){
$record_string .= "<tr>";
$record_string .= "<td>$row[username]</td>";
$record_string .= "<td>$row[password]</td>";
$record_string .= "<td>$row[postcode]</td>";
$record_string .= "</tr>";
}
$record_string .= "</table>";
echo $record_string
?>
//test.js
function message1() {
alert('Hello World!')
}
function message() {
document.write('Hello World!');
}