---
tags: [javascript, fundamentals, dom]
session: 2
duration: 2 hours
status: ready
---
# Session 2 — JavaScript Crash Bootcamp
## 🎯 Objectives
- Write and understand modern JavaScript
- Manipulate the DOM
- Use Node.js modules with `require`
- Install and use an npm package
---
## 🧠 Concepts Covered
### Variables & Functions
```js
// Prefer const and let over var
const name = "Alice"
let count = 0
// Arrow function
const greet = (name) => {
return `Hello, ${name}!`
}
// Short form
const double = (n) => n * 2
```
### DOM Manipulation
```js
// Select an element
const btn = document.getElementById('myButton')
const title = document.querySelector('h1')
// Change content
title.textContent = "New Title"
title.style.color = "blue"
// Listen for events
btn.addEventListener('click', () => {
console.log('Button clicked!')
})
```
### Node.js Modules
```js
// Built-in Node module
const path = require('path')
const fs = require('fs')
// Read a file
const content = fs.readFileSync('notes.txt', 'utf-8')
console.log(content)
```
### npm Packages
```bash
npm install moment # installs a package
```
```js
const moment = require('moment')
console.log(moment().format('MMMM Do YYYY'))
```
### Async Basics
```js
// Things that take time use callbacks or async/await
setTimeout(() => {
console.log("This runs after 2 seconds")
}, 2000)
```
---
## 🖥 Talking Points
1. Show the browser DevTools console — students can try JS right there
2. Demo DOM changes live in the browser
3. Show `require` in Node.js vs `import` (keep it simple, use require)
4. Explain why `const` is preferred
---
## 🛠 Hands-on Exercise (50 min)
**Build a click counter app, then load it in Electron**
Part 1 — Build in browser first:
```html
Click Counter
0
```
Part 2 — Load it in Electron:
- Drop this `index.html` into their Electron project from Session 1
- Run `npm start` — it's now a desktop app!
**Challenges:**
- Add a reset button
- Show a congratulations message at 20 clicks
- Change the background color based on click count
---
## 📦 Resources
- [MDN JavaScript Guide](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide)
- [[Session 1 - How Electron Works]] ← previous
- [[Session 3 - Windows Menus & Native Features]] ← next
-