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" >
< h1 > < a href = "../index.html" >
< img src = "../docs-assets/Inform.png" height = 72" >
< / a > < / h1 >
< ul > < li > < a href = "../compiler.html" > compiler tools< / a > < / li >
< li > < a href = "../other.html" > other tools< / a > < / li >
< li > < a href = "../extensions.html" > extensions and kits< / a > < / li >
< li > < a href = "../units.html" > unit test tools< / a > < / li >
< / ul > < h2 > Compiler Webs< / h2 > < ul >
< li > < a href = "../inbuild/index.html" > inbuild< / a > < / li >
< li > < a href = "../inform7/index.html" > inform7< / a > < / li >
< li > < a href = "../inter/index.html" > inter< / a > < / li >
< / ul > < h2 > Inbuild Modules< / h2 > < ul >
< li > < a href = "../supervisor-module/index.html" > supervisor< / a > < / li >
< / ul > < h2 > Inform7 Modules< / h2 > < ul >
< li > < a href = "../core-module/index.html" > core< / a > < / li >
< li > < a href = "../assertions-module/index.html" > assertions< / a > < / li >
< li > < a href = "../values-module/index.html" > values< / a > < / li >
< li > < a href = "../knowledge-module/index.html" > knowledge< / a > < / li >
< li > < a href = "../imperative-module/index.html" > imperative< / a > < / li >
< li > < a href = "../runtime-module/index.html" > runtime< / a > < / li >
< li > < a href = "../if-module/index.html" > if< / a > < / li >
< li > < a href = "../multimedia-module/index.html" > multimedia< / a > < / li >
< li > < a href = "index.html" > < span class = "selectedlink" > index< / span > < / a > < / li >
< / ul > < h2 > Inter Modules< / h2 > < ul >
< li > < a href = "../bytecode-module/index.html" > bytecode< / a > < / li >
< li > < a href = "../building-module/index.html" > building< / a > < / li >
< li > < a href = "../codegen-module/index.html" > codegen< / a > < / li >
< / ul > < h2 > Services< / h2 > < ul >
< li > < a href = "../arch-module/index.html" > arch< / a > < / li >
< li > < a href = "../calculus-module/index.html" > calculus< / a > < / li >
< li > < a href = "../html-module/index.html" > html< / a > < / li >
< li > < a href = "../inflections-module/index.html" > inflections< / a > < / li >
< li > < a href = "../kinds-module/index.html" > kinds< / a > < / li >
< li > < a href = "../linguistics-module/index.html" > linguistics< / a > < / li >
< li > < a href = "../problems-module/index.html" > problems< / a > < / li >
< li > < a href = "../syntax-module/index.html" > syntax< / a > < / li >
< li > < a href = "../words-module/index.html" > words< / a > < / li >
< li > < a href = "../../../inweb/docs/foundation-module/index.html" > foundation< / a > < / li >
< / ul >
< / nav >
< main role = "main" >
<!-- Weave of 'Styles and Scripts' generated by Inweb -->
< div class = "breadcrumbs" >
< ul class = "crumbs" > < li > < a href = "../index.html" > Home< / a > < / li > < li > < a href = "../compiler.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 >
< p class = "purpose" > CSS and Javascripts embedded into the body of index pages.< / p >
< ul class = "toc" > < li > < a href = "2-sas.html#SP1" > § 1. So here goes with the CSS and Javascript< / a > < / li > < / ul > < hr class = "tocbar" >
< p class = "commentary firstcommentary" > < a id = "SP1" class = "paragraph-anchor" > < / a > < b > § 1. So here goes with the CSS and Javascript. < / b > < / p >
< 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" >
< 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 >
2021-07-07 01:26:06 +03:00
< 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 > < a href = "2-ii.html#SP6" class = "function-link" > < span class = "function-syntax" > InterpretIndex::get_page< / span > < / a > < span class = "plain-syntax" > ();< / span >
2021-07-05 01:04:18 +03:00
< 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-04 01:11:42 +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 >
< 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" > Write some CSS styles for all these classes< / span > < span class = "named-paragraph-number" > 1.1< / 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" > "style"< / span > < span class = "plain-syntax" > );< / span >
< 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 >
< 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 = "named-paragraph-container code-font" > < a href = "2-sas.html#SP1_3" class = "named-paragraph-link" > < span class = "named-paragraph" > Write Javascript code for clicking on an element box< / span > < span class = "named-paragraph-number" > 1.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_4" class = "named-paragraph-link" > < span class = "named-paragraph" > Write Javascript code for clicking on the sidebar< / span > < span class = "named-paragraph-number" > 1.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_5" 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.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_6" 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.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_7" class = "named-paragraph-link" > < span class = "named-paragraph" > Write Javascript code for entering the periodic table display< / span > < span class = "named-paragraph-number" > 1.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_8" 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.8< / 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_9" 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.9< / 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 >
< span class = "plain-syntax" > }< / span >
< / pre >
< p class = "commentary firstcommentary" > < a id = "SP1_1" class = "paragraph-anchor" > < / a > < b > § 1.1. < / b > < span class = "named-paragraph-container code-font" > < span class = "named-paragraph-defn" > Write some CSS styles for all these classes< / span > < span class = "named-paragraph-number" > 1.1< / 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" > WRITE< / span > < span class = "plain-syntax" > (< / span > < span class = "string-syntax" > "p {\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" > "font-family: \"Lucida Grande\", \"Lucida Sans Unicode\", Helvetica, Arial, Verdana, sans-serif;\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 >
< span class = "plain-syntax" > < / span > < span class = "identifier-syntax" > WRITE< / span > < span class = "plain-syntax" > (< / span > < span class = "string-syntax" > ".box a:link { text-decoration: 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" > ".box a:visited { text-decoration: 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" > ".box a:active { text-decoration: 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" > ".box a:hover { text-decoration: none; color: #444444; }\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" > ".smallbox a:link { text-decoration: 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" > ".smallbox a:visited { text-decoration: 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" > ".smallbox a:active { text-decoration: 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" > ".smallbox a:hover { text-decoration: none; color: #444444; }\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" > ".symbol {\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" > " position: absolute;\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" > " top: -4px;\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" > " left: -1px;\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" > " width: 100%%;\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" > " color: #ffffff;\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" > " padding: 14px 0px 14px 1px;\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" > " font-size: 20px;\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" > " font-weight: bold;\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" > " text-align: center;\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" > ".indexno {\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" > " position: absolute;\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" > " top: 1px;\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" > " left: 3px;\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" > " color: #ffffff;\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" > " font-size: 7pt;\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" > " text-align: left;\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" > ".rubric {\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" > " position: absolute;\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" > " top: 35px;\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" > " width: 100%%;\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" > " color: #ffffff;\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" > " font-size: 9px;\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" > " font-weight: bold;\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" > " text-align: center;\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 >
< span class = "plain-syntax" > < / span > < span class = "identifier-syntax" > WRITE< / span > < span class = "plain-syntax" > (< / span > < span class = "string-syntax" > ".box {\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" > " position: relative;\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" > " height: 56px;\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" > " width: 56px;\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" > " padding: 0px;\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" > "font-family: \"Lucida Grande\", \"Lucida Sans Unicode\", Helvetica, Arial, Verdana, sans-serif;\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" > "-webkit-font-smoothing: antialiased;\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" > ".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" > " height: 56px;\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" > " width: 16px;\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" > " background: #888;\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" > "font-family: \"Lucida Grande\", \"Lucida Sans Unicode\", Helvetica, Arial, Verdana, sans-serif;\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" > "-webkit-font-smoothing: antialiased;\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" > ".sidebar:hover { background: #222; }\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" > ".smallbox {\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" > " position: relative;\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" > " height: 40px;\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" > " width: 40px;\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" > " padding: 0px;\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" > "font-family: \"Lucida Grande\", \"Lucida Sans Unicode\", Helvetica, Arial, Verdana, sans-serif;\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" > "-webkit-font-smoothing: antialiased;\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 >
< 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 >
< span class = "plain-syntax" > < / span > < span class = "identifier-syntax" > LOOP_OVER< / 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 = "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 >
< span class = "plain-syntax" > < / span > < span class = "identifier-syntax" > LOOP_OVER< / 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 = "plain-syntax" > < / span > < span class = "reserved-syntax" > if< / span > < span class = "plain-syntax" > (< / span > < span class = "identifier-syntax" > ie< / span > < span class = "plain-syntax" > -> < / span > < span class = "element-syntax" > owning_page< / span > < span class = "plain-syntax" > == < / span > < span class = "identifier-syntax" > ip< / 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 >
< 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" > "ul.leaders {\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" > " padding: 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" > " margin-top: 1px;\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" > " margin-bottom: 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" > " overflow-x: hidden;\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" > " list-style: 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" > "ul.leaders li.leaded:before {\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" > " float: left;\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" > " width: 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" > " white-space: nowrap;\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" > " content:\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 >
< 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 >
< 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 >
< 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 >
< 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 >
< span class = "plain-syntax" > < / span > < span class = "identifier-syntax" > WRITE< / span > < span class = "plain-syntax" > (< / span > < span class = "string-syntax" > "ul.leaders li.leaded span:first-child {\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" > " padding-right: 0.33em;\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" > " background: white}\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" > "ul.leaders li.leaded span + span {\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" > " float: right;\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" > " padding-left: 0.33em;\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" > " background: white}\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 >
< 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 = "plain-syntax" > < 10; < / 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" > "li.indent%d span:first-child {\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" > " padding-left: %dpx;\n"< / span > < span class = "plain-syntax" > , < / span > < span class = "constant-syntax" > 25< / 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" > "}\n"< / 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 >
< span class = "plain-syntax" > < / span > < span class = "identifier-syntax" > WRITE< / span > < span class = "plain-syntax" > (< / span > < span class = "string-syntax" > "li.unleaded:before {\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" > " content: \"\";\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 >
< 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. The page can be in one of three states:
< / 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 >
< p class = "commentary" > We'll structure the Javascript routines on three levels. At the top level,
we have routines called when buttons on the page are clicked:
< / p >
< p class = "commentary firstcommentary" > < a id = "SP1_3" class = "paragraph-anchor" > < / a > < b > § 1.3. < / b > This is called when the user clicks on an element box corresponding to
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 >
< 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.3< / 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" > 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 >
< 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_4" class = "paragraph-anchor" > < / a > < b > § 1.4. < / b > If we're in state (1) or (2), go to state (3); if we're in state (3), go to
state (1).
< / p >
< 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.4< / 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" > 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 >
< 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_5" class = "paragraph-anchor" > < / a > < b > § 1.5. < / b > At the middle level of our Javascript, we have routines which move the
page to a new state. This routine goes to state (1):
< / p >
< 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.5< / 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" > 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 >
< 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_6" class = "paragraph-anchor" > < / a > < b > § 1.6. < / 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
element — < span class = "extract" > < span class = "extract-syntax" > segment1< / span > < / span > , < span class = "extract" > < span class = "extract-syntax" > segment2< / span > < / span > , ...
< / p >
< 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.6< / 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" > 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 >
< 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_7" class = "paragraph-anchor" > < / a > < b > § 1.7. < / b > This routine goes to state (3):
< / p >
< 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.7< / 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" > 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 >
< 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_8" class = "paragraph-anchor" > < / a > < b > § 1.8. < / b > And at the bottom level of the Javascript code we have service routines
to show, hide and colour things:
< / p >
< 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.8< / 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" > 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 >
< 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_9" class = "paragraph-anchor" > < / a > < b > § 1.9. < / 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.9< / 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" > WRITE< / span > < span class = "plain-syntax" > (< / span > < span class = "string-syntax" > "function light_up(id) {\n"< / span > < span class = "plain-syntax" > );< / span >
< span class = "plain-syntax" > < / span > < span class = "named-paragraph-container code-font" > < a href = "2-sas.html#SP1_9_1" class = "named-paragraph-link" > < span class = "named-paragraph" > Write Javascript to produce the corresponding icon name< / span > < span class = "named-paragraph-number" > 1.9.1< / span > < / a > < / 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(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 >
< span class = "plain-syntax" > < / span > < span class = "named-paragraph-container code-font" > < a href = "2-sas.html#SP1_9_1" class = "named-paragraph-link" > < span class = "named-paragraph" > Write Javascript to produce the corresponding icon name< / span > < span class = "named-paragraph-number" > 1.9.1< / span > < / a > < / 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(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 >
< 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_9_1" class = "paragraph-anchor" > < / a > < b > § 1.9.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.9.1< / span > < / span > < span class = "comment-syntax" > =< / span >
< / 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 >
< ul class = "endnotetexts" > < li > This code is used in < a href = "2-sas.html#SP1_9" > § 1.9< / a > (twice).< / li > < / ul >
< nav role = "progress" > < div class = "progresscontainer" >
2021-07-05 01:04:18 +03:00
< ul class = "progressbar" > < li class = "progressprev" > < a href = "2-ii.html" > ❮ < / 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-lcl.html" > lcl< / a > < / li > < li class = "progresssection" > < a href = "2-ii.html" > ii< / a > < / li > < li class = "progresscurrent" > sas< / li > < li class = "progresssection" > < a href = "2-ifs.html" > ifs< / 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 = "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-ifs.html" > ❯ < / a > < / li > < / ul > < / div >
2021-07-04 01:11:42 +03:00
< / nav > <!-- End of weave -->
< / main >
< / body >
< / html >
