The three main technologies we will use to
build web apps are HTML, CSS, and JavaScript. We’ll quickly cover each to
make sure we’re all on the same page before plowing into the fancy
stuff.1. Introduction to HTML
When you are browsing the web, the pages you are viewing are
just text documents sitting on someone else’s computer. The text in a
typical web page is wrapped in HTML tags, which tell your browser about
the structure of the document. With this information, the browser can
decide how to display the information in a way that makes sense.
Consider the web page snippet shown in Example 1. On the first line, the string Hi
there! is wrapped in a pair of h1 tags. Notice that the open tag and the close
tag slash (/) as the second character, while the open tag
does not have a slash. are slightly different: the close tag has a
Wrapping text in h1 tags
tells the browser that the words enclosed are a heading, which will
cause it to be displayed in large bold text on its own line. There are
also h2, h3,
h4, h5, and h6
heading tags. The lower the number, the more important the header, so
text wrapped in an h6 tag will be smaller (i.e., less
important-looking) than text wrapped in an h3
tag.
After the h1 tag in Example 1, there are two lines wrapped in p tags. These are called paragraph tags.
Browsers will display each paragraph on its own line. If the paragraph
is long enough to exceed the width of the browser window, the text will
bump down and continue on the next line. In either case, a blank line
will be inserted after the paragraph to separate it from the next item
on the page.
Example 1. HTML snippet
<h1>Hi there!</h1>
<p>Thanks for visiting my web page.</p>
<p>I hope you like it.</p>
|
You can also put HTML tags inside other HTML
tags. Example 2 shows an unordered list (ul) tag that contains three
list items (li). In a browser, this appears
as a bulleted list with each item on its own line. When you have a tag
or tags inside another tag, the inner tags are called child
elements, or children, of the parent tag. So in this
example, the li tags are children of the ul
parent.
Example 2. Unordered list
<ul>
<li>Pizza</li>
<li>Beer</li>
<li>Dogs</li>
</ul>
|
The tags covered so far are all block tags. The defining
characteristic of block tags is that they are displayed on a line of
their own, with no elements to the left or right of them. That is why
the heading, paragraphs, and list items progress down the page instead
of across it. The opposite of a block tag is an inline tag, which, as the name
implies, can appear in a line. The emphasis tag (em) is an example of an inline
tag, and it looks like this:
<p>I <em>really</em> hope you like it.</p>
The granddaddy of the inline tags—and arguably the coolest feature of
HTML—is the a tag. The “a” stands for anchor, but at
times I’ll also refer to it as a link or hyperlink. Text wrapped in an anchor tag is clickable,
such that clicking on it causes the browser to load a new HTML
page.
To tell the browser which new page to load,
we have to add what’s called an attribute to the tag. Attributes
are named values that you insert into an open tag. In an anchor tag, you use the href attribute to specify the location of the
target page. Here’s a link to Google’s home page:
<a href="http://www.google.com/">Google</a>
That might look like a bit of a jumble if you
are not used to reading HTML, but you should be able to pick out the URL
for the Google home page. You’ll be seeing a lot of a tags
and href attributes throughout the book, so take a minute
to get your head around this if it doesn’t make sense at first
glance.
Note: There are a couple of things to keep in
mind regarding attributes. Different HTML tags allow different
attributes. You can add multiple attributes to an open tag by separating
them with spaces. You never add attributes to a closing tag. There are
hundreds of possible combinations of attributes and tags, but don’t
sweat it—we only have to worry about a dozen or so in this entire
book.
The HTML snippet that we’ve been looking at
would normally reside in the body section of a complete
HTML document. An HTML document is made up of two sections: the head and
the body. The body is where you put all the content that you want users
to see. The head contains information about the page, most of which is
invisible to the user.
The body and head are always wrapped in
an html element. Example 3 shows the snippet in the context of a proper
HTML document. For now the head section contains a title element, which tells the browser
what text to display in the title bar of the window.
Example 3. A proper HTML document
<html>
<head>
<title>My Awesome Page</title>
</head>
<body>
<h1>Hi there!</h1>
<p>Thanks for visiting my web page.</p>
<p>I hope you like it.</p>
<ul>
<li>Pizza</li>
<li>Beer</li>
<li>Dogs</li>
</ul>
</body>
</html>
|
Normally, when you are using your web browser
you are viewing pages that are hosted on the Internet. However, browsers
are perfectly good at displaying HTML documents that are on your local
machine as well. To show you what I mean, I invite you to crack open a
text editor and enter the code in Example 1-3.
Some text editors are not suited for authoring HTML. In
particular, you want to avoid editors that support rich text editing, like Microsoft WordPad (Windows) or TextEdit (Mac OS X). These types of editors can save their files
in formats other than plain text, which will break your HTML. If you
must use TextEdit, save in plain text by choosing Format→Make Plain Text. In Windows, use Notepad instead of WordPad. If you are in the market for a good text
editor, my recommendation on the Mac is TextMate. There is a clone
version for Windows called E Text
Editor. If free is your thing, you can
download Text
Wrangler for Mac. For Windows, Notepad2 and
Notepad++
are highly regarded. Linux comes with an assortment of text editors, such as
vi, nano, emacs, and gedit. |
When you are finished entering the code from
Example 1-3, save it to your desktop as
test.html and then open it with Chrome by
either dragging the file onto the Chrome application icon
or opening Chrome and selecting File→Open File. Double-clicking
test.html will work as well, but it could open in
your text editor or another browser, depending on your settings.
Note: Even if you aren’t running Mac OS X, you
should use Chrome when testing your Android web apps on a desktop web
browser, because Chrome is the closest desktop browser to Android’s
mobile browser. Chrome is available for Mac and Windows from http://google.com/chrome.
2. Introduction to CSS
As you’ve seen, browsers render certain HTML elements with distinct
styles (for example, headings are large and bold, paragraphs are
followed by a blank line, and so forth). These styles are very basic and
are primarily intended to help the reader understand the structure and
meaning of the document.
To go beyond this simple structure-based
rendering, you use Cascading Style Sheets (CSS). CSS is a stylesheet
language that you use to define the visual presentation of an HTML
document. You can use CSS to define simple things like the text color,
size, and style (bold, italic, etc.), or complex things like page
layout, gradients, opacity, and much more.
Example 4 shows a CSS
rule that instructs the browser to display any text in the body element using the color red. In this example,
body is the selector (this specifies what is
affected by the rule) and the curly braces enclose the
declaration (the rule itself). The declaration
includes a set of properties and their
values. In this example, color is the property, and red
is the value of the color property.
Example 4. A simple CSS rule
Property names are predefined in the CSS
specification, which means that you can’t just make them up. Each
property expects an appropriate value, and there can be lots of
appropriate values and value formats for a given property.
For example, you can specify colors with
predefined keywords like red, or by using HTML color code
notation, which uses a hexadecimal notation: a hash/pound sign (#) followed by three
pairs of hexadecimal digits (0–F)
representing (from left to right) red, green, and blue values (red is
represented as #FF0000). Properties that expect
measurements can accept values like 10px, 75%,
and 1em. Example 5 shows
some common declarations. The color code shown for background-color corresponds to the CSS
“gray.”
Example 5. Some common CSS declarations
body {
color: red;
background-color: #808080;
font-size: 12px;
font-style: italic;
font-weight: bold;
font-family: Arial;
}
|
Selectors come in a variety of flavors. If
you want all of your hyperlinks (the a element) to display in
italics, add the following to your stylesheet:
a { font-style: italic; }
If you want to be more specific and only
italicize the hyperlinks that are contained somewhere within
an h1 tag, add the following to your
stylesheet:
h1 a { font-style: italic; }
You can also define your own custom selectors
by adding id and/or class attributes to
your HTML tags. Consider the following HTML snippet:
<h1 class="loud">Hi there!</h1>
<p>Thanks for visiting my web page.</p>
<p>I hope you like it.</p>
<ul>
<li class="loud">Pizza</li>
<li>Beer</li>
<li>Dogs</li>
</ul>
If we add .loud { font-style: italic;
} to the CSS for this HTML, Hi there! and
Pizza will show up italicized because they both have the
loud class. The dot in front of the .loud selector is important—it’s how
the CSS knows to look for HTML tags with a class of loud.
If you omit the dot, the CSS will look for a loud tag, which doesn’t
exist in this snippet (or in HTML at all, for that matter).
Applying CSS by id is similar. To add a yellow background fill to the
highlight paragraph tag, use the following rule:
#highlight { background-color: yellow; }
Here, the # symbol
tells the CSS to look for an HTML tag with the ID
highlight.
To recap, you can opt to select elements by
tag name (e.g., body, h1,
p), by class name (e.g., .loud,
.subtle, .error), or by ID (e.g.,
#highlight, #login, #promo). And,
you can get more specific by chaining selectors together (e.g., h1 a, body ul
.loud).
Note: There are differences between
class and id. Use class
attributes when you have more than one item on the page with the same
class value. Conversely, id values have to
be unique to a page.When I first learned this, I figured I’d
just always use class attributes so I wouldn’t have to worry about
whether I was duping an ID value. However, selecting elements by ID is
much faster than by class, so you can hurt your performance by
overusing class selectors.
2.1. Applying a stylesheet
So now you understand the basics of CSS, but how do you apply a stylesheet to an
HTML page? Quite simple, actually! First, you save the CSS somewhere
on your server (usually in the same directory as your HTML file,
though you can put it in a subdirectory). Next, link to the stylesheet
in the head of the HTML document, as shown in Example 1-6. The href attribute
in this example is a relative path, meaning it points to
a text file named screen.css in the same
directory as the HTML page. You can also specify absolute links, such as the following:
http://example.com/screen.css
Note: If you are saving your HTML files on your
local machine, you’ll want to keep things simple: put the CSS file
in the same directory as the HTML file and use a relative path as
shown in Example 6.
Example 6. Linking to a CSS stylesheet
<html>
<head>
<title>My Awesome Page</title>
<link rel="stylesheet" href="screen.css" type="text/css" />
</head>
<body>
<h1 class="loud">Hi there!</h1>
<p>Thanks for visiting my web page.</p>
<p>I hope you like it.</p>
<ul>
<li class="loud">Pizza</li>
<li>Beer</li>
<li>Dogs</li>
</ul>
</body>
</html>
|
Example 7
shows the contents of screen.css. You should save
this file in the same location as the HTML file:
Example 7. A simple stylesheet
body {
font-size: 12px;
font-weight: bold;
font-family: Arial;
}
a { font-style: italic; }
h1 a { font-style: italic; }
.loud { font-style: italic; }
#highlight { background-color: yellow; }
|
Note: It’s worth pointing out that you can link
to stylesheets that are hosted on domains other than the one hosting
the HTML document. However, it’s considered very rude to link to
someone else’s stylesheets without permission, so please only link
to your own.
For a quick and thorough crash course in
CSS, I highly recommend CSS Pocket Reference:
Visual Presentation for the Web by Eric Meyer
(O’Reilly). Meyer is the last word when it comes to CSS, and this
particular book is short enough to read during the typical morning
carpool (unless you are the person driving, in which case it could
take considerably longer—did I say “crash” course?).
3. Introduction to JavaScript
At this point you know how to structure a document with HTML and how to
modify its visual presentation with CSS. Now we’ll add some JavaScript
to make it do stuff.
JavaScript is a scripting language that you
can add to an HTML page to make it more interactive and convenient for
the user. For example, you can write some JavaScript that will inspect
the values typed in a form to make sure they are valid. Or, you can have
JavaScript show or hide elements of a page depending on where the user
clicks. JavaScript can even contact the web server to execute database
changes without refreshing the current web page.
Like any modern scripting language,
JavaScript has variables, arrays, objects, and all the typical control
structures (e.g., if, while,
for). Example 8 shows
a snippet of JavaScript that illustrates several core concepts of the
language.
Example 8. Basic JavaScript syntax
var foods = ['Apples', 'Bananas', 'Oranges'];
for (var i=0; i<foods.length; i++) {
if (foods[i] == 'Apples') {
alert(foods[i] + ' are my favorite!');
} else {
alert(foods[i] + ' are okay.');
}
}
|
Here’s an explanation of what’s happening
here:
Here are some points about JavaScript’s syntax that are worth noting:
Statements are terminated with semicolons (;)
Code blocks are enclosed in curly braces ({})
Variables are declared using the var keyword
Array elements can be accessed with
square bracket notation ([])
Array keys are assigned beginning at
0
The single equals sign (=) is the assignment
operator (assigns a value to a variable)
The double equals sign
(==) is the equivalence logical operator (compares two values and
evaluates to true if they are equivalent)
The plus sign (+) is the string
concatenation operator (combines two strings together)
For our purposes, the most important feature
of JavaScript is that it can interact with the elements of an HTML page
(the cool kids call this “manipulating the DOM”). Example 9 shows a simple bit of JavaScript that
changes some text on the page when the user clicks on the h1.
Note: DOM stands for Document Object Model and in
this context it represents the browser’s understanding of an HTML
page. You can read more about the DOM here: http://en.wikipedia.org/wiki/Document_Object_Model.
Example 9. Simple onclick handler
<html>
<head>
<title>My Awesome Page</title>
<script type="text/javascript" charset="utf-8">
function sayHello() {
document.getElementById('foo').innerHTML = 'Hi there!';
}
</script>
</head>
<body>
<h1 id="foo" onclick="sayHello()">Click me!</h1>
</body>
</html>
|
Here’s an explanation:
Back in the bad old days of web development,
different browsers had different support for JavaScript. This meant that
your code might run in Safari 2 but not in Internet Explorer 6. You had
to take great pains to test each browser (and even different versions of
the same browser) to make sure your code would work for everyone. As the
number of browsers and browser versions grew, it became impossible to
test and maintain your JavaScript code for every environment. At that
time, web programming with JavaScript was hell.
Enter jQuery. jQuery is a relatively small JavaScript library that
allows you to write your JavaScript code in a way that will work the
same in a wide variety of browsers. What’s more, it greatly simplifies a
number of common web development tasks. For these reasons, I use jQuery
in most of my web development work, and I’ll be using it for the
JavaScript examples in this book. Example 10 is a jQuery rewrite of Example 9.
Example 10. jQuery onclick handler
<html>
<head>
<title>My Awesome Page</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" charset="utf-8">
function sayHello() {
$('#foo').text('Hi there!');
}
</script>
</head>
<body>
<h1 id="foo" onclick="sayHello()">Click me!</h1>
</body>
</html>
|
We’ll be seeing plenty of real-world jQuery
examples later on, so I’m going to leave it at that for the moment.
Note: jQuery downloads, documentation, and
tutorials are available at http://jquery.com. To
use jQuery as shown in Example 1-9, you
will need to download it from there, rename the file you downloaded
(such as jquery-1.4.2.min.js) to
jquery.js, and put a copy of it in the same
directory as your HTML document.
