What's on this website:


Introduction to the main code behind this website

Below are Scheme code and a BiwaScheme console, and a few HTML elements just for demo tests. The code demonstrates how this website makes BiwaScheme interact with the DOM and the web browser console. To evaluate (i.e. run) the code, type it into the BiwaScheme console and terminate it with a RETURN (or ENTER). Open your browser's developer tools to see the JavaScript console output and to see and interact with the page's structure using the Scheme code. To see all of the Scheme code you might need to scroll it vertically and horizontally.

(load "browser-util.scm")

(define body (getelem1 "body"))
(js-ref body "children") ;; => [object HTMLCollection]
(js-ref body "childNodes") ;; => [object NodeList]
(define children (js-child-nodes body))
children ;; => ([object HTMLDivElement] [object Text] [object HTMLDivElement] ...)
(js-ref (second children) "nodeName") ;; => "#text"
(js-ref (second children) "tagName") ;; =>
(define div (third children))
(js-ref div "nodeName") ;; => "DIV"
(js-ref div "tagName") ;; => "DIV"
(console-dir div)

(console-dir (car (js-child-nodes div)))
(dom->string div)
;; => "((DIV (id \"junk\") (style \"background-color:yellow;\")) ..."

(js-array->list (js-ref body "childNodes"))
;; => ([object Text] [object HTMLDivElement] [object Text] ...)
(js-obj->alist (js-ref body "children"))
;; => ((0 . [object HTMLDivElement]) (1 . [object HTMLDivElement]) ...)

(node-name body) ;; => "BODY"
(js-child-nodes body) ;; => ([object Text] [object HTMLParagraphElement] ...)
(js-eval "for (const prop in Node) { console.log(`${prop}: ${Node[prop]}`); }")
;; => [Prints Node type constants to the JS console; see https://mzl.la/2zcB5om]
(js-eval "const body = document.body; for (const prop in body) { console.log(`${prop}: ${body[prop]}`); }")
;; => [Prints the properties of the body element to the JS console]
(define junk (getelem1 "#junk"))
(element-attributes junk)
=> (("id" "junk") ("style" "background-color:yellow;"))
(define junk-str (dom->string junk))
(display junk-str)
(http-post-text "/doms" junk-str) ;; [Inserts the DOM into the Zen Database.]

      
  1. One
  2. Two
  3. Three

This is a paragraph.