Client-side Scripting

Web Architecture and Information Management [./]
Summer 2011 — INFO 153 (CCN 42509)

Erik Wilde, Dilan Mahendran, and Brad Andrews, UC Berkeley School of Information
2011-07-27

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 Erik Wilde, Dilan Mahendran, and Brad Andrews: Client-side Scripting

Contents

Erik Wilde, Dilan Mahendran, and Brad Andrews: Client-side 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). This introductory lecture looks into scripting fundamentals such as JavaScript itself, the Document Object Model (DOM) for accessing the browser window's content, and XMLHttpRequest for script-server communications.



Erik Wilde, Dilan Mahendran, and Brad Andrews: Client-side Scripting

(3) Scripting on the Web



Erik Wilde, Dilan Mahendran, and Brad Andrews: Client-side Scripting

(4) 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>


Erik Wilde, Dilan Mahendran, and Brad Andrews: Client-side Scripting

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


Erik Wilde, Dilan Mahendran, and Brad Andrews: Client-side Scripting

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


JavaScript

Outline (JavaScript)

  1. JavaScript [3]
  2. Document Object Model (DOM) [7]
  3. Ajax Basics [3]
  4. JavaScript Frameworks [4]

(8) Browsers are Platforms

<p>It is <script type="text/javascript">
        var currentTime = new Date() ;
        document.write(currentTime.getHours() + ":" + currentTime.getMinutes()) ;
        </script> hours</p>
        
<p>It is  hours</p>
        


(9) Compiled vs. Interpreted Languages



(10) JavaScript and Browsers



Document Object Model (DOM)

Outline (Document Object Model (DOM))

  1. JavaScript [3]
  2. Document Object Model (DOM) [7]
  3. Ajax Basics [3]
  4. JavaScript Frameworks [4]

(12) From HTML to DOM



(13) Browser Handling of HTML

Browser Handling of HTML

(14) Elements, Objects, and Boxes

Boxes for List Items Spacing around Boxes for List Items


(15) Document



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


(17) DOM - Document Object Model

img/htmltree.gif




(18) Model



Ajax Basics

Outline (Ajax Basics)

  1. JavaScript [3]
  2. Document Object Model (DOM) [7]
  3. Ajax Basics [3]
  4. JavaScript Frameworks [4]

(20) AJAX



(21) Ajax = DHTML + HTTP



(22) Ajax and DHTML

Comparison of Ajax and DHTML

JavaScript Frameworks

Outline (JavaScript Frameworks)

  1. JavaScript [3]
  2. Document Object Model (DOM) [7]
  3. Ajax Basics [3]
  4. JavaScript Frameworks [4]

(24) Abstraction and Reality



(25) Web Design Patterns



(26) Popular Frameworks



(27) Important Framework Questions



Erik Wilde, Dilan Mahendran, and Brad Andrews: Client-side Scripting

(28) Conclusions



2011-07-27 Web Architecture and Information Management [./]
Summer 2011 — INFO 153 (CCN 42509)