52 lines
1.4 KiB
Racket
52 lines
1.4 KiB
Racket
#lang racket/base
|
|
|
|
(require "../main.rkt")
|
|
|
|
(provide exercise01
|
|
exercise02
|
|
exercise03
|
|
all-dom-exercises
|
|
show-dom-exercises)
|
|
|
|
;; These demos intentionally use only the compact js-maker 3 surface language:
|
|
;; define, let/let*, return, set!, send, js-dot and ordinary function calls.
|
|
|
|
;; Exercise 01: replace the paragraph HTML.
|
|
(define exercise01
|
|
(js
|
|
(define (replaceParagraphHtml html)
|
|
(let ([p (send document querySelector "p")])
|
|
(set! (js-dot p innerHTML) html)
|
|
(return (js-dot p innerHTML))))))
|
|
|
|
;; Exercise 02: add a source link after the paragraph tag.
|
|
(define exercise02
|
|
(js
|
|
(define (addSourceLink)
|
|
(let ([p (send document querySelector "p")])
|
|
(send p insertAdjacentHTML
|
|
"afterend"
|
|
"<a href=\"https://forcemipsum.com/\">Source</a>")
|
|
(return #t)))))
|
|
|
|
;; Exercise 03: read text content from the first paragraph.
|
|
(define exercise03
|
|
(js
|
|
(define (paragraphText)
|
|
(let ([p (send document querySelector "p")])
|
|
(return (js-dot p textContent))))))
|
|
|
|
(define all-dom-exercises
|
|
`((exercise01 . ,exercise01)
|
|
(exercise02 . ,exercise02)
|
|
(exercise03 . ,exercise03)))
|
|
|
|
(define (show-dom-exercises)
|
|
(for ([entry (in-list all-dom-exercises)])
|
|
(displayln (format "// ~a" (car entry)))
|
|
(displayln (cdr entry))
|
|
(newline)))
|
|
|
|
(module+ main
|
|
(show-dom-exercises))
|