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
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 1-6.
Example 1-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 1-7 shows the contents of screen.css. You should save this file in the same
location as the HTML file:
Example 1-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; }
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 Refer
ence: 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?).
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 1-8 shows a snippet of
JavaScript that illustrates several core concepts of the language.
Example 1-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:
Define an array (a list of values) named foods that contains three elements.
Open a typical for loop that initializes a variable named i to 0 and specifies an exit
criteria—in this case, exit when i is greater than the length of the foods array, and
increment i by 1 each time through the loop (i++ is shorthand for “add 1 to the
current value of i”).
A garden variety if that checks to see if the current element of the array is equal to
Apples.
Displayed if the current element of the array is equal to Apples.
Displayed if the current element of the array is not equal to Apples.
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 1-9 shows a simple bit of JavaScript that changes some text on the page when
the user clicks on the h1.
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 1-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:
A script block at the head of the HTML document.
This line defines a single JavaScript function named sayHello() inside the script
block.
The sayHello() function contains a single statement that tells the browser to look
through the document for an element that has the ID foo, and set its inner HTML
contents to Hi there! The effect of this in the browser is that the text “Click me!”
will be replaced with “Hi there!” when the user clicks the h1 element.
End of the sayHello() function.
End of the script block.
The onclick attribute of the h1 element tells the browser to do something when the
user clicks the h1 element, namely, to run the sayHello() function.
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 1-10 is a jQuery rewrite of Example
1-9.
Example 1-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>
This line includes the jquery.js library. It uses a relative path, meaning the file exists
in the same directory as the page that is using it (this example won’t function correctly
unless the jQuery library, jquery.js, is there). However, you can include it
directly from a variety of places where it’s available.
Notice the reduction in the amount of code we need to write to replace the text in
the h1 element. This might not seem like a big deal in such a trivial example, but I
can assure you that it’s a lifesaver in complex solutions.
We’ll be seeing plenty of real-world jQuery examples later on, so I’m going to leave it
at that for the moment.
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.
No comments:
Post a Comment