- Instructions are read from the top of the document downward, and elements defined in the HTML document appear on screen in the same order in which they are entered in the document. - Assume for a moment that one of the elements on the page is a text field inside a form. - The user is supposed to enter some text in the text field and then click the Submit button to send that information back to the Web server. - symbol in the address?. - symbol, the CGI program resends the page, but this time with an instruction to include the symbol in the address. - That kind of intelligence would have to be embedded in the document in some fashion — downloaded with the page’s content so it can stand ready to jump into action when called upon. - As the program runs, if it detects a lack of the. - This kind of presubmission data entry validation is but one of the practical ways JavaScript adds intelligence to an HTML document. - A JavaScript script controls the action and behavior of objects — most of which you see on the screen in the browser window.. - To give you an idea of the scope of application you can create with JavaScript, I show you several applications from the CD-ROM (in the folder named Bonus Applications Chapters). - Links to the. - application files from the CD-ROM can be found on the page tutor1.htm in the book listings folder. - Just like the text listings in operating system file management windows, the expandable table of contents lets the user see as much or as little as possible, while providing a shortcut to the Big Picture of the entire data collection.. - Items in the outline can be links to other pages or descriptive information. - By placing all of the smarts behind the outline inside the page, it downloads once and runs quickly after each click.. - As demonstrated in the detailed description of this outline in the application Outline-Style Table of Contents (Chapter 50 of the bonus applications chapters on the CD-ROM. - consider embedding that data collection in the document (out of view) and letting JavaScript act as the intermediary between user and data.. - behind the scenes compares that number against the 55 or so ranges in the table.. - If the application were stored on the server and the data stored in a server database, each click of the Search button would mean a delay of many seconds, as the server processes the request, gets the data from the database, and reformulates the page with the result for the user. - In fact the data entry field in the Social Security lookup page (see Figure 4-2) includes scripting to check the validity of the entered number. - If a mistake appears in the entry — perhaps a finger slipped and hit a letter key — the visitor is advised of the problem and directed to try another entry. - The validation script even preselects the text in the entry field for the visitor so that typing a new value replaces the old.. - The image in the bottom half of the page is composed of seven images in vertical slices all bunched up against each other. - Interaction among three of the four frames requires JavaScript. - For example, if the user clicks on one of the directional arrows in the top-left frame, not only does the top-right frame change to another document, but the instructions document in the bottom-right frame shifts to the anchor point that parallels the content of the input screen. - selections from various catalog pages, and then bringing them together in the checkout order form.. - In Figure 4-5, for example, scripts in the page control the dragging of map pieces in the puzzle. - panels fly in from the edge of the screen, and another item appears when you place all the states in their proper positions.. - performance because of the interactivity required between the program and user. - It may be easier to create a prototype of the CGI in client-side JavaScript. - Not only does this lighten server load, but users experience quicker response to the application embedded in the page.. - For example, in the application Intelligent “Updated” Flags (Chapter 52 on the CD-ROM ) you will see how, without a server CGI or database, an HTML page can “remember” when a visitor last came to the page. - then any items that have been updated since the last visit — regardless of the number of updatings you’ve done to the page — are flagged for that visitor. - A scriptable browser does a lot of the work of. - creating software objects that generally represent the visible objects you see in an HTML page in the browser window. - Internet Explorer contains almost all of the objects in Figure 4-6, but Microsoft’s model is more extensive. - At this stage of the learning process, it is not important to memorize every last object in the model, but rather to get a general feel for what’s going on. - In a moment, I will show you how the document object model stored in the browser at any given instant reflects the HTML in the document. - But for now, I want to impress an important aspect of the structure of the idealized model: its hierarchy.. - Notice in Figure 4-6 that objects are grouped together in various levels designated 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. - to the sales manager. - to the salesperson. - Window object: At the top of the hierarchy is the window. - This object represents the content area of the browser window where HTML documents. - Because all document action takes place inside the window, the window is the outermost element of the object hierarchy. - Its position in the object hierarchy is an. - The document object contains by far the most other kinds of objects in the model. - tag set is part of the form object. - If so, the map of the objects for that particular document would have two form objects instead of the one that appears in Figure 4-6.. - Form 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. - Languages and object models 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. - 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. - 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 back 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. - Figure 4-9: Adding a text input element to the form. - Figure 4-10: Adding a button element to the same form. - After a document has loaded into the browser, all of its objects are safely stored in memory in the containment hierarchy structure specified by the browser’s document object model. - The name of the object, however, is only one part of the actual reference that the browser needs to locate the object. - In the JavaScript language, each successive object name along the route is separated from the other by a period.. - To demonstrate what real references look like within the context of an object model you’ve already seen, I retrace the same model steps shown earlier in the following sections, but this time show the reference to each object as the document acquires more objects.. - Therefore, a reference to the document object is. - Figure 4-11: References to the window and document. - tag generates the form object in the map. - Figure 4-12: Reference to the form object. - In Figure 4-13, I have added a text input object to the form. - Figure 4-13: Reference to the text field object. - All that changes is the last part of the reference, where the button name goes in place of the text field name: window.document.. - Figure 4-14: Reference to the button object. - have their own sections and do not overlap with what goes on in the rec section. - Outside of the pared-down world of a JavaScript browser, an object can also represent abstract entities, such as a calendar program’s appointment entry or a paragraph in an object-oriented word processor.. - Every object is unique in some way, even if it should look identical to you in the browser. - You might want to take a quick peek at that road map if for no other reason than to gain an appreciation for the size of the scripting vocabulary that consists of these object features.. - 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 behavior 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 may not be the one specified by the HTML if a user changes the text.. - Since a property is contained by its object, the reference to it consists of the reference to the object plus one more extension naming the property. - You may be wondering what happened to the window part of the reference. - for the text field, the property reflects the current text in the field. - A method is all about action related to the object. - To set a method into motion, a JavaScript statement must include a reference to it, via its object, as in the following examples:. - Two script statements invoked the write() method of the document object:. - The attribute consists of the event name, an equals sign ( just like any HTML attribute), followed by instructions about what to do when the particular event fires. - When a user clicks on the button, the browser sends a click event to the button. - In this button’s definition, the attribute says that whenever the button receives that message, it should invoke one of the window object’s methods, alert. - Like most arguments to HTML attributes, the attribute setting to the right of the equals sign goes inside quotes. - If additional quotes are necessary, as in the case of the text to be passed along with the event handler, those inner quotes can be single quotes. - In actuality, JavaScript doesn’t distinguish between single or double quotes but does require that each set be of the same type. - Which of the following applications are well-suited to client-side JavaScript, and why or why not?. - All of the above. - None of the above. - Which of the following object names are valid in JavaScript? For each one that is not valid, explain why.. - reference, draw a diagram of the object model that Navigator would create in its memory for these objects
Xem thử không khả dụng, vui lòng xem tại trang nguồn hoặc xem
Tóm tắt