Scripting

Web Architecture [./]
Fall 2011 — INFO 253 (CCN 42598)

Dilan Mahendran, UC Berkeley School of Information
2011-09-15

Creative Commons License [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/]

Contents D. Mahendran: Scripting

Contents

D. Mahendran: Scripting

(2) Abstract

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.



D. Mahendran: Scripting

(3) Scripting on the Web



D. Mahendran: Scripting

(4) The Joys of Web Design

Time Breakdown of Modern Web Design

D. Mahendran: Scripting

(5) Basic Scripting (DHTML)

<!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>


D. Mahendran: Scripting

(6) Basic Scripting (JavaScript)

    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);


D. Mahendran: Scripting

(7) Basic Scripting (CSS)

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;
}


D. Mahendran: Scripting

(8) JavaScript Interaction Structure



JavaScript

Outline (JavaScript)

  1. JavaScript [5]
  2. Document Object Model (DOM) [10]
  3. Asynchronous JavaScript and XML (Ajax) [6]
  4. JavaScript Frameworks [4]
JavaScript D. Mahendran: Scripting

(10) Browsers are Platforms



JavaScript D. Mahendran: Scripting

(11) Compiled vs. Interpreted Languages



JavaScript D. Mahendran: Scripting

(12) Example of Executable Browser Environment

<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>


JavaScript D. Mahendran: Scripting

(13) JavaScript - HTML and CSS Interaction

<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>


JavaScript D. Mahendran: Scripting

(14) JavaScript and Browsers



Document Object Model (DOM)

Outline (Document Object Model (DOM))

  1. JavaScript [5]
  2. Document Object Model (DOM) [10]
  3. Asynchronous JavaScript and XML (Ajax) [6]
  4. JavaScript Frameworks [4]
Document Object Model (DOM) D. Mahendran: Scripting

(16) From HTML to DOM



Document Object Model (DOM) D. Mahendran: Scripting

(17) DOM - Document Object Model

img/htmltree.gif




Document Object Model (DOM) D. Mahendran: Scripting

(18) Browser Handling of HTML

Browser Handling of HTML

Document Object Model (DOM) D. Mahendran: Scripting

(19) Document



Document Object Model (DOM) D. Mahendran: Scripting

(20) Object

    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);
        }
    }


Document Object Model (DOM) D. Mahendran: Scripting

(21) Model



Document Object Model (DOM) D. Mahendran: Scripting

(22) Markup to Trees



Document Object Model (DOM) D. Mahendran: Scripting

(23) DOM History



Document Object Model (DOM) D. Mahendran: Scripting

(24) DOM2 Map

dom2-map.png

Document Object Model (DOM) D. Mahendran: Scripting

(25) DOM3 Map

dom3-map.png

Asynchronous JavaScript and XML (Ajax)

Outline (Asynchronous JavaScript and XML (Ajax))

  1. JavaScript [5]
  2. Document Object Model (DOM) [10]
  3. Asynchronous JavaScript and XML (Ajax) [6]
  4. JavaScript Frameworks [4]
Asynchronous JavaScript and XML (Ajax) D. Mahendran: Scripting

(27) Ajax = DHTML + HTTP



Asynchronous JavaScript and XML (Ajax) D. Mahendran: Scripting

(28) Ajax and DHTML

Comparison of Ajax and DHTML

Asynchronous JavaScript and XML (Ajax) D. Mahendran: Scripting

(29) AJAX Auto Complete with JQuery(JavaScript)/PHP/Mysql



Asynchronous JavaScript and XML (Ajax) D. Mahendran: Scripting

(30) JavaScript and XML



Asynchronous JavaScript and XML (Ajax) D. Mahendran: Scripting

(31) JSON Example

<?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()" }
  ]
 }
}}


Asynchronous JavaScript and XML (Ajax) D. Mahendran: Scripting

(32) JSON via Content Negotiation



JavaScript Frameworks

Outline (JavaScript Frameworks)

  1. JavaScript [5]
  2. Document Object Model (DOM) [10]
  3. Asynchronous JavaScript and XML (Ajax) [6]
  4. JavaScript Frameworks [4]
JavaScript Frameworks D. Mahendran: Scripting

(34) Abstraction and Reality



JavaScript Frameworks D. Mahendran: Scripting

(35) Web Design Patterns



JavaScript Frameworks D. Mahendran: Scripting

(36) Popular Frameworks



JavaScript Frameworks D. Mahendran: Scripting

(37) Important Framework Questions



D. Mahendran: Scripting

(38) Native vs. Web Applications



D. Mahendran: Scripting

(39) Conclusions



2011-09-15 Web Architecture [./]
Fall 2011 — INFO 253 (CCN 42598)