Bạn có một ý tưởng về những gì JavaScript có thể làm gì cho bạn, và bạn đã có thể có một cái gì đó cụ thể trong tâm trí cho nỗ lực đầu tiên của bạn. Bây giờ là thời gian để đi sâu vào các sơ bộ: những gì bạn cần để bắt đầu và làm thế nào để có được những gì bạn cần nếu bạn | 95 Chapter 4 Getting Acquainted with the Document Object Model You can experiment with the example script that you find in Listing 4-5 by loading up the file you find on the companion CD. Listing 4-5 Using DHTML to Change Page Appearance on-the-Fly HTML HEAD TITLE Changing page appearance on-the-fly with DHTML TITLE SCRIPT LANGUAGE JavaScript TYPE text javascript -- Hide from browsers that do not support JavaScript function changeTheme switch case 0 Changing the background and foreground text color. blue yellow Changing the heading color. heading1 . pink break case 1 pink green heading1 . red break case 2 green red heading1 . pink graf1 . bold break 1 1 -- Finish hiding SCRIPT HEAD BODY Creating a named heading element. H1 ID heading1 Choose a theme H1 Creating a named paragraph element. P ID graf1 Using DHTML a combination of JavaScript and cascading style sheets you can let your users change the way your Web pages appear. P continued 96 Part I Building Killer Web Pages for Fun and Profit Listing 4-5 continued FORM NAME myForm When a user selects a new theme the changeTheme function is called. select name themes onChange changeTheme option value theme1 Theme 1 option option value theme2 Theme 2 option option value theme3 Theme 3 option select FORM BODY HTML As you glance over the code in Listing 4-5 notice that two CSS objects are created in the body of the document heading1 and graf1. When a user selects a theme the JavaScript interpreter calls the changeTheme function which uses the switch conditional statement to determine which theme the user selected. The appearance of the page the background color foreground color heading color and font weight of the paragraph text .
