Tự học HTML và CSS trong 1 giờ - part 44 pot

Introducing JavaScript JavaScript is a scripting language that’s used to turn web pages into applications.. In this lesson, you learn about the basics of JavaScript by exploring the foll

LISTING 13.6 Continued

#nav { border-bottom: 1px solid lime; } #main { margin-left:

11.5em; margin-right: 11.5em; border: 0px solid lime;

margin-bottom: 1.5em; margin-top: 1.5em; }

#nav a:hover, #footer a:hover { color: lime; }

#sidebar0 { position: absolute; left: 2em; top: 3em;

width: 9em; text-align: right; }

If that was hard to follow, don’t feel bad; the difficulty was intentional CSS rules are

easily obfuscated if you’re not careful Most style sheets grow organically as piecemeal

additions are made; discipline is necessary to keep the style sheet readable

The style sheet in Listing 13.7 is really the same style sheet as in Listing 13.6 Both are

valid style sheets and both produce the same results when applied to the web page, but

the second one is easier to understand Comments make clearer what each section of the

style sheet does, indentation and whitespace are used effectively, and the order is much

easier to follow

LISTING 13.7 A Better-Organized Style Sheet

/* default styles for the page */

body { background-color: white;

color: #333333;

font-family: Verdana, sans-serif;

margin: 0;

padding: 0; } a:link { color: #DD8800; text-decoration: none; }

a:visited { color: #CC8866; text-decoration: none; }

a:hover { color: lime; }

/* layout superstructure */

#layout { padding: 1em; }

/* top navigation bar */

#nav { position: fixed;

top: 0px; left: 0px;

color: white; width: 100%;

padding-top: 3px; padding-bottom: 3px;

background-color: #333333;

text-align: center;

text-transform: lowercase; } border-bottom: 1px solid lime; }

#nav section, #nav shead, #nav sitem, #nav h1

{ display: inline; }

406 LESSON 13: Advanced CSS: Page Layout in CSS

LISTING 13.7 Continued

{ font-size: 90%; }

#nav shead, #nav sitem

{ padding-left: 1em; padding-right: 1em; }

#nav h1 { font-size: 1em;

background-color: #333333; color: white; }

#nav a:hover, #footer a:hover

{ color: lime; }

#nav a:link, #nav a:visited,

#footer a:link, #footer a:visited

{ text-decoration: none; color: #CCCCCC; }

/* main content section */

#main { margin-left: 11.5em; margin-right: 11.5em;

margin-bottom: 1.5em; margin-top: 1.5em;

border: 0px solid lime; }

/* two sidebars, absolutely positioned */

#sidebar1 { position: absolute;

right: 2em; top: 3em; width: 9em; }

#sidebar0 { position: absolute;

left: 2em; top: 3em; width: 9em;

text-align: right; }

#sidebar0 section, #sidebar1 section

{ font-size: smaller;

border: 0px solid lime;

text-transform: lowercase;

margin-bottom: 1em; }

Sitewide Style Sheets

The style sheet given in Listing 13.7 was created to be used on the entire site, not just on

one page Linking to an external style sheet is an easy way for you to apply style sheets

over your entire set You just use the <link>tag on every page, with the hrefattribute

set to the location of your site-wide style sheet

A sitewide style sheet can be used to enforce a consistent appearance on the website,

even if you have multiple web developers working on different parts of the same site

Additional styles can be added in embedded style sheets or in additional linked CSS files

that are created for each department or business unit For example, each department at a

school may use the school’s global style sheet for design elements common to the entire

site, and individual departmental style sheets for that department’s unique color, layout,

13

Summary

Tables have long been used in web design to lay out a web page However, this misuse of

<table>markup introduces a plethora of complications, from accessibility concerns to

complexity problems Using CSS for layout can clean up your HTML code and produce

flexible designs that can be updated easily to new styles

Laying out a page with CSS starts with adding sections to the HTML, using <div>s with

ID selectors These are then arranged in vertical columns, through the use of either

posi-tioning rules or the floatproperty With CSS layouts, it’s not difficult to reorder and

reshape the page simply by changing the style sheet

Workshop

The workshop contains a Q&A section, quiz questions, and activities to help reinforce

what you’ve learned in this lesson If you get stuck, the answers to the quiz can be found

after the questions

Q&A

Q Is it ever okay to use tables for layout?

A Never, ever, ever! Well, almost CSS layouts generally are more efficient and

ver-satile than <table>-based code, but if you are careful to test your layout tables in a

browser such as Lynx to make sure that the site is usable without tables, you can

probably get away with it Tables aren’t awful for laying out a page, and CSS can

be tricky when you’re dealing with grid-based designs In general, though, you’re

better off using CSS whenever you can

Q Which are better measurements for layouts, pixels or percentages?

A Some web designers, especially those from a print background or who have picky

clients to please, swear by pixels With some patience, you can get close to

