[http://creativecommons.org/licenses/by/3.0/]
This work is licensed under a CC
Attribution 3.0 Unported License [http://creativecommons.org/licenses/by/3.0/]
Scripting is used on the majority of today's modern Web sites. Scripting can be used to improve the usability and accessibility of a Web site (for example for validating form data on the client side), it can vastly improve the user experience with new interface design (the smooth scrolling of Google Maps vs. older click to scroll
map services), or it can be used to implement behavior that would be impossible without scripting (for example the online applications of Google Docs). Asynchronous JavaScript and XML (Ajax) takes Dynamic HTML (DHTML) to the next level by allowing server access from within scripting code. This is accomplished by using a standardized API for client/server communications, the XMLHttpRequest object. This objects allows using HTTP connections from within scripting code, and thereby allows scripting code to dynamically reload data from a server in response to user interactions.
mouseOver events)versionsof DOM/JavaScript
missing functionality
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Well-Designed JavaScript</title> <script type="text/javascript" src="nicetitle.js"></script> <link rel="stylesheet" href="nicetitle.css" /> </head> <body> <h1>Well-Designed JavaScript</h1> <p><a href="http://en.wikipedia.org/wiki/JavaScript" title="Wikipedia: JavaScript is a scripting language used to enable programmatic access to objects within other applications. It is primarily used in the form of client-side JavaScript for the development of dynamic websites.">JavaScript</a> should not make any assumptions about browser support. Ideally, pages using scripting should also be usable when scripting is turned off, so that more basic browsers (for example, mobile phones or Kindles) can also be used for using the page.</p> </body> </html>
if( !document.links )
{
document.links = document.getElementsByTagName("a");
}
for (var ti=0;ti<document.links.length;ti++) {
var lnk = document.links[ti];
if ( lnk.title ) {
lnk.setAttribute("nicetitle",lnk.title);
lnk.removeAttribute("title");
addEvent(lnk,"mouseover",showNiceTitle);
addEvent(lnk,"mouseout",hideNiceTitle);
addEvent(lnk,"focus",showNiceTitle);
addEvent(lnk,"blur",hideNiceTitle);
}
} var d = document.createElementNS(XHTMLNS,"div");
d.className = "nicetitle";
tnt = document.createTextNode(nicetitle);
pat = document.createElementNS(XHTMLNS,"p");
pat.className = "titletext";
pat.appendChild(tnt);
d.appendChild(pat);div.nicetitle {
position: absolute;
padding: 4px;
top: 0px;
left: 0px;
color: white;
width: 25em;
background: url(nicetitle-bg.png);
/* Mozilla proprietary */
-moz-border-radius: 12px;
}
div.nicetitle p {
margin: 0; padding: 0 3px;
}
< input type="checkbox" name="options" value="giftwrap" onclick="giftwrap = this.checked;" >
<html>
<head><title>Factorials</title></head>
<body>
<h2>Table of Factorials</h2>
<script>
var fact = 1;
for(i = 1; i < 10; i++) {
fact = fact*i;
document.write(i + "! = " + fact + "<br>");
}
</script>
</body>
</html>
<title>JavaScript Loan Calculator</title>
<style>
/* This is a CSS style sheet: it adds style to the program output */
.result { font-weight: bold; } /* For elements with class="result" */
#payment { text-decoration: underline; } /* For element with id="payment" */
</style>
</head> <form name="loandata"> <table> <tr><td><b>Enter Loan Information:</b></td></tr> <tr> <td>1) Amount of the loan (any currency):</td> <td><input type="text" name="principal" onchange="calculate();"></td> </tr> <tr> <td>2) Annual percentage rate of interest:</td> <td><input type="text" name="interest" onchange="calculate();"></td> </tr> <tr> <td>3) Repayment period in years:</td> <td><input type="text" name="years" onchange="calculate();"></td> </tr> <tr><td></td> <td><input type="button" value="Compute" onclick="calculate();"></td> </tr> <tr><td><b>Payment Information:</b></td></tr>
<script language="JavaScript">
/*
* This is the JavaScript function that makes the example work. Note that
* this script defines the calculate() function called by the event
* handlers in the form. The function reads values from the form
* <input> fields using the names defined in the previous HTML code. It outputs
* its results into the named <span> elements.
*/
function calculate() {
// Get the user's input from the form. Assume it is all valid.
// Convert interest from a percentage to a decimal, and convert from
// an annual rate to a monthly rate. Convert payment period in years
// to the number of monthly payments.
var principal = document.loandata.principal.value;
var interest = document.loandata.interest.value / 100 / 12;
var payments = document.loandata.years.value * 12;
// Now compute the monthly payment figure, using esoteric math.
var x = Math.pow(1 + interest, payments);
var monthly = (principal*x*interest)/(x-1);
// Get named <span> elements from the form.
var payment = document.getElementById("payment");
var total = document.getElementById("total");
var totalinterest = document.getElementById("totalinterest");
// Check that the result is a finite number. If so, display the
// results by setting the HTML content of each <span> element.
if (isFinite(monthly)) {
payment.innerHTML = monthly.toFixed(2);
total.innerHTML = (monthly * payments).toFixed(2);
totalinterest.innerHTML = ((monthly*payments)-principal).toFixed(2);
}
// Otherwise, the user's input was probably invalid, so display nothing.
else {
payment.innerHTML = "";
total.innerHTML = ""
totalinterest.innerHTML = "";
}
}
</script>
</body>
</html>too slow for serious applications
desktop applications
fixing them
for (var ti=0;ti<document.links.length;ti++) {
var lnk = document.links[ti];
if ( lnk.title ) {
lnk.setAttribute("nicetitle",lnk.title);
lnk.removeAttribute("title");
addEvent(lnk,"mouseover",showNiceTitle);
addEvent(lnk,"mouseout",hideNiceTitle);
addEvent(lnk,"focus",showNiceTitle);
addEvent(lnk,"blur",hideNiceTitle);
}
}extensionsto the basic DOM model
locally
Demo auto-complete [http://courses.ischool.berkeley.edu/i153/s11/ajax/index.htm] on Fedora Core 14 (Laughlin) running Apache 2, PHP 5.3.6, Mysql 5
XMLHttpRequest API has been built for requesting XML via HTTPXMLHttpRequest has to be parsed into a DOM tree<?xml version="1.0"?> <menu id="file" value="File"> <popup> <menuitem value="New" onclick="CreateNewDoc()"/> <menuitem value="Open" onclick="OpenDoc()"/> <menuitem value="Close" onclick="CloseDoc()"/> </popup> </menu>
{ "menu" : {
"id" : "file",
"value" : "File",
"popup" : {
"menuitem" : [
{ "value" : "New", "onclick" : "CreateNewDoc()" },
{ "value" : "Open", "onclick" : "OpenDoc()" },
{ "value" : "Close", "onclick" : "CloseDoc()" }
]
}
}}best JavaScript framework
is there a collapse/expand folder view?)
is the framework openly licensed)