Introduction

To start today we are going to return to the topic of HTML 5.
We are going to make a simple app which can detect when the screen orientation changes from portrait to landscape or vice-versa.
In order to do this detection, we are going to make use of Javascript.
So to start today, we are going to have a crash course on Javascript, DOM, and jQuery

Understanding Javascript

Javascript is an interpreted language developed by Brendan Eich at Netscape around 1995.
Many details on Javascript can be found at: http://www.webreference.com/javascript/reference/core_ref/contents.html
As we have already seen in our first demo of HTML 5, Javascripts can be either directly or indirectly embedded in a document.

Directly:

<script type="text/javascript">
<!-- hide from old browsers
-- code --
// -->
</script>

Indirectly:

<script type="text/javascript" src="myscript.js" />

Basic Syntax

Identifiers in Javascript (i.e., names of variable or functions) must begin with a letter, an underscore, or a $ and subsequent characters may be one of these three or numbers
Javascript supports /*...*/ and // for comments.
Semicolons to end lines in Javascript are optional. Beware:
```
return 
x; // has the effect of just return!
```
Most statement syntax; operators +, -, *, /, %, ++, --, etc; control structure such as: if/else, for, while, do..while; are written in the same way as Java.
Javascript has 5 primitive types: Number, String, Boolean, Undefined and Null.
Javascript has predefined objects corresponding to Number, String and Boolean. Each of these is wrappers for a value of the corresponding primitive type.
Javascript supports literals such as 5.5, 3, NaN, "hi", 'yo', true, false, undefined, null.
Numbers can by converted to strings using the toString method of Number. So can do:
```
x = 5.5; y = x.toString(); 
```
Strings can be concatenated using +. Ex: greeting = "hi" + "you";

Ways to invoke Javascript

When a web page is loaded, it is parsed from top to bottom.
When a script tag is found it is evaluated.
Javascript in a browser setting has several built-in objects that allow it to refer to the current document (document), the current window (window), etc.

To write out text as the document is being parsed we might do things like:

document.write("Hi there!");
document.writeln("This strings has a new line after it!");

After the page is done being parsed and drawn, there several different ways that Javascript might be invoked:
1. By a link:
```
<a href="javascript:alert('hi there')">Hi there alert</a>
```
  Hi there alert
2. By an event set up using an attribute:
```
<button onclick="alert('hi there')">Hi There!</button>
```
3. By an event set up using Javascript:
```
<button id="yo">Yo!</button>
<script>
document.getElementById("yo").onclick = function() {alert("yo");}
</script>
```

Remarks on Ways to invoke Javascript

After the document is loaded, any document.write() is viewed as a new document. So the document.write() overwrites the current document.
Notice each tag in a web page corresponds to an object in Javascript that can be accessed using document methods. This is what we did when we invoked getElementById().
This correspondence is called the document object model (DOM).

Objects

Objects can be created with an initial declaration like:
```
var my_object = new Object();
```
This object would initially have no properties. To delete an object use: delete my_object;

An assignment like:

my_object.make= "V6" /* would then give a property make a value. */
//can access as
p = my_object["make"]
q = my_object.make

You can also nest objects this:
```
my_object.subObject = new Object();
```
You can loop over properties using:
```
for(var prop in my_object){...}
```

Arrays

Arrays can be created with the syntax:

var myArr = new Array(1, 2, "hello")
var myArr = new Array(100);
var myArr = [1,2,3];
//to access
myArr[0]
//to determine length
myArr.length

Functions in Javascript

Below is an example of the syntax for declaring a function in Javascript

function swap(i, j, a)
{
    var tmp=a[i]; /* explicitly defined variables 
                     have scope within the function
                     if I had declared the variable 
                     implicitly it would have global scope */
    a[i] = a[j]; a[j] = tmp;
}

This function could be called with a syntax like:
```
swap(10, 5, b);
```
A return statement can be used to return a value from a function.
Functions are objects so can be assigned to variables.
```
var b = swap;
```
We can create functions anonymously (often done in jQuery) and assign them to variables:
```
swap = function(i, j, a) { /* code above */}
```
The definition of a function does not need to list its arguments. One can obtain a list of arguments using the argument subobject of a Function.
```
function swap()
{ var i = this.arguments[0], j=this.arguments[1], a=this.arguments[2];
  //same code as before
}
```

Quiz

Which of the following is true?

setContentView(R.layout.main); could be used to set the main.xml layout to be the layout used by an activity.
Click events in Android can be handled by implementing ActionListener.
UIActionSheetDelegate is a protocol you need to implement to make the Keyboard go aware on an iPhone after someone is done using it.

Constructors

Javascript constructors are special methods that create and initialize the properties for newly created objects. For example,

function car(new_make, new_model, new_year)
{
   this.make = new_make;
   this.model = new_model;
   this.year = new_year;
}

I could then create an object with

my_car = new car("Ford", "Contour SVT", "2000");

Methods

To create methods, I can do things like the following way to create a display method to pretty print cars:

function display_car()
{
document.write("Make:", this.make, "<br />");
document.write("Model:", this.model, "<br />");
document.write("Year:", this.year, "<br />");
}
function car(/*same as before*/)
{ //same as before
this.display = display_car;}

The drawback of this is that each time we create a new car we have a separate pointer to display_car. Instead, we can use the prototype property of the car function. This will only create one pointer.
```
function car(/*same as before*/)
{ //same as before}
car.prototype.display = display_car;
```

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 is awkward at best.
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

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 pages 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.0.1/jquery.mobile-1.0.1.min.css" />
    <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.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>

Javascript, jQuery, and Orientation in HTML 5

Outline