4.1This chapter utilizes narrative,examples, and hands-on exercises tointroduce programming conceptsand Web development skills.
A Balanced Introduction to Computer ScienceDavid Reed ©Prentice Hall, 2004Chapter 4: JavaScript and Dynamic Web Pages
Calling JavaScript 'the glue that holds web pages together' is short and easy to use, but doesn't do justice to what's going on. Glue sets and hardens, but JavaScript is moredynamic than glue. It can create a reaction and make things keep going, like a catalyst.
Brendan Eich
Innovators of the Net: Brendan Eich and JavaScript, 1998 Kids are taking PCs and the Internet to new heights. They're the ones that are designing the cutting-edge web sites. They're the ones that are pushing forth things like digital music, digital photos, instant messaging; and they will take this tool in directions that wedon't even expect.
Bill Gates
Washington2Washington Educational Partnership, 2000
As you learned in Chapters 2 and 3, the World Wide Web is a vast, interconnected network of documents that effectively integrates text and media such as images, movies, and sounds. TheHyperText Markup Language (HTML) consists of tags that identify the contents of a page and provideformatting information for the Web browser. Using HTML tags, it is possible to develop attractive,information-rich pages that can be displayed on the Web. However, when used alone, HTML can produce only
static pages
. This means that HTML pages look the same and behave in the same manner each time they are loaded into a browser.In 1995, Brendan Eich and his research team at Netscape Communications Corporation developed asimple programming language, JavaScript, for augmenting Web pages and making them
dynamic
—thatis, capable of changing their appearance over time or in response to a user’s actions (such as typing,mouse clicks, and other input methods). JavaScript statements are commands that instruct the browser to perform some action within the page, such as prompting the user for his name or displaying that name ina customized message. In this chapter, you will begin augmenting your own Web pages withJavaScript, focusing on simple techniques for enabling user interaction. You will learn to write
4.2JavaScript statements that prompt the user for information, store that information in memory, anddisplay text in the page that incorporates the user's input. In subsequent chapters, you will build uponthese basic skills, mastering the fundamentals of programming through the development of dynamicWeb pages.
Dynamic Web Pages
If you have spent any time surfing the Web, you have no doubt encountered pages that change while youare looking at them, varying their contents and responding to your actions. At commercial sites, banner ads may cycle as you view the site or may react when you place the mouse pointer over them. Similarly,search engines prompt you to enter specific topics on which you want information and then retrieve listsof Web pages related to those topics. These are examples of
dynamic
pages, in that their behavior changes each time they are loaded or as events occur. As you have learned in previous chapters, HTMLis a text-formatting language that allows the page designer to stipulate the structure and layout of a page.It is known as a “markup language” since it specifies page formatting and layout by marking up the textwith tags and special symbols. Although HTML is sufficient for creating
static
pages—pages in whichthe content doesn't change—it does not provide capabilities for specifying dynamic behavior. In order for page designers to indicate actions that are to occur within the page, a programming language isneeded.A
programming language
is a language for specifying instructions that a computer can execute. Each
statement
in a programming language specifies a particular action that the computer is to carry out, suchas changing an image or opening a new window when the user clicks a button. As you will see inChapters 6 and 8, general-purpose programming languages such as C++ and Java allow the programmer to write applications that solve a variety of problems. JavaScript, which was derived from Java, is asimple programming language designed for a very specific task: adding dynamic features to Web pages.The simplest way to add dynamic content to a Web page is to embed JavaScript statements directlywithin the page using SCRIPT tags. When a designer embeds statements between the tags
<scripttype="text/javascript">
and
</script>
, the Web browser recognizes the statements as JavaScriptcode and automatically executes them when the page is loaded. This means that the actions specified bythe statements are carried out in order.
Interaction via Assignments and Write Statements
Since JavaScript was designed to be simple, creating a basic dynamic Web page does not requireextensive programming skills. For example, Figure 4.1 shows a Web page that demonstrates dynamic behavior, interacting with the user and displaying a message based on that interaction. The page performs these tasks via two JavaScript statements, embedded within SCRIPT tags. The first statementinstructs the browser to prompt the user for his or her name, and the second statement displays agreeting in the page that includes that name. In this and subsequent figures, JavaScript statements arehighlighted in gray to differentiate them from HTML elements and text within the page. The remainder of this section discusses the details of each JavaScript statement from Figure 4.1.
4.3
123456789101112131415161718192021 <html><!-- greet.html Dave Reed --><!-- Web page that displays a personalized greeting. --><!------------------------------------------------------><head><title>Greetings</title></head><body><script type="text/javascript">firstName = prompt("Please enter your name", "");document.write("Hello " + firstName + ", welcome to my Web page.");</script><p> Whatever else you want to appear in your Web page...</p></body></html>
Figure 4. 1: JavaScript statements embedded in a Web page.Figure 4. 2: Prompt window that appears when
greet.html
is loaded.
Search History:
Result 00 of 00
00 results for result for
p.
Recommended
More From This User
Notes
Load more
