You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
45 lines
3.0 KiB
45 lines
3.0 KiB
import { addBanner, addArticle, addHeader, addSubHeader, addParagraph, addCaption, addQuote } from '/scripts/article.js'; |
|
import { addInset, addInsetList, addInsetCodeListing, addInsetBulletList } from '/scripts/inset.js'; |
|
import { addImageWithCaption, addButtonGroup } from '/scripts/visuals.js'; |
|
import { menu } from '/scripts/web_dev_buttons.js'; |
|
|
|
const main = document.querySelector("main"); |
|
main.append(addBanner("JavaScript Functions", "Philip Osztromok", "Updated March 2024")) |
|
main.append(addArticle()) |
|
const article = document.querySelector("article") |
|
article.append(addHeader("Introduction")) |
|
article.append(addParagraph("This is an introduction to the JavaScript functions used to build the more recent pages on this site explaining what the function is, what it expexts as input and what it returns. These will be grouped according to the file they are in.")) |
|
article.append(addParagraph("Each new page that is added will import more or less all of the JavaScript functions with a few exceptions and will create a const called main which generates a main HTML element and all the elements that are subsequently created will be added to that element or an element inside it. Actually, in practice only one element is added directly to main which actually may be redundant!")) |
|
article.append(addInset("const main = document.querySelector(\"main\");")) |
|
article.append(addHeader("article.js")) |
|
article.append(addSubHeader("addbanner")) |
|
article.append(addParagraph("This is actually not implemented as a function but it creates a const variable and then calls an anonymous function which takes three vales as input and use these to create a div element which cintains three headers, 1 h1 and 2 h2 elements each using one of the input values.")) |
|
article.append(addParagraph("The input values are all strings referenced as courselink, lecturer and episodetitle and these names reflect the fact that they are intended primarily to create pages for the notes I generate when studying courses on LinkedIn Learning. For the course, <a href='/webdevelopment/jsonessentialtraining/introduction.html'>JSON Essential Training</a>, the JavaScript used to generate the pages for that course include a line like this.")) |
|
article.append(addInset("main.append(addBanner(\"<a href=\"https://www.linkedin.com/learning/json-essential-training\">JSON Essential Training</a>\", \"Sasha Vodnik - Updated April 2023\", \"Introduction\"))")) |
|
article.append(addParagraph("So there we have the link which is a complete HTML element so it includes the link text, the name of the lecturer and the course date and finally the chapter heading for the first chapter which is the page default page if you click on the link to the course from my Web Development page. Note that the link is a link to the actual course in LinkedIn Learning.")) |
|
article.append(addParagraph("The div element that is returned has a class called banner.")) |
|
article.append(addInset("addArticle")) |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
main.append(menu("nomenu"))
|
|
|