Tài liệu hạn chế xem trước, để xem đầy đủ mời bạn chọn Tải xuống
1
/ 14 trang
THÔNG TIN TÀI LIỆU
Nội dung
ptg 14.11 Where Does JavaScript Fit In? 585 14.11 Where Does JavaScript Fit In? 14.11.1 What Is DHTML? DHTML stands for Dynamic HTML. It is not a programming language, but a technique used when HTML/XHTML, CSS, and JavaScript (and Ajax) work together to make up a dynamic interactive Web page. With CSS we were able to control the style (i.e., color, font, margins, etc.) of the HTML elements and store the style sheets in separate files. All by itself, CSS is presenting a style for your page, but now we need JavaScript to bring the Web page to life, to make it dynamic. Throughout this text we have been using event handlers and functions with JavaScript to create rollovers, slideshows, animation, sub- mit forms, and so on. In the next chapter we discuss how to access every element on a Web page with the DOM. Then you can apply CSS styles and JavaScript to the DOM ele- ments to create what will effectively make it possible to manipulate, create, and delete any part of your page on the fly. 14.11.2 How JavaScript Views Style Sheets Sometimes a page consists of more that one style sheet. When the page is loaded, all external and embedded style sheets are stored in an array in the order in which they are placed within the document, just as are images, forms, and links. The array is called styleSheets, a property of the document object, so document.styleSheets[0] is the first style sheet, normally the general style sheet for the entire page. The next style sheet, maybe one that uses the @import rule, would be document.styleSheets[1], and if you embedded another style within the document, that would be document.styleSheets[2]. Because each of the elements of the styleSheets array has a disabled property that can be turned on and off, you can dynamically toggle between styles, allowing a user to select a style suited to his or her own taste. It is also possible to access a specific rule within a style sheet by using the W3C cssRules array or the Microsoft rules array. Both arrays work with index numbers. The first rule is cssRules[0], the second one cssRulse[1], and so on. Example 14.27 contains two style sheets, one that is imported and one that is embedded. By using JavaScript the user can toggle between two styles. When reverting to the first style, one of the rules is changed; that is, the rule for the h1 selector is changed to purple. EXAMPLE 14.27 <html> <head><title>Stylesheets</title> <style type="text/css"> 1 @import url("pstyle.css"); </style> Continues From the Library of WoweBook.Com ptg 586 Chapter 14 • Introduction to CSS (Cascading Style Sheets) with JavaScript <script type="text/javascript"> 2 function changeStyle(){ // alert(document.styleSheets.length); 3 document.styleSheets[0].disabled=false; // now visible 4 document.styleSheets[1].disabled=true; } 5 function enableOldStyle(){ document.styleSheets[0].disabled=true; 6 if(document.styleSheets[1].cssRules){ // W3C document.styleSheets[1].cssRules[1].style.color="purple"; } else{ //Microsoft Internet Explorer 7 document.styleSheets[1].rules[1].style.color="purple"; document.styleSheets[1].disabled=false; } document.styleSheets[1].disabled=false; // now visible } </script> 8 <style type="text/css"> p { background-color:darkblue; font-weight:bold ; font-size: 12pt; font-family:arial; color:yellow; } h1{color:red;} </style> </head> <body> <h1>Hello</h1> 9 <form> <input type="radio" onclick="JavaScript:changeStyle()">new style<br /> <input type="radio" onclick="JavaScript:enableOldStyle()">old style<br /> </form> <p> 10 This is the changing style sheet. Notice when we click on the radio button,how the style for the whole page changes. That's because we disabled one stylesheet and replaced it with another. </p> <h1>Goodbye</h1> </body> </html> EXAMPLE 14.27 (CONTINUED) From the Library of WoweBook.Com ptg 14.11 Where Does JavaScript Fit In? 587 EXPLANATION 1 The first style sheet is imported. This will be styleSheets[0] in the JavaScript array. The second style sheet is defined on line 8. 2 This user-defined function will be called when the user clicks the first radio button. 3 By setting the disabled property of the styleSheet object to false, styleSheets[0] will become visible. In this example the style for the whole page will be changed ac- cording to the rules in the first style sheet that was imported. 4 Setting the second style sheet, styleSheets[1] to true, makes this style sheet invisible. 5 This function sets styleSheets[1] to false, making it visible. This style is defined on line 8. 6 The cssRules[] array contains all the rules set for the style sheet. In the style sheet defined on line 8, the second rule, cssRules[1], defines a rule for an h1 element. For this rule, the rule is changed to a different color using the document’s styleSheet array and the cssRules array with the style property, and the color is reset to purple. 7 To change the rule of a style sheet with Microsoft, use the rules[] array as shown here. 8 This is an embedded style sheet that styles the p and h1 selectors. 9 The form gives the user two radio buttons, one to make the first style visible, and one to make the second style visible and change one of the rules. 10 This is the paragraph that will be given a new style if the “change style” option in the radio button is selected by the user. See Figures 14.30, 14.31, and 14.32. Figure 14.30 The page as it first appears. From the Library of WoweBook.Com ptg 588 Chapter 14 • Introduction to CSS (Cascading Style Sheets) with JavaScript Figure 14.31 After the user clicks the “new style” radio button, a new style is made visible. Figure 14.32 After the user clicks the “old style” button, the first stylesheet becomes visible. H1 text is now purple. From the Library of WoweBook.Com ptg 14.11 Where Does JavaScript Fit In? 589 14.11.3 The style Object The style object contains a set of properties corresponding to the CSS attributes sup- ported by your browser. Each HTML object has a style property used to access the CSS style attributes assigned to it; for example, an h1 element might have been defined with a CSS font-style, color, and padding. The style object has properties to reflect each of the CSS attributes. See Table 14.13. Many of the CSS style attributes, such as background-color, font-size, and word-spacing, contain hyphens in their names. Like all objects we have seen in JavaScript, there is a con- vention for spelling the name of the object. The name would not contain a hyphen, and multiple words after the first word are usually capitalized. Therefore, the CSS naming con- vention is different with the properties of the style object. The hyphen is removed and the first letter of each word after the hyphen is capitalized. For example, the CSS attribute, background-color, when used as a style property, is spelled backgroundColor, font-size is fontSize, and border-right-width is borderRightWidth. FORMAT elementname.style.property="value"; EXAMPLE div2.style.fontFamily = "arial"; Table 14.13 style Object Properties Property Example CSS Value HTML Tags Affected Fonts font 12pt/14pt sans-serif, 80% sans-serif, x-large/110% arial, normal small-caps All fontFamily serif, sans-serif, cursive, fantasy, monospace All fontSize 12pt, larger, 150%, 1.5em All fontStyle normal, italic, oblique All fontVariant normal, small-caps All fontWeight normal, bold, bolder, lighter, 100, 200 900 All Continues From the Library of WoweBook.Com ptg 590 Chapter 14 • Introduction to CSS (Cascading Style Sheets) with JavaScript Colors backgroundColor red, blue, #F00 All color red, green, #F00, rgb(255,0,0) All Images backgroundAttachment scroll, fixed All backgroundImage URL (bay.gif), none All backgroundPosition right top, top center, center, bottom, 100% 100%, 0% 0%, 50% 50% Block-level and replaced elements backgroundRepeat repeat, repeat-x (horizontally), repeat-y (vertically), no-repeat All Text Alignment letterSpacing normal, 0.1em All lineHeight normal, 1.2, 1.2em, 120% All textAlign left, right, center, justify All textDecoration underline, overline, line-through, blink All textIndent 3em, 15% Block-level elements textTransform capitalize, uppercase, lowercase, none All verticalAlign baseline, sub, super, top, text-top, middle, bottom, text-bottom, 50% Inline elements wordSpacing normal, 2em All Margins and Borders align All borderStyle none, solid, 3D All borderWidth thin, medium, thick, 2em All margin 5em, 3em, 2em, 1em (top, right, bottom, left) All marginBottom 100px, 50% All marginLeft .5in, 40% All Table 14.13 style Object Properties (continued) Property Example CSS Value HTML Tags Affected From the Library of WoweBook.Com ptg 14.11 Where Does JavaScript Fit In? 591 Margins and Borders (Continued) marginRight 20em, 45% All marginTop 1cm, 20% All padding 2em, 4em, 6em (right, bottom, left) All paddingBottom 2em, 20% All paddingLeft .25in, 20% All paddingRight .5cm, 35% All paddingTop 20px, 10% All length Block-level elements width 12em, 30%, auto (initial width value) Block-level element For a complete list of properties, see http://www.w3.org/TR/REC-CSS2/propidx.html. EXAMPLE 14.28 <html> <head><title>Changing Background Color Dynamically</title> 1 <script type="text/javascript"> 2 function bodyColor(){ 3 var i = document.form1.body.selectedIndex; 4 bodycolor = document.form1.body.options[i].value; 5 document.getElementById("bdy").style.backgroundColor= bodycolor; } </script> </head> 6 <body id="bdy"> <p> Pick a background color for this page. </p> 7 <form name="form1"> <b> Color </b> 8 <select name="body" onChange="bodyColor();"> <option value="pink">pink</option> <option value="lightblue">blue</option> Continues Table 14.13 style Object Properties (continued) Property Example CSS Value HTML Tags Affected From the Library of WoweBook.Com ptg 592 Chapter 14 • Introduction to CSS (Cascading Style Sheets) with JavaScript <option value="yellow">yellow</option> <option value="lightgreen">green</option> </select> <br /> </form> <p> This is a test. </p> </body> </html> EXPLANATION 1 The JavaScript program starts here. 2 A JavaScript user-defined function called bodyColor() is defined. 3 The number, selectedIndex, of the option chosen from a select list is assigned to variable i. 4 The value of the selected option is one of the colors listed in the select list on line 8. 5 The getElementById() method returns a reference to the body tag, whose id is bdy. By using the style property with the reference to the body, the background color of the document is changed with this statement. 6 The body tag is given an id attribute by which to identify it. 7 An HTML form called form1 starts here. 8 A select menu is defined to give the user options to change the background color of the document on the fly. The onChange event is triggered when one of the op- tions is selected, and is handled by invoking the function bodyColor(). The output is shown in Figure 14.33. Figure 14.33 Changing the background color dynamically (left); now the color is green (right). EXAMPLE 14.28 (CONTINUED) From the Library of WoweBook.Com ptg 14.11 Where Does JavaScript Fit In? 593 EXAMPLE 14.29 <html> <head><title>The onload() method</title> <script type="text/javascript"> 1 window.onload=setBorder; 2 function setBorder(){ 3 document.getElementById("bdy").style.border= "2px solid blue"; } 4 /* window.onload=function(){ // Anonymous function document.getElementById("bdy").style.backgroundColor= "lightgreen"; } */ 5 function getToday(){ var d=new Date(); var weekday=new Array(7); weekday[0]="Sunday"; weekday[1]="Monday"; weekday[2]="Tuesday"; weekday[3]="Wednesday"; weekday[4]="Thursday"; weekday[5]="Friday"; weekday[6]="Saturday"; return (weekday[d.getDay()]); } </script> </head> 6 <body id="bdy"> <div align="center"> <script type="text/javascript"> 7 document.write("<h1>Today it is " + getToday() +"!</h1>"); </script> </div> </body> </html> EXPLANATION 1 When the page has completely loaded, JavaScript will execute the user-defined function called setBorder. Notice that there are no parentheses or quotes when set- Border is assigned to the event handler. That is because setBorder is being assigned as a reference to the function defined on line 2. 2 The function setBorder() will be called when the onload event is fired on line 1. 3 The purpose of this function is to use the getElementById() method to retrieve a reference to the body of the document and with the reference create a solid blue border in the body of the document. Continues From the Library of WoweBook.Com ptg 594 Chapter 14 • Introduction to CSS (Cascading Style Sheets) with JavaScript Positioning Text with the style Property. By assigning a position to the style prop- erty it is possible to place an element in different sections of the page. In Example 14.30, by assigning positions, the text is moved after the document has been loaded. 4 This is another way to use the onload property to call a function. An anonymous function is assigned to onload and will be called after the page has loaded and the onload event has been fired. 5 The user-defined function getToday() returns the current day of the week. 6 This is the HTML body tag with the id attribute. The id will be used on line 2 with the getElementById() method to get a reference to this body element. 7 You can see in the display (see Figure 14.34) that the blue border was created for the document once the page was loaded. Figure 14.34 Styling the border. EXAMPLE 14.30 <html> <head><title>Positioning</title> <style type="text/css"> body { background-color: aliceblue;} div { font-size:larger; color: white; border: solid; border-color:aqua; } 1 .pos1 {position:absolute; top:50px;left:10px; background-color:blue; } EXPLANATION ( CONTINUED) From the Library of WoweBook.Com [...]... three-dimensional effect with a stack of containers In Example 14.31 a JavaScript program manipulates the containers so that they can be moved into different positions From the Library of WoweBook.Com 14.11 Where Does JavaScript Fit In? EXAMPLE 1 2 3 4 5 6 7 8 597 14.31 layers function moveUp(id){ var box= document.getElementById(id); if(box.style.zIndex... From the Library of WoweBook.Com 596 Chapter 14 • Introduction to CSS (Cascading Style Sheets) with JavaScript EXPLANATION 1 The CSS style sheet creates classes that will be used to position the first three div elements 2 These variables will be used by the functions in the JavaScript code 3 After the document has been loaded, the window’s onload event will be triggered and the anonymous...14.11 Where Does JavaScript Fit In? EXAMPLE 595 14.30 ( C O N T I N U E D) pos2 {position:absolute; top:100px;left:10px; background-color:teal; } pos3 {position:absolute; top:150px;left:10px; background-color:darkblue; } 2 var div1,div2,div3; 3 window.onload=function(){ 4 div1=document.getElementById("first");... EXPLANATION 1 2 The JavaScript user-defined function called moveUp() is defined It has one parameter, the id of the tag from where it was called The getElementById() method returns a reference to the object that called this function and assigns it to the variable called box Continues From the Library of WoweBook.Com 598 Chapter 14 • Introduction to CSS (Cascading Style Sheets) with JavaScript EXPLANATION... triggered, and the handler function, moveUp(id), is called 9 A yellow rectangular box is created with the tag With a zIndex of 1, it will be positioned above the last block in the stack 10 A blue square box is created with the tag With a zIndex of 2, it will be positioned above the last block in the stack 11 A small white rectangular box is created with the tag With a zIndex of 3, . CSS styles and JavaScript to the DOM ele- ments to create what will effectively make it possible to manipulate, create, and delete any part of your page on the fly. 14.11.2 How JavaScript Views. your page, but now we need JavaScript to bring the Web page to life, to make it dynamic. Throughout this text we have been using event handlers and functions with JavaScript to create rollovers,. ptg 14.11 Where Does JavaScript Fit In? 585 14.11 Where Does JavaScript Fit In? 14.11.1 What Is DHTML? DHTML stands for Dynamic HTML. It