2021-07-04 01:11:42 +03:00
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
< html >
< head >
< title > Styles and Scripts< / title >
< link href = "../docs-assets/Breadcrumbs.css" rel = "stylesheet" rev = "stylesheet" type = "text/css" >
< meta name = "viewport" content = "width=device-width initial-scale=1" >
< meta http-equiv = "Content-Type" content = "text/html; charset=utf-8" >
< meta http-equiv = "Content-Language" content = "en-gb" >
< link href = "../docs-assets/Contents.css" rel = "stylesheet" rev = "stylesheet" type = "text/css" >
< link href = "../docs-assets/Progress.css" rel = "stylesheet" rev = "stylesheet" type = "text/css" >
< link href = "../docs-assets/Navigation.css" rel = "stylesheet" rev = "stylesheet" type = "text/css" >
< link href = "../docs-assets/Fonts.css" rel = "stylesheet" rev = "stylesheet" type = "text/css" >
< link href = "../docs-assets/Base.css" rel = "stylesheet" rev = "stylesheet" type = "text/css" >
< link href = "../docs-assets/Colours.css" rel = "stylesheet" rev = "stylesheet" type = "text/css" >
< / head >
< body class = "commentary-font" >
< nav role = "navigation" >
2022-04-28 19:37:28 +03:00
< h1 > < a href = "../index.html" >
2021-07-04 01:11:42 +03:00
< img src = "../docs-assets/Inform.png" height = 72" >
< / a > < / h1 >
2022-04-28 19:37:28 +03:00
< ul > < li > < a href = "../index.html" > home< / a > < / li >
2022-04-04 20:31:44 +03:00
< / ul > < h2 > Compiler< / h2 > < ul >
< li > < a href = "../structure.html" > structure< / a > < / li >
< li > < a href = "../inbuildn.html" > inbuild< / a > < / li >
< li > < a href = "../inform7n.html" > inform7< / a > < / li >
< li > < a href = "../intern.html" > inter< / a > < / li >
< li > < a href = "../services.html" > services< / a > < / li >
2022-04-18 17:46:46 +03:00
< li > < a href = "../secrets.html" > secrets< / a > < / li >
2022-04-04 20:31:44 +03:00
< / ul > < h2 > Other Tools< / h2 > < ul >
< li > < a href = "../inblorbn.html" > inblorb< / a > < / li >
< li > < a href = "../indocn.html" > indoc< / a > < / li >
< li > < a href = "../inform6.html" > inform6< / a > < / li >
< li > < a href = "../inpolicyn.html" > inpolicy< / a > < / li >
< li > < a href = "../inrtpsn.html" > inrtps< / a > < / li >
2022-04-09 16:52:23 +03:00
< / ul > < h2 > Resources< / h2 > < ul >
< li > < a href = "../extensions.html" > extensions< / a > < / li >
< li > < a href = "../kits.html" > kits< / a > < / li >
2022-04-04 20:31:44 +03:00
< / ul > < h2 > Repository< / h2 > < ul >
< li > < a href = "https://github.com/ganelson/inform" > < img src = "../docs-assets/github.png" height = 18 > github< / a > < / li >
< / ul > < h2 > Related Projects< / h2 > < ul >
2022-04-28 19:20:06 +03:00
< li > < a href = "../../../inweb/index.html" > inweb< / a > < / li >
< li > < a href = "../../../intest/index.html" > intest< / a > < / li >
2021-07-04 01:11:42 +03:00
< / ul >
< / nav >
< main role = "main" >
<!-- Weave of 'Styles and Scripts' generated by Inweb -->
< div class = "breadcrumbs" >
2022-04-28 19:37:28 +03:00
< ul class = "crumbs" > < li > < a href = "../index.html" > Home< / a > < / li > < li > < a href = "../intern.html" > Inter Modules< / a > < / li > < li > < a href = "index.html" > index< / a > < / li > < li > < a href = "index.html#2" > Chapter 2: Utilities< / a > < / li > < li > < b > Styles and Scripts< / b > < / li > < / ul > < / div >
2021-07-04 01:11:42 +03:00
< p class = "purpose" > CSS and Javascripts embedded into the body of index pages.< / p >
2021-07-08 01:43:23 +03:00
< p class = "commentary firstcommentary" > < a id = "SP1" class = "paragraph-anchor" > < / a > < b > § 1. < / b > This is a questionable decision: The HTML pages of the index, which have
to live inside a project bundle and may be accessed through non-standard URL
schemes, do not use external script files. That avoids possible problems with
failing to link to said files correctly.
< / p >
2021-07-04 01:11:42 +03:00
2021-07-08 01:43:23 +03:00
< p class = "commentary" > But it means every HTML page in the index has to embed its own CSS and
Javascript, and this is done with a callback function which allows us to insert
2021-07-26 15:48:49 +03:00
material into the head of an HTML page when it is opened for output. Note that
the function acts only when the page was created with < span class = "extract" > < span class = "extract-syntax" > state< / span > < / span > , which will only
happen when it was created by < a href = "index.html" class = "internal" > index< / a > .
2021-07-08 01:43:23 +03:00
< / p >
2021-07-04 01:11:42 +03:00
< pre class = "definitions code-font" > < span class = "definition-keyword" > define< / span > < span class = "constant-syntax" > ADDITIONAL_SCRIPTING_HTML_CALLBACK< / span > < span class = "plain-syntax" > < / span > < a href = "2-sas.html#SP1" class = "function-link" > < span class = "function-syntax" > IndexStyles::incorporate< / span > < / a >
< / pre >
< pre class = "displayed-code all-displayed-code code-font" >
2021-07-26 15:48:49 +03:00
< span class = "reserved-syntax" > void< / span > < span class = "plain-syntax" > < / span > < span class = "function-syntax" > IndexStyles::incorporate< / span > < span class = "plain-syntax" > (< / span > < span class = "identifier-syntax" > OUTPUT_STREAM< / span > < span class = "plain-syntax" > , < / span > < span class = "reserved-syntax" > void< / span > < span class = "plain-syntax" > *< / span > < span class = "identifier-syntax" > state< / span > < span class = "plain-syntax" > ) {< / span >
< span class = "plain-syntax" > < / span > < span class = "reserved-syntax" > if< / span > < span class = "plain-syntax" > (< / span > < span class = "identifier-syntax" > state< / span > < span class = "plain-syntax" > ) {< / span >
< span class = "plain-syntax" > < / span > < span class = "reserved-syntax" > index_page< / span > < span class = "plain-syntax" > *< / span > < span class = "identifier-syntax" > current_page< / span > < span class = "plain-syntax" > = (< / span > < span class = "reserved-syntax" > index_page< / span > < span class = "plain-syntax" > *) < / span > < span class = "identifier-syntax" > state< / span > < span class = "plain-syntax" > ;< / span >
< span class = "plain-syntax" > < / span > < span class = "reserved-syntax" > if< / span > < span class = "plain-syntax" > (< / span > < span class = "identifier-syntax" > current_page< / span > < span class = "plain-syntax" > == < / span > < span class = "identifier-syntax" > NULL< / span > < span class = "plain-syntax" > ) < / span > < span class = "reserved-syntax" > return< / span > < span class = "plain-syntax" > ;< / span >
2021-07-27 02:42:09 +03:00
< span class = "plain-syntax" > < / span > < span class = "reserved-syntax" > index_session< / span > < span class = "plain-syntax" > *< / span > < span class = "identifier-syntax" > session< / span > < span class = "plain-syntax" > = < / span > < span class = "identifier-syntax" > current_page< / span > < span class = "plain-syntax" > -> < / span > < span class = "element-syntax" > for_session< / span > < span class = "plain-syntax" > ;< / span >
2021-07-26 15:48:49 +03:00
< span class = "plain-syntax" > < / span > < span class = "named-paragraph-container code-font" > < a href = "2-sas.html#SP1_1" class = "named-paragraph-link" > < span class = "named-paragraph" > Incorporate some CSS< / span > < span class = "named-paragraph-number" > 1.1< / span > < / a > < / span > < span class = "plain-syntax" > ;< / span >
< span class = "plain-syntax" > < / span > < span class = "named-paragraph-container code-font" > < a href = "2-sas.html#SP1_2" class = "named-paragraph-link" > < span class = "named-paragraph" > Incorporate some Javascript< / span > < span class = "named-paragraph-number" > 1.2< / span > < / a > < / span > < span class = "plain-syntax" > ;< / span >
< span class = "plain-syntax" > }< / span >
2021-07-04 01:11:42 +03:00
< span class = "plain-syntax" > }< / span >
< / pre >
2021-07-08 01:43:23 +03:00
< p class = "commentary firstcommentary" > < a id = "SP1_1" class = "paragraph-anchor" > < / a > < b > § 1.1. < / b > The CSS is mostly the same every time and is therefore mostly loaded from an
external file in the Inform installation; but the colour scheme depends on the
structure file loaded by the < a href = "2-ii.html" class = "internal" > Index Interpreter< / a > , so that's not fixed on every
run of Inform.
< / p >
< p class = "commentary" > < span class = "named-paragraph-container code-font" > < span class = "named-paragraph-defn" > Incorporate some CSS< / span > < span class = "named-paragraph-number" > 1.1< / span > < / span > < span class = "comment-syntax" > =< / span >
2021-07-04 01:11:42 +03:00
< / p >
< pre class = "displayed-code all-displayed-code code-font" >
2021-07-08 01:43:23 +03:00
< span class = "plain-syntax" > < / span > < span class = "identifier-syntax" > HTML_OPEN_WITH< / span > < span class = "plain-syntax" > (< / span > < span class = "string-syntax" > "style"< / span > < span class = "plain-syntax" > , < / span > < span class = "string-syntax" > "type=\"text/css\" media=\"screen, print\""< / span > < span class = "plain-syntax" > );< / span >
2021-07-04 01:11:42 +03:00
< span class = "plain-syntax" > < / span > < span class = "reserved-syntax" > index_page< / span > < span class = "plain-syntax" > *< / span > < span class = "identifier-syntax" > ip< / span > < span class = "plain-syntax" > ;< / span >
2021-07-27 15:55:53 +03:00
< span class = "plain-syntax" > < / span > < span class = "identifier-syntax" > linked_list< / span > < span class = "plain-syntax" > *< / span > < span class = "identifier-syntax" > L< / span > < span class = "plain-syntax" > = < / span > < a href = "1-ia.html#SP7" class = "function-link" > < span class = "function-syntax" > Indexing::get_list_of_pages< / span > < / a > < span class = "plain-syntax" > (< / span > < span class = "identifier-syntax" > session< / span > < span class = "plain-syntax" > );< / span >
2021-07-27 02:42:09 +03:00
< span class = "plain-syntax" > < / span > < span class = "identifier-syntax" > LOOP_OVER_LINKED_LIST< / span > < span class = "plain-syntax" > (< / span > < span class = "identifier-syntax" > ip< / span > < span class = "plain-syntax" > , < / span > < span class = "reserved-syntax" > index_page< / span > < span class = "plain-syntax" > , < / span > < span class = "identifier-syntax" > L< / span > < span class = "plain-syntax" > ) {< / span >
2021-07-04 01:11:42 +03:00
< span class = "plain-syntax" > < / span > < span class = "reserved-syntax" > index_element< / span > < span class = "plain-syntax" > *< / span > < span class = "identifier-syntax" > ie< / span > < span class = "plain-syntax" > ;< / span >
2021-07-27 02:42:09 +03:00
< span class = "plain-syntax" > < / span > < span class = "identifier-syntax" > LOOP_OVER_LINKED_LIST< / span > < span class = "plain-syntax" > (< / span > < span class = "identifier-syntax" > ie< / span > < span class = "plain-syntax" > , < / span > < span class = "reserved-syntax" > index_element< / span > < span class = "plain-syntax" > , < / span > < span class = "identifier-syntax" > ip< / span > < span class = "plain-syntax" > -> < / span > < span class = "element-syntax" > elements< / span > < span class = "plain-syntax" > ) {< / span >
< span class = "plain-syntax" > < / span > < span class = "identifier-syntax" > WRITE< / span > < span class = "plain-syntax" > (< / span > < span class = "string-syntax" > "#box%d_%d {\n"< / span > < span class = "plain-syntax" > , < / span > < span class = "identifier-syntax" > ip< / span > < span class = "plain-syntax" > -> < / span > < span class = "identifier-syntax" > allocation_id< / span > < span class = "plain-syntax" > +1, < / span > < span class = "identifier-syntax" > ie< / span > < span class = "plain-syntax" > -> < / span > < span class = "element-syntax" > atomic_number< / span > < span class = "plain-syntax" > );< / span >
< span class = "plain-syntax" > < / span > < span class = "identifier-syntax" > WRITE< / span > < span class = "plain-syntax" > (< / span > < span class = "string-syntax" > " background: #%S;\n"< / span > < span class = "plain-syntax" > , < / span > < span class = "identifier-syntax" > ip< / span > < span class = "plain-syntax" > -> < / span > < span class = "element-syntax" > key_colour< / span > < span class = "plain-syntax" > );< / span >
< span class = "plain-syntax" > < / span > < span class = "identifier-syntax" > WRITE< / span > < span class = "plain-syntax" > (< / span > < span class = "string-syntax" > "}\n"< / span > < span class = "plain-syntax" > );< / span >
< span class = "plain-syntax" > < / span > < span class = "identifier-syntax" > WRITE< / span > < span class = "plain-syntax" > (< / span > < span class = "string-syntax" > "#minibox%d_%d {\n"< / span > < span class = "plain-syntax" > , < / span > < span class = "identifier-syntax" > ip< / span > < span class = "plain-syntax" > -> < / span > < span class = "identifier-syntax" > allocation_id< / span > < span class = "plain-syntax" > +1, < / span > < span class = "identifier-syntax" > ie< / span > < span class = "plain-syntax" > -> < / span > < span class = "element-syntax" > atomic_number< / span > < span class = "plain-syntax" > );< / span >
< span class = "plain-syntax" > < / span > < span class = "identifier-syntax" > WRITE< / span > < span class = "plain-syntax" > (< / span > < span class = "string-syntax" > " background: #%S;\n"< / span > < span class = "plain-syntax" > , < / span > < span class = "identifier-syntax" > ip< / span > < span class = "plain-syntax" > -> < / span > < span class = "element-syntax" > key_colour< / span > < span class = "plain-syntax" > );< / span >
< span class = "plain-syntax" > < / span > < span class = "identifier-syntax" > WRITE< / span > < span class = "plain-syntax" > (< / span > < span class = "string-syntax" > "}\n"< / span > < span class = "plain-syntax" > );< / span >
< span class = "plain-syntax" > }< / span >
2021-07-04 01:11:42 +03:00
< span class = "plain-syntax" > }< / span >
2021-07-08 01:43:23 +03:00
< span class = "plain-syntax" > < / span > < span class = "identifier-syntax" > HTML_CLOSE< / span > < span class = "plain-syntax" > (< / span > < span class = "string-syntax" > "style"< / span > < span class = "plain-syntax" > );< / span >
< / pre >
< ul class = "endnotetexts" > < li > This code is used in < a href = "2-sas.html#SP1" > § 1< / a > .< / li > < / ul >
< p class = "commentary firstcommentary" > < a id = "SP1_2" class = "paragraph-anchor" > < / a > < b > § 1.2. < / b > Now we come to the Javascript. This varies much more from page to page, and
is generated procedurally below.
< / p >
2021-07-04 01:11:42 +03:00
2021-07-08 01:43:23 +03:00
< p class = "commentary" > < span class = "named-paragraph-container code-font" > < span class = "named-paragraph-defn" > Incorporate some Javascript< / span > < span class = "named-paragraph-number" > 1.2< / span > < / span > < span class = "comment-syntax" > =< / span >
< / p >
< pre class = "displayed-code all-displayed-code code-font" >
< span class = "plain-syntax" > < / span > < span class = "identifier-syntax" > HTML_OPEN_WITH< / span > < span class = "plain-syntax" > (< / span > < span class = "string-syntax" > "script"< / span > < span class = "plain-syntax" > , < / span > < span class = "string-syntax" > "type=\"text/javascript\""< / span > < span class = "plain-syntax" > );< / span >
< span class = "plain-syntax" > < / span > < span class = "identifier-syntax" > WRITE< / span > < span class = "plain-syntax" > (< / span > < span class = "string-syntax" > "var qq; window.onload = function() {\n"< / span > < span class = "plain-syntax" > );< / span >
< span class = "plain-syntax" > < / span > < span class = "identifier-syntax" > WRITE< / span > < span class = "plain-syntax" > (< / span > < span class = "string-syntax" > " if (location.search.length > 0) {\n"< / span > < span class = "plain-syntax" > );< / span >
< span class = "plain-syntax" > < / span > < span class = "identifier-syntax" > WRITE< / span > < span class = "plain-syntax" > (< / span > < span class = "string-syntax" > " qq = location.search.substring(1, location.search.length);\n"< / span > < span class = "plain-syntax" > );< / span >
< span class = "plain-syntax" > < / span > < span class = "identifier-syntax" > WRITE< / span > < span class = "plain-syntax" > (< / span > < span class = "string-syntax" > " show_only_one_element(qq);\n"< / span > < span class = "plain-syntax" > );< / span >
< span class = "plain-syntax" > < / span > < span class = "identifier-syntax" > WRITE< / span > < span class = "plain-syntax" > (< / span > < span class = "string-syntax" > " }\n"< / span > < span class = "plain-syntax" > );< / span >
2021-07-04 01:11:42 +03:00
< span class = "plain-syntax" > < / span > < span class = "identifier-syntax" > WRITE< / span > < span class = "plain-syntax" > (< / span > < span class = "string-syntax" > "}\n"< / span > < span class = "plain-syntax" > );< / span >
2021-07-08 01:43:23 +03:00
< span class = "plain-syntax" > < / span > < span class = "named-paragraph-container code-font" > < a href = "2-sas.html#SP1_2_2" class = "named-paragraph-link" > < span class = "named-paragraph" > Write Javascript code for clicking on an element box< / span > < span class = "named-paragraph-number" > 1.2.2< / span > < / a > < / span > < span class = "plain-syntax" > ;< / span >
< span class = "plain-syntax" > < / span > < span class = "named-paragraph-container code-font" > < a href = "2-sas.html#SP1_2_3" class = "named-paragraph-link" > < span class = "named-paragraph" > Write Javascript code for clicking on the sidebar< / span > < span class = "named-paragraph-number" > 1.2.3< / span > < / a > < / span > < span class = "plain-syntax" > ;< / span >
< span class = "plain-syntax" > < / span > < span class = "named-paragraph-container code-font" > < a href = "2-sas.html#SP1_2_4" class = "named-paragraph-link" > < span class = "named-paragraph" > Write Javascript code for showing every element on the page< / span > < span class = "named-paragraph-number" > 1.2.4< / span > < / a > < / span > < span class = "plain-syntax" > ;< / span >
< span class = "plain-syntax" > < / span > < span class = "named-paragraph-container code-font" > < a href = "2-sas.html#SP1_2_5" class = "named-paragraph-link" > < span class = "named-paragraph" > Write Javascript code for showing only one element on the page< / span > < span class = "named-paragraph-number" > 1.2.5< / span > < / a > < / span > < span class = "plain-syntax" > ;< / span >
< span class = "plain-syntax" > < / span > < span class = "named-paragraph-container code-font" > < a href = "2-sas.html#SP1_2_6" class = "named-paragraph-link" > < span class = "named-paragraph" > Write Javascript code for entering the periodic table display< / span > < span class = "named-paragraph-number" > 1.2.6< / span > < / a > < / span > < span class = "plain-syntax" > ;< / span >
< span class = "plain-syntax" > < / span > < span class = "named-paragraph-container code-font" > < a href = "2-sas.html#SP1_2_7" class = "named-paragraph-link" > < span class = "named-paragraph" > Write Javascript code for showing and hiding a single element< / span > < span class = "named-paragraph-number" > 1.2.7< / span > < / a > < / span > < span class = "plain-syntax" > ;< / span >
< span class = "plain-syntax" > < / span > < span class = "named-paragraph-container code-font" > < a href = "2-sas.html#SP1_2_8" class = "named-paragraph-link" > < span class = "named-paragraph" > Write Javascript code for lighting up or greying down an element box< / span > < span class = "named-paragraph-number" > 1.2.8< / span > < / a > < / span > < span class = "plain-syntax" > ;< / span >
< span class = "plain-syntax" > < / span > < span class = "identifier-syntax" > HTML_CLOSE< / span > < span class = "plain-syntax" > (< / span > < span class = "string-syntax" > "script"< / span > < span class = "plain-syntax" > );< / span >
2021-07-04 01:11:42 +03:00
< / pre >
< ul class = "endnotetexts" > < li > This code is used in < a href = "2-sas.html#SP1" > § 1< / a > .< / li > < / ul >
2021-07-08 01:43:23 +03:00
< p class = "commentary firstcommentary" > < a id = "SP1_2_1" class = "paragraph-anchor" > < / a > < b > § 1.2.1. < / b > When loaded in a browser, a page can be in one of three states:
2021-07-04 01:11:42 +03:00
< / p >
< ul class = "items" > < li > (1) With the periodic table closed, and all the boxes in the one visible
row lit up, and all of the elements on the page visible;
< / li > < li > (2) With the periodic table closed, and all the boxes grey except one
which is lit up, and just the one element it corresponds to visible;
< / li > < li > (3) With the periodic table open, and all boxes lit up, and no elements
visible on the page below.
< / li > < / ul >
< p class = "commentary" > The page loads in state (1). Note that on a page with just one element,
states (1) and (2) are indistinguishable.
< / p >
2021-07-08 01:43:23 +03:00
< p class = "commentary" > We'll structure the Javascript functions on three levels. At the top level,
we have functions called when buttons on the page are clicked:
2021-07-04 01:11:42 +03:00
< / p >
2021-07-08 01:43:23 +03:00
< p class = "commentary firstcommentary" > < a id = "SP1_2_2" class = "paragraph-anchor" > < / a > < b > § 1.2.2. < / b > This is called when the user clicks on an element box corresponding to
2021-07-04 01:11:42 +03:00
something on the current page. If that's hidden, we go to state (2) for the
element clicked on. If it's showing, we see which state we're in: if we're
in state (2) we go to state (1), and otherwise go to state (2). (The trick
is deciding what state we're in: we do that by counting the number of visible
elements.)
< / p >
2021-07-08 01:43:23 +03:00
< p class = "commentary" > < span class = "named-paragraph-container code-font" > < span class = "named-paragraph-defn" > Write Javascript code for clicking on an element box< / span > < span class = "named-paragraph-number" > 1.2.2< / span > < / span > < span class = "comment-syntax" > =< / span >
2021-07-04 01:11:42 +03:00
< / p >
< pre class = "displayed-code all-displayed-code code-font" >
< span class = "plain-syntax" > < / span > < span class = "identifier-syntax" > WRITE< / span > < span class = "plain-syntax" > (< / span > < span class = "string-syntax" > "function click_element_box(id) {\n"< / span > < span class = "plain-syntax" > );< / span >
< span class = "plain-syntax" > < / span > < span class = "identifier-syntax" > WRITE< / span > < span class = "plain-syntax" > (< / span > < span class = "string-syntax" > " if (document.getElementById(id).style.display == 'none') {\n"< / span > < span class = "plain-syntax" > );< / span >
< span class = "plain-syntax" > < / span > < span class = "identifier-syntax" > WRITE< / span > < span class = "plain-syntax" > (< / span > < span class = "string-syntax" > " show_only_one_element(id);\n"< / span > < span class = "plain-syntax" > );< / span >
< span class = "plain-syntax" > < / span > < span class = "identifier-syntax" > WRITE< / span > < span class = "plain-syntax" > (< / span > < span class = "string-syntax" > " } else {\n"< / span > < span class = "plain-syntax" > );< / span >
< span class = "plain-syntax" > < / span > < span class = "identifier-syntax" > WRITE< / span > < span class = "plain-syntax" > (< / span > < span class = "string-syntax" > " var x = 0;\n"< / span > < span class = "plain-syntax" > );< / span >
< span class = "plain-syntax" > < / span > < span class = "reserved-syntax" > int< / span > < span class = "plain-syntax" > < / span > < span class = "identifier-syntax" > i< / span > < span class = "plain-syntax" > ;< / span >
2021-07-05 01:04:18 +03:00
< span class = "plain-syntax" > < / span > < span class = "reserved-syntax" > for< / span > < span class = "plain-syntax" > (< / span > < span class = "identifier-syntax" > i< / span > < span class = "plain-syntax" > =1; < / span > < span class = "identifier-syntax" > i< / span > < span class = "function-syntax" > < =current_page-> < / span > < span class = "element-syntax" > no_elements< / span > < span class = "plain-syntax" > ; < / span > < span class = "identifier-syntax" > i< / span > < span class = "plain-syntax" > ++)< / span >
2021-07-04 01:11:42 +03:00
< span class = "plain-syntax" > < / span > < span class = "identifier-syntax" > WRITE< / span > < span class = "plain-syntax" > (< / span > < span class = "string-syntax" > " if (document.getElementById('segment%d').style.display == '') { x++; }\n"< / span > < span class = "plain-syntax" > , < / span > < span class = "identifier-syntax" > i< / span > < span class = "plain-syntax" > );< / span >
< span class = "plain-syntax" > < / span > < span class = "identifier-syntax" > WRITE< / span > < span class = "plain-syntax" > (< / span > < span class = "string-syntax" > " if (x == 1) { show_all_elements(); }\n"< / span > < span class = "plain-syntax" > );< / span >
< span class = "plain-syntax" > < / span > < span class = "identifier-syntax" > WRITE< / span > < span class = "plain-syntax" > (< / span > < span class = "string-syntax" > " else { show_only_one_element(id); }\n"< / span > < span class = "plain-syntax" > );< / span >
< span class = "plain-syntax" > < / span > < span class = "identifier-syntax" > WRITE< / span > < span class = "plain-syntax" > (< / span > < span class = "string-syntax" > " }\n"< / span > < span class = "plain-syntax" > );< / span >
< span class = "plain-syntax" > < / span > < span class = "identifier-syntax" > WRITE< / span > < span class = "plain-syntax" > (< / span > < span class = "string-syntax" > "}\n"< / span > < span class = "plain-syntax" > );< / span >
< / pre >
2021-07-08 01:43:23 +03:00
< ul class = "endnotetexts" > < li > This code is used in < a href = "2-sas.html#SP1_2" > § 1.2< / a > .< / li > < / ul >
< p class = "commentary firstcommentary" > < a id = "SP1_2_3" class = "paragraph-anchor" > < / a > < b > § 1.2.3. < / b > If we're in state (1) or (2), go to state (3); if we're in state (3), go to
2021-07-04 01:11:42 +03:00
state (1).
< / p >
2021-07-08 01:43:23 +03:00
< p class = "commentary" > < span class = "named-paragraph-container code-font" > < span class = "named-paragraph-defn" > Write Javascript code for clicking on the sidebar< / span > < span class = "named-paragraph-number" > 1.2.3< / span > < / span > < span class = "comment-syntax" > =< / span >
2021-07-04 01:11:42 +03:00
< / p >
< pre class = "displayed-code all-displayed-code code-font" >
< span class = "plain-syntax" > < / span > < span class = "identifier-syntax" > WRITE< / span > < span class = "plain-syntax" > (< / span > < span class = "string-syntax" > "function click_sidebar() {\n"< / span > < span class = "plain-syntax" > );< / span >
< span class = "plain-syntax" > < / span > < span class = "identifier-syntax" > WRITE< / span > < span class = "plain-syntax" > (< / span > < span class = "string-syntax" > " if (document.getElementById('surround0').style.display == 'none') {\n"< / span > < span class = "plain-syntax" > );< / span >
< span class = "plain-syntax" > < / span > < span class = "identifier-syntax" > WRITE< / span > < span class = "plain-syntax" > (< / span > < span class = "string-syntax" > " enter_periodic_table();\n"< / span > < span class = "plain-syntax" > );< / span >
< span class = "plain-syntax" > < / span > < span class = "identifier-syntax" > WRITE< / span > < span class = "plain-syntax" > (< / span > < span class = "string-syntax" > " } else {\n"< / span > < span class = "plain-syntax" > );< / span >
< span class = "plain-syntax" > < / span > < span class = "identifier-syntax" > WRITE< / span > < span class = "plain-syntax" > (< / span > < span class = "string-syntax" > " show_all_elements();\n"< / span > < span class = "plain-syntax" > );< / span >
< span class = "plain-syntax" > < / span > < span class = "identifier-syntax" > WRITE< / span > < span class = "plain-syntax" > (< / span > < span class = "string-syntax" > " }\n"< / span > < span class = "plain-syntax" > );< / span >
< span class = "plain-syntax" > < / span > < span class = "identifier-syntax" > WRITE< / span > < span class = "plain-syntax" > (< / span > < span class = "string-syntax" > "}\n"< / span > < span class = "plain-syntax" > );< / span >
< / pre >
2021-07-08 01:43:23 +03:00
< ul class = "endnotetexts" > < li > This code is used in < a href = "2-sas.html#SP1_2" > § 1.2< / a > .< / li > < / ul >
< p class = "commentary firstcommentary" > < a id = "SP1_2_4" class = "paragraph-anchor" > < / a > < b > § 1.2.4. < / b > At the middle level of our Javascript, we have functions which move the
2021-07-04 01:11:42 +03:00
page to a new state. This routine goes to state (1):
< / p >
2021-07-08 01:43:23 +03:00
< p class = "commentary" > < span class = "named-paragraph-container code-font" > < span class = "named-paragraph-defn" > Write Javascript code for showing every element on the page< / span > < span class = "named-paragraph-number" > 1.2.4< / span > < / span > < span class = "comment-syntax" > =< / span >
2021-07-04 01:11:42 +03:00
< / p >
< pre class = "displayed-code all-displayed-code code-font" >
< span class = "plain-syntax" > < / span > < span class = "identifier-syntax" > WRITE< / span > < span class = "plain-syntax" > (< / span > < span class = "string-syntax" > "function show_all_elements() {\n"< / span > < span class = "plain-syntax" > );< / span >
2021-07-05 01:04:18 +03:00
< span class = "plain-syntax" > < / span > < span class = "reserved-syntax" > for< / span > < span class = "plain-syntax" > (< / span > < span class = "reserved-syntax" > int< / span > < span class = "plain-syntax" > < / span > < span class = "identifier-syntax" > i< / span > < span class = "plain-syntax" > =1; < / span > < span class = "identifier-syntax" > i< / span > < span class = "function-syntax" > < =current_page-> < / span > < span class = "element-syntax" > no_elements< / span > < span class = "plain-syntax" > ; < / span > < span class = "identifier-syntax" > i< / span > < span class = "plain-syntax" > ++) {< / span >
2021-07-04 01:11:42 +03:00
< span class = "plain-syntax" > < / span > < span class = "identifier-syntax" > WRITE< / span > < span class = "plain-syntax" > (< / span > < span class = "string-syntax" > " show_element('segment%d');\n"< / span > < span class = "plain-syntax" > , < / span > < span class = "identifier-syntax" > i< / span > < span class = "plain-syntax" > );< / span >
< span class = "plain-syntax" > < / span > < span class = "identifier-syntax" > WRITE< / span > < span class = "plain-syntax" > (< / span > < span class = "string-syntax" > " light_up('segment%d');\n"< / span > < span class = "plain-syntax" > , < / span > < span class = "identifier-syntax" > i< / span > < span class = "plain-syntax" > );< / span >
< span class = "plain-syntax" > }< / span >
< span class = "plain-syntax" > < / span > < span class = "identifier-syntax" > WRITE< / span > < span class = "plain-syntax" > (< / span > < span class = "string-syntax" > " }\n"< / span > < span class = "plain-syntax" > );< / span >
< / pre >
2021-07-08 01:43:23 +03:00
< ul class = "endnotetexts" > < li > This code is used in < a href = "2-sas.html#SP1_2" > § 1.2< / a > .< / li > < / ul >
< p class = "commentary firstcommentary" > < a id = "SP1_2_5" class = "paragraph-anchor" > < / a > < b > § 1.2.5. < / b > This routine goes to state (2), where the < span class = "extract" > < span class = "extract-syntax" > id< / span > < / span > is the ID of the content
2021-07-04 01:11:42 +03:00
element — < span class = "extract" > < span class = "extract-syntax" > segment1< / span > < / span > , < span class = "extract" > < span class = "extract-syntax" > segment2< / span > < / span > , ...
< / p >
2021-07-08 01:43:23 +03:00
< p class = "commentary" > < span class = "named-paragraph-container code-font" > < span class = "named-paragraph-defn" > Write Javascript code for showing only one element on the page< / span > < span class = "named-paragraph-number" > 1.2.5< / span > < / span > < span class = "comment-syntax" > =< / span >
2021-07-04 01:11:42 +03:00
< / p >
< pre class = "displayed-code all-displayed-code code-font" >
< span class = "plain-syntax" > < / span > < span class = "identifier-syntax" > WRITE< / span > < span class = "plain-syntax" > (< / span > < span class = "string-syntax" > "function show_only_one_element(id) {\n"< / span > < span class = "plain-syntax" > );< / span >
2021-07-05 01:04:18 +03:00
< span class = "plain-syntax" > < / span > < span class = "reserved-syntax" > for< / span > < span class = "plain-syntax" > (< / span > < span class = "reserved-syntax" > int< / span > < span class = "plain-syntax" > < / span > < span class = "identifier-syntax" > i< / span > < span class = "plain-syntax" > =1; < / span > < span class = "identifier-syntax" > i< / span > < span class = "function-syntax" > < =current_page-> < / span > < span class = "element-syntax" > no_elements< / span > < span class = "plain-syntax" > ; < / span > < span class = "identifier-syntax" > i< / span > < span class = "plain-syntax" > ++) {< / span >
2021-07-04 01:11:42 +03:00
< span class = "plain-syntax" > < / span > < span class = "identifier-syntax" > WRITE< / span > < span class = "plain-syntax" > (< / span > < span class = "string-syntax" > " hide_element('segment%d');\n"< / span > < span class = "plain-syntax" > , < / span > < span class = "identifier-syntax" > i< / span > < span class = "plain-syntax" > );< / span >
< span class = "plain-syntax" > < / span > < span class = "identifier-syntax" > WRITE< / span > < span class = "plain-syntax" > (< / span > < span class = "string-syntax" > " light_down('segment%d');\n"< / span > < span class = "plain-syntax" > , < / span > < span class = "identifier-syntax" > i< / span > < span class = "plain-syntax" > );< / span >
< span class = "plain-syntax" > }< / span >
< span class = "plain-syntax" > < / span > < span class = "identifier-syntax" > WRITE< / span > < span class = "plain-syntax" > (< / span > < span class = "string-syntax" > " show_element(id);\n"< / span > < span class = "plain-syntax" > );< / span >
< span class = "plain-syntax" > < / span > < span class = "identifier-syntax" > WRITE< / span > < span class = "plain-syntax" > (< / span > < span class = "string-syntax" > " light_up(id);\n"< / span > < span class = "plain-syntax" > );< / span >
< span class = "plain-syntax" > < / span > < span class = "identifier-syntax" > WRITE< / span > < span class = "plain-syntax" > (< / span > < span class = "string-syntax" > "}\n"< / span > < span class = "plain-syntax" > );< / span >
< / pre >
2021-07-08 01:43:23 +03:00
< ul class = "endnotetexts" > < li > This code is used in < a href = "2-sas.html#SP1_2" > § 1.2< / a > .< / li > < / ul >
< p class = "commentary firstcommentary" > < a id = "SP1_2_6" class = "paragraph-anchor" > < / a > < b > § 1.2.6. < / b > This routine goes to state (3):
2021-07-04 01:11:42 +03:00
< / p >
2021-07-08 01:43:23 +03:00
< p class = "commentary" > < span class = "named-paragraph-container code-font" > < span class = "named-paragraph-defn" > Write Javascript code for entering the periodic table display< / span > < span class = "named-paragraph-number" > 1.2.6< / span > < / span > < span class = "comment-syntax" > =< / span >
2021-07-04 01:11:42 +03:00
< / p >
< pre class = "displayed-code all-displayed-code code-font" >
< span class = "plain-syntax" > < / span > < span class = "identifier-syntax" > WRITE< / span > < span class = "plain-syntax" > (< / span > < span class = "string-syntax" > "function enter_periodic_table() {\n"< / span > < span class = "plain-syntax" > );< / span >
2021-07-05 01:04:18 +03:00
< span class = "plain-syntax" > < / span > < span class = "reserved-syntax" > for< / span > < span class = "plain-syntax" > (< / span > < span class = "reserved-syntax" > int< / span > < span class = "plain-syntax" > < / span > < span class = "identifier-syntax" > i< / span > < span class = "plain-syntax" > =1; < / span > < span class = "identifier-syntax" > i< / span > < span class = "function-syntax" > < =current_page-> < / span > < span class = "element-syntax" > no_elements< / span > < span class = "plain-syntax" > ; < / span > < span class = "identifier-syntax" > i< / span > < span class = "plain-syntax" > ++) {< / span >
2021-07-04 01:11:42 +03:00
< span class = "plain-syntax" > < / span > < span class = "identifier-syntax" > WRITE< / span > < span class = "plain-syntax" > (< / span > < span class = "string-syntax" > " hide_element('segment%d');\n"< / span > < span class = "plain-syntax" > , < / span > < span class = "identifier-syntax" > i< / span > < span class = "plain-syntax" > );< / span >
< span class = "plain-syntax" > < / span > < span class = "identifier-syntax" > WRITE< / span > < span class = "plain-syntax" > (< / span > < span class = "string-syntax" > " light_up('segment%d');\n"< / span > < span class = "plain-syntax" > , < / span > < span class = "identifier-syntax" > i< / span > < span class = "plain-syntax" > );< / span >
< span class = "plain-syntax" > }< / span >
< span class = "plain-syntax" > < / span > < span class = "identifier-syntax" > WRITE< / span > < span class = "plain-syntax" > (< / span > < span class = "string-syntax" > "}\n"< / span > < span class = "plain-syntax" > );< / span >
< / pre >
2021-07-08 01:43:23 +03:00
< ul class = "endnotetexts" > < li > This code is used in < a href = "2-sas.html#SP1_2" > § 1.2< / a > .< / li > < / ul >
< p class = "commentary firstcommentary" > < a id = "SP1_2_7" class = "paragraph-anchor" > < / a > < b > § 1.2.7. < / b > And at the bottom level of the Javascript code we have service functions
2021-07-04 01:11:42 +03:00
to show, hide and colour things:
< / p >
2021-07-08 01:43:23 +03:00
< p class = "commentary" > < span class = "named-paragraph-container code-font" > < span class = "named-paragraph-defn" > Write Javascript code for showing and hiding a single element< / span > < span class = "named-paragraph-number" > 1.2.7< / span > < / span > < span class = "comment-syntax" > =< / span >
2021-07-04 01:11:42 +03:00
< / p >
< pre class = "displayed-code all-displayed-code code-font" >
< span class = "plain-syntax" > < / span > < span class = "identifier-syntax" > WRITE< / span > < span class = "plain-syntax" > (< / span > < span class = "string-syntax" > "function show_element(id) {\n"< / span > < span class = "plain-syntax" > );< / span >
< span class = "plain-syntax" > < / span > < span class = "identifier-syntax" > WRITE< / span > < span class = "plain-syntax" > (< / span > < span class = "string-syntax" > " document.getElementById(id).style.display = '';\n"< / span > < span class = "plain-syntax" > );< / span >
< span class = "plain-syntax" > < / span > < span class = "identifier-syntax" > WRITE< / span > < span class = "plain-syntax" > (< / span > < span class = "string-syntax" > "}\n"< / span > < span class = "plain-syntax" > );< / span >
< span class = "plain-syntax" > < / span > < span class = "identifier-syntax" > WRITE< / span > < span class = "plain-syntax" > (< / span > < span class = "string-syntax" > "function hide_element(id) {\n"< / span > < span class = "plain-syntax" > );< / span >
< span class = "plain-syntax" > < / span > < span class = "identifier-syntax" > WRITE< / span > < span class = "plain-syntax" > (< / span > < span class = "string-syntax" > " document.getElementById(id).style.display = 'none';\n"< / span > < span class = "plain-syntax" > );< / span >
< span class = "plain-syntax" > < / span > < span class = "identifier-syntax" > WRITE< / span > < span class = "plain-syntax" > (< / span > < span class = "string-syntax" > "}\n"< / span > < span class = "plain-syntax" > );< / span >
< / pre >
2021-07-08 01:43:23 +03:00
< ul class = "endnotetexts" > < li > This code is used in < a href = "2-sas.html#SP1_2" > § 1.2< / a > .< / li > < / ul >
< p class = "commentary firstcommentary" > < a id = "SP1_2_8" class = "paragraph-anchor" > < / a > < b > § 1.2.8. < / b > < span class = "named-paragraph-container code-font" > < span class = "named-paragraph-defn" > Write Javascript code for lighting up or greying down an element box< / span > < span class = "named-paragraph-number" > 1.2.8< / span > < / span > < span class = "comment-syntax" > =< / span >
2021-07-04 01:11:42 +03:00
< / p >
< pre class = "displayed-code all-displayed-code code-font" >
< span class = "plain-syntax" > < / span > < span class = "identifier-syntax" > WRITE< / span > < span class = "plain-syntax" > (< / span > < span class = "string-syntax" > "function light_up(id) {\n"< / span > < span class = "plain-syntax" > );< / span >
2021-07-08 01:43:23 +03:00
< span class = "plain-syntax" > < / span > < span class = "named-paragraph-container code-font" > < a href = "2-sas.html#SP1_2_8_1" class = "named-paragraph-link" > < span class = "named-paragraph" > Write Javascript to produce the corresponding icon name< / span > < span class = "named-paragraph-number" > 1.2.8.1< / span > < / a > < / span > < span class = "plain-syntax" > ;< / span >
2021-07-04 01:11:42 +03:00
< span class = "plain-syntax" > < / span > < span class = "identifier-syntax" > WRITE< / span > < span class = "plain-syntax" > (< / span > < span class = "string-syntax" > " document.getElementById(ic).style.background = '#%S';\n"< / span > < span class = "plain-syntax" > ,< / span >
2021-07-05 01:04:18 +03:00
< span class = "plain-syntax" > < / span > < span class = "identifier-syntax" > current_page< / span > < span class = "plain-syntax" > -> < / span > < span class = "element-syntax" > key_colour< / span > < span class = "plain-syntax" > );< / span >
2021-07-04 01:11:42 +03:00
< span class = "plain-syntax" > < / span > < span class = "identifier-syntax" > WRITE< / span > < span class = "plain-syntax" > (< / span > < span class = "string-syntax" > "}\n"< / span > < span class = "plain-syntax" > );< / span >
< span class = "plain-syntax" > < / span > < span class = "identifier-syntax" > WRITE< / span > < span class = "plain-syntax" > (< / span > < span class = "string-syntax" > "function light_down(id) {\n"< / span > < span class = "plain-syntax" > );< / span >
2021-07-08 01:43:23 +03:00
< span class = "plain-syntax" > < / span > < span class = "named-paragraph-container code-font" > < a href = "2-sas.html#SP1_2_8_1" class = "named-paragraph-link" > < span class = "named-paragraph" > Write Javascript to produce the corresponding icon name< / span > < span class = "named-paragraph-number" > 1.2.8.1< / span > < / a > < / span > < span class = "plain-syntax" > ;< / span >
2021-07-04 01:11:42 +03:00
< span class = "plain-syntax" > < / span > < span class = "identifier-syntax" > WRITE< / span > < span class = "plain-syntax" > (< / span > < span class = "string-syntax" > " document.getElementById(ic).style.background = '#cccccc';\n"< / span > < span class = "plain-syntax" > );< / span >
< span class = "plain-syntax" > < / span > < span class = "identifier-syntax" > WRITE< / span > < span class = "plain-syntax" > (< / span > < span class = "string-syntax" > "}\n"< / span > < span class = "plain-syntax" > );< / span >
< / pre >
2021-07-08 01:43:23 +03:00
< ul class = "endnotetexts" > < li > This code is used in < a href = "2-sas.html#SP1_2" > § 1.2< / a > .< / li > < / ul >
< p class = "commentary firstcommentary" > < a id = "SP1_2_8_1" class = "paragraph-anchor" > < / a > < b > § 1.2.8.1. < / b > < span class = "named-paragraph-container code-font" > < span class = "named-paragraph-defn" > Write Javascript to produce the corresponding icon name< / span > < span class = "named-paragraph-number" > 1.2.8.1< / span > < / span > < span class = "comment-syntax" > =< / span >
2021-07-04 01:11:42 +03:00
< / p >
< pre class = "displayed-code all-displayed-code code-font" >
2021-07-05 01:04:18 +03:00
< span class = "plain-syntax" > < / span > < span class = "identifier-syntax" > WRITE< / span > < span class = "plain-syntax" > (< / span > < span class = "string-syntax" > " var ic = 'box%d_1';\n"< / span > < span class = "plain-syntax" > , < / span > < span class = "identifier-syntax" > current_page< / span > < span class = "plain-syntax" > -> < / span > < span class = "identifier-syntax" > allocation_id< / span > < span class = "plain-syntax" > +1);< / span >
< span class = "plain-syntax" > < / span > < span class = "reserved-syntax" > for< / span > < span class = "plain-syntax" > (< / span > < span class = "reserved-syntax" > int< / span > < span class = "plain-syntax" > < / span > < span class = "identifier-syntax" > i< / span > < span class = "plain-syntax" > =2; < / span > < span class = "identifier-syntax" > i< / span > < span class = "function-syntax" > < =current_page-> < / span > < span class = "element-syntax" > no_elements< / span > < span class = "plain-syntax" > ; < / span > < span class = "identifier-syntax" > i< / span > < span class = "plain-syntax" > ++)< / span >
2021-07-04 01:11:42 +03:00
< span class = "plain-syntax" > < / span > < span class = "identifier-syntax" > WRITE< / span > < span class = "plain-syntax" > (< / span > < span class = "string-syntax" > " if (id == 'segment%d') { ic = 'box%d_%d';}\n"< / span > < span class = "plain-syntax" > ,< / span >
2021-07-05 01:04:18 +03:00
< span class = "plain-syntax" > < / span > < span class = "identifier-syntax" > i< / span > < span class = "plain-syntax" > , < / span > < span class = "identifier-syntax" > current_page< / span > < span class = "plain-syntax" > -> < / span > < span class = "identifier-syntax" > allocation_id< / span > < span class = "plain-syntax" > +1, < / span > < span class = "identifier-syntax" > i< / span > < span class = "plain-syntax" > );< / span >
2021-07-04 01:11:42 +03:00
< / pre >
2021-07-08 01:43:23 +03:00
< ul class = "endnotetexts" > < li > This code is used in < a href = "2-sas.html#SP1_2_8" > § 1.2.8< / a > (twice).< / li > < / ul >
2021-07-04 01:11:42 +03:00
< nav role = "progress" > < div class = "progresscontainer" >
2021-07-27 15:55:53 +03:00
< ul class = "progressbar" > < li class = "progressprev" > < a href = "2-ii.html" > ❮ < / a > < / li > < li class = "progresschapter" > < a href = "P-wtmd.html" > P< / a > < / li > < li class = "progresschapter" > < a href = "1-im.html" > 1< / a > < / li > < li class = "progresscurrentchapter" > 2< / li > < li class = "progresssection" > < a href = "2-il.html" > il< / a > < / li > < li class = "progresssection" > < a href = "2-ii.html" > ii< / a > < / li > < li class = "progresscurrent" > sas< / li > < li class = "progresssection" > < a href = "2-iu.html" > iu< / a > < / li > < li class = "progresssection" > < a href = "2-ir.html" > ir< / a > < / li > < li class = "progresssection" > < a href = "2-lxc.html" > lxc< / a > < / li > < li class = "progresssection" > < a href = "2-fi.html" > fi< / a > < / li > < li class = "progresssection" > < a href = "2-fs.html" > fs< / a > < / li > < li class = "progresschapter" > < a href = "3-tpt.html" > 3< / a > < / li > < li class = "progresschapter" > < a href = "4-mc.html" > 4< / a > < / li > < li class = "progressnext" > < a href = "2-iu.html" > ❯ < / a > < / li > < / ul > < / div >
2021-07-04 01:11:42 +03:00
< / nav > <!-- End of weave -->
< / main >
< / body >
< / html >