ã¹ã¯ãªããã¯èè ãææžã«åæ¹åæ§ã远å ããããšãèš±å¯ããã
èè ã¯ã宣èšåã®ã¡ã«ããºã ããã°ãã°ããä¿å®ããããããã€å€ãã®ãŠãŒã¶ãŒãã¹ã¯ãªãããç¡å¹ãšããŠãããããå¯èœã§ããã°ãã¹ã¯ãªããã«å®£èšåã®ä»£æ¿ã䜿çšããããæšå¥šãããã
èè ã¯ãŸããã¹ã¯ãªããã®ãµããŒãããªãç¶æ ã§ãããã®ã¢ããªã±ãŒã·ã§ã³ãè¡åãããã°ã¬ãŒãããããæšå¥šãããã
scriptèŠçŽ src屿§ãååšããªãå Žåãtype屿§ã®å€ã«äŸåããããã¹ã¯ãªããã®å
容å¶éã«äžèŽããªããã°ãªããªããsrc屿§ãååšããå ŽåãèŠçŽ ã¯ç©ºãŸãã¯ã¹ã¯ãªããææžãå«ãã ãã§ãªãã¹ã¯ãªããã®å
容å¶éã«äžèŽãããã®ããããã§ãªããã°ãªããªããsrc - ãªãœãŒã¹ã®ã¢ãã¬ã¹type â åã蟌ã¿ãªãœãŒã¹ã¿ã€ãcharset - å€éšã¹ã¯ãªãããªãœãŒã¹ã®æåãšã³ã³ãŒãã£ã³ã°async - éåæçã«ã¹ã¯ãªãããå®è¡ããdefer - ã¹ã¯ãªããã®å®è¡ãå»¶æããcrossorigin â èŠçŽ ãcrossoriginèŠæ±ãåŠçããæ¹æ³interface HTMLScriptElement : HTMLElement {
attribute DOMString src;
attribute DOMString type;
attribute DOMString charset;
attribute boolean async;
attribute boolean defer;
attribute DOMString crossOrigin;
attribute DOMString text;
};
scriptèŠçŽ ã¯ãèè
ãææžã«åçã¹ã¯ãªããããã³ããŒã¿ãããã¯ãå«ãããšãèš±å¯ããããã®èŠçŽ ã¯ããŠãŒã¶ãŒã«ã³ã³ãã³ãã衚ããã®ã§ãªãã
åçãªã¹ã¯ãªãããå«ããããã«äœ¿çšãããå Žåãã¹ã¯ãªããã¯ã€ã³ã©ã€ã³ã«åã蟌ãããsrc屿§ãçšããŠå€éšãã¡ã€ã«ããã€ã³ããŒãããããšã®ãããããã§ãããèšèªã"text/javascript"ã«ãã£ãŠèšè¿°ãããªãå ŽåãåŸè¿°ããããã«type屿§ã¯ååšããªããã°ãªããªããã©ã®ãããªèšèªã䜿çšããŠãscriptèŠçŽ ã®å
容ã¯ããã®èšèªã®ä»æ§ã®èŠæ±ãéµå®ããªããã°ãªããªãã
ïŒã¹ã¯ãªãããšã¯å¯Ÿç
§çã«ïŒããŒã¿ãããã¯ãå«ãããã«äœ¿çšãããå ŽåãããŒã¿ã¯ã€ã³ã©ã€ã³ã§åã蟌ãŸããªããã°ãªãããããŒã¿ã®ãã©ãŒãããã¯type屿§ã䜿çšããŠæå®ãããªããã°ãªãããsrc屿§ãæå®ããŠã¯ãªãããscriptèŠçŽ ã®å
容ã¯äœ¿çšããããã©ãŒãããã®ããã«å®çŸ©ãããèŠä»¶ã«æºæ ããªããã°ãªããªãã
type屿§ã¯ãã¹ã¯ãªããã®èšèªãŸãã¯ããŒã¿ã®åœ¢åŒãæäŸããã屿§ãååšããå Žåããã®å€ã¯åŠ¥åœãªMIMEã¿ã€ãã§ãªããã°ãªããªããcharsetãã©ã¡ãŒã¿ãæå®ããŠã¯ãªããªãã屿§ãååšããªãå Žåã«äœ¿çšãããããã©ã«ãã¯ã"text/javascript"ã§ããã
æå®ãããå Žåãsrc屿§ã¯äœ¿çšããå€éšã¹ã¯ãªããã®ãªãœãŒã¹ã®ã¢ãã¬ã¹ãæž¡ãã屿§ãååšããå Žåã屿§å€ã¯ãtype屿§ã«ãã£ãŠäžããããåã«å±ããã¹ã¯ãªãããªãœãŒã¹ãèå¥ããæœåšçã«ç©ºçœã§å²ãŸãã劥åœãªç©ºã§ãªãURLã§ãªããã°ãªããã屿§ãååšããªãå Žåã"text/javascript"åã§ãªããã°ãªããªããã¹ã¯ãªããèšèªãèå¥ãããã€ãªãœãŒã¹ããã®èšèªã®ä»æ§ã®èŠæ±ã«é©åããå ŽåããªãœãŒã¹ã¯ãæå®ãããåã®ã¹ã¯ãªãããªãœãŒã¹ã§ããã
charset屿§ã¯ãå€éšã¹ã¯ãªãããªãœãŒã¹ã®æåãšã³ã³ãŒãã£ã³ã°ãäžãããsrc屿§ãååšããªãå Žåããã®å±æ§ã¯æå®ãããŠã¯ãªããªãã屿§ãèšå®ãããå Žåããã®å€ã¯ãšã³ã³ãŒãã£ã³ã°ã®ã©ãã«ãšASCII倧æåã»å°æåäžåºå¥ã§äžèŽããªããã°ãªããããã€ããããã°ãå€éšãã¡ã€ã«ã®Content-Typeã¡ã¿ããŒã¿ã®charsetãã©ã¡ãŒã¿ãšåããšã³ã³ãŒãã£ã³ã°ãæå®ããªããã°ãªããªãã[ENCODING]
asyncããã³defer屿§ã¯ãã©ã®ããã«ã¹ã¯ãªãããå®è¡ãã¹ãããæç€ºããçåœå±æ§ã§ãããsrc屿§ãååšããªãå Žåãdeferããã³async屿§ã¯æå®ãããŠã¯ãªããªãã
ãããã®å±æ§ã䜿çšããŠéžæããããšãã§ãã3ã€ã®èããããã¢ãŒããååšãããasync屿§ãååšããå Žåãå©çšå¯èœã«ãªããšããã«ãã¹ã¯ãªããã¯éåæçã«å®è¡ãããã ãããasyncãååšããªããã®ã®defer屿§ãååšããå ŽåãããŒãžãè§£æå®äºããéã«ã¹ã¯ãªããã¯å®è¡ããããã©ã¡ãã®å±æ§ãååšããªãå ŽåããŠãŒã¶ãŒãšãŒãžã§ã³ããããŒãžã®è§£æãç¶ããåã«ãã¹ã¯ãªããã¯çŽã¡ã«ãã§ãããããŠå®è¡ãããã
ããã屿§ã®æ£ç¢ºãªåŠçã®è©³çްã¯ãäž»ã«æŽå²çãªçç±ãããããã¶ãèªæã§ãªããå€ãã®HTMLã®åŽé¢ãå«ãããããã£ãŠãå®è£
èŠæ±ã¯å¿
ç¶çã«ä»æ§ã®ããããå Žæã«æ£åšããŠãããïŒãã®ç¯ã®ïŒäžèšã®ã¢ã«ãŽãªãºã ã¯ããã®åŠçã®äžæ žã説æãããããããã®ã¢ã«ãŽãªãºã ãåç
§ãããããã³HTMLã«ãããscriptã®éå§ã¿ã°ãšçµäºã¿ã°ã«å¯Ÿããæ§æè§£æèŠåãç¡é¢ä¿ãªã³ã³ãã³ãã§ãXMLã§ãdocument.write()ã¡ãœããã«å¯ŸããèŠåãã¹ã¯ãªããã®åãæ±ããªã©ã«ãã£ãŠåç
§ãããã
ããšãasync屿§ãæå®ãããŠããããã©ã«ãã§ããåæããããã³ã°åäœã®ä»£ããã«deferã®åäœããã©ãŒã«ããã¯ããããã«ãdeferã®ã¿ããµããŒãããïŒãã€asyncããµããŒãããªãïŒã¬ã¬ã·ãŒãŠã§ããã©ãŠã¶ããããããããdefer屿§ã¯æå®ãããŠãããã
crossorigin屿§ã¯CORSèšå®å±æ§ã§ãããä»ã®çæå
ããååŸãããã¹ã¯ãªããã«å¯ŸããŠããšã©ãŒæ
å ±ãå
¬éãããã©ãããå¶åŸ¡ããã
srcãtypeãcharsetãasyncãdeferãããã³crossorigin屿§ã®åçãªå€æŽã¯çŽæ¥äœã圱é¿ããªãããããã®å±æ§ã¯äžèšã«èª¬æããç¹å®æã«äœ¿çšãããã
A script element has several associated pieces of state.
The first is a flag indicating whether or not the script block has been "already
started". Initially, script elements must have this flag unset (script blocks,
when created, are not "already started"). The cloning
steps for script elements must set the "already started" flag on the copy if
it is set on the element being cloned.
The second is a flag indicating whether the element was "parser-inserted".
Initially, script elements must have this flag unset. It is set by the HTML
parser and the XML parser on script elements they insert and
affects the processing of those elements.
The third is a flag indicating whether the element will "force-async". Initially,
script elements must have this flag set. It is unset by the HTML parser
and the XML parser on script elements they insert. In addition, whenever
a script element whose "force-async" flag is set has a async content attribute added, the element's
"force-async" flag must be unset.
The fourth is a flag indicating whether or not the script block is "ready to be
parser-executed". Initially, script elements must have this flag unset (script
blocks, when created, are not "ready to be parser-executed"). This flag is used only for elements
that are also "parser-inserted", to let the parser know when to execute the
script.
The last few pieces of state are the script block's type, the
script block's character encoding, and the script block's fallback character
encoding. They are determined when the script is prepared, based on the attributes on
the element at that time, and the Document of the script element.
When a script element that is not marked as being "parser-inserted"
experiences one of the events listed in the following list, the user agent must synchronously
prepare the script element:
script element gets inserted
into a document, at the time the node is inserted
according to the DOM, after any other script elements inserted at the same time that
are earlier in the Document in tree order.script element is in a Document and a node or
document fragment is inserted into the
script element, after any script elements inserted at that time.script element is in a Document and has a src attribute set where previously the element had no such
attribute.To prepare a script, the user agent must act as follows:
If the script element is marked as having "already started", then
the user agent must abort these steps at this point. The script is not executed.
If the element has its "parser-inserted" flag set, then set was-parser-inserted to true and unset the element's "parser-inserted" flag. Otherwise, set was-parser-inserted to false.
This is done so that if parser-inserted script elements fail to run
when the parser tries to run them, e.g. because they are empty or specify an unsupported
scripting language, another script can later mutate them and cause them to run again.
If was-parser-inserted is true and the element does not have an async attribute, then set the element's
"force-async" flag to true.
This is done so that if a parser-inserted script element fails to
run when the parser tries to run it, but it is later executed after a script dynamically updates
it, it will execute asynchronously even if the async
attribute isn't set.
If the element has no src attribute, and its child
nodes, if any, consist only of comment nodes and empty Text nodes, then the user
agent must abort these steps at this point. The script is not executed.
If the element is not in a Document, then the user agent must abort
these steps at this point. The script is not executed.
If either:
script element has a type attribute
and its value is the empty string, orscript element has no type attribute
but it has a language attribute and that
attribute's value is the empty string, orscript element has neither a type
attribute nor a language attribute, then...let the script block's type for this script element be "text/javascript".
Otherwise, if the script element has a type attribute, let the script block's type for this
script element be the value of that attribute with any leading or trailing
sequences of space characters removed.
Otherwise, the element has a non-empty language
attribute; let the script block's type for this script element be the
concatenation of the string "text/" followed by the value of the language attribute.
The language attribute is never
conforming, and is always ignored if there is a type
attribute present.
If the user agent does not support the scripting language given by the
script block's type for this script element, then the user agent must abort
these steps at this point. The script is not executed.
If was-parser-inserted is true, then flag the element as "parser-inserted" again, and set the element's "force-async" flag to false.
The user agent must set the element's "already started" flag.
The state of the element at this moment is later used to determine the script source.
If the element is flagged as "parser-inserted", but the element's
Document is not the Document of the parser that created the element,
then abort these steps.
If scripting is disabled for the script
element, then the user agent must abort these steps at this point. The script is not
executed.
The definition of scripting is disabled
means that, amongst others, the following scripts will not execute: scripts in
XMLHttpRequest's responseXML
documents, scripts in DOMParser-created documents, scripts in documents created by
XSLTProcessor's transformToDocument feature, and scripts
that are first inserted by a script into a Document that was created using the
createDocument() API. [XHR] [DOMPARSING] [DOM]
If the script element has an event
attribute and a for attribute, then run these substeps:
Let for be the value of the for
attribute.
Let event be the value of the event attribute.
Strip leading and trailing whitespace from event and for.
If for is not an ASCII case-insensitive match for the
string "window", then the user agent must abort these steps at this
point. The script is not executed.
If event is not an ASCII case-insensitive match for
either the string "onload" or the string "onload()", then the user agent must abort these steps at this point. The script
is not executed.
If the script element has a charset
attribute, then let the script block's character encoding for this
script element be the result of getting an encoding from the value of
the charset attribute.
Otherwise, let the script block's fallback character encoding for this
script element be the same as the
encoding of the document itself.
Only one of these two pieces of state is set.
If the element has a src content attribute, run these
substeps:
Let src be the value of the element's src attribute.
If src is the empty string, queue a task to fire
a simple event named error at the element, and abort
these steps.
Resolve src relative to the element.
If the previous step failed, queue a task to fire a simple
event named error at the element, and abort these
steps.
Do a potentially CORS-enabled fetch of the resulting
absolute URL, with the mode being the current state of the element's crossorigin content attribute, the origin being the origin of the script element's
Document, and the default origin behaviour set to taint.
The resource obtained in this fashion can be either CORS-same-origin or CORS-cross-origin. This only affects how error reporting happens.
For performance reasons, user agents may start fetching the script (as defined above) as
soon as the src attribute is set, instead, in the hope
that the element will be inserted into the document (and that the crossorigin attribute won't change value in the
meantime). Either way, once the element is inserted into the document, the load must have started as described in this
step. If the UA performs such prefetching, but the element is never inserted in the document,
or the src attribute is dynamically changed, or the crossorigin attribute is dynamically changed, then the
user agent will not execute the script so obtained, and the fetching process will have been
effectively wasted.
Then, the first of the following options that describes the situation must be followed:
src
attribute, and the element has a defer attribute, and
the element has been flagged as "parser-inserted", and the element does not have
an async attributeThe element must be added to the end of the list of scripts that will execute when the
document has finished parsing associated with the Document of the parser
that created the element.
The task that the networking task source places on the task queue once the fetching algorithm has completed must set the element's "ready to be parser-executed" flag. The parser will handle executing the script.
src attribute, and the element has been flagged as
"parser-inserted", and the element does not have an async attributeThe element is the pending parsing-blocking script of the
Document of the parser that created the element. (There can only be one such
script per Document at a time.)
The task that the networking task source places on the task queue once the fetching algorithm has completed must set the element's "ready to be parser-executed" flag. The parser will handle executing the script.
src attribute, and the element has been flagged as
"parser-inserted", and either the parser that created the script is
an XML parser or it's an HTML parser whose script nesting
level is not greater than one, and the Document of the HTML
parser or XML parser that created the script element has
a style sheet that is blocking scriptsThe element is the pending parsing-blocking script of the
Document of the parser that created the element. (There can only be one such
script per Document at a time.)
Set the element's "ready to be parser-executed" flag. The parser will handle executing the script.
src attribute, does not have an async attribute, and does not have the
"force-async" flag setThe element must be added to the end of the list of scripts that will execute in order
as soon as possible associated with the Document of the script
element at the time the prepare a script algorithm started.
The task that the networking task source places on the task queue once the fetching algorithm has completed must run the following steps:
If the element is not now the first element in the list of scripts that will execute in order as soon as possible to which it was added above, then mark the element as ready but abort these steps without executing the script yet.
Execution: Execute the script block corresponding to the first script element in this list of scripts that will execute in order as soon as possible.
Remove the first element from this list of scripts that will execute in order as soon as possible.
If this list of scripts that will execute in order as soon as possible is still not empty and the first entry has already been marked as ready, then jump back to the step labeled execution.
src
attributeThe element must be added to the set of scripts that will execute as soon as
possible of the Document of the script element at the time the
prepare a script algorithm started.
The task that the networking task source places on the task queue once the fetching algorithm has completed must execute the script block and then remove the element from the set of scripts that will execute as soon as possible.
Fetching an external script must delay the load event of the element's document until the task that is queued by the networking task source once the resource has been fetched (defined above) has been run.
The pending parsing-blocking script of a Document is used by the
Document's parser(s).
If a script element that blocks a parser gets moved to another
Document before it would normally have stopped blocking that parser, it nonetheless
continues blocking that parser until the condition that causes it to be blocking the parser no
longer applies (e.g. if the script is a pending parsing-blocking script because there
was a style sheet that is blocking scripts when it was parsed, but then the script is
moved to another Document before the style sheet loads, the script still blocks the
parser until the style sheets are all loaded, at which time the script executes and the parser is
unblocked).
When the user agent is required to execute a script block, it must run the following steps:
If the element is flagged as "parser-inserted", but the element's
Document is not the Document of the parser that created the element,
then abort these steps.
Jump to the appropriate set of steps from the list below:
Executing the script block must just consist of firing
a simple event named error at the element.
Executing the script block must consist of running the following steps. For the purposes of
these steps, the script is considered to be from an external file if, while the
prepare a script algorithm above was running for this script, the
script element had a src attribute
specified.
Initialize the script block's source as follows:
The contents of that file, interpreted as a Unicode string, are the script source.
To obtain the Unicode string, the user agent run the following steps:
If the resource's Content Type metadata, if any, specifies a character encoding, and the user agent supports that encoding, then let character encoding be that encoding, and jump to the bottom step in this series of steps.
If the algorithm above set the script block's character encoding, then let character encoding be that encoding, and jump to the bottom step in this series of steps.
Let character encoding be the script block's fallback character encoding.
If the specification for the script block's type gives specific rules for decoding files in that format to Unicode, follow them, using character encoding as the character encoding specified by higher-level protocols, if necessary.
Otherwise, decode the file to Unicode, using character encoding as the fallback encoding.
The decode algorithm overrides character encoding if the file contains a BOM.
The external file is the script source. When it is later executed, it must be interpreted in a manner consistent with the specification defining the language given by the script block's type.
The value of the text IDL attribute at the time
the element's "already started" flag was last set is the script source.
The child nodes of the script element at the time the element's
"already started" flag was last set are the script source.
Fire a simple event named beforescriptexecute that bubbles and is cancelable
at the script element.
If the event is canceled, then abort these steps.
If the script is from an external file, then increment the
ignore-destructive-writes counter of the script element's
Document. Let neutralized doc be that
Document.
Create a script, using the script block's source, the
URL from which the script was obtained, the script block's
type as the scripting language, and the script settings object of the script element's
Document's Window object.
If the script came from a resource that was fetched in the steps above, and the resource was CORS-cross-origin, then pass the muted errors flag to the create a script algorithm as well.
This is where the script is compiled and actually executed.
Decrement the ignore-destructive-writes counter of neutralized doc, if it was incremented in the earlier step.
Fire a simple event named afterscriptexecute that bubbles (but is not
cancelable) at the script element.
If the script is from an external file, fire a simple event named load at the script element.
Otherwise, the script is internal; queue a task to fire a simple
event named load at the script
element.
The IDL attributes src, type, charset, defer, each must reflect the respective
content attributes of the same name.
The crossOrigin IDL attribute must
reflect the crossorigin content
attribute, limited to only known values.
The async IDL attribute controls whether the
element will execute asynchronously or not. If the element's "force-async" flag is
set, then, on getting, the async IDL attribute must return
true, and on setting, the "force-async" flag must first be unset, and then the
content attribute must be removed if the IDL attribute's new value is false, and must be set to
the empty string if the IDL attribute's new value is true. If the element's
"force-async" flag is not set, the IDL attribute must reflect
the async content attribute.
text [ = value ]TextããŒãã§ãªãåããŒããç¡èŠããŠãèŠçŽ ã®å
容ãè¿ãã
äžããããå€ãæã€èŠçŽ ã®åã眮æããããã«ãèšå®ã§ããã
The IDL attribute text must return a
concatenation of the contents of all the Text nodes that are children of the
script element (ignoring any other nodes such as comments or elements), in tree
order. On setting, it must act the same way as the textContent IDL attribute.
document.write()ã¡ãœãããçšããŠæ¿å
¥ãããå ŽåãscriptèŠçŽ ã¯ïŒäžè¬ã«åæããŠïŒå®è¡ããããinnerHTMLããã³outerHTML屿§ãçšããŠæ¿å
¥ãããå Žåããããã¯äžåå®è¡ããªãã
次ã®äŸã«ãããŠã2ã€ã®scriptèŠçŽ ã䜿çšãããã1ã€ã¯å€éšã¹ã¯ãªããã«åã蟌ã¿ããã1ã€ã¯ããŒã¿ãå«ãã
<script src="game-engine.js"></script> <script type="text/x-game-map"> ........U.........e o............A....e .....A.....AAA....e .A..AAA...AAAAA...e </script>
ãã®å Žåã®ããŒã¿ã¯ããããªã²ãŒã ã®ããããçæããã¹ã¯ãªããã«ãã£ãŠäœ¿çšããããããããªããããããããŒã¿ã¯ãã®ããã«äœ¿çšããå¿ èŠã¯ãªããããããå®éã«ãããããŒã¿ã¯ãããŒãžã®ããŒã¯ã¢ããã®ä»ã®éšåã«åã蟌ãŸããŠãããããã§ããŒã¿ãããã¯ã¯ãã²ãŒã ãããã§ç¹å®ã®æ©èœãæ¢ããŠãããŠãŒã¶ãŒãæ¯æŽãããµã€ãã®æ€çŽ¢ãšã³ãžã³ã«ãã£ãŠåã«äœ¿çšãããã
次ã®ãµã³ãã«ã¯ãã©ã®ããã«ã¹ã¯ãªããèŠçŽ ãææžã®ä»ã®éšåã§äœ¿çšããã颿°ãå®çŸ©ããããã«äœ¿çšããããšãã§ãããã瀺ãããŸãããã©ãŒã ã®åºåãåæåããå Žåã«ãææžãè§£æãããŠããéã«scriptèŠçŽ ãã¹ã¯ãªãããåŒã³åºãããã«äœ¿çšããããæ¹æ³ã瀺ãã
<script>
function calculate(form) {
var price = 52000;
if (form.elements.brakes.checked)
price += 1000;
if (form.elements.radio.checked)
price += 2500;
if (form.elements.turbo.checked)
price += 5000;
if (form.elements.sticker.checked)
price += 250;
form.elements.result.value = price;
}
</script>
<form name="pricecalc" onsubmit="return false" onchange="calculate(this)">
<fieldset>
<legend>Work out the price of your car</legend>
<p>Base cost: £52000.</p>
<p>Select additional options:</p>
<ul>
<li><label><input type=checkbox name=brakes> Ceramic brakes (£1000)</label></li>
<li><label><input type=checkbox name=radio> Satellite radio (£2500)</label></li>
<li><label><input type=checkbox name=turbo> Turbo charger (£5000)</label></li>
<li><label><input type=checkbox name=sticker> "XZ" sticker (£250)</label></li>
</ul>
<p>Total: £<output name=result></output></p>
</fieldset>
<script>
calculate(document.forms.pricecalc);
</script>
</form>
A user agent is said to support the scripting language if each component of the script block's type is an ASCII case-insensitive match for the corresponding component in the MIME type string of a scripting language that the user agent implements.
以äžã®è¡šã¯ããŠãŒã¶ãŒãšãŒãžã§ã³ããèªèããªããã°ãªããªãMIMEã¿ã€ãæååããã³åç §ããèšèªã§ããïŒ
application/ecmascript"application/javascript"application/x-ecmascript"application/x-javascript"text/ecmascript"text/javascript"text/javascript1.0"text/javascript1.1"text/javascript1.2"text/javascript1.3"text/javascript1.4"text/javascript1.5"text/jscript"text/livescript"text/x-ecmascript"text/x-javascript"User agents may support other MIME types for other languages, but must not support other MIME types for the languages in the list above. User agents are not required to support the languages listed above.
The following MIME types (with or without parameters) must not be interpreted as scripting languages:
text/plain"
text/xml"
application/octet-stream"
application/xml"
These types are explicitly listed here because they are poorly-defined types that are nonetheless likely to be used as formats for data blocks, and it would be problematic if they were suddenly to be interpreted as script by a user agent.
When examining types to determine if they represent supported languages, user agents must not ignore MIME parameters. Types are to be compared including all parameters.
For example, types that include the charset parameter will
not be recognized as referencing any of the scripting languages listed above.
scriptèŠçŽ ã®ã³ã³ãã³ãã®å¶çŽãã®ç¯ã§èª¬æãããå€å°å¥åŠãªå¶çŽãåé¿ããæãç°¡åã§å®å
šãªæ¹æ³ã¯ã以äžã®ã·ãŒã±ã³ã¹ãïŒããšãã°æååãæ£èŠè¡šçŸããŸãã¯ã³ã¡ã³ããªã©ïŒã¹ã¯ãªããå
ã§ãªãã©ã«ã«è¡šç€ºããããã€åŒã®äžã§ãã®ãããªæ§é äœã䜿çšããŠã³ãŒããèšè¿°ãé¿ããããã«ããéã«ã"<!--"ã"<\!--"ãšããŠã"<script"ã"<\script"ãšããŠãããã³"</script"ã"<\/script"ãšããŠåžžã«ãšã¹ã±ãŒãããããšã§ããããã®ç¯ã®å¶éãããªã¬ãŒã«ãªããããèœãšã穎ãåé¿ããïŒããªãã¡ãæŽå²çãªçç±ã®ããã«ãHTMLã«ãããscriptãããã¯ã®è§£æã¯ããããã®ã·ãŒã±ã³ã¹ãèããå Žåã«çŽèгçã§ãªãåããããå¥åŠã§é¢šå€ãããªæ
£ç¿ã§ããã
scriptèŠçŽ ã®textContentã¯ãUnicodeã§ããæåã»ããã§ããã以äžã®ABNFã§scriptçæç©ãšå¯Ÿçã§ãªããã°ãªããªãã[ABNF]
script = outer *( comment-open inner comment-close outer ) outer = < any string that doesn't contain a substring that matches not-in-outer > not-in-outer = comment-open inner = < any string that doesn't contain a substring that matches not-in-inner > not-in-inner = comment-close / script-open comment-open = "<!--" comment-close = "-->" script-open = "<" s c r i p t tag-end s = %x0053 ; U+0053 LATIN CAPITAL LETTER S s =/ %x0073 ; U+0073 LATIN SMALL LETTER S c = %x0043 ; U+0043 LATIN CAPITAL LETTER C c =/ %x0063 ; U+0063 LATIN SMALL LETTER C r = %x0052 ; U+0052 LATIN CAPITAL LETTER R r =/ %x0072 ; U+0072 LATIN SMALL LETTER R i = %x0049 ; U+0049 LATIN CAPITAL LETTER I i =/ %x0069 ; U+0069 LATIN SMALL LETTER I p = %x0050 ; U+0050 LATIN CAPITAL LETTER P p =/ %x0070 ; U+0070 LATIN SMALL LETTER P t = %x0054 ; U+0054 LATIN CAPITAL LETTER T t =/ %x0074 ; U+0074 LATIN SMALL LETTER T tag-end = %x0009 ; "tab" (U+0009) tag-end =/ %x000A ; "LF" (U+000A) tag-end =/ %x000C ; "FF" (U+000C) tag-end =/ %x0020 ; U+0020 SPACE tag-end =/ %x002F ; "/" (U+002F) tag-end =/ %x003E ; ">" (U+003E)
scriptèŠçŽ ãã¹ã¯ãªããææžãå«ãå Žåã以äžã®ç¯ã§èšè¿°ãããããã«ãèŠçŽ ã®ã³ã³ãã³ãã®ãããªãå¶çŽãããã
以äžã®ã¹ã¯ãªããã¯ããã®åé¡ã瀺ããŠããããã®ããã«ãæååãå«ãŸããŠããã¹ã¯ãªããããããšããïŒ
var example = 'Consider this string: <!-- <script>'; console.log(example);
ãããscriptãããã¯ã§çŽæ¥ãã®æååãå
¥ããŠããå Žåãäžèšã®å¶éã«éåããªãã
<script> var example = 'Consider this string: <!-- <script>'; console.log(example); </script>
ãããããã倧ããªåé¡ãã€ãã¹ã¯ãªããããããã®å¶éã«éåããªãçç±ã¯ãå®éã«ã¹ã¯ãªãããå¥åŠã«è§£æãããã ãããšããããšã§ãããäžèšã®ã¹ã¯ãªãããããã¯ã¯çµäºããŠããªããããã¯ãå®éã«ã¯äŸç¶ãšããŠscriptãããã¯ã®äžéšã§ãããã®ã¹ããããã«ãããŠ"</script>"çµäºã¿ã°ã®ããã«èŠãããã®ã§ãããïŒã¹ã¯ãªãããçµäºããŠããªãããïŒã¹ã¯ãªããã¯å®è¡ããªããã¹ã¯ãªãããäœããã®åœ¢ã§å®è¡ããå Žåã以äžã®ããã«ããŒã¯ã¢ãããèŠããå ŽåãïŒããã§åŒ·èª¿ãããïŒã¹ã¯ãªããã劥åœãªJavaScriptã§ãªãã®ã§ãã¹ã¯ãªããã¯å€±æããã ããïŒ
<script> var example = 'Consider this string: <!-- <script>'; console.log(example); </script> <!-- despite appearances, this is actually part of the script still! --> <script> ... // this is the same script block still... </script>
ããã§èµ·ãã£ãŠããããšã¯ã¬ã¬ã·ãŒãªçç±ã®ããã«ãHTMLã«ãããscriptèŠçŽ ã§"<!--"ããã³ "<script"æååã¯ãããŒãµããããã¯ãéããæ€èšããããã«ãã©ã³ã¹ããšãå¿
èŠãããã
ãã®ç¯ã®æåã«è¿°ã¹ãããã«ãåé¡ã®æååããšã¹ã±ãŒãããããšã«ãã£ãŠãåé¡ã¯å®å šã«åé¿ãããŠããïŒ
<script> var example = 'Consider this string: <\!-- <\script>'; console.log(example); </script> <!-- this is just a comment between script blocks --> <script> ... // this is a new script block </script>
次ã®äŸã®ããã«ããããã®ã·ãŒã±ã³ã¹ã¯èªç¶ã«ã¹ã¯ãªããåŒã§åºçŸå¯èœã§ããïŒ
if (x<!--y) { ... }
if ( player<script ) { ... }
ãã®ãããªå Žåãæåã¯ãšã¹ã±ãŒãããããšã¯ã§ããªãããã·ãŒã±ã³ã¹ãçºçããªãããã«åŒã¯æ¬¡ã®ããã«æžãæããããšãã§ããïŒ
if (x < !--y) { ... }
if (!--y > x) { ... }
if (!(--y) > x) { ... }
if (player < script) { ... }
if (script > player) { ... }
ãããè¡ããšã¯ãŸããåæ§ã«æ§ã ãªèœãšã穎ãåé¿ããïŒé¢é£ããæŽå²çãªçç±ã®ããã«ãJavaScriptã§æåå"<!--"ã¯ã"//"ã®ããã«ãå®éã«ã¯è¡ã³ã¡ã³ãã®éå§ãšããŠæ±ãããã
scriptèŠçŽ ã®src屿§ãæå®ãããå Žåãããããã°ãscriptèŠçŽ ã®ã³ã³ãã³ãã¯ãèŠçŽ ã®ã³ã³ãã³ãããåå²ããããããªtextIDL屿§å€ã§ãªããã°ãªãããæåã»ãããUnicodeã§ããäžèšã®ABNFã§documentationçæç©ãšäžèŽããªããã°ãªããªãã[ABNF]
documentation = *( *( space / tab / comment ) [ line-comment ] newline )
comment = slash star *( not-star / star not-slash ) 1*star slash
line-comment = slash slash *not-newline
; characters
tab = %x0009 ; "tab" (U+0009)
newline = %x000A ; "LF" (U+000A)
space = %x0020 ; U+0020 SPACE
star = %x002A ; "*" (U+002A)
slash = %x002F ; "/" (U+002F)
not-newline = %x0000-0009 / %x000B-10FFFF
; a Unicode character other than "LF" (U+000A)
not-star = %x0000-0029 / %x002B-10FFFF
; a Unicode character other than "*" (U+002A)
not-slash = %x0000-002E / %x0030-10FFFF
; a Unicode character other than "/" (U+002F)
ããã¯ãJavaScriptã®ã³ã¡ã³ãã§èŠçŽ ã®ã³ã³ãã³ããèšçœ®ãããã®ãšäžèŽããã
ãã®èŠæ±ã¯ãscriptèŠçŽ ã®ã³ã³ãã³ãã®æ§æäžã«å
ã®å¶çŽã«å ããŠååšããã
以äžã¯ãäŸç¶ãšããŠå€éšã¹ã¯ãªãããã¡ã€ã«ãåç
§ããéã«ææžå
ã§ãèè
ãã©ã€ã»ã³ã¹æ
å ±ãAPIæ
å ±ã®ãããªææžãå«ãããšãèš±å¯ãããsrc屿§ãæäŸããäžæ¹ã§ãå¶ç¶ã«ãèè
ãæå¹ãªã¹ã¯ãªããã®ããã«èŠãããã®ãå«ãŸãªãããã«ãæ§æã¯å¶çŽãããã
<script src="cool-effects.js"> // create new instances using: // var e = new Effect(); // start the effect using .play, stop using .stop: // e.play(); // e.stop(); </script>
script elements and XSLTãã®ç¯ã¯éèŠç¯çã§ããã
This specification does not define how XSLT interacts with the script element.
However, in the absence of another specification actually defining this, here are some guidelines
for implementors, based on existing implementations:
When an XSLT transformation program is triggered by an processing instruction and the browser implements a
direct-to-DOM transformation, script elements created by the XSLT processor need to
be marked "parser-inserted" and run in document order (modulo scripts marked defer or async),
asynchronously while the transformation is occurring.
The XSLTProcessor.transformToDocument() method
adds elements to a Document that is not in a browsing context, and,
accordingly, any script elements they create need to have their "already
started" flag set in the prepare a script algorithm and never get executed
(scripting is disabled). Such script
elements still need to be marked "parser-inserted", though, such that their async IDL attribute will return false in the absence of an async content attribute.
The XSLTProcessor.transformToFragment() method
needs to create a fragment that is equivalent to one built manually by creating the elements
using document.createElementNS(). For instance,
it needs to create script elements that aren't "parser-inserted" and
that don't have their "already started" flag set, so that they will execute when the
fragment is inserted into a document.
The main distinction between the first two cases and the last case is that the first two
operate on Documents and the last operates on a fragment.
noscriptèŠçŽ noscriptèŠçŽ ãååšããªãå ŽåãHTMLææžã®headèŠçŽ å
ãnoscriptèŠçŽ ãååšããªãå ŽåãHTMLææžã§ãã¬ãŒãžã³ã°ã³ã³ãã³ããæåŸ
ãããå ŽæãheadèŠçŽ å
ã§ïŒä»»æã®é ã§ã0å以äžã®linkèŠçŽ ããŒãå以äžã®styleèŠçŽ ã0å以äžã®metaèŠçŽ ãheadèŠçŽ å€ã§ïŒééçããã ããnoscriptèŠçŽ ã®åå«ãæã£ãŠã¯ãªããªããHTMLElementã䜿çšãããnoscriptèŠçŽ ã¯ãã¹ã¯ãªãããæå¹ã§ããå Žåã¯äœã衚ãããã¹ã¯ãªãããç¡å¹ã§ããå Žåã¯èŠçŽ ã®åã衚ããããã¯ãææžãè§£æãããæ¹æ³ã«åœ±é¿ãäžããããšã«ãã£ãŠãã¹ã¯ãªããããµããŒããããŠãŒã¶ãŒãšãŒãžã§ã³ããšãµããŒãããªããŠãŒã¶ãŒãšãŒãžã§ã³ãã«ç°ãªãããŒã¯ã¢ãããæç€ºããããã«äœ¿çšãããã
HTMLææžã§äœ¿çšããå Žåãèš±å¯ãããã³ã³ãã³ãã¢ãã«ã¯æ¬¡ã®ãšããïŒ
headèŠçŽ å
ã®noscriptèŠçŽ ã«å¯ŸããŠnoscriptèŠçŽ ã¯ãlinkãstyleãããã³metaèŠçŽ ã®ã¿ãå«ãŸãªããã°ãªããªãã
headèŠçŽ å
ã®noscriptèŠçŽ ã«å¯ŸããŠnoscriptèŠçŽ ãããã¹ãã®ã¿ãå«ãŸãªããã°ãªããªãããã ãHTMLæçè§£æã¢ã«ãŽãªãºã ãçºåããå Žåãé€ã with
the noscript element as the context
element and the text contents as the input must result in a list of nodes
that consists only of link, style, and meta elements that
would be conforming if they were children of the noscript element, and no parse errors.
headèŠçŽ å€ã®noscriptèŠçŽ ã«å¯ŸããŠnoscriptèŠçŽ ã®ã³ã³ãã³ãã¢ãã«ã¯ééçã§ãããåæã«noscriptèŠçŽ ãnoscriptèŠçŽ ãæã£ãŠã¯ãªããªãïŒnoscriptèŠçŽ ãå
¥ãåã«ã§ããªãïŒè¿œå å¶éãããã
headèŠçŽ å€ã®noscriptèŠçŽ ã«å¯ŸããŠnoscriptèŠçŽ ã¯ããã¹ãã®ã¿ãå«ãŸãªããã°ãªããªãããã ãããã¹ãã¯ã以äžã®ã¢ã«ãŽãªãºã ãnoscriptèŠçŽ ããã³scriptèŠçŽ ããããªãé©åææžããããããã®ã§ãªããã°ãªãããã¢ã«ãŽãªãºã ã§ã¹ãããã¯HTMLããŒãµã«è§£æãšã©ãŒãèµ·ãããªãããã«ããªããã°ãªããªãïŒ
scriptèŠçŽ ãåãé€ããnoscriptèŠçŽ ã®ãªã¹ããäœãããã®ãªã¹ãã®ånoscriptèŠçŽ ã«å¯ŸããŠã以äžã®ã¹ããããå®è¡ããïŒ
noscriptèŠçŽ ã®èŠªèŠçŽ ãparent elementãšããnoscriptèŠçŽ ã®åã«æ¥ãparent elementã®ãã¹ãŠã®åãååŸãããããã®èŠçŽ ãthe before childrenãšåŒã¶ãnoscriptèŠçŽ ã®åŸã«æ¥ãparent elementã®ãã¹ãŠã®åãååŸãããããã®èŠçŽ ãthe after childrenãšåŒã¶ãnoscriptèŠçŽ ã«å±ããå
šTextåããŒãã®é£éãsãšãããinnerHTML屿§ãsã®å€ã«èšå®ãããïŒããã¯ãå¯äœçšãšããŠnoscriptèŠçŽ ãææžããé€å»ãããïŒæŽå²çãªçç±ã«ãããããŒãµãåŒã³åºããããšãã«ã¹ã¯ãªãããæå¹ã«ããããã©ããã«åºã¥ãHTMLããŒãµã«ãã£ãŠnoscriptèŠçŽ ãç°ãªãæ¹æ³ã§åŠçãããã®ã§ããããã®ãã¹ãŠã®ããã€ããå¿
èŠãšãããã
noscriptã¯XMLææžã§äœ¿çšããŠã¯ãªããªãã
noscriptèŠçŽ ã¯HTMLæ§æã§ã®ã¿æå¹ã ããXHTMLæ§æã§ã¯å¹æããªããã¹ã¯ãªãããæå¹ã§ããå Žåããã®èŠçŽ ãåäœããæ¹æ³ã¯ãåºæ¬çã«ããŒãµã"ãªã"ã«ããããšã§ãããèŠçŽ ã®å
容ã¯ãå®éã®èŠçŽ ãšããŠã§ã¯ãªãçŽç²ã«ããã¹ããšããŠæ±ãããŠããã®ã§ãããXMLã¯ããããå®è¡ããããã®ã¡ã«ããºã ãå®çŸ©ããªãã
The noscript element has no other requirements. In particular, children of the
noscript element are not exempt from form submission, scripting, and so
forth, even when scripting is enabled for the element.
次ã®äŸã«ãããŠãnoscriptèŠçŽ ã¯ãã¹ã¯ãªããã®ãã©ãŒã«ããã¯ãæäŸããããã«äœ¿çšãããã
<form action="calcSquare.php">
<p>
<label for=x>Number</label>:
<input id="x" name="x" type="number">
</p>
<script>
var x = document.getElementById('x');
var output = document.createElement('p');
output.textContent = 'Type a number; it will be squared right then!';
x.form.appendChild(output);
x.form.onsubmit = function () { return false; }
x.oninput = function () {
var v = x.valueAsNumber;
output.textContent = v + ' squared is ' + v * v;
};
</script>
<noscript>
<input type=submit value="Calculate Square">
</noscript>
</form>
ã¹ã¯ãªãããç¡å¹ã§ããå Žåããã¿ã³ã¯ããµãŒããŒåŽã§èšç®ãè¡ãããã«è¡šç€ºããããã¹ã¯ãªãããæå¹ã§ããå Žåã代ããã«å€ããã®å Žã§èšç®ãããã
noscriptèŠçŽ ã¯éåšã§ãããæã«ã¯ãã¹ã¯ãªãããæå¹ã«ãããããããªãããäœããã®çç±ã§ããŒãžã®ã¹ã¯ãªããã倱æãããããããªãããã®ãããªçç±ãããæ¬¡ã®äŸã®ããã«ãnoscriptèŠçŽ ã®äœ¿çšãé¿ãã代ããã«ããã®å Žã§ã¹ã¯ãªããã®ãªãããŒãžããã¹ã¯ãªããåãããããŒãžã«ããŒãžã倿Žããã¹ã¯ãªãããèšèšããããšãäžè¬ã«ããè¯ãïŒ
<form action="calcSquare.php">
<p>
<label for=x>Number</label>:
<input id="x" name="x" type="number">
</p>
<input id="submit" type=submit value="Calculate Square">
<script>
var x = document.getElementById('x');
var output = document.createElement('p');
output.textContent = 'Type a number; it will be squared right then!';
x.form.appendChild(output);
x.form.onsubmit = function () { return false; }
x.oninput = function () {
var v = x.valueAsNumber;
output.textContent = v + ' squared is ' + v * v;
};
var submit = document.getElementById('submit');
submit.parentNode.removeChild(submit);
</script>
</form>
noscriptèŠçŽ ã¯XHTMLæ§æã§ãµããŒããããªããããäžèšã®ãã¯ããã¯ã¯XHTMLã§ã圹ç«ã€ã
templateèŠçŽ span屿§ãæããªãcolgroupèŠçŽ ã®åãšããŠãolããã³ulèŠçŽ ã®ã³ã³ãã³ãã¢ãã«ãdlèŠçŽ ã®ã³ã³ãã³ãã¢ãã«ãfigureèŠçŽ ã®ã³ã³ãã³ãã¢ãã«ãrubyèŠçŽ ã®ã³ã³ãã³ãã¢ãã«ãobjectèŠçŽ ã®ã³ã³ãã³ãã¢ãã«ãvideoããã³audioèŠçŽ ã®ã³ã³ãã³ãã¢ãã«ãtableèŠçŽ ã®ã³ã³ãã³ãã¢ãã«ãcolgroupèŠçŽ ã®ã³ã³ãã³ãã¢ãã«ãtheadãtbodyããã³tfootèŠçŽ ã®ã³ã³ãã³ãã¢ãã«ãtrèŠçŽ ã®ã³ã³ãã³ãã¢ãã«ãfieldsetèŠçŽ ã®ã³ã³ãã³ãã¢ãã«ãselectèŠçŽ ã®ã³ã³ãã³ãã¢ãã«ãinterface HTMLTemplateElement : HTMLElement {
readonly attribute DocumentFragment content;
};
templateèŠçŽ ã¯ãè€è£œãããã¹ã¯ãªããã«ãã£ãŠææžã«æ¿å
¥ã§ããHTMLã®æçã宣èšããããã«äœ¿çšãããã
ãã³ãã¬ãŒãã¯ãäžæŽ»æ§DOMãµãããªãŒã宣èšãããµãããªãŒãåäžã®å å®¹ã§ææžæçãã€ã³ã¹ã¿ã³ã¹åããããã«æäœããæ¹æ³ãæäŸããã
ãŠã§ãããŒãžãåçã«ïŒããšãã°ããŠãŒã¶ãŒãšã®å¯Ÿè©±ãŸãã¯ãµãŒããŒããå°çããæ°ããããŒã¿ã«å¿çããŠïŒææžã®å 容ã倿Žããå Žåã䜿çšã³ã³ããã¹ãã«é©åãªå€ãæ¿å ¥ããããã«ã䜿çšããåã«ãããªã倿Žãå¿ èŠãšãããããããªãHTMLã®æçãèŠæ±ããããšãäžè¬çã§ããã
templateèŠçŽ ã¯ãèªã¿èŸŒã¿æã«ææžã§äœ¿çšãããªãææžæçã®å®£èšãèš±å¯ããããHTMLãšããŠè§£æããããŠã§ãããŒãžã§äœ¿çšããããã«å®è¡æã«å©çšå¯èœã§ããã
ã¬ã³ããªã³ã°ã«ãããŠãtemplateèŠçŽ ã¯äœã衚ããªãã
contentäž»Documentã«å¹²æžããtemplateã®ã³ã³ãã³ããé¿ããããã«å¥ã®Documentã«é¢é£ä»ããããDocumentFragmentã«æ ŒçŽãããŠããtemplateã®ã³ã³ãã³ããè¿ããïŒããšãã°ãããã¯ãã©ãŒã ã³ã³ãããŒã«ããéä¿¡ãããŠããããšãåé¿ããã¹ã¯ãªããå®è¡ããåé¿ãããªã©ãïŒ
Each template element has an associated DocumentFragment object that
is its template contents. When a template element is created, the user
agent must run the following steps to establish the template contents:
Let doc be the template element's ownerDocument's appropriate template contents owner
document.
Create a DocumentFragment object whose ownerDocument is doc.
Set the template element's template contents to the newly
created DocumentFragment object.
A Document doc's appropriate template contents owner
document is the Document returned by the following algorithm:
If doc is not a Document created by this algorithm, run
these substeps:
If doc does not yet have an associated inert template document then run these substeps:
Let new doc be a new Document (that does not have a
browsing context). This is "a Document created by this algorithm"
for the purposes of the step above.
If doc is an HTML document, mark new doc as an HTML document also.
Let doc's associated inert template document be new doc.
Set doc to doc's associated inert template document.
Each Document not created by this algorithm thus gets a single
Document to act as its proxy for owning the template contents of all
its template elements, so that they aren't in a browsing context and
thus remain inert (e.g. scripts do not run). Meanwhile, template elements inside
Document objects that are created by this algorithm just reuse the same
Document owner for their contents.
Return doc.
When a template element changes ownerDocument, the user agent must run the following
steps:
Let doc be the template element's new ownerDocument's appropriate template contents owner
document.
Adopt the template element's
template contents (a DocumentFragment object) into doc.
The content IDL attribute must return the
template element's template contents.
The cloning steps for a template
element node being cloned to a copy copy must run the
following steps:
If the clone children flag is not set in the calling clone algorithm, abort these steps.
Let copied contents be the result of cloning all the children of node's
template contents, with ownerDocument set to copy's template contents's ownerDocument, and with the clone children
flag set.
Append copied contents to copy's template contents.
ãã®äŸã«ãããŠãæåã§ããŒã¯ã¢ããããæ§é äœãçæãã代ããã«èŠçŽ æ§é ãæäŸããtemplateã䜿çšããŠãã¹ã¯ãªãããããŒã¿æ§é ç±æ¥ã®ããŒã¿ããã€è¡šãäºåèšå®ããã
<!DOCTYPE html>
<title>Cat data</title>
<script>
// Data is hard-coded here, but could come from the server
var data = [
{ name: 'Pillar', color: 'Ticked Tabby', sex: 'Female (neutered)', legs: 3 },
{ name: 'Hedral', color: 'Tuxedo', sex: 'Male (neutered)', legs: 4 },
];
</script>
<table>
<thead>
<tr>
<th>Name <th>Color <th>Sex <th>Legs
<tbody>
<template id="row">
<tr><td><td><td><td>
</template>
</table>
<script>
var template = document.querySelector('#row');
for (var i = 0; i < data.length; i += 1) {
var cat = data[i];
var clone = template.content.cloneNode(true);
var cells = clone.querySelectorAll('td');
cells[0].textContent = cat.name;
cells[1].textContent = cat.color;
cells[2].textContent = cat.sex;
cells[3].textContent = cat.legs;
template.parentNode.appendChild(clone);
}
</script>
template elements with XSLT and XPathãã®ç¯ã¯éèŠç¯çã§ããã
This specification does not define how XSLT and XPath interact with the template
element. However, in the absence of another specification actually defining this, here are some
guidelines for implementors, which are intended to be consistent with other processing described
in this specification:
An XSLT processor based on an XML parser that acts as described
in this specification needs to act as if template elements contain as
descendants their template contents for the purposes of the transform.
An XSLT processor that outputs a DOM needs to ensure that nodes that would go into a
template element are instead placed into the element's template
contents.
XPath evaluation using the XPath DOM API when applied to a Document parsed
using the HTML parser or the XML parser described in this specification
needs to ignore template contents.
canvasèŠçŽ width - æšªã®æ¬¡å
height - çžŠã®æ¬¡å
aria-*屿§ãwidthheighttypedef (CanvasRenderingContext2D or WebGLRenderingContext) RenderingContext;
interface HTMLCanvasElement : HTMLElement {
attribute unsigned long width;
attribute unsigned long height;
RenderingContext? getContext(DOMString contextId, any... arguments);
DOMString toDataURL(optional DOMString type, any... arguments);
void toBlob(FileCallback? _callback, optional DOMString type, any... arguments);
};
canvasèŠçŽ ã¯ãã°ã©ããã²ãŒã ã°ã©ãã£ãã¯ãèžè¡ããŸãã¯ãã®ä»ã®èŠèŠçãªç»åããã®å Žã§ã¬ã³ããªã³ã°ããããã«äœ¿çšã§ãããè§£å床ã«äŸåãããããããããã£ã³ãã¹ã䌎ãã¹ã¯ãªãããæäŸããã
ããé©åãªèŠçŽ ãå©çšå¯èœã§ããå Žåãèè
ã¯ææžã§canvasèŠçŽ ã䜿ãã¹ãã§ãªããããšãã°ãèŠåºããããŒãžãæç»ããcanvasèŠçŽ ã䜿çšããããšã¯äžé©åœã§ããïŒèŠåºãã®æãŸãããã¬ãŒã³ããŒã·ã§ã³ã°ã©ãã£ã«ã«ã«åŒ·çã§ããã°ãããã¯é©åãªèŠçŽ ïŒå
žåçã«ã¯ h1ïŒã䜿çšããŠããŒã¯ã¢ããããCSSã䜿çšããŠããŠããã®ãããªæè¡ããµããŒãããã¹ã¿ã€ãªã³ã°ããå¿
èŠãããXBLã
èè
ãcanvasèŠçŽ ã䜿çšããå Žåãèè
ã¯ãŸãããŠãŒã¶ãŒã«æç€ºããéãcanvasã®ãããããããšããŠåãæ©èœãç®çãåºæ¬çã«äŒããã³ã³ãã³ããæäŸããªããã°ãªããªãããã®ã³ã³ãã³ãã¯canvasèŠçŽ ã®ã³ã³ãã³ããšããŠçœ®ãããŠããããcanvasèŠçŽ ã®ã³ã³ãã³ãã¯ãããããã°ããã®èŠçŽ ã®ãã©ãŒã«ããã¯ã³ã³ãã³ãã§ããã
察話çãªèŠèŠã¡ãã£ã¢ã«ãããŠãcanvasèŠçŽ ã«å¯ŸããŠã¹ã¯ãªããã£ã³ã°ãæå¹ã§ããå Žåããã€canvasèŠçŽ ã«å¯ŸãããµããŒããæå¹ã§ããå ŽåãcanvasèŠçŽ ã¯ãåçã«äœæãããç»åãžããæããšã³ããã£ããã³ã³ãã³ãã衚ãã
éçã§ãé察話çãªèŠèŠã¡ãã£ã¢ã«ãããŠãcanvasèŠçŽ ã以åã«æãããŠããå ŽåïŒããšãã°ãããŒãžãã€ã³ã¿ã©ã¯ãã£ããªèŠèŠåªäœã§è¡šç€ºãããçŸåšæãããŠããå ŽåããŸãã¯ããŒãžã¬ã€ã¢ãŠãããã»ã¹äžã«å®è¡ãããäžéšã®ã¹ã¯ãªãããèŠçŽ ã§æãããå ŽåïŒãcanvasèŠçŽ ã¯ãçŸåšã®ãããããããšãµã€ãºããã€ãšã³ããã£ããã³ã³ãã³ãã衚ããããã§ãªããã°ãèŠçŽ ã¯ä»£ããã«ãã®ãã©ãŒã«ããã¯ã³ã³ãã³ãã衚ãã
éèŠèŠç³»ã¡ãã£ã¢ã«ãããŠããã€èŠèŠã¡ãã£ã¢ã§canvasèŠçŽ ã«å¯ŸããŠã¹ã¯ãªãããç¡å¹ã§ããå ŽåããŸãã¯canvasèŠçŽ ã®ãµããŒããç¡å¹ã§ããå ŽåãcanvasèŠçŽ ã¯ä»£ããã«ãã©ãŒã«ããã¯ã³ã³ãã³ãã衚ãã
canvasèŠçŽ ããšã³ããã£ããã³ã³ãã³ãã衚ãå ŽåããŠãŒã¶ãŒã¯canvasèŠçŽ ã®åå«ïŒãã©ãŒã«ããã¯ã³ã³ãã³ãå
ïŒã«ãã©ãŒã«ã¹ã§ãããèŠçŽ ããã©ãŒã«ã¹ãããŠããå ŽåãïŒèŠçŽ èªäœã衚瀺ãããŠããªããŠãïŒããŒããŒãæäœã€ãã³ãã®å¯Ÿè±¡ãšãªããããã¯ãèè
ãã€ã³ã¿ã©ã¯ãã£ããã£ã³ãã¹ãããŒããŒãã¢ã¯ã»ã·ãã«ã«ã§ããïŒèè
ã¯ããã©ãŒã«ããã¯ã³ã³ãã³ãå
ã®ãã©ãŒã«ã¹å¯èœãªèŠçŽ ã«ã€ã³ã¿ã©ã¯ãã£ããªé åã®1察1察å¿ãæã€ã¹ãã§ãããïŒãã©ãŒã«ã¹ã¯ãããŠã¹æäœã®ã€ãã³ãã«åœ±é¿ããªããïŒ[DOMEVENTS]
canvasèŠçŽ ã¯ãèŠçŽ ããããããã®å€§ãããå¶åŸ¡ããwidthãšheightã®2ã€ã®å±æ§ãæã€ãæå®ãããå Žåããããã®å±æ§ã¯åŠ¥åœãªéè² ã®æŽæ°ã§ããå€ãæããªããã°ãªããªããThe rules for parsing non-negative integers must be used to obtain their numeric values. If an attribute is missing, or if parsing its value returns an error, then the default value must be used instead. The width attribute defaults to 300, and the height attribute defaults to 150.
èŠçŽ ããšã³ããã£ããã³ã³ãã³ãã衚ãå ŽåãcanvasèŠçŽ ã®å
åšå¯žæ³ã¯ãèŠçŽ ã®ããããããã®å
åšå¯žæ³ã«çããã
canvasèŠçŽ ã¯ãã¹ã¿ã€ã«ã·ãŒãã«ãã£ãŠä»»æã®ãµã€ãºã«ã§ãããã®ããããããã¯'object-fit' CSSããããã£ãŒã®å¯Ÿè±¡ãšãªãã[CSSIMAGES]
The bitmaps of canvas elements, as well as some of the bitmaps of rendering
contexts, such as those described in the HTML Canvas 2D Context specification
[CANVAS2D],
have an origin-clean flag, which can
be set to true or false. Initially, when the canvas element is created, its bitmap's
origin-clean flag must be set to true.
A canvas bitmap can also have a hit region list, as described in the
CanvasRenderingContext2D section below.
A canvas element can have a rendering context bound to it. Initially, it does not
have a bound rendering context. To keep track of whether it has a rendering context or not, and
what kind of rendering context it is, a canvas also has a canvas context mode, which is initially none but can be changed to either direct-2d, direct-webgl, indirect, or proxied by algorithms defined in this specification.
When its canvas context mode is none, a canvas element has no rendering context,
and its bitmap must be fully transparent black with an intrinsic width equal to the numeric value
of the element's width attribute and an intrinsic height
equal to the numeric value of the element's height
attribute, those values being interpreted in CSS pixels, and being updated as the attributes are
set, changed, or removed.
When a canvas element represents embedded content, it provides
a paint source whose width is the element's intrinsic width, whose height is the element's
intrinsic height, and whose appearance is the element's bitmap.
Whenever the width and height content attributes are set, removed, changed, or
redundantly set to the value they already have, if the canvas context mode is direct-2d, the user agent must set bitmap dimensions to the numeric values of
the width and height content attributes.
The width and height IDL attributes must reflect the
respective content attributes of the same name, with the same defaults.
canvasèŠçŽ ã§äœ¿çšãããããããããã¯ãä»»æã®ç»çŽ å¯åºŠãæã€ããšãã§ãããäžè¬ã«ãå¯åºŠã¯ãŠãŒã¶ãŒã®ç»é¢ã®ãã®ãšäžèŽããã
getContext(contextId [, ... ])ãã£ã³ãã¹äžã«æç»ããããã®APIãå
¬éãããªããžã§ã¯ããè¿ããæåã®åŒæ°ã¯ç®çã®APIãæå®ããã"2d"ãŸãã¯"webgl"ã®ããããã§ãããåŸç¶ã®åŒæ°ã¯ããã®APIã«ãã£ãŠåŠçãããã
å®çŸ©ãããã³ã³ããã¹ãã®ãªã¹ãã¯ãWHATWG Wiki CanvasContexts pageã«èšèŒãããŠããã[WHATWGWIKI]
äŸã®ã³ã³ããã¹ãã¯ã"2d" [CANVAS2D]ããã³"webgl"ã³ã³ããã¹ã[WEBGL]ã§ããã
äžããããã³ã³ããã¹ãIDããµããŒããããªãå ŽåããŸãã¯ãã£ã³ãã¹ããã§ã«ä»ã®ïŒéäºæã®ïŒã³ã³ããã¹ãã¿ã€ãïŒããšãã°ã"webgl"ã³ã³ããã¹ããååŸããåŸã"2d"ã³ã³ããã¹ããååŸããããšããŠããïŒã§åæåãããŠããå Žåãnullãè¿ãã
Each rendering context has a context bitmap mode, which is one of fixed, unbound, or bound. Initially, rendering contexts must be in the unbound mode.
The getContext(contextId, arguments...) method of the canvas element, when invoked,
must run the steps in the cell of the following table whose column header describes the
canvas element's canvas context mode
and whose row header describes the method's first argument.
| ãªã | direct-2d | direct-webgl | indirect | proxied | |
|---|---|---|---|---|---|
"2d"
|
Set the canvas element's context
mode to direct-2d, obtain a
CanvasRenderingContext2D object as defined in the HTML Canvas 2D Context
specification [CANVAS2D], set the obtained
CanvasRenderingContext2D object's
context bitmap mode to
fixed, and return the
CanvasRenderingContext2D object
| Return the same object as was return the last time the method was invoked with this same argument. | Return null. |
Throw an InvalidStateError exception.
|
Throw an InvalidStateError exception.
|
"webgl", if the user agent supports the WebGL feature in its current configuration
|
Follow the instructions given in the WebGL specification's Context Creation section to
obtain either a WebGLRenderingContext or null; if the returned value is null,
then return null and abort these steps, otherwise, set the canvas element's context mode to direct-webgl, set the new
WebGLRenderingContext object's context bitmap mode to fixed, and return the WebGLRenderingContext
objectâ¡ [WEBGL]
| Return null. | Return the same object as was return the last time the method was invoked with this same argument. |
Throw an InvalidStateError exception.
|
Throw an InvalidStateError exception.
|
| A vendor-specific extension* | Behave as defined for the extension. | Behave as defined for the extension. | Behave as defined for the extension. |
Throw an InvalidStateError exception.
|
Throw an InvalidStateError exception.
|
| An unsupported valueâ | Return null. | Return null. | Return null. |
Throw an InvalidStateError exception.
|
Throw an InvalidStateError exception.
|
* Vendors may define experimental contexts using the syntax vendorname-context, for example,
moz-3d.
â For example, the "webgl" value in the case of a user agent having exhausted the
graphics hardware's abilities and having no software fallback implementation.
â¡ The second (and subsequent) argument(s) to the method, if any, are ignored in all cases except this one. See the WebGL specification for details.
toDataURL( [ type, ... ] )ãã£ã³ãã¹ã§ç»åã«å¯Ÿããdata: URLãè¿ãã
æåã®åŒæ°ãäžããããå Žåãè¿ãããç»åã®åïŒããšãã°ãPNGãŸãã¯JPEGïŒãå¶åŸ¡ãããããã©ã«ãã¯image/pngã§ãããæå®ãããåããµããŒããããªãå Žåããã®ã¿ã€ãã䜿çšããããä»ã®åŒæ°ã¯åã«åºæã®ãã®ã§ããã以äžã®è¡šã«ç€ºããããªç»åãçæãããæ¹æ³ãå¶åŸ¡ããã
"image/png"以å€ã®åã䜿çšããããšããéãèè
ã¯ãå®éã«è¿ãããæååãæ£ç¢ºã«data:image/png,"ãŸãã¯"data:image/png;"ã®ããããã®æååã§å§ãŸããã©ããããã§ãã¯ããããšã§ãç»åãèŠæ±ããã圢åŒã§è¿ããããã©ããã確èªã§ããããã®å Žåãç»åã¯PNGã§ããããããã£ãŠèŠæ±ãããåã¯ãµããŒããããªããïŒãã£ã³ãã¹ãé«ããå¹
ã®ãããããæããªãå Žåããã®ãããªäŸå€ã®äžã€ã§ãããçµæã¯åã«"data:,"ã§ãããããããªãïŒã
toDataURL()ã¡ãœããã¯96dpiã®è§£å床ã§ã®ããŒã¿ãè¿ãã
toBlob(callback [, type, ... ])ãã£ã³ãã¹å
ã®ç»åãå«ããã¡ã€ã«ã衚ãBlobãªããžã§ã¯ããäœæãããã®ãªããžã§ã¯ããžã®ãã³ãã«ãšãšãã«ã³ãŒã«ããã¯ãåŒã³åºãã
2ã€ç®ã®åŒæ°ãäžããããå Žåãè¿ãããç»åã®åïŒããšãã°ãPNGãŸãã¯JPEGïŒãå¶åŸ¡ãããããã©ã«ãã¯image/pngã§ãããæå®ãããåããµããŒããããªãå Žåããã®ã¿ã€ãã䜿çšããããä»ã®åŒæ°ã¯åã«åºæã®ãã®ã§ããã以äžã®è¡šã«ç€ºããããªç»åãçæãããæ¹æ³ãå¶åŸ¡ããã
toBlob()ã¡ãœããã¯96dpiã®è§£å床ã§ã®ããŒã¿ãæäŸããã
The toDataURL() method must run the following
steps:
If the canvas element's bitmap's origin-clean flag is set to false, throw a
SecurityError exception and abort these steps.
If the canvas element's bitmap has no pixels (i.e. either its horizontal
dimension or its vertical dimension is zero) then return the string "data:," and abort these steps. (This is the shortest data: URL; it represents the empty string in a text/plain resource.)
Let file be a
serialization of the canvas element's bitmap as a file, using the method's
arguments (if any) as the arguments.
The toBlob() method must run the following
steps:
If the canvas element's bitmap's origin-clean flag is set to false, throw a
SecurityError exception and abort these steps.
Let callback be the first argument.
Let arguments be the second and subsequent arguments to the method, if any.
If the canvas element's bitmap has no pixels (i.e. either its horizontal
dimension or its vertical dimension is zero) then let result be null.
Otherwise, let result be a Blob object representing a serialization of the canvas
element's bitmap as a file, using arguments. [FILEAPI]
Return, but continue running these steps asynchronously.
If callback is null, abort these steps.
Queue a task to invoke the FileCallback callback with result as its argument. The task
source for this task is the canvas blob serialization task source.
The canvas APIs must perform color correction at only two points: when rendering
images with their own gamma correction and color space information onto a bitmap, to convert the
image to the color space used by the bitmaps (e.g. using the 2D Context's drawImage() method with an HTMLImageElement
object), and when rendering the actual canvas bitmap to the output device.
Thus, in the 2D context, colors used to draw shapes onto the canvas will exactly
match colors obtained through the getImageDataHD() method.
The toDataURL() method must not include color space
information in the resources it returns. Where the output format allows it, the color of pixels
in resources created by toDataURL() must match those
returned by the getImageData() method.
In user agents that support CSS, the color space used by a canvas element must
match the color space used for processing any colors for that element in CSS.
The gamma correction and color space information of images must be handled in such a way that
an image rendered directly using an img element would use the same colors as one
painted on a canvas element that is then itself rendered. Furthermore, the rendering
of images that have no color correction information (such as those returned by the toDataURL() method) must be rendered with no color
correction.
When a user agent is to create a serialization of the bitmap as a file, optionally with some given arguments, it must create an image file in the format given by the first value of arguments, or, if there are no arguments, in the PNG format. [PNG]
If if the bitmap has one pixel per coordinate space unit then the image file must have the same pixel data (before compression, if applicable) as the bitmap, and if the file format used supports encoding resolution metadata, the resolution of that bitmap (device pixels per coordinate space units being interpreted as image pixels per CSS pixel) must be given as well.
Otherwise, the image file's pixel data must be the bitmap's pixel data scaled to one image pixel per coordinate space unit, and if the file format used supports encoding resolution metadata, the resolution must be given as 96dpi (one image pixel per CSS pixel).
If arguments is not empty, the first value must be interpreted as a MIME type giving the format to use. If the type has any parameters, it must be treated as not supported.
For example, the value "image/png" would mean to generate a PNG
image, the value "image/jpeg" would mean to generate a JPEG image, and the value
"image/svg+xml" would mean to generate an SVG image (which would require that the
user agent track how the bitmap was generated, an unlikely, though potentially awesome,
feature).
User agents must support PNG ("image/png"). User agents may support other types.
If the user agent does not support the requested type, it must create the file using the PNG
format. [PNG]
User agents must convert the provided type to ASCII lowercase before establishing if they support that type.
For image types that do not support an alpha channel, the serialized image must be the bitmap image composited onto a solid black background using the source-over operator.
If the first argument in arguments gives a type corresponding to one of the types given in the first column of the following table, and the user agent supports that type, then the subsequent arguments, if any, must be treated as described in the second cell of that row.
| å | ä»ã®åŒæ° | åç § |
|---|---|---|
image/jpeg
| The second argument, if it is a number in the range 0.0 to 1.0 inclusive, must be treated as the desired quality level. If it is not a number or is outside that range, the user agent must use its default value, as if the argument had been omitted. | [JPEG] |
For the purposes of these rules, an argument is considered to be a number if it is converted to
an IDL double value by the rules for handling arguments of type any in the
Web IDL specification. [WEBIDL]
Other arguments must be ignored and must not cause the user agent to throw an exception. A future version of this specification will probably define other parameters to be passed to these methods to allow authors to more carefully control compression settings, image metadata, etc.
canvas elementsãã®ç¯ã¯éèŠç¯çã§ããã
Information leakage can occur if scripts from one origin can access information (e.g. read pixels) from images from another origin (one that isn't the same).
To mitigate this, bitmaps used with canvas elements are defined to have a flag
indicating whether they are origin-clean. All
bitmaps start with their origin-clean set to
true. The flag is set to false when cross-origin images or fonts are used.
The toDataURL(), toBlob(), getImageData(), and getImageDataHD() methods check the flag and will
throw a SecurityError exception rather than leak cross-origin data.
The flag can be reset in certain situations; for example, when a
CanvasRenderingContext2D is bound to a new canvas, the bitmap is cleared
and its flag reset.