CS 175/286 - Lecture 10

Cover page image

Understanding Javascript

Javascript is an interpreted language developed by Brendan Eich at Netscape around 1995.
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">
alert('Hello')
</script>

Indirectly:

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

Basic Syntax

Similar to Java, C, etc.
Dynamically typed
Semicolons to end lines in Javascript are optional. Beware:
```
return 
x; // has the effect of just return!
```
5 primitive types: Number, String, Boolean, Undefined and 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

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

Objects

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

An assignment like:

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

You can also nest objects this:

my_car.owner = { name: 'Fred', age: 42 }

You can loop over properties using:
```
for (var prop in my_car){...}
```

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

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

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

Lab

Bring your laptop to each class
You will work with a buddy
One of you writes code, the other types up answers
Switch roles each lab (not each day)
Submit lab work to Piazza

Programmatic Changes

We continue the lab from lecture 9. In that lab, we hardwired a question. Now let's put the question into an object
```
var question = { text: '...', choices: ['...', '...', '...', '...'], answer: '...' }      
```
(Eventually, we'd want to get that object from the internet.) We want to set the UI programmatically. That needs to be done in a callback when the document has been loaded. Add the following into the head part of your page:
```
      <script type="text/javascript">                                         
$(document).ready(function() {
   $('a').click(function(event) { alert(event.target.firstChild.textContent) })
 })
       </script>
```
Next, remove the href attributes from the links Now what happens when you click a link?
Ok, that's interesting. Now add the var question object to the top of the script. Remove the hard-coded header and add this to the ready handler:
```
 $('#questionText').html(question.text)
```
What happens? Why?

Now remove the <li> tags from the <ul> element, and put them in programmatically with this outline:

var choices = $('#choices')
for (var i = 0; i < question.choices.length; i++) {
    var item = $('<li/>')
    var link = $('<a/>').html(question.choices[i])
    item.append(link)
    choices.append(item)
}         
choices.listview('refresh')

What happens when you run it?

Finally, add an event handler to each link (in the for loop):
```
link.click(function() {
    if (...) 
        $.mobile.changePage('#correct')
    else
        ...    
}
```
Note that in the function, you can access the enclosing variables such as i and question.