jQuery

jQuery was developed by John Resig in 2006 and is used in 52% of the top 10,000 web sites.
Different Browsers implement Javascript slightly differently.
The syntax for referring to elements on a web page in DOM as well as the syntax for doing Ajax varies at little bit between browsers.
jQuery aims to solve these two problems.
For example, rather than doing:
```
document.getElementById("yo").onclick = function() {alert("yo");}
```
in jQuery we could do: $("#yo").onclick = function() {alert("yo");}
To add an onload event handler to a document, we can do:
```
$(document).ready(handler)
// or
$(handler)
```

Detecting Orientation Changes in HTML 5

As a first application of jQuery, let's write a little app which can detect the browser's orientation.
When the browser detect that there has been a switch from portrait to landscape mode, it generates an orientationchange event.
This event has an orientation property which is one of "portrait" or "landscape"
In the next example, we use jQuery to bind this event to a function changeOrientation which changes the way a div tag is styled.
We set up this binding after the onload event. The function for the onload event is set-up with a call to $(handler);, where as you'll see on the next slide handler is actually an anonymous function.
To set up the orientationchange event handler we make use of jQuery's bind function.
To get the screen set up correctly initially, even though no orientation change has occurred yet, we make use of jQuery's trigger function to trigger an event.
The way the basic page is drawn will still be done using jQuery Mobile.

Orientation Change Code

<!DOCTYPE html> 
<html> 
    <head> 
    <title>Portrait or Landscape</title> 
    <meta id="myview" name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" /> 
    <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script> 
    <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
    <script>
    $(function(){
        // Orientation Change
        // When orientation changes event is triggered
        // exposing an orientation property of either
        // landscape or portrait
        $('body').bind('orientationchange', function(event){
            changeOrientation(event.orientation)
        })

        // Change the style depending on orientation
        function changeOrientation(ori) {
            // Remove all classes
            $("#orientation").removeClass('portrait landscape');
            $("#orientation").addClass(ori);
            $("#orientation").html("<p>"+ori.toUpperCase()+"</p>");
        }

        $("body").trigger("orientationchange");
    })
    </script>
    <style>
    div.portrait {
      background-color: blue;
      width: 100%;
      height: 100%;
    }
    div.landscape {
      background-color: red;
      width: 100%;
      height: 100%;
    }
    p {
        font-size:24px;
        color:white;
    }
    </style>
</head> 
<body> 

<div data-role="page">
 
    <div data-role="header">
        <h1>Orientation</h1>
    </div><!-- /header -->
 
    <div data-role="content">
    <div id="orientation" class="portrait" ></div>
    </div><!-- /content -->
 
    <div data-role="footer">
        <h4>My Footer</h4>
    </div><!-- /footer -->
</div><!-- /page -->

</body>
</html>

Quiz

Which of the following statements is true?

The only two requirements we gave in our definition of scalable web-site was that it could handle more traffic and more data.
A content delivery network might make use of a distributed hash table.
Apache Benchmark is typically used for load balancing web requests.

HTML 5 Local Storage

There was an attempt to standardize the use of sqlite in browsers: WebSQL.
Although browsers to varying degrees support this standard, since the standardization has been halted, I would like to discuss a different way to get persistence in HTML 5.
Local Storage is an enhancement to the key-value storage system known as cookies available in HTTP.
Whereas, in the cookie specification the official capacity/domain is something like 4KB, all modern browsers support 5MB/domain of local storage.

Here is a simple demo app showing how to use local storage:

<html>
<head>
<title>Local Storage Test</title>
</head>
<body>
<script type="text/javascript">
    if (localStorage) {
        document.write("<h1>Local Storage is Working!</h1>");
        testStorage();
    } else {
        document.write("<h1>Local Storage is Unavailable!</h1>");
    }

    function testStorage() 
    {
        myvalue = localStorage.getItem("mykey1");
        myvalue2 = localStorage["mykey2"];

        if(myvalue) {
            document.write("<p>Found stored value for mykey1 ="+
                myvalue+"</p>");
            localStorage.removeItem("mykey1");
            //can use localStorage.clear();  to get rid of everything
        } else {
            localStorage.setItem("mykey1", "hello");
        }
        if(myvalue2) {
            document.write("<p>Found stored value for mykey2 ="+
                myvalue2+"</p>");
        } else {
            localStorage["mykey2"] = "yo";
        }

        document.write("<h1>List all that's stored after update</h1>");
        for (i=0; i<=localStorage.length-1; i++)
        {  
            key = localStorage.key(i);  
            value = localStorage.getItem(key);
            document.write("<p>("+key+", "+value+")</p>");
        }
    }
</script>
</body>
</html>

Ajax in jQuery

We've already learned how to use Ajax with standard HTML.
However, syntax was a little awkward, and in some older browsers XMLHttpRequest() was a little flaky (IE6).

jQuery can come to the rescue by making a cross platform request which doesn't have to much code overhead. For example,