pixel-perfect designs in CSS Other designers like percentage measurements, which scale

with the size of the text window There’s no clear-cut advantage to any approach,

however; all have their pros and cons You can experiment with a variety of

mea-surement types, and don’t be afraid to mix and match them sensibly on your site—

for example, designating column widths in percentages but also setting pixel-based

min-widthandmax-widthvalues

408 LESSON 13: Advanced CSS: Page Layout in CSS

Q Are there problems with using ems for layout?

A Only if you’re not careful The biggest problems result from setting margins,

padding, or positioning properties based on em values, and then changing the font

size of those values For example, you might overlook the effects of the font-size

rule buried in these declarations:

#sidebar { right: 1em; top: 1em;

text-align: right; color: white;

font-family: Verdana, sans-serif;

font-size: 50%; }

This won’t actually be located 1 em in each direction from the corner of its

con-taining block; it will be 0.5 em from the right and 0.5 em from the top If you are

going to change the font size within a section that uses ems for dimensions or

placement, set the font-sizerules on the contents of the box, as done in this

chap-ter’s style sheets with #sidebar h3 { }and#sidebar ol { }rules

You could also add an extra <div>inside the sidebar and set the font-sizerule on

that<div>

Quiz

1 Which property tells the text to start flowing normally again, after a floated

col-umn?

2 How do you designate the containing block for an absolutely positioned element?

3 What kind of rules would you write to change an ordered list of navigation links

into a horizontal navigation bar?

Quiz Answers

1 Theclearproperty can be used after floated columns—for example, if you want a

footer to reach across the entire browser window below the floated columns

2 You set the containing block by changing the positionproperty, usually to a value

ofrelative(with no offset properties designated)

3 Listing 13.7 has an example of a style sheet with rules to do that, using the

dis-playproperty

13

Exercises

n What kind of layouts can you create with CSS? Choose your favorite sites—either

your own or some you enjoy using—and duplicate their layout styles with CSS

Existing sites make good models for doing your own practice, but keep in mind

that unless you get permission, you shouldn’t just steal someone else’s code Start

with the visual appearance as you see it on the screen, and draw out boxes on

paper as guidelines showing you where various columns are located Use that as

your model to write the HTML and CSS for building a similar layout

n Try both of the techniques described in this lesson—using absolutely positioned

content and using floating columns Start with one version and convert it over to

the other Find a style of page that looks right to you, and the CSS code that you

think is easiest to understand, apply, and modify consistently

410 LESSON 13: Advanced CSS: Page Layout in CSS

Introducing JavaScript

JavaScript is a scripting language that’s used to turn web pages into

applications Like Cascading Style Sheets (CSS), JavaScript can be

incor-porated into web pages in a number of ways JavaScript is used to

manip-ulate the contents of a web page or to allow users to interact with web

pages without reloading the page

This is the first of three lessons in a row on JavaScript In this lesson, I

explain how JavaScript works and how to use it in your pages In the next

lesson, “Using JavaScript in Your Pages,” I walk you through some

real-world examples, and then in the following lesson, “Using JavaScript

Libraries,” I introduce some third-party libraries that you can use to make

your life as a JavaScript programmer much easier In this lesson, you

learn about the basics of JavaScript by exploring the following topics:

n What JavaScript is

n Why you would want to use JavaScript

n The<script>tag

n An overview of the JavaScript language

n The browser as a programming environment

n Using JavaScript to handle browser events

Why Would You Want to Use JavaScript?

JavaScript was initially introduced with Netscape Navigator 2.0 in 1996 Prior to the

introduction of JavaScript, the browser was an application that presented documents

gen-erated by a server or stored in files With JavaScript, the browser became a platform that

could run programs With JavaScript, these programs are included as part of web pages

JavaScript is useful because it’s deeply integrated with the browser This integration

allows programmers to manipulate various aspects of the browser behavior, as well as

objects included on an Hypertext Markup Language (HTML) page JavaScript uses

what’s referred to as an event-driven model of execution When you embed JavaScript

code in a web page, it isn’t run until the event it’s associated with is triggered

The types of events that can call JavaScript include loading the page, leaving the page,

interacting with a form element in some way, or clicking a link Plenty of other events

are available, too Many of these events are utilized in what most users would consider to

be annoying ways For example, many sites open an additional window containing an

advertisement when you navigate to one of their pages This is accomplished using

JavaScript and the page load event Other sites open additional windows when you leave

them; this is also accomplished using JavaScript triggered by an event Less annoying

applications include validating forms before they are submitted, or displaying extra

infor-mation on a page when a user clicks a link without requiring a full page refresh

412 LESSON 14: Introducing JavaScript

This introduction will by necessity be briskly paced There are many books written about JavaScript The goal of these lessons is

to introduce you to JavaScript, enable you to get started accom-plishing tasks, and hopefully kindle your interest to dig into the language more deeply

JavaScript enables you to manipulate web pages without sending a request back to the

server or to send a request to the server to retrieve information without leaving the page

that the user is on Using these capabilities, you can change the contents of a page,

change the style of elements on a page, validate user input before a user submits a form,

and modify the behavior of the browser—all by using scripts embedded within your web

pages Let’s look at some of the advantages of using JavaScript to enhance your web pages

Ease of Use

JavaScript is a real programming language and is regularly used to build large, complex

NOTE

You can add useful behavior to a web page with just a little bit of JavaScript added to the

onclickattribute of a link or to a scripttag at the top of an HTML document And as

you’ll learn in Lesson 16, “Using JavaScript Libraries,” JavaScript libraries make it easy

to add functionality to web pages using just a few lines of code The point is, don’t be

intimidated by JavaScript You can start accomplishing things almost immediately

Increasing Server Efficiency

One of the main advantages of JavaScript is that it can provide user feedback instantly

Instead of requiring users to submit a form to see if their input was valid, you can let

them know in real time Not only can this improve user experience, but it can also make

life easier for your server, by preventing unnecessary form processing In other cases,

you can use advanced JavaScript applications along with programs on the server to

update parts of a page rather than reloading the entire thing Suppose that you’ve created

a form that people use to enter their billing details into your online ordering system

When this form is submitted, your server-side script first needs to validate the

informa-tion provided and make sure that all the appropriate fields have been filled out correctly

It needs to check that a name and address have been entered, that a billing method has

been selected, that credit card details have been submitted—and the list goes on

But what happens when the script on the server discovers that some information is

miss-ing? You need to alert the visitors that there are problems with the submission and ask

them to edit the details and resubmit the completed form This process involves sending

the form back to the browser, having the visitor resubmit it with the right information,

revalidating it, and repeating the process until everything is correct This process can be

resource-intensive on the server side and could potentially discourage users from

com-pleting their order

By adding validation and checking procedures to the web browser with JavaScript, you

can reduce the number of transactions because many errors will be caught before forms

are ever submitted to the server And because the web server doesn’t need to perform as

many validations of its own, fewer server hardware and processor resources are required

to process form submissions The side benefit is that users will find your application

more responsive because the trip back to the server isn’t required for validation

Integration with the Browser

JavaScript enables you to manipulate objects on the page such as links, images, and form

elements You can also use JavaScript to control the browser itself by changing the size

14

The <script> Tag

The<script>tag is used to include a JavaScript script in a web page in much the same

way that the <style>tag is use to add a style sheet to a page The contents of the

<script>tag are expected to be JavaScript source code There are a couple of other

ways to use JavaScript in your pages, too, but the <script>tag is a good place to start

For the best results across all browsers, you should include the typeattribute in the script

tag, which specifies the type of content that the tag contains For JavaScript, use

text/javascript HTML5 uses text/javascriptas the default value for the type

attribute, but for earlier HTML versions of HTML it was required

The Structure of a JavaScript Script

When you include any JavaScript code in an HTML document (apart from using the

<script>tag), you should also follow a few other conventions:

n HTML standards prior to HTML5 required that the <script>tag be placed

between the <head>and</head>tags at the start of your document, not inside the

<body>tag Most of the time, putting your <script>tags inside the <head>tag is

the right thing to do, but there are some cases where it makes sense to place them

elsewhere, which I’ll discuss later

n Unlike HTML, which uses the <!— comment tag —>, comments inside

JavaScript code use the //symbol at the start of a line Any line of JavaScript code

that starts with these characters will be treated as a comment and ignored

Taking these three points into consideration, here’s how the <script>tag is normally

used:

<html>

<head>

<title>Test script</title>

<script language=”JavaScript”>

// Your JavaScript code goes here

</script>

</head>

<body>

Your Web contentgoes here

</body>

</html>

414 LESSON 14: Introducing JavaScript

Besides the languageattribute, the <script>tag can also include an srcattribute, which

allows a JavaScript script stored in a separate file to be included as part of the current

web page This feature enables you to share JavaScript code across an entire website, just

as you can share a single style sheet among many pages

When used this way, the <script>tag takes the following form:

<script type=”text/javascript” src=”http://www.example.com/script.js”>

Thesrcattribute will accept any valid URL, on the same server or on another Naming

your JavaScript files with the extension .jsis customary When you’re loading external

scripts in this way, always place the <script>tag inside the <head>tag

The JavaScript Language

When JavaScript is included in a page, the browser executes that JavaScript as soon

as it is read Here’s a simple page that includes a script, and the output is included in

Figure 14.1:

<!DOCTYPE html>

<html>

<head>

<title>A Simple JavaScript Example</title>

</head>

<body>

<p>Printed before JavaScript is run.</p>

<p>

<script type=”text/javascript”>

document.write(“Printed by JavaScript.”);

</script>

</p>

<p>Printed after JavaScript is run.</p>

</body>