Client-side Scripting

Web Architecture and Information Management [./]
Spring 2010 — INFO 190-02 (CCN 42509)

Erik Wilde and Ryan Shaw, UC Berkeley School of Information
2010-03-10

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 and Ryan Shaw: Client-side Scripting

Contents

Erik Wilde and Ryan Shaw: 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 and Ryan Shaw: Client-side Scripting

(3) Scripting on the Web



Erik Wilde and Ryan Shaw: 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 and Ryan Shaw: 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 and Ryan Shaw: 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) [6]
  3. Ajax Basics [2]
  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) [6]
  3. Ajax Basics [2]
  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) Model



Ajax Basics

Outline (Ajax Basics)

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

(19) Ajax = DHTML + HTTP



(20) Ajax and DHTML

Comparison of Ajax and DHTML

JavaScript Frameworks

Outline (JavaScript Frameworks)

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

(22) Abstraction and Reality



(23) Web Design Patterns



(24) Popular Frameworks



(25) Important Framework Questions



Erik Wilde and Ryan Shaw: Client-side Scripting

(26) Conclusions



2010-03-10 Web Architecture and Information Management [./]
Spring 2010 — INFO 190-02 (CCN 42509)