HTML and CSS Reference
In-Depth Information
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
or
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
.
