# Webcoding What JavaScript is, what it can do, and why the web would be a very quiet place without it. Multimedia & Creative Technology · 2.1 Webcoding · Lesson 1 · Intro · version 1.0.3 · 2026-10-14 Tags: javascript Slides: Speaker notes: ## Agenda 1. I am Sam I am: Who is standing in front of you 2. How this course works: Discord, planning, evaluation 3. JavaScript: Where it comes from and where it runs 4. Interactivity: Pages that react 5. Animation: Pages that move 6. Applications: Pages that are not pages anymore 7. Your turn: Find the JavaScript ## 1. I am Sam I am *Creative Technologist. Lecturer at KdG for more than ten years, and still building things on the side.* ### Who am I - **Past**: 20+ years in the industry. CTO at These Days, Wunderman, Y&R and LDV United. Operations manager at Userfull. IT at Koopjeskrant. - **Present**: owner of GeNx, Pixel Agency, Foto-booth, Ledpower, Skylta and Hyperchicken. - **Also**: co-founder of Sclera vzw, chairman at Gymplus vzw. - **Here**: lecturer at KdG (10+ years) and coordinator Web & Mobile in the Dutch programme. **Creative Technologist?** Someone who uses technology as a creative material. Half developer, half maker, and usually the person in the room who says: we can build that. [Video](https://www.youtube.com/watch?v=yCqyzOD1-ts) [Video](https://static.mctantwerp.be/slides/en/webcoding/01-intro-javascript/car-show.mp4) [Video](https://static.mctantwerp.be/slides/en/webcoding/01-intro-javascript/kitten-blocks.mp4) [Video](https://static.mctantwerp.be/slides/en/webcoding/01-intro-javascript/blue-monday.mp4) [Video](https://www.youtube.com/watch?v=Im7yn7Qcu2U) [Video](https://static.mctantwerp.be/slides/en/webcoding/01-intro-javascript/mediamarkt.mp4) ## 2. How this course works *Where to find me, what happens when, and how you get your grade.* ### Discord *Let's not lose time with boring emails* - Not only for one on one questions. Help each other, teamwork counts. - Am I not here? Am I late? Check Discord. - Every class has its own channel. - Stuck? Ask in the #help-needed forum. A screenshot of your error beats "it does not work". - **[kdgmt.be/discord](https://kdgmt.be/discord)** or scan the QR code. ![QR code for the Discord server](https://slides.mctantwerp.be/decks/en/webcoding/01-intro-javascript/discord-qr.png) *[kdgmt.be/discord](https://kdgmt.be/discord)* ### Planning, period 1 *Thursdays from 13:30 to 15:30 in HO-A.01.36. Subject to change, we go faster or slower depending on how smoothly things go.* - **23/09** Welcome to JavaScript: Today, 10:45 - **01/10** Hello World - **08/10** Programming in JS - **15/10** JavaScript & HTML - **22/10** Practice session: HO-A.01.36 - **29/10** DOM ### Planning, period 2 *Mondays from 13:30 to 17:30 in HO-A.01.39. Longer sessions, so more time to build.* - **16/11** DOM - **23/11** Forms - **30/11** JavaScript libraries - **07/12** jQuery - **14/12** JavaScript & AI - **04/01** Open lesson: Practice and questions - **P2** Exam > [!NOTE] > Period 1 is 2 hours per week, period 2 is 4 hours. Different day, different room. Check your schedule. ### Evaluation *Laptop exam in period 2, open book* - **01 Programming in JavaScript**: Exercises where you write the logic yourself. Variables, loops, functions, the things we cover in period 1. - **02 Integrating in JavaScript**: You get existing HTML and existing scripts. Make them work together. This is what most of the job looks like. > [!WARNING] > **Open book, but** > > Google, docs and your own notes are fine. Public AI (ChatGPT, Copilot and friends) is not. You get access to GPTutor, a KdG trained assistant, instead. ## 3. JavaScript *Born in 1995, written in ten days, and now running on more devices than any other language.* ### A short history 1. **1995**: Brendan Eich writes the first version at Netscape. In ten days. It shows, and we still live with some of those decisions. 2. **Mocha, LiveScript, JavaScript**: Three names in one year. The last one was a marketing move: Java was hot, so the name borrowed the hype. 3. **1997: ECMAScript**: The language gets a standard so every browser can implement the same thing. Roughly. 4. **Today**: Every browser, most servers, phones, desktop apps, even fridges. Nobody planned that. > [!TIP] > Java is to JavaScript what car is to carpet. Two unrelated languages that happen to share half a name. ### Most demanded language, year after year ![Bar chart of the most demanded programming languages in job listings for 2024, JavaScript and TypeScript on top](https://slides.mctantwerp.be/decks/en/webcoding/01-intro-javascript/most-demanded-2024.png) *Job listings between January 2023 and September 2024. Source: [devjobsscanner.com](https://www.devjobsscanner.com/)* ### And again in 2025 ![Bar chart of the most demanded programming languages in job listings for 2025, JavaScript and TypeScript still on top](https://slides.mctantwerp.be/decks/en/webcoding/01-intro-javascript/most-demanded-2025.png) *Job listings in 2025. Source: [devjobsscanner.com](https://www.devjobsscanner.com/)* ### Three layers *Every web page is made of the same three things* - **HTML**: **Structure.** Headings, paragraphs, images, links. What is on the page. - **CSS**: **Looks.** Colours, fonts, layout, animation. How it is presented. - **JavaScript**: **Behaviour.** What happens when you click, scroll, type or wait. This course. ![Layer cake with HTML, CSS and JavaScript as layers](https://slides.mctantwerp.be/decks/en/webcoding/01-intro-javascript/layer-cake.png) ### What is JavaScript - A programming language that runs in your browser (and on the command line). - The only language browsers understand. No alternative, no choice. - Necessary for **rich** websites: interactivity, form validation, animation, loading data without a reload. - Easy to start with. Open the browser console and type. Hard to master, like every language. ![HTML5, CSS3 and JS badges](https://slides.mctantwerp.be/decks/en/webcoding/01-intro-javascript/html-css-js.png) ### Client side ![Diagram of a client sending a request to a server and receiving a response](https://slides.mctantwerp.be/decks/en/webcoding/01-intro-javascript/client-server.jpg) *JavaScript runs on the user's machine, in the browser, not on the server. Everything you see today happens after the page arrived.* **These slides are JavaScript.** This deck is a React app. Every slide, every animation, the timer on the task slide and the quiz further on: JavaScript, running in the browser you are looking at. ## 4. Interactivity *A page that reacts to what you do, without going back to the server for every click.* ### Real time *Clicks, toggles and a clock that keeps ticking.* ### Form validation *The most common piece of JavaScript on the planet* ### You use this every day - **Google Docs**: Three people typing in the same document and seeing each other's cursors. No save button. - **Wordle**: Six guesses, coloured tiles, a share button. A few hundred lines of JavaScript that half the planet played. - **Google Maps**: Drag, zoom, tiles that load while you move. This one page changed what people expected from the web in 2005. ## 5. Animation *Movement, 3D, sound and games. All in a browser tab.* [Video](https://vimeo.com/548129106) ### Animations *Ricardo Cabello, the creator of three.js. His homepage is a pile of WebGL experiments.* - [mrdoob.com](https://mrdoob.com/): Everything here runs in the browser, most of it written years ago. [Video](https://vimeo.com/548130047) ### Experiences - [afterpay.hatch.chick.li/nl](https://afterpay.hatch.chick.li/nl/) - [elonstoilet.hatch.chick.li](https://elonstoilet.hatch.chick.li/) - [onderweg.kdg.be/#](https://onderweg.kdg.be/#/) - [lunarstrike.net](https://lunarstrike.net) [Video](https://vimeo.com/471987017) [Video](https://vimeo.com/471987123) ### Games *No install, no app store. A URL is enough.* - [SpaceX ISS docking simulator](https://iss-sim.spacex.com/): Dock a Crew Dragon with the ISS. The same interface the astronauts train on, in a browser tab. - [opelmanta.hatch.chick.li](https://opelmanta.hatch.chick.li/) - [genx.tools](https://genx.tools) ### Just for fun *Built because somebody felt like it.* - [page-rage.com](https://page-rage.com/) - [hyperchicken.be](https://hyperchicken.be) - [genx.be](https://genx.be) ### Go look at these - [Bruno Simon](https://bruno-simon.com/): A portfolio you drive through in a toy car. Three.js and a lot of patience. - [three.js examples](https://threejs.org/examples/): Hundreds of small 3D demos, source included. Steal from here. - [Awwwards](https://www.awwwards.com/): Daily award for the best site on the web. Most winners lean heavily on JavaScript. - [CodePen](https://codepen.io/): Small experiments, live editable. Search for anything and watch someone build it in 50 lines. - [Google Experiments](https://experiments.withgoogle.com/): Chrome experiments, AI experiments, music. Playground from Google's creative labs. - [Lusion](https://lusion.co/): Studio site that is basically a demo of what WebGL can do. Turn your fan on first. ## 6. Applications *At some point people stopped building web pages and started building software in the browser.* **VS Code is a website.** The editor you will use in this course is a web app in a desktop wrapper (Electron). So are Discord, Slack, Figma, Notion, Spotify and 1Password. [Video](https://vimeo.com/309668956) [Video](https://www.youtube.com/watch?v=fL_Vkf7XU-k) ### Website apps *Things you thought were programs* - **Figma**: Design tool in a tab. Multiplayer, and faster than the desktop tools it replaced. - **Google Docs**: Word, Excel and PowerPoint in the browser, with ten people at once. - **Discord**: Electron app. Open the developer tools inside it and you will find HTML. - **Photopea**: Photoshop clone in a browser tab. Opens PSD files. Built by one developer. - **Spotify**: The desktop app is a web app. The web player is the same code. - **Slides.com**: The old version of this deck ran on it. Also JavaScript. ### Beyond the browser *The same language, other places* - **01 Servers**: **Node.js.** Netflix, PayPal and LinkedIn run JavaScript on the server. - **02 Phones**: **React Native.** Instagram, Discord and Shopify ship native apps written in JavaScript. - **03 Desktop**: **Electron.** VS Code, Slack, Figma. Chrome in a box with your code inside. - **04 Hardware**: **Johnny-Five, Espruino.** Arduino boards, LEDs and sensors, controlled from JavaScript. > Any application that can be written in JavaScript, will eventually be written in JavaScript. > > Jeff Atwood, *co-founder of Stack Overflow, 2007* ## 7. JavaScript and AI *Everybody expects AI to make programming languages matter less. For JavaScript the opposite happened.* ### Why models are good at JavaScript - A model writes what it has read a lot of. Public code is the training material. - JavaScript and TypeScript are the biggest languages on GitHub, with **Python** right behind. Those two are also what models write best. - Write Elixir or Rust with a model and you feel the difference right away. Fewer examples, more nonsense. - So the language you are learning is the one the tools are strongest in. That is luck, not planning. ### Ask for a chart *A model cannot draw. It writes code that draws.* ### What AI hands back *Ask for something you can look at and you get a web page* - **Artifacts and canvas**: Claude and ChatGPT render their interactive answers as HTML and React. The chat window is a browser, so the answer has to be something a browser can run. - **v0, Lovable, Bolt**: Describe an app, get a working one. What lands in your repository is a React project. You are the one who has to maintain it. > [!NOTE] > Even a dashboard someone "made with AI" is a folder full of JavaScript. Somebody still has to open it. **AI writes it. You read it.** Two seconds for 200 lines you did not write. If you cannot read them, you cannot judge whether it works, and you are stuck the moment it breaks. ### Where does JavaScript run? - A. Only in the browser - B. Only on servers - C. In browsers, on servers, on phones and in desktop apps - D. Only inside VS Code **Answer:** C. In browsers, on servers, on phones and in desktop apps It started in the browser, and that is where we start too. But the same language now runs pretty much everywhere. ### Java and JavaScript are - A. The same language - B. JavaScript is the light version of Java - C. Two unrelated languages that share half a name - D. Both made by Google **Answer:** C. Two unrelated languages that share half a name Netscape borrowed the name in 1995 because Java was the hype. The languages have almost nothing in common. Car and carpet. ### Task: Find the JavaScript *15 minutes, In pairs* Pick a site or web app that impressed you. Figure out what JavaScript does there. Then post it in your class channel on Discord. 1. Pick one site or app. Not one from these slides. 2. List two things on it that only work because of JavaScript. 3. Post the link and your two things in Discord. 4. We look at a few of them together. ### Next time *Hello World, on 1 October. Bring your laptop.* - Install Visual Studio Code ([code.visualstudio.com](https://code.visualstudio.com/)). - Install Google Chrome, if you do not have it yet. We use its developer tools all the time. - Join the Discord if you have not done so today. - Optional: open the console in Chrome (F12) and type 1 + 1. That is your first line of JavaScript. ## Glossary - **JavaScript**: The programming language of the browser, and the only one browsers understand. It is the behaviour of a page: what happens when you click, scroll, type or wait. Not related to Java. (slide 22) - **ECMAScript**: The standard behind JavaScript, since 1997, so every browser implements the same language. Roughly. (slide 18) - **HTML**: The structure of a web page: headings, paragraphs, images, links. What is on the page. (slide 21) - **CSS**: The looks of a web page: colours, fonts, layout, animation. How the HTML is presented. (slide 21) - **Client side**: Code that runs on the user's machine, in the browser, not on the server. JavaScript in a web page is client side: it takes over once the page has arrived. (slide 23) - **Electron**: Chrome in a box with your code inside. Desktop apps built as web apps: VS Code, Slack, Discord and Figma run on it. (slide 44) - **React Native**: Native phone apps written in JavaScript. Instagram, Discord and Shopify use it. (slide 44) ## Links and sources ### In the deck - [kdgmt.be/discord](https://kdgmt.be/discord) (slide 13, slide 55) - [devjobsscanner.com](https://www.devjobsscanner.com/) (slide 19, slide 20) - [mrdoob.com](https://mrdoob.com/) (slide 31) - [afterpay.hatch.chick.li](https://afterpay.hatch.chick.li/nl/) (slide 33) - [elonstoilet.hatch.chick.li](https://elonstoilet.hatch.chick.li/) (slide 33) - [onderweg.kdg.be](https://onderweg.kdg.be/#/) (slide 33) - [lunarstrike.net](https://lunarstrike.net) (slide 33) - [SpaceX ISS docking simulator](https://iss-sim.spacex.com/) (slide 36) - [opelmanta.hatch.chick.li](https://opelmanta.hatch.chick.li/) (slide 36) - [genx.tools](https://genx.tools) (slide 36) - [page-rage.com](https://page-rage.com/) (slide 37) - [hyperchicken.be](https://hyperchicken.be) (slide 37) - [genx.be](https://genx.be) (slide 37) - [Bruno Simon](https://bruno-simon.com/) (slide 38) - [three.js examples](https://threejs.org/examples/) (slide 38) - [Awwwards](https://www.awwwards.com/) (slide 38) - [CodePen](https://codepen.io/) (slide 38) - [Google Experiments](https://experiments.withgoogle.com/) (slide 38) - [Lusion](https://lusion.co/) (slide 38) - [code.visualstudio.com](https://code.visualstudio.com/) (slide 54)