- Notice in Figure 4-6 that objects are grouped together in various levels desig- nated by the density of the gray background. - Reporting to the president are several vice presidents. - One of the vice presidents manages a sales force that is divided into geographical regions.. - Each region has a manager who reports to the vice president of sales. - If the president wants to communicate to a salesper- son who handles a big account, the protocol dictates that the president should route the message through the hierarchy — to the vice president of sales. - to the sales manager. - to the salesperson. - The hierarchy clearly defines each unit’s role and relationship to the other units.. - This hierarchical structure applies to the organization of objects in a document.. - Window object: At the top of the hierarchy is the window. - This object repre- sents the content area of the browser window where HTML documents appear. - Because all document action takes place inside the window, it is the outermost element of the object hierarchy.. - Its position in the object hierarchy is an impor- tant one, as you can see in Figure 4-6. - The document object contains most of the other kinds of objects in the model. - If you develop in this kind of controlled environment, then be assured that browser-specific features are covered in the reference portions of this book.. - The scripter’s dream is that one day W3C DOM–compatible browsers will be the majority of the installed base, and creating cross-browser, highly dynamic pages will be easier than today. - In the meantime, you have lots of fundamentals to learn — knowledge that you’ll use for many years to come.. - Everything that is inside the <FORM>...</FORM>. - tag set is part of the form object. - If so, the map of the objects for that particular document has two form objects instead of the one that appears in Figure 4-6.. - Form control elements: Just as your HTML defines form elements within the confines of the <FORM>...</FORM>. - Unlike the one-of-everything model shown in Figure 4-6, the precise model for any document depends on the HTML tags in the document.. - Programming languages, such as JavaScript, are convenient intermediaries between your mental image of how a program works and the true inner workings of the computer. - Inside the machine, every word of a program code listing influences the storage and movement of bits (the legendary 1s and 0s of the computer’s binary universe) from one RAM storage slot to another. - Languages and object mod- els are inside the computer (or, in the case of JavaScript, inside the browser’s area of the computer) to make it easier for programmers to visualize how a program works and what its results will be. - Therefore, now it’s time to open the hood and watch what happens to the document object model as a page loads into the browser.. - When this page loads, the browser maintains in its memory a map of the objects generated by the HTML tags in the document. - I’ll skip that object for now, but acknowledge its presence (as a dimmed box in the diagram) because it is part of the model in the browser memory. - tag set and reload the document. - Figure 4-8 shows what happens to both the HTML (changes in boldface) and the object map as constructed by the browser. - Even though no content appears in the form, the <FORM>. - Also note that the form object is contained by the document in the hierarchy of objects in the current map. - This mirrors the structure of the idealized map shown in Figure 4-6.. - As mentioned earlier, the containment structure of the HTML (the <INPUT>. - tag set) is reflected in the object map for the revised document. - the document contains a form. - <FORM>. - </FORM>. - Figure 4-9: Adding a text input element to the form. - The last modification I make to the file is to add a button input element to the same form as the one that holds the text input element (see Figure 4-10). - tag set as the text field. - As a result, the object map hierarchy shows both the text field and button contained by the same form object. - If the map were a corporate organization chart, the employees represented by the Text and Button boxes would be at the same level reporting to the same boss.. - Figure 4-10: Adding a button element to the same form. - After a document is loaded into the browser, all of its objects are safely stored in memory in the containment hierarchy structure specified by the browser’s docu- ment object model. - If a script needs you to locate one of those objects, it would be a big help if the script showed you what route to follow in the map to reach that object.. - That is precisely what an object reference in a script does for the browser.. - Must be inside quotes when assigned to the NAME attribute. - The name of the object, however, is only one part of the actual reference that the browser needs to locate the object. - For each object, the refer- ence must include the steps along the object hierarchy from the top down to the object — no matter how many levels of containment are involved. - A reference includes the names of each object along the path from the window to the object. - In the. - Figure 4-11 shows the object map and references for the two main objects. - Therefore, a reference to the document object is window.document. - Figure 4-11: References to the window and document. - Modifying the document to include the empty <FORM>. - tag generates the form object in the map. - The reference to the form object, as shown in Figure 4-12, starts with the window, wends through the document, and reaches the form, which I call by name:. - window.document.formName (the italics meaning that in a real script, I would sub- stitute the form’s name for formName. - window.document. - Figure 4-12: Reference to the form object. - As the hierarchy gets deeper, the object reference gets longer. - In Figure 4-13, I add a text input object to the form. - The reference to this deeply nested object still starts at the window level and works its way down to the name I assigned to the object in its <INPUT>. - tag: window.document.formName.textName.. - Figure 4-13: Reference to the text field object. - When I add a button to the same form as the text object, the reference stays the same length (see Figure 4-14). - All that changes is the last part of the reference where the button name goes in place of the text field name:. - window.document.formName.buttonName. - window.document.formName. - window.document.formName.textName. - Figure 4-14: Reference to the button object. - Every reference typically starts with the most global scope — the win- dow for client-side JavaScript — and narrows focus with each “dot. - The methodology for organizing the thousands of newsgroups is to group them in a hierarchy that makes it relatively easy to both find a newsgroup and visualize where the newsgroup you’re currently reading is located in the scheme of things.. - Other group cate- gories, such as comp and alt , have their own sections and do not overlap with what goes on in the rec section. - When you ask your newsgroup software to view messages in the rec.sport.skating.inline group, you’re giving it a map to follow in the newsgroup hierarchy to go directly to a single newsgroup.. - window.document.formName.textName window.document.formName.buttonName. - When you ask to visit one, the hierarchical address, starting with the rec or alt classification, ensures you get to the desired place. - For complete newbies to the Net, this dot syntax can be intimidating. - What Defines an Object?. - When an HTML tag defines an object in the source code, the browser creates a slot for that object in memory as the page loads. - Outside of the pared-down world of a JavaScript browser, an object can also represent abstract entities, such as a calendar program’s appoint- ment entry or a layer of graphical shapes in a drawing program.. - Every object is unique in some way, even if two or more objects look identical to you in the browser. - They play such key roles in your future JavaScript efforts that the Quick Reference in Appendix A summarizes the proper- ties, methods, and event handlers for each object in the object models imple- mented in various browser generations. - You might want to take a quick peek at that road map of the original object model if for no other reason than to gain an appreci- ation for the size of the scripting vocabulary that this tutorial covers.. - Tag attributes are the most common way to set an HTML object’s initial properties. - Most properties have default values that are automati- cally assigned if nothing special is set in the HTML or later from a script.. - The name property of this object is the word “entry.” When the page loads, the text of the VALUE attribute setting is placed in the text field — the automatic behav- ior of an HTML text field when the VALUE attribute is specified. - But if a user enters some other text into the text field, the value property changes — not in the HTML, but in the memory copy of the object model that the browser maintains. - Therefore, if a script queries the text field about the content of the value property, the browser yields the current setting of the property — which isn’t the one specified by the HTML if a user changes the text.. - To gain access to an object’s property, you use the same kind of dot syntax, hierarchical addressing scheme you saw earlier for objects. - A property is contained by its object, so the reference to it consists of the reference to the object plus one more extension naming the property. - document.formName.clicker.name document.formName.clicker.value document.formName.entry.value. - You may wonder what happened to the window part of the reference. - In IE4+, you can reference an element object by simply referring to the element’s ID attribute if one is assigned. - for the text field, the property reflects the current text in the field. - You now see how the (sometimes lengthy) hierarchical referencing scheme helps the browser locate exactly the object and property your script needs. - A method is all about action related to the object. - A method either does something to the object or with the object that affects other parts of a script or document.. - To set a method into motion (usually called invoking a method), a JavaScript statement must include a reference to it — via its object with a pair of parentheses after the method name — as in the following examples:
Xem thử không khả dụng, vui lòng xem tại trang nguồn hoặc xem
Tóm tắt