function  downloadDelayed()
{
    $.ajax({
        url : "myscript.php",
        success : function (data) {
           $("#contentArea").html(data);
        }
    });
}
setTimeout("downloadDelayed()", 1000);

This downloads myscript.php and displays it's contents into the tag with id contentArea.

HTML 5 WebSockets

One disadvantage of XMLHttpRequest() is that it is half duplex: Client sends something Server replies, Client sends another thing, etc.
Also, for each request he have the overhead of sending the get/post command followed by headers and from the server we get a bunch of headers before any data is returned.
Web Sockets solve these problems. They are standardize in IETF as RFC 6455 and as well as part of the Web IDL by W3C.
It is now supported by mod_pywebsocket (Python) and phpwebsocket (PHP) on servers such as Apache and in all the major browsers.

HTML 5 WebSockets -- HTTP

At the HTTP level, a web socket request starts out as usual HTTP, but a connection upgrade is requested (from Wikipedia):

GET /mychat HTTP/1.1
Host: server.example.com
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Key: x3JJHMbDL1EzLkh9GBhXDw==
Sec-WebSocket-Protocol: chat
Sec-WebSocket-Version: 13
Origin: http://example.com

If websockets are supported then the base 64 encoded Sec-WebSocket-Key key above is concatenated with the magic string: 258EAFA5-E914-47DA-95CA-C5AB0DC85B11 and SHA-1 hashed. The server would reply:
```
HTTP/1.1 101 Switching Protocols
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Accept: HSmrc0sMlYUkAGmm5OPpG2HaGWk=
Sec-WebSocket-Protocol: chat
```
The client and server can then exchange web socket frames. These begin with 0x00 and end with 0xFF and have UTF-8 (not binary) data in between.

HTML 5 WebSockets -- Javascript

Below are the basic WebSocket Javascript functions (websocket URI's are prefixed with ws: or wss: (secure)):

var webSocket = new
WebSocket("ws://some.websocketplace.org");
// Associate listeners
webSocket.onopen = function(evt) {
alert("The connection was opened");
};
webSocket.onmessage = function(evt) {
alert("Received message: " + evt.data);
};
webSocket.onclose = function(evt) {
alert("The connection was closed");
};
webSocket.onerror = function(evt) {
alert("Ouch an error!");
};

webSocket.send("This is some WebSocket data!");
// Close WebSocket
webSocket.close();

Two-Dimensional Graphics in HTML

We now look at some of the new 2D graphics capabilities of HTML 5. HTML 5 also supports 3D graphics via Web3D, but we won't talk about that in this class.
Since Netscape 2, which introduced Javascript in 1996, there have been different techniques to get crude 2D graphics in browsers -- the very earliest techniques were very hackish involving drawing single pixel images over and over again.
Starting with IE 5 in 1998, an XML, tag-based language approach to 2D graphics called VML became available to web designers.
About a year later another tag-based, this time non-Microsoft language, called SVG appeared, and this eventually was supported by all major browsers.
Tag-based (vector/scene-based) approaches to 2D-graphics can often be inconvenient for scripting, writing games, etc as they are a little higher level and so slower.
In 2004, Apple introduced the canvas tag in its Safari browser to support a more low-level, raster, programmatic approach to graphics. This is now supported by all major browsers, is a WHATWG standard, and it is this tag that we will briefly introduce.

Canvas Tag

A basic canvas tag usage might look like:

<canvas id="drawpad" ></canvas>
<style type="text/css">
#drawpad {
    width: 200px;
    height: 100px;
    background-color: light-gray;
}
</style>

We can then refer to this object in Javascript, using document.getElementById("drawpad") or in jQuery using $("#drawpad"), use it to get a context and then start drawing:

<script type="text/javascript"*gt;
   drawpad_object = document.getElementById("drawpad");
   drawpad_context = drawpad_object.getContext("2d");
   drawpad_context.strokeStyle = "blue";
   drawpad_context.strokeRect(10,10,50,50);
   drawpad_context.fillStyle = "green";
   drawpad_context.font = "32pt Arial";
   max_width = 100;
   drawpad_context.rotate(3.14/3); //pi/3
   drawpad_context.fillText("hello", 80, -10, max_width);
 
</script>

In the above, besides 2d we could also have used webgl if we wanted a more OpenGL-like, 3D-type canvas.
Notice coordinates for the fillText are relative to the rotated canvas.
Context also supports methods for clearing areas clearRect, drawing images using drawImage. To specify more complex shapes, you call drawpad_context.beginPath(), give your path instructions, then drawpad_context.closePath(), and finally call fill(path) or stroke(path). Here path instructions can be moveTo, lineTo, arc, quadraticCurveTo, bezierCurveTo, etc.
To do double buffering with canvas, make a page with two canvas tags. Style them so they are the same size, but have one with visibility hidden. Draw your graphics into this one, then toggle which one is hidden.

Touch Events HTML5

In HTML 5 there are four main touch events which can be applied to any tag: touchStart, touchMove, touchEnd, touchCancel

As an example of setting up such events, consider

<canvas id="drawpad"

  ontouchstart="startHandler(event);"

  ontouchmove="moveHandler(event);"

  ontouchend="endHandler(event);"

  ontouchcancel="cancelHandler(event);"

></canvas>

You can also add events programmatically with:

drawpad_object.addEventListener("touchstart", startHandler2, false);

These events are easier to test on a mobile device or using the iPhone Simulator / Android Emulator.

Video and Audio Tags

A basic video tag in HTML 5 looks like:

<video id="myvideo" width="320" height="240" controls="controls">
  <source src="some_movie.mp4" type="video/mp4" />
  <!-- firefox only in the last few years supports mp4-->
  <source src="some_movie.ogg" type="video/ogg" />
  <!-- firefox does support ogg but others don't-->
  Your browser does not support the video tag.
</video>

Currently, WebM (Google) (mimetype video/webm,) and Ogg seem like the most cross-browser supported formats.
The HTML 5 audio tag is almost identical to the above except the source tags should be audio files.
If we did myvideo_object = document.getElementById("myvideo"), the object would support load(), play(), pause() methods, and have a currentSrc, currentTime, duration and playbackRate properties. The tag also can supports loadedmetadata, timeupdate, pause, play, and ended events.
Each browser maker also supports several extensions to these events.

Determining Location in HTML 5

If a user grants the web browser permission to use location data it is possible to find this information within HTML 5.
The code is pretty simple and just uses the geolocation property of the Javascript navigator object.

Here is a minimal example:

<!DOCTYPE html>
<html>
<head> 
<title>Location Test</title>
</head> 
<body> 
<h1>Hi There</h1>
<script type="text/javascript">

function mycallback(position)
{
    alert("Your latitude is: " + position.coords.latitude);
    alert("Your longitude is: " + position.coords.longitude);
    alert("The accuracy is:" + position.coords.accuracy);
}

function error(msg)
{
    if(msg) {
        alert(msg);
    } else {
        alert("that did not work");
    }
}

if (navigator.geolocation) {
   navigator.geolocation.getCurrentPosition(mycallback, error);
} else {
   error('not supported');
}

</script>
</body> 
</html>

HTML Mapping

Maps have been available on the Web almost since its inception.
Some early examples are MMMWWW (1995), Vicinity Corporation (1995), and MapQuest (1996). The last of these is actually a company founded in the sixties that was doing early electronic maps in the 1980s.
Google, Yahoo and several other vendors provide online maps.
Open Street Map provides creative commons licensed web maps, somewhat like Wikipedia for maps.
We won't go into too much detail for any of these mapping services, but for Google Maps and OSM we will show how to draw a map and drop a pin.

Google Maps

To use Google maps, you basically include Google's Javascript file, then in your own Javscript code you set up the map options and give a div tag you would like a map to appear in, if you want markers you can also configure them.

Here is a simple example:

<!DOCTYPE html>
<html>
<head> 
<title>A Google Test</title>
</head> 
<body onload="drawMap()"> 
<h1>A Google Map</h1>
<div id="mymap"></div>
<script type="text/javascript" 
    src="http://maps.google.com/maps/api/js?sensor=false"></script>
<!-- ?sensor=false means not determining location of map using a sensor-->
<script type="text/javascript">
function drawMap() 
{
    var latlng = new google.maps.LatLng(37.375, -121.833);
    mapcanvas= document.getElementById("mymap");
    mapcanvas.style.height = '400px';
    mapcanvas.style.width = '600px';
    var myOptions = {
        zoom: 15,
        center: latlng,
        mapTypeControl: false,
        navigationControlOptions: {style: google.maps.NavigationControlStyle.SMALL},
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };


    var map = new google.maps.Map( mapcanvas, myOptions);

    var marker = new google.maps.Marker({
        position: latlng, 
        map: map, 
        title:"This is a great pin!"
    });
}
</script>
</body> 
</html>

Open Street Map

OSM is a data set. There are several third-party Javascript Frameworks that can be used to display data from it on a map

We will look at an example (theirs) using OpenLayers

<html>
<body>
  <div id="mapdiv" style="width:400px; height:400px"></div>
  <script src="http://www.openlayers.org/api/OpenLayers.js"></script>
  <script>
    map = new OpenLayers.Map("mapdiv");
    map.addLayer(new OpenLayers.Layer.OSM());
 
    var lonLat = new OpenLayers.LonLat( -0.1279688 ,51.5077286 )
          .transform(
            new OpenLayers.Projection("EPSG:4326"), // transform from WGS 1984
            map.getProjectionObject() // to Spherical Mercator Projection
          );
 
    var zoom=16;
 
    var markers = new OpenLayers.Layer.Markers( "Markers" );
    map.addLayer(markers);
 
    markers.addMarker(new OpenLayers.Marker(lonLat));
 
    map.setCenter (lonLat, zoom);
  </script>
</body>
</html>

More HTML 5 Multimedia

Outline