A paragraph that took hours to write.
``` > [!WARNING] > Once the page has loaded, document.write starts a new, empty page. Until the DOM lesson, the result of a click goes in an alert or in the console. ### onmouseleave ```html ``` ### oncopy ```htmlSecret recipe: flour, eggs, milk and salt.
No right click on this paragraph.
``` > [!WARNING] > Blocking a copy or a right click stops nobody who wants your text. It only annoys the visitors who did nothing wrong. ### No function needed ```html ``` 1. One step back in the history of the tab, like the back button of the browser. 2. Loads the page again. 3. Opens the print dialog of the browser. ### Fun with windows #### index.html ```html ``` > [!WARNING] > Opening a window only works from a click. #### script.js ```js function moveWindow() { const popup = window.open('', '', 'width=200,height=100'); const sizes = [500, 1000, 100]; for (let i = 0; i < 30; i++) { setTimeout(function () { const size = sizes[i % 3]; popup.resizeTo(size, size); }, i * 1000); } } ``` ### A button has onclick="sayHello". A click does nothing. Why? - A. The brackets are missing, so the function is named but never called - B. onclick has to be written as onClick - C. A button only works inside a form - D. sayHello has to be an arrow function **Answer:** A. The brackets are missing, so the function is named but never called The attribute holds code that runs on a click. sayHello on its own is a line that does nothing, sayHello() calls the function. With setTimeout it is the other way around: there you hand over the function itself, without brackets. ## 7. Exercises > Help will always be given at Hoboken to those who ask for it. > > Almost Dumbledore ### How it works - One folder per exercise, with an `index.html` and a `script.js`. **No more code inside a script tag.** - Opened with Live Server, with the console open. A typo shows up there first. - A prompt always gives back text. `Number()` before you calculate with it. - Stuck for more than ten minutes? Ask a classmate, ask on Discord, then look at the solution. ### Task: Dialogs All of this runs while the page loads, so document.write still works here. 1. Ask whether the visitor wants cookies (make believe). OK: show that cookies are on their way. Cancel: show that there will be none. 2. Ask for two numbers, add them up and show the sum on the page. 3. Add a third prompt that takes plus or minus, and add or subtract depending on the answer. Anything else gets a message that the input is not valid. > [!TIP] > **Dialogs** > > *Cookies* > > *script.js* > > ```js > if (confirm('Do you want cookies?')) { > document.write('Cookies are on their way'); > } else { > document.write('No cookies for you'); > } > ``` > > *Sum* > > Without Number() the plus glues the two answers together: 2 and 3 become 23. > > *script.js* > > ```js > const a = Number(prompt('First number?')); > const b = Number(prompt('Second number?')); > > document.write(`${a} + ${b} = ${a + b}`); > ``` > > *Plus or minus* > > *script.js* > > ```js > const a = Number(prompt('First number?')); > const b = Number(prompt('Second number?')); > const operation = prompt('plus or minus?'); > > if (operation === 'plus') { > document.write(`${a} + ${b} = ${a + b}`); > } else if (operation === 'minus') { > document.write(`${a} - ${b} = ${a - b}`); > } else { > document.write('That is not a valid input'); > } > ``` ### Task: Buttons After a click, the result goes in an alert or in the console. 1. A button that shows a random number from 1 to 100 in an alert. 2. A button that counts: every click says how many times it has been clicked. 3. A calculator. Two prompts ask for two numbers when the page loads. Four buttons, `+` `-` `*` and `/`, each show the result of their own operation. > [!TIP] > **Buttons** > > *Random number* > > *index.html* > > ```html > > > > ``` > > *script.js* > > ```js > function showRandom() { > const number = Math.floor(Math.random() * 100) + 1; > alert(number); > } > ``` > > *Counter* > > The counter lives outside the function. Inside, it would start at 0 again on every click. > > *index.html* > > ```html > > > > ``` > > *script.js* > > ```js > let clicks = 0; > > function count() { > clicks++; > alert(`Clicked ${clicks} times`); > } > ``` > > *Calculator* > > *index.html* > > ```html > > > > > > > ``` > > *script.js* > > ```js > const a = Number(prompt('First number?')); > const b = Number(prompt('Second number?')); > > function calculate(operation) { > let result; > > if (operation === '+') { > result = a + b; > } else if (operation === '-') { > result = a - b; > } else if (operation === '*') { > result = a * b; > } else { > result = a / b; > } > > alert(`${a} ${operation} ${b} = ${result}`); > } > ``` ### Task: Browser and timers 1. Show the user agent on the page, with a button under it. On Windows a click asks "Go to Microsoft?" and goes to [microsoft.com](https://www.microsoft.com) after an OK. On a Mac it asks "Go to Apple?" and goes to [apple.com](https://www.apple.com). 2. A page that shows a message of your choice after 3 seconds, and moves on to [this page](https://i.giphy.com/media/PgdWZV8Bb1fFqVcmtk/giphy.webp) after 4. 3. A countdown from 10 to 0 in the console, one number per second, with an alert at the end. > [!TIP] > **Browser and timers** > > *Microsoft or Apple* > > *index.html* > > ```html > > > > ``` > > *script.js* > > ```js > const agent = navigator.userAgent; > document.write(agent); > > function goHome() { > if (agent.includes('Windows')) { > if (confirm('Go to Microsoft?')) { > location.href = 'https://www.microsoft.com'; > } > } else if (agent.includes('Mac')) { > if (confirm('Go to Apple?')) { > location.href = 'https://www.apple.com'; > } > } > } > ``` > > *Message and redirect* > > Two timers that start at the same moment. The alert blocks, so the redirect waits until the dialog is closed, even when the 4 seconds are long over. > > *script.js* > > ```js > setTimeout(function () { > alert('Hang on, something is coming'); > }, 3000); > > setTimeout(function () { > location.href = 'https://i.giphy.com/media/PgdWZV8Bb1fFqVcmtk/giphy.webp'; > }, 4000); > ``` > > *Countdown* > > *script.js* > > ```js > let seconds = 10; > > const timer = setInterval(function () { > console.log(seconds); > > if (seconds === 0) { > clearInterval(timer); > alert('Happy new year!'); > } > > seconds--; > }, 1000); > ``` ### Task: Your own thing Something fun, creative, boring or useful, with what you know of JavaScript so far. A few ideas to start from: 1. A quiz: three prompts, and the score in an alert at the end. 2. An egg timer: ask for a number of seconds, and ring when they are over. 3. A button that is very hard to leave alone. 4. Or something nobody thought of yet. ### Next up - **15/10** JavaScript & HTML: Today - **22/10** Practice session: HO-A.01.36 - **29/10** DOM: The most important lesson of them all ## Glossary - **External script**: JavaScript in a file of its own, loaded into the page with . The file holds only JavaScript, no script tags. (slide 6) - **Separation of concerns**: One job per file: HTML says what is on the page, CSS how it looks, JavaScript what it does. Every page can load the same files, and a bug gets fixed in one place. (slide 7) - **BOM**: Browser Object Model. Everything the browser hands your script besides the language itself: window, document, location, history, navigator and screen. (slide 16) - **window**: The tab your page lives in, and the global object of JavaScript in a browser. alert, setTimeout, console, document and location all live on it, so you can write them without window. in front. (slide 17) - **alert()**: Opens a browser dialog with a message and an OK button. Gives nothing back. Fine for exercises, never on a real site. (slide 19) - **confirm()**: Opens a browser dialog with a question, an OK and a Cancel button. Gives back true for OK and false for Cancel, so it fits straight into an if. (slide 21) - **Blocking**: Code that makes everything else wait until it is done. alert, prompt and confirm block: no next line runs and the page does not react until the dialog is closed. (slide 23) - **setTimeout**: Runs a function once, after a delay in milliseconds: setTimeout(printWorld, 2000). The script does not wait for it, the lines under it run first. (slide 27) - **setInterval**: Runs a function again and again, with a fixed number of milliseconds in between. It gives back an id, and clearInterval(id) stops it. (slide 30) - **location**: The address bar as an object. location.href is the whole URL, pathname, search and hash are its pieces. Assign a new href and the browser goes there. (slide 33) - **Popup blocker**: The part of the browser that refuses window.open unless it comes straight from a click of the visitor. It does so without an error. (slide 35) - **navigator**: Information about the browser and the device: the user agent, the language, whether there is a connection. (slide 36) - **User agent**: A line of text in which the browser describes itself: browser, version, operating system. Readable through navigator.userAgent, and not to be trusted: an iPad says it is a Mac. (slide 36) - **Viewport**: The part of the browser window your page gets. window.innerWidth and innerHeight give its size in pixels. screen.width and screen.height are about the whole monitor. (slide 38) - **Event**: Something that happens on the page: a click, a key that goes down, the mouse leaving an element, a copy. JavaScript can run code when it does. (slide 40) - **Inline event handler**: An HTML attribute that starts with on and holds JavaScript to run on that event: onclick="sayHello()". Old school. From period 2 on, addEventListener replaces it. (slide 42) - **document.write**: While the page loads it adds to the page. Once the page has loaded it starts a new, empty document, so everything that was there is gone. (slide 45) ## Links and sources ### In the deck - [Window](https://developer.mozilla.org/en-US/docs/Web/API/Window) (slide 16): Everything the tab offers: dialogs, timers, sizes - [document](https://developer.mozilla.org/en-US/docs/Web/API/Document) (slide 16) - [location](https://developer.mozilla.org/en-US/docs/Web/API/Location) (slide 16) - [history](https://developer.mozilla.org/en-US/docs/Web/API/History) (slide 16) - [navigator](https://developer.mozilla.org/en-US/docs/Web/API/Navigator) (slide 16) - [screen](https://developer.mozilla.org/en-US/docs/Web/API/Screen) (slide 16) - [Every event there is, on MDN](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Events) (slide 41) - [microsoft.com](https://www.microsoft.com) (slide 56) - [apple.com](https://www.apple.com) (slide 56) - [this page](https://i.giphy.com/media/PgdWZV8Bb1fFqVcmtk/giphy.webp) (slide 56) - [kdgmt.be/discord](https://kdgmt.be/discord) (slide 59) ### Sources - [