diff --git a/Development/HTML/CSS.md b/Development/HTML/CSS.md index 0803068..e801e36 100644 --- a/Development/HTML/CSS.md +++ b/Development/HTML/CSS.md @@ -973,6 +973,7 @@ Examples: ## Pseudo classes input:not([type="radio"]) +h1[data-testid="jest-test-product-name"] :active :any-link diff --git a/Development/JavaScript/JavaScript client.md b/Development/JavaScript/JavaScript client.md index bd6a6f5..757a06f 100755 --- a/Development/JavaScript/JavaScript client.md +++ b/Development/JavaScript/JavaScript client.md @@ -1370,6 +1370,22 @@ sessionStorage vs localStorage: sessionStorage is cleared when the page session var html = '

Some Title

Some arbitrary text' appendHtml(document.body, html) // "body" has two more children - h1 and span. +### createElement + + function createElement (elementType, props, children) { + const element = document.createElement(elementType) + for (const prop in props) { + if (prop === 'style') { + Object.keys(props.style).forEach(function (styleName) { element.style[styleName] = props.style[styleName] }) + } else if (props[prop] !== null) { + element[prop] = props[prop] + } + } + if (children) { + children.forEach(function (node) { element.appendChild(node) }) + } + return element + } ### Events @@ -1390,6 +1406,29 @@ sessionStorage vs localStorage: sessionStorage is cleared when the page session element.addEventListener('change', myFunction) element.removeEventListener('change', myFunction) // no myFunction = remove all +#### Page events + +Loading a page, in order: + +1. readystatechange +2. load +3. pageshow + +Back button: + +1. popstate + +MutationObserver (for SPA’s): + + const observer = new MutationObserver((mutationsList, observer) => { + for (const mutation of mutationsList) { + console.log('mutation:', mutation.type, mutation.target) + } + }) + observer.observe(document.querySelector('body'), { childList: true, subtree: true, attributes: true }) + // When done: + observer.disconnect() + #### preventDefault vs. stopPropagation event.preventDefault() // prevents the default action the browser makes on that event. diff --git a/Development/JavaScript/TypeScript.md b/Development/JavaScript/TypeScript.md index 3d77f78..4b50f27 100644 --- a/Development/JavaScript/TypeScript.md +++ b/Development/JavaScript/TypeScript.md @@ -30,6 +30,7 @@ Compile: - enum - Array: `Array` same as `string[]`. `let list: number[] = [1, 2, 3]` - object: not number, string, boolean, bigint, symbol, null, or undefined. +- function: `() => void` - symbol - void - any / unknown @@ -44,7 +45,8 @@ Compile: enum Color { Red, Green, Blue } let c: Color = Color.Green - enum LetterNumbers { A = 1, B = 2, C = 3 } + enum LetterNumber { A = 1, B = 2, C = 3 } + let n: LetterNumber = LetterNumber.B ### tuple @@ -102,7 +104,7 @@ Function in interface: interface MenuPopoverProps { open: boolean; - onClose: () => void; + onClose: (event: React.SyntheticEvent) => void; anchorEl: HTMLFormElement; } @@ -181,12 +183,32 @@ With `type`-definition: ### Important React types +- component: React.FunctionComponent (alias React.FC) +- component return value: React.ReactElement - element/children: React.ReactNode (not JSX.Element) -- React.ReactElement -- React.FunctionComponent alias React.FC -- event: React.SyntheticEvent +- event: React.SyntheticEvent, React.ChangeEvent: (event: React.SyntheticEvent) => void - event.target: Element or HTMLInputElement +Custom HTMLElementEvent: + + interface HTMLSimpleElementEvent { + target: { + name: string + type?: string + value?: string + checked?: boolean + } + } + +https://stackoverflow.com/a/42066698 +Usage: `event: HTMLElementEvent` + + type HTMLElementEvent = Event & { + target: T; + // probably you might want to add the currentTarget as well + // currentTarget: T; + } + useState: const [productInfo, setProductInfo] = useState({ sku: '', name: ''})