{"id":20660978,"url":"https://github.com/liatemplates/webdev","last_synced_at":"2025-12-13T13:17:36.150Z","repository":{"id":107256854,"uuid":"160836483","full_name":"LiaTemplates/WebDev","owner":"LiaTemplates","description":"A simple LiaScript template for web development","archived":false,"fork":false,"pushed_at":"2019-11-25T08:22:48.000Z","size":8,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-01-17T12:16:30.950Z","etag":null,"topics":["css","html","javascript","liascript","liascript-template","template","tutorial","webdevelopment"],"latest_commit_sha":null,"homepage":"https://liascript.github.io/course/?https://raw.githubusercontent.com/liaTemplates/webdev/master/README.md","language":null,"has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/LiaTemplates.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-12-07T14:49:41.000Z","updated_at":"2022-02-22T12:35:09.000Z","dependencies_parsed_at":null,"dependency_job_id":"53a689a8-50bb-4f29-b86b-8517f4c64124","html_url":"https://github.com/LiaTemplates/WebDev","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LiaTemplates%2FWebDev","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LiaTemplates%2FWebDev/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LiaTemplates%2FWebDev/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LiaTemplates%2FWebDev/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/LiaTemplates","download_url":"https://codeload.github.com/LiaTemplates/WebDev/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":242787951,"owners_count":20185191,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["css","html","javascript","liascript","liascript-template","template","tutorial","webdevelopment"],"created_at":"2024-11-16T19:06:41.644Z","updated_at":"2025-12-13T13:17:31.107Z","avatar_url":"https://github.com/LiaTemplates.png","language":null,"readme":"\u003c!--\nauthor:   André Dietrich\n\nemail:    andre.dietrich@ovgu.de\n\nversion:  0.1.0\n\nlanguage: en\n\nnarrator: US English Female\n\nlogo:     https://wiki.selfhtml.org/images/thumb/7/78/HTML-CSS-JS.svg/400px-HTML-CSS-JS.svg.png\n\ncomment:  A set of macros, that can be used for teachning (front-end)\n          web-development, including (HTML and JavaScript).\n\n\n@WebDev.HTML: @WebDev._HTML(@uid)\n@WebDev._HTML\n\u003cscript\u003e\n    document.getElementById(\"@0\").innerHTML = `@input`;\n    \"LIA: stop\";\n\u003c/script\u003e\n\n\u003cdiv id=\"@0\"\u003e\u003c/div\u003e\n@end\n\n@WebDev.JS\n\u003cscript\u003e\nlet rslt = eval(`@input`);\nconsole.log(rslt);\n\"LIA: stop\";\n\u003c/script\u003e\n@end\n\n@WebDev.HTML_CSS: @WebDev._HTML_CSS(@uid)\n@WebDev._HTML_CSS\n\u003cscript\u003e\nlet iframe = document.getElementById(\"@0\");\niframe.hidden = false;\niframe.style.height = \"10px\";\niframe.contentDocument.documentElement.innerHTML  = `\u003cstyle scoped\u003e@input(1)\u003c/style\u003e@input`;\niframe.style.height = getDocHeight( iframe ) + 4 + \"px\";\n\"LIA: stop\";\n\u003c/script\u003e\n\n\u003ciframe id=\"@0\" style=\"width: 100%\" hidden=\"true\"\u003e\u003c/iframe\u003e\n@end\n\n\n@WebDev.HTML_JS: @WebDev._HTML_JS(@uid)\n@WebDev._HTML_JS\n\u003cscript\u003e\ndocument.getElementById(\"@0\").innerHTML = `@input`;\neval(`@input(1)`);\n\"LIA: stop\";\n\u003c/script\u003e\n\n\u003cdiv id=\"@0\"\u003e\u003c/div\u003e\n@end\n\n@onload\nwindow.getDocHeight = function(doc) {\n    doc = doc.contentDocument? doc.contentDocument : doc.contentWindow.document;\n    // stackoverflow.com/questions/1145850/\n    var body = doc.body, html = doc.documentElement;\n    var height = Math.max( body.scrollHeight, body.offsetHeight,\n        html.clientHeight, html.scrollHeight, html.offsetHeight );\n    return height;\n};\n@end\n--\u003e\n\n# WebDev - Template\n\n                         --{{0}}--\nThis document defines basic macros, to be used in\n[LiaScript](https://LiaScript.github.io), that can be used for teaching\n(front-end) web-development. By adding these macros to the end of one or two\nMarkdown code-blocks, they will be made editable and executable.\n\n__Try it on LiaScript:__\n\nhttps://liascript.github.io/course/?https://raw.githubusercontent.com/liaTemplates/WebDev/master/README.md\n\n__See the project on Github:__\n\nhttps://github.com/liaTemplates/WebDev\n\n\n                         --{{1}}--\nThere are three ways to use this template. The easiest way is to use the\n`import` statement and the url of the raw text-file of the master branch or any\nother branch or version. But you can also copy the required functionionality\ndirectly into the header of your Markdown document, see therefor the\n[last slide](#5). And of course, you could also clone this project and change\nit, as you wish.\n\n                           {{1}}\n1. Load the macros via\n\n   `import: https://raw.githubusercontent.com/liaTemplates/WebDev/master/README.md`\n\n2. Copy the definitions into your Project\n\n3. Clone this repository on GitHub\n\n## `@WebDev.HTML`\n\n                         --{{0}}--\nWe start with a short HTML-snippet. Feel free extend or to change the code,\nafterwards you can evaluate the output by clicking onto the execute button below\nthe code box.\n\n``` html table.html\n\u003ch1\u003eThis is an example of a table\u003c/h1\u003e\n\nFeel free to change the code and to test the output by clicking the execute button below the code box.\n\n\u003ctable\u003e\n  \u003ctr\u003e\n    \u003cth style=\"text-align:left\"\u003e Header 1 \u003c/th\u003e\n    \u003cth style=\"text-align:left\"\u003e Header 2 \u003c/th\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd style=\"text-align:left\"\u003e row 1.1 \u003c/td\u003e\n    \u003ctd style=\"text-align:left\"\u003e row 1.2 \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd style=\"text-align:left\"\u003e row 2.1 \u003c/td\u003e\n    \u003ctd style=\"text-align:left\"\u003e row 2.2 \u003c/td\u003e\n  \u003c/tr\u003e\n\u003c/table\u003e\n```\n@WebDev.HTML\n\n\n## `@WebDev.JS`\n\n                         --{{0}}--\nOk, this was a static HTML example, but how can we add dynamic elements? We need\nto include some lines of code ... Let's start with some basics. Again, you can\nadapt the code according to your project and test the algorithms immediately.\nSee the version counter on the right, it offers the opportunity to switch\ncomfortably between different states of your code.\n\n``` js for-loop.js\nlet fak = 1;\n\nfor(let i=1; i\u003c10; i++) {\n  fak = fak * i;\n  console.log(\"i: \", i ,\"  fak:\", fak);\n}\n\nconsole.log(\"fin\")\n```\n@WebDev.JS\n\n\n## `@WebDev.HTML_CSS`\n\n                         --{{0}}--\nStyling HTML with CSS is enabled by this macro (`@WebDev.HTML_CSS`). Two\nsucceeding code-blocks have to be defined, whereby the first contains the HTML\ncontent and the second one holdes the CSS.\n\n``` html style.html\n\u003cdiv\u003e\n  \u003ch1\u003eTest\u003c/h1\u003e\n\u003c/div\u003e\n```\n``` css  style.css\ndiv {border: 2px solid black; background-color: blue;}\n```\n@WebDev.HTML_CSS\n\n\n## `@WebDev.HTML_JS`\n\n                         --{{0}}--\nCombining HTML and JavaScript is enabled by this macro (`@WebDev.HTML_JS`). Two\nsucceeding code-blocks have to be defined, whereby the first contains the HTML\ncontent and the second one holdes the JavaScript to be executed.\n\n```html index.html\n\u003ch1 id=\"hallo_id\"\u003e Hallo \u003c/h1\u003e\n```\n```js  test.js\ndocument.getElementById(\"hallo_id\").innerHTML = \"TEST\";\n```\n@WebDev.HTML_JS\n\n\n## Implementation\n\n                         --{{0}}--\nThe code shows how the macros were implemented. Most of them make use of a\nhidden  macro, starting with and underscore. This way, it is possible to hide\nalso the usage of the `@uid` macro, which is required to generate a unique\nidentifier, which defines the ids of the associated `divs` and `iframes`. The\n`@onload` macro is a special one, which is called once after the loading of a\ndocument. This way some initialization can be implemented.\n\n\n``` html\n@WebDev.HTML: @WebDev._HTML(@uid)\n@WebDev._HTML\n\u003cscript\u003e\n    document.getElementById(\"@0\").innerHTML = `@input`;\n    \"LIA: stop\";\n\u003c/script\u003e\n\n\u003cdiv id=\"@0\"\u003e\u003c/div\u003e\n@end\n\n\n@WebDev.JS\n\u003cscript\u003e\nlet rslt = eval(`@input`);\nconsole.log(rslt);\n\"LIA: stop\";\n\u003c/script\u003e\n@end\n\n\n@WebDev.HTML_CSS: @WebDev._HTML_CSS(@uid)\n@WebDev._HTML_CSS\n\u003cscript\u003e\nlet iframe = document.getElementById(\"@0\");\niframe.hidden = false;\niframe.style.height = \"10px\";\niframe.contentDocument.documentElement.innerHTML  = `\u003cstyle scoped\u003e@input(1)\u003c/style\u003e@input`;\niframe.style.height = getDocHeight( iframe ) + 4 + \"px\";\n\"LIA: stop\";\n\u003c/script\u003e\n\n\u003ciframe id=\"@0\" style=\"width: 100%\" hidden=\"true\"\u003e\u003c/iframe\u003e\n@end\n\n\n@WebDev.HTML_JS: @WebDev._HTML_JS(@uid)\n@WebDev._HTML_JS\n\u003cscript\u003e\ndocument.getElementById(\"@0\").innerHTML = `@input`;\neval(`@input(1)`);\n\"LIA: stop\";\n\u003c/script\u003e\n\n\u003cdiv id=\"@0\"\u003e\u003c/div\u003e\n@end\n\n\n@onload\nwindow.getDocHeight = function(doc) {\n  doc = doc.contentDocument? doc.contentDocument : doc.contentWindow.document;\n  // stackoverflow.com/questions/1145850/\n  var body = doc.body, html = doc.documentElement;\n  var height = Math.max( body.scrollHeight, body.offsetHeight,\n      html.clientHeight, html.scrollHeight, html.offsetHeight );\n  return height;\n};\n@end\n```\n\n                         --{{1}}--\nIf you want to minimize loading effort in your LiaScript project, you can also\ncopy this code and paste it into your main comment header, see the code in the\nraw file of this document.\n\n{{1}} https://raw.githubusercontent.com/liaTemplates/WebDev/master/README.md\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fliatemplates%2Fwebdev","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fliatemplates%2Fwebdev","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fliatemplates%2Fwebdev/lists"}