import { Head, Appear } from "mdx-deck"; import Logo from "./assets/images/logos/rdc-icon.svg"; export { default as theme } from "./theme"; import { CodeSurfer } from "mdx-deck-code-surfer"; import ultramin from "prism-react-renderer/themes/ultramin";
Remember to sit with your lab groups!
function add(a, b) {
return a + b;
}Defining a new function, with function
function doTwice(func, input) {
func(func(input));
}Taking a function as an argument
Dealing with a chaos of inputs and outputs and staying efficient
<iframe src="https://giphy.com/embed/HSxKYjDLc9A6A" height="500" frameBorder="0" class="giphy-embed" allowFullScreen></iframe>setTimeout(function() {
console.log("This will print after 5 seconds");
}, 5000);
console.log("But it won't wait for me!");Function calls are processed like a queue!
Using JavaScript to make our website interactive
If this event happens, then do something
let btn = document.querySelector("button");
btn.addEventListener("<this event happens>", function(event) {
// Do something
});
element" },
{
tokens: {
2: [4]
},
notes: "Specify the event name"
},
{
tokens: {
2: [7, 8, 9, 10, 12]
},
lines: [3, 4],
notes: "Specify what should happen when the event fires"
}
]}
/>
- click
- mousedown, mouseup, mousemove
- input
- keydown, keyup
- touchstart, touchend, touchmove
let btn = document.querySelector("button");
btn.addEventListener("click", function(event) {
// What is `event`?
});