- You also see how script statements can run when the document loads or in response to user action.. - The <SCRIPT>. - To assist the browser in recognizing lines of code in an HTML document as belonging to a script, you surround lines of script code with a <SCRIPT>...</SCRIPT>. - tag set. - Depending on the browser, the <SCRIPT>. - tag has a variety of attributes you can set that govern the script. - <SCRIPT LANGUAGE=”JavaScript”>. - Be sure to include the ending tag for the script. - </SCRIPT>. - If you forget the closing script tag, not only may the script not run properly, but the HTML elsewhere in the page may look strange.. - tag) points to the file containing the script code. - <SCRIPT LANGUAGE=”JavaScript” SRC=”myscript.js”></SCRIPT>. - Since all script lines are in the external file, no script lines are included between the start and end script tags in the document.. - Where do these tags go within a document? The answer is, Anywhere they’re needed in the document. - Sometimes it makes sense to include the tags nested within the <HEAD>...</HEAD>. - other times it is essential that the script be dropped into a very specific location in the <BODY>...</BODY>. - In the following four listings, I demonstrate with the help of a skeletal HTML document some of the possibilities of <SCRIPT>. - <SCRIPT>. - tag set in a document: in the <HEAD>. - Typically, the Head is a place for tags that influence noncontent settings for the page — items such as. - tags and the document title. - Listing 5-1: Scripts in the Head. - <TITLE>A Document</TITLE>. - <SCRIPT LANGUAGE="JavaScript">. - On the other hand, if you need a script to run as the page loads so that the script generates content in the page, the script goes in the <BODY>. - portion of the document, as shown in Listing 5-2. - If you check the code listing for your first script in Chapter 3, you see that the script tags are in the Body, because the script needed to fetch information about the browser and write the results to the page as the page loaded.. - Listing 5-2: A Script in the Body. - ">. - It’s also good to know that you can place an unlimited number of <SCRIPT>. - Perhaps this document needs the Body script to create some dynamic content as the page loads, but the document also contains a button that needs a script to run later. - That script is stored in the Head portion.. - Listing 5-3: Scripts in the Head and Body. - You also are not limited to one <SCRIPT>. - You can include as many <SCRIPT>. - In Listing 5-4, for example, two <SCRIPT>. - tag sets are located in the Body portion, with some other HTML between them.. - Listing 5-4: Two Scripts in the Body. - Only browsers that include JavaScript in them know to interpret the lines of code between the <SCRIPT>. - and </SCRIPT>. - tag pair as script statements and not HTML text to be displayed in the browser. - You can reduce the risk of old browsers displaying the script lines by playing a trick. - The trick is to enclose the script lines between HTML comment symbols, as shown in Listing 5-5. - comment tags, whereas scriptable browsers ignore those comment symbols when they appear inside a <SCRIPT>. - tag set.. - This symbol is necessary, because JavaScript would try to interpret the components of the ending HTML symbol ( -->. - a nonscriptable browser simply treats those slash characters as part of the entire HTML comment to be ignored.. - All client-side JavaScript scripts are part of the HTML document and download to the browser just like all the other HTML. - Every line of code that sits between a <SCRIPT>. - A statement must be in the script for a purpose. - relevant to the script. - If you don’t yet know what all of these mean, don’t worry — you will by the end of the next lesson. - When Script Statements Execute. - when called upon by other script statements.. - A determining factor is how the script statements are positioned in a document.. - Your first script in Chapter 3 (reproduced in Listing 5-6) runs while the document loads into the browser. - For this application, it is essential that a script inspect some properties of the navigator object and include those property values in the content being rendered for the page as it loads. - tags and statements in the Body portion of the document. - I call the kind of statements that run as the page loads immediate statements.. - Listing 5-6: HTML Page with Immediate Script Statements. - <H1>Let's Script...</H1>. - document.write("This browser is version ". - navigator.appVersion) document.write(". - navigator.appName + "</B>."). - A function defines a block of script statements summoned to run some time after those statements load into the browser. - Functions are clearly visible inside a <SCRIPT>. - Once a function has loaded into the browser (commonly in the Head portion so it loads early), it stands ready to run whenever called upon.. - One of the times a function is called upon to run is immediately after a page loads. - Unlike most event handlers, which are triggered in response to user action (for example, clicking a button), the onLoad= event handler fires the instant that all of the page’s components (including images, Java applets, and embedded multimedia) have loaded into the browser. - The onLoad= event handler goes in the <BODY>. - tag, as shown in Listing 5-7. - That’s what is happening in Listing 5-7: When the page completes loading, the onLoad= event handler triggers the done() function. - Listing 5-7: Running a Script from the onLoad= Event Handler. - alert("The page has finished loading."). - Focus instead on the structure of the document and the flow: The entire page loads without running any script statements (although the page loads the done() function in memory so that it is ready to run at a moment’s notice). - after the document loads, the browser fires the onLoad= event handler;. - To get a script to execute in response to a user action is very similar to the example you just saw for running a deferred script right after the document loads.. - Commonly, a script function is defined in the Head portion, and an event handler in, say, a form element calls upon that function to run. - Not every object must have an event handler defined for it in the HTML, as shown in Listing 5-8 — only the ones for which scripting is needed. - No script statements execute in Listing 5-8 until the user clicks on the button. - The alertUser() function is defined as the page loads, and will wait to run as long as the page remains loaded in the browser. - Therefore, I will hold off on this example until later in the tutorial.. - In the end, both builders used many of the same techniques to complete the assembly, and each can take pride in the result.. - As you’ve seen with the document object model, the browser gives scripters many prefabricated components to work with. - A programmer might have to write code that builds all of that infrastructure that scripters get for “free” from the browser. - In the end, both authors have working applications, each of which looks as professional as the other.. - Beyond the document object model, however, “real programming” nibbles its way into the scripting world. - In the next two lessons, I set aside most discussion about the document object model and focus on the programming principles that will serve you well in JavaScript and future programming endeavors.. - Write the complete script tag set for a script whose lone statement is document.write(“Hello, world.”). - Build an HTML document and include the answer to the previous question such that the page executes the script as it loads. - Open the document in your browser.. - Add a comment to the script in the previous answer that explains what the script does.. - Create an HTML document that displays an alert dialog box immediately after the page loads and displays a different alert dialog box when the user clicks on a form button.. - Carefully study the document in Listing 5-9. - What the page looks like. - How users interact with the page c. - What the script does. - sign in the upperMe function statement: Let the line word-wrap as it does in the listing below. - Save the document as an HTML file, and load the file into your browser to see how well you did.. - document.converter.output.value = document.converter.input.value.toUpperCase()
Xem thử không khả dụng, vui lòng xem tại trang nguồn hoặc xem
Tóm tắt