18 Scripts
18.1 Introduction to scripts
A client-side script is a program that may accompany an HTML document or be embedded directly in it. The program executes on the client's machine when the document loads, or at some other time such as when a link is activated. HTML's support for scripts is independent of the scripting language.- Scripts may be evaluated as a document loads to modify the contents of the document dynamically.
- Scripts may accompany a form to process input as it is entered. Designers may dynamically fill out parts of a form based on the values of other fields. They may also ensure that input data conforms to predetermined ranges of values, that fields are mutually consistent, etc.
- Scripts may be triggered by events that affect the document, such as loading, unloading, element focus, mouse movement, etc.
- Scripts may be linked to form controls (e.g., buttons) to produce graphical user interface elements.
- Those that are executed one time when the document is loaded by the user agent. Scripts that appear within a SCRIPT element are executed when the document is loaded. For user agents that cannot or will not handle scripts, authors may include alternate content via the NOSCRIPT element.
- Those that are executed every time a specific event occurs. These scripts may be assigned to a number of elements via theintrinsic event attributes.
18.2 Designing documents for user agents that support scripting
18.2.1 The SCRIPT element
<!ELEMENT SCRIPT - - %Script; -- script statements --> <!ATTLIST SCRIPT charset %Charset; #IMPLIED -- char encoding of linked resource -- type %ContentType; #REQUIRED -- content type of script language -- src %URI; #IMPLIED -- URI for an external script -- defer (defer) #IMPLIED -- UA may defer execution of script -- >
- src = uri [CT]
- This attribute specifies the location of an external script.
- type = content-type [CI]
- This attribute specifies the scripting language of the element's contents and overrides the default scripting language. The scripting language is specified as a content type (e.g., "text/javascript"). Authors must supply a value for this attribute. There is no default value for this attribute.
- language = cdata [CI]
- Deprecated. This attribute specifies the scripting language of the contents of this element. Its value is an identifier for the language, but since these identifiers are not standard, this attribute has been deprecated in favor of type.
- defer [CI]
- When set, this boolean attribute provides a hint to the user agent that the script is not going to generate any document content (e.g., no "document.write" in javascript) and thus, the user agent can continue parsing and rendering.
18.2.2 Specifying the scripting language
The default scripting language
<META http-equiv="Content-Script-Type" content="type">
Content-Script-Type: type
- If any META declarations specify the "Content-Script-Type", the last one in the character stream determines the default scripting language.
- Otherwise, if any HTTP headers specify the "Content-Script-Type", the last one in the character stream determines the default scripting language.
Local declaration of a scripting language
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <HTML> <HEAD> <TITLE>A document with SCRIPT</TITLE> <META http-equiv="Content-Script-Type" content="text/tcl"> <SCRIPT type="text/vbscript" src="http://someplace.com/progs/vbcalc"> </SCRIPT> </HEAD> <BODY> <SCRIPT type="text/javascript"> ...some JavaScript... </SCRIPT> </BODY> </HTML>
References to HTML elements from a script
18.2.3 Intrinsic events
- onload = script [CT]
- The onload event occurs when the user agent finishes loading a window or all frames within a FRAMESET. This attribute may be used with BODY and FRAMESET elements.
- onunload = script [CT]
- The onunload event occurs when the user agent removes a document from a window or frame. This attribute may be used withBODY and FRAMESET elements.
- onclick = script [CT]
- The onclick event occurs when the pointing device button is clicked over an element. This attribute may be used with most elements.
- ondblclick = script [CT]
- The ondblclick event occurs when the pointing device button is double clicked over an element. This attribute may be used with most elements.
- onmousedown = script [CT]
- The onmousedown event occurs when the pointing device button is pressed over an element. This attribute may be used with most elements.
- onmouseup = script [CT]
- The onmouseup event occurs when the pointing device button is released over an element. This attribute may be used with most elements.
- onmouseover = script [CT]
- The onmouseover event occurs when the pointing device is moved onto an element. This attribute may be used with most elements.
- onmousemove = script [CT]
- The onmousemove event occurs when the pointing device is moved while it is over an element. This attribute may be used with most elements.
- onmouseout = script [CT]
- The onmouseout event occurs when the pointing device is moved away from an element. This attribute may be used with most elements.
- onfocus = script [CT]
- The onfocus event occurs when an element receives focus either by the pointing device or by tabbing navigation. This attribute may be used with the following elements: A, AREA, LABEL, INPUT, SELECT, TEXTAREA, and BUTTON.
- onblur = script [CT]
- The onblur event occurs when an element loses focus either by the pointing device or by tabbing navigation. It may be used with the same elements as onfocus.
- onkeypress = script [CT]
- The onkeypress event occurs when a key is pressed and released over an element. This attribute may be used with most elements.
- onkeydown = script [CT]
- The onkeydown event occurs when a key is pressed down over an element. This attribute may be used with most elements.
- onkeyup = script [CT]
- The onkeyup event occurs when a key is released over an element. This attribute may be used with most elements.
- onsubmit = script [CT]
- The onsubmit event occurs when a form is submitted. It only applies to the FORM element.
- onreset = script [CT]
- The onreset event occurs when a form is reset. It only applies to the FORM element.
- onselect = script [CT]
- The onselect event occurs when a user selects some text in a text field. This attribute may be used with the INPUT and TEXTAREAelements.
- onchange = script [CT]
- The onchange event occurs when a control loses the input focus and its value has been modified since gaining focus. This attribute applies to the following elements: INPUT, SELECT, and TEXTAREA.
<INPUT NAME="userName" onblur="validUserName(this.value)">Here is another JavaScript example:
<INPUT NAME="num" onchange="if (!checkNum(this.value, 1, 10)) {this.focus();this.select();} else {thanks()}" VALUE="0">
<INPUT name="edit1" size="50"> <SCRIPT type="text/vbscript"> Sub edit1_changed() If edit1.value = "abc" Then button1.enabled = True Else button1.enabled = False End If End Sub </SCRIPT>Here is the same example using Tcl:
<INPUT name="edit1" size="50"> <SCRIPT type="text/tcl"> proc edit1_changed {} { if {[edit value] == abc} { button1 enable 1 } else { button1 enable 0 } } edit1 onChange edit1_changed </SCRIPT>
<BUTTON type="button" name="mybutton" value="10"> <SCRIPT type="text/javascript"> function my_onclick() { . . . } document.form.mybutton.onclick = my_onclick </SCRIPT> </BUTTON>Here's a more interesting window handler:
<SCRIPT type="text/javascript"> function my_onload() { . . . } var win = window.open("some/other/URI") if (win) win.onload = my_onload </SCRIPT>In Tcl this looks like:
<SCRIPT type="text/tcl"> proc my_onload {} { . . . } set win [window open "some/other/URI"] if {$win != ""} { $win onload my_onload } </SCRIPT>
18.2.4 Dynamic modification of documents
Scripts that are executed when a document is loaded may be able to modify the document's contents dynamically. The ability to do so depends on the scripting language itself (e.g., the "document.write" statement in the HTML object model supported by some vendors).- All SCRIPT elements are evaluated in order as the document is loaded.
- All script constructs within a given SCRIPT element that generate SGML CDATA are evaluated. Their combined generated text is inserted in the document in place of the SCRIPT element.
- The generated CDATA is re-evaluated.
<TITLE>Test Document</TITLE> <SCRIPT type="text/javascript"> document.write("<p><b>Hello World!<\/b>") </SCRIPT>Has the same effect as this HTML markup:
<TITLE>Test Document</TITLE> <P><B>Hello World!</B>
18.3 Designing documents for user agents that don't support scripting
18.3.1 The NOSCRIPT element
<!ELEMENT NOSCRIPT - - (%block;)+ -- alternate content container for non script-based rendering --> <!ATTLIST NOSCRIPT %attrs; -- %coreattrs, %i18n, %events -- >
- The user agent is configured not to evaluate scripts.
- The user agent doesn't support a scripting language invoked by a SCRIPT element earlier in the document.
<SCRIPT type="text/tcl"> ...some Tcl script to insert data... </SCRIPT> <NOSCRIPT> <P>Access the <A href="http://someplace.com/data">data.</A> </NOSCRIPT>
18.3.2 Hiding script data from user agents
The JavaScript engine allows the string "<!--" to occur at the start of a SCRIPT element, and ignores further characters until the end of the line. JavaScript interprets "//" as starting a comment extending to the end of the current line. This is needed to hide the string "-->" from the JavaScript parser.
<SCRIPT type="text/javascript"> <!-- to hide script contents from old browsers function square(i) { document.write("The call passed ", i ," to the function.","<BR>") return i * i } document.write("The function returned ",square(5),".") // end hiding contents from old browsers --> </SCRIPT>
In VBScript, a single quote character causes the rest of the current line to be treated as a comment. It can therefore be used to hide the string "-->" from VBScript, for instance:
<SCRIPT type="text/vbscript"> <!-- Sub foo() ... End Sub ' --> </SCRIPT>
In Tcl, the "#" character comments out the rest of the line:
<SCRIPT type="text/tcl"> <!-- to hide script contents from old browsers proc square {i} { document write "The call passed $i to the function.<BR>" return [expr $i * $i] } document write "The function returned [square 5]." # end hiding contents from old browsers --> </SCRIPT>
Tidak ada komentar:
Posting Komentar