Web Programming with HTML, XHTML, and CSS Second Edition- P10

Web Programming with HTML, XHTML, and CSS Second Edition- P10: Điều này bắt đầu hướng dẫn nhận xét HTML và cũng giới thiệu đến bạn bằng cách sử dụng XHTML cho cấu trúc của một trang web và cascading style sheets (CSS) để kiểm soát như thế nào một tài liệu sẽ xuất hiện trên một trang web. Bạn se tìm hiểu làm thế nào để tận dụng lợi thế của các tính năng mới của các trình duyệt trong khi đảm bảo rằng các trang của bạn vẫn làm việc ở cũ, nhưng phổ biến, các trình duyệt. Bằng...
Nội dung trích xuất từ tài liệu:
Web Programming with HTML, XHTML, and CSS Second Edition- P10 Chapter 11: Learning JavaScript 4. Save this example as ch11_eg4.html and open it in your browser. Then roll your mouse over the image (without clicking it). You should see something like Figure 11-5 with the mouse over the image. Figure 11-5How It Works When the user rolls over the image, the onmouseover event fires, and when the user moves off it again the onmouseout event fires. This is why there are separate attributes that correspond to each of these events, and when one of these two events fires, the script held as a value for the corresponding attribute is executed. The script in the onmouseover and onmouseout event handler attributes tells the browser to change the src attribute of the image, and therefore a different image is displayed to the user. The first (onmouseover) indicates what should happen when the mouse is placed over the image; the second (onmouseout) indicates what should be done when the mouse is moved off the image. You can see in the code for ch11_eg04.html that when the user puts the mouse over an image, the src property of the image inside the link — named using the notation document.images.link — is changed. The element must have a name attribute so that the image can be referenced in this way in the link (otherwise you would have to use its index in the images collection). It is generally best to use the name in situations like this, rather than the index of that image in the images collection, because if you were to add another image into the document before this one the whole script would need changing. Note that if no event indicated what should happen when the user takes the mouse off the image, it would remain red rather than turning back to green. An image rollover script is a good example of changing or setting that property rather than just reading it. You learn about a more complex version of the image rollover in Chapter 12, which shows you how to create a function that can change several images within the same document; this is particularly helpful if you are using rollovers in a navigation bar. 421Chapter 11: Learning JavaScriptDifferent Types of Objects You will come across several types of objects in JavaScript, each of which is responsible for a related set of functionalities. For example, the document object has methods and properties that relate to the docu- ment; the forms collection, which is part of the document object, deals with information regarding forms; and so on. As you are about to see, there can be lots of different objects, each of which deals with a differ- ent set of functionalities and properties. So, here are some of the types of objects you are likely to come across: ❑ W3C DOM objects: These are like those covered already in this chapter, although in more recent browsers there are several more objects that are made available to allow you more control over a document. There are also additional objects in each different level of the DOM released by the W3C. ❑ Built-in objects: Several objects are part of the JavaScript language itself. These include the date object, which deals with dates and times, and the math object, which provides mathematical functions. You will be learning more about these built-in objects later in the chapter. ❑ Custom objects: If you start to write advanced JavaScript you might even start creating your own JavaScript objects that contain related functionality; for example, you might have a validation object that you have written just to use to validate your forms. While it is not possible to cover the creation of custom objects in this chapter, you learn about the built-in objects later in this chapter.Star ting to Program with JavaScript Having learned about the DOM, you can see how it allows you to access a document in a web browser. However, it is JavaScript that introduces real programming concepts. You know that the DOM allows you to retrieve and set properties, and that methods can be used to evoke actions such as writing new content to a page. Now it is time to look at how you use these values and properties in scripts to create more powerful documents. As I mentioned earlier, a programming language mainly performs calculations. So here are the key concepts you need to learn about in order to perform different types of calculations: ❑ A variable is used to store some information; it’s like a little bit of memory where you can store numbers ...