HTML and CSS Reference
This code may initially look complicated, but there are actually
only a couple of things happening here:
1. Start a new transaction.
2. Run a single SQL statement, whose structure is determined
by whether you want “all” or not.
Loop through the results constructing the HTML, and then set it
to the tweetEl (a <ul> element) innerHTML.
There are two states the SQL query can be:
SELECT * FROM tweets
SELECT * FROM tweets WHERE date > strftime(“%s”, “now”,
¬ “-5 minutes”)
Where I've put -5 minutes, this can change to -30 minutes or
any number that's passed in to the show function. The strftime
SQLite function is generating the number of seconds from
1-Jan-1970 until “now” minus N minutes. Since the “date” field is
being stored as an integer, you can now grab all the rows that
were tweeted within the last N minutes.
Now you've used the third argument to the executeSql method,
the success callback. The success callback receives a transac-
tion object ( just as the transaction callback does, so you could
run another executeSql if you wanted), and more importantly,
the result set. The result set contains three attributes:
• insertId (set only if you've inserted one or more rows)—
I didn't use this in this example.
• rowsAffected —Since this is a SELECT statement, this
value is 0.
• rows —This isn't an array, it's a collection, that does contain
a length and item getter method. You make use of the rows
object, and run a for loop from 0 to the length of the rows,
and use results.rows.item(i) to get the individual rows.
The individual row is an object representing the different
column names, so results.rows.item(0).screen_name gives
us the screen_name field from the first row.
Finally, once you have looped through all the rows that match,
you can set a <ul> element to the HTML you've built up. In this
example, the <ul> is stored in the variable called tweetEl .