23:I[90314,["https://schon.au/_next/static/immutable/chunks/3w1yo8ttdl7xf.js","https://schon.au/_next/static/immutable/chunks/1t10en_fq84vd.js","https://schon.au/_next/static/immutable/chunks/3cp788yseft7o.js","https://schon.au/_next/static/immutable/chunks/1em42ny1s8_11.js","https://schon.au/_next/static/immutable/chunks/44ry3tv25aq6z.js","https://schon.au/_next/static/immutable/chunks/1k90lc_78gxlx.js"],"default"] 24:I[86022,["https://schon.au/_next/static/immutable/chunks/3w1yo8ttdl7xf.js","https://schon.au/_next/static/immutable/chunks/1t10en_fq84vd.js","https://schon.au/_next/static/immutable/chunks/3cp788yseft7o.js","https://schon.au/_next/static/immutable/chunks/1em42ny1s8_11.js","https://schon.au/_next/static/immutable/chunks/44ry3tv25aq6z.js","https://schon.au/_next/static/immutable/chunks/1k90lc_78gxlx.js"],"default"] 25:T1646,## NodeJS ```shell npm create vite@latest app ``` **Example:** `one.js` ```js const dayjs = require('dayjs'); const argv = process.argv; const dates = argv.slice(2); for (let i = 0; i < Math.min(20, dates.length); i++) { const daysAgo = dayjs().diff(dayjs(dates[i]), 'day'); map[dates[i]] = daysAgo; } const jsonStrong = JSON.stringify(map); fs.writeFileSync('data.json', jsonString); console.log(map); console.log('one.js'); ``` **Example:** `server.js` ```js const express = require('express'); const app = express(); const port = 3000; app.get('/', (req, res) => { const url = req.query.url; const tag = req.query.tag; const response = request('GET', url); const body = response.getBody('utf8'); const splitted = body.split(tag); const count = splitted.length - 1; console.log(body); console.log(url ,tag); res.send(`${tag} appears ${count} times.`); }); app.listen(port, () => { console.log(`App listening on port ${port}`); }); ``` *** ## The DOM The DOM (Document Object Model) is an interface that allows JavaScript to interact with HTML through the browser. ### DOM Data Types - `Document` - represents the root of the entire DOM - `Element` - a node in the DOM tree - `NodeList` - an array of elements ### Reading the DOM ```js // Returns element with given id document.getElementById(id); // Returns DOM HTMLCollection of all matches document.getElementsByTagName(id); document.getElementsByClassName(id); // Returns the first element matching the selector document.querySelector(query); ``` ### Writing to the DOM ```js // Create new div element let element = document.createElement('div'); // Create new text node let textNode = document.createTextNode("Some text"); // Adding and removing elements element.appendChild(textNode); element.removeChild(textNode); // Making changes to attributes button.setAttribute("disabled", ""); ``` ### Changing the Style of an Element ```js // Changing element.style element.style.left = "50px"; let newLeft = parseInt(element.style.left, 10) + 5 + "px"; element.style.left = newLeft; element.style.backgroundColor = "red"; ``` ### Get Element Styles ```js let computedStyle = window.getComputedStyle(element, null); let bgColor = computedStyle.getPropertyValue("background-color"); ``` ### Changing the Classes of an Element ```js element.classList.add("class"); element.classList.remove("class"); element.classList.toggle("class"); element.classList.contains("class"); ``` ### Scrolling ```js // Get current scroll position of the page console.log(window.scrollX); console.log(window.scrollY); // Scroll to a position on the page window.scrollTo({ top: 100; left: 0; behavior: "smooth", }); ``` *** ## Events An event is a signal that something has happened to a DOM element. | Mouse Events | Keyboard Events | Other Events | | --------------------------------------------------------------------------------- | ---------------------------------- | -------------------------------------------------------------------------------------------------------- | | `click`
`dblclick`
`mouseup`
`mouseenter`
`mousedown`
`mouseleave` | `keydown`
`keypress`
`keyup` | `error`
`load`
`fullscreenchange`
`submit`
`canplay`
`canplaythrough`
`animationstart` | ```html ``` ### Event Handlers ```js element.addEventListener('click', () => { // ... }); element.removeEventListener('click', () => { // ... }); ``` ### Event Interface The parameter to an event handler is an **event object**. ```js document.addEventListener('mousemove', (event) => { console.log(event.clientX); console.log(event.clientY); }); ``` > [!INFO] Event Loop > JavaScript uses a run-to-completion model. It will not handle a new event until the current even has completed. ### Prevent Default Some DOM elements have default behaviour. To stop the default behaviour of an event, use: ```js event.preventDefault() ``` *** ## Forms ### Form Elements ```js // The form with name="test" document.forms.test // Get the element with the name="fname" form.fname form.elements.fname ``` ### Form Values ```js input.value input.checked select.options select.value select.selectedIndex ``` ### Submit Buttons ```js form.addEventListener('submit', (event) => { event.preventDefault(); }); ``` *** ## Local Storage State in React and JavaScript is **transient**, meaning we lose it after a page refresh. Sometimes we want data to be **persistent** between sessions. ### Persistence > [!INFO] Server-side Persistence > Store data on the server in a database. > [!INFO] Client-side Persistence > Store data on the client, in local storage. ### Pros and Cons **Do not use Local Storage:** - When security of data is important - For large amounts of data - For complex data - Data needed on multiple devices **Use Local Storage:** - When there is no server - For data which is not crucial if it is lost - For data specific to one user only ### Localstorage API ```js // Add a data item given the key and value localStorage.setItem(key, value); // Retrives an item from localstorage given a key const value = localStorage.getItem(key); // Remove an item with a given key from localstorage localStorage.removeItem(key); // Remove all items from localstorage localStorage.clear(); ``` 1b:["$","div",null,{"className":"min-h-screen h-full w-full","children":[["$","div",null,{"className":"px-8 py-16 bg-lined border-b bg-background","children":["$","div",null,{"className":"flex flex-col md:flex-row md:items-center justify-between space-y-4","children":[["$","div",null,{"className":"flex flex-col space-y-2 md:mb-0","children":[["$","$L4",null,{"href":"/notes/COMP6080","className":"flex items-center gap-1 uppercase text-muted-foreground text-sm tracking-wide font-medium hover:underline underline-offset-4 w-fit","children":[["$","$L17",null,{"ref":"$undefined","iconNode":[["path",{"d":"m12 19-7-7 7-7","key":"1l729n"}],["path",{"d":"M19 12H5","key":"x3x0zl"}]],"className":"lucide-arrow-left size-4"}],"All ","COMP6080"," Notes"]}],["$","div",null,{"className":"flex gap-2 flex-col","children":[["$","h1",null,{"className":"font-semibold text-4xl flex items-center gap-1.5","children":[["$","$L17",null,{"ref":"$undefined","iconNode":[["path",{"d":"M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z","key":"1oefj6"}],["path",{"d":"M14 2v5a1 1 0 0 0 1 1h5","key":"wfsgrz"}],["path",{"d":"M10 9H8","key":"b1mrlr"}],["path",{"d":"M16 13H8","key":"t4e002"}],["path",{"d":"M16 17H8","key":"z1uh3a"}]],"className":"lucide-file-text size-8 shrink-0"}]," ","COMP6080"]}],["$","h2",null,{"className":"capitalize","children":["week 3"," •"," ","UNSW 26T2"]}]]}]]}],["$","$L23",null,{"categories":[],"courseId":"COMP6080","weekId":"week-3","resources":[{"title":"Week 1","file":"week-1"},{"title":"Week 2","file":"week-2"},{"title":"Week 3","file":"week-3"}]}]]}]}],["$","div",null,{"className":"px-8 py-4 bg-secondary/20 border-b","children":["$","p",null,{"className":"text-muted-foreground text-xs leading-5","children":[["$","span",null,{"className":"font-semibold","children":"Disclaimer:"}]," Images have been omitted to respect copyright. If you are the copyright owner of any material displayed here and believe its use infringes your rights, please"," ",["$","$L4",null,{"href":"/#meet","className":"text-primary hover:underline underline-offset-2","children":"contact me"}]," ","so I can review your concerns and take appropriate action. The material presented here is adapted from original course materials provided by the lecturer(s): ","Hayden Smith","."]}]}],["$","div",null,{"className":"typeset typeset-docs max-w-[52em] mx-auto py-12 px-8","children":["$","$L24",null,{"markdown":"$25"}]}]]}]

COMP6080

week 3 • UNSW 26T2