let x = 42;        // number
x = "hello";       // string
x = true;          // boolean
x = {name: "Alice"}; // object
x = [1, 2, 3];     // array

// 函数赋值给变量
const greet = function(name) {
  return `Hello, ${name}!`;
};

// 函数作为参数
const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map(n => n * 2);
console.log(doubled); // [2, 4, 6, 8, 10]

// 函数作为返回值
function multiplier(factor) {
  return function(x) {
    return x * factor;
  };
}
const triple = multiplier(3);
console.log(triple(5)); // 15

// ES5 原型继承
function Animal(name) {
  this.name = name;
}
Animal.prototype.speak = function() {
  console.log(`${this.name} makes a sound`);
};

function Dog(name) {
  Animal.call(this, name);
}
Dog.prototype = Object.create(Animal.prototype);
Dog.prototype.bark = function() {
  console.log(`${this.name} barks`);
};

const dog = new Dog("Buddy");
dog.speak(); // "Buddy makes a sound"
dog.bark();  // "Buddy barks"

// ES6 class 语法（语法糖）
class AnimalES6 {
  constructor(name) {
    this.name = name;
  }
  speak() {
    console.log(`${this.name} makes a sound`);
  }
}

class DogES6 extends AnimalES6 {
  bark() {
    console.log(`${this.name} barks`);
  }
}

// 异步操作
console.log("Start");

setTimeout(() => {
  console.log("Timeout (after 1 second)");
}, 1000);

fetch("https://api.example.com/data")
  .then(response => response.json())
  .then(data => console.log("Data loaded:", data))
  .catch(error => console.error("Error:", error));

console.log("End");

// 输出顺序：Start → End → Timeout → Data loaded

// 浏览器特有的全局对象和API
console.log(window);        // 全局对象
console.log(document);      // DOM
console.log(navigator);     // 浏览器信息
console.log(location);      // 当前URL
console.log(localStorage);  // 本地存储

// Node.js 环境
const fs = require('fs');
const http = require('http');
const path = require('path');

// 读取文件
const content = fs.readFileSync('package.json', 'utf-8');
console.log(content);

// 创建HTTP服务器
const server = http.createServer((req, res) => {
  res.writeHead(200, {'Content-Type': 'text/plain'});
  res.end('Hello, World!\n');
});

server.listen(3000, () => {
  console.log('Server running on port 3000');
});

<!DOCTYPE html>
<html>
<head>
  <title>JS Demo</title>
</head>
<body>
  <h1 id="title">Hello, JavaScript!</h1>
  <button id="btn">Click Me</button>
  <p id="output"></p>
  
  <script>
    // DOM操作
    const title = document.getElementById('title');
    const btn = document.getElementById('btn');
    const output = document.getElementById('output');
    
    let count = 0;
    
    btn.addEventListener('click', () => {
      count++;
      output.textContent = `Clicked ${count} times`;
      title.style.color = `hsl(${count * 30}, 70%, 50%)`;
    });
    
    // 使用现代JavaScript特性
    const fruits = ['apple', 'banana', 'cherry'];
    const upperFruits = fruits.map(f => f.toUpperCase());
    console.log(upperFruits);
    
    // 异步操作
    async function fetchData() {
      try {
        const response = await fetch('https://jsonplaceholder.typicode.com/todos/1');
        const data = await response.json();
        console.log(data);
      } catch (error) {
        console.error('Error:', error);
      }
    }
    
    fetchData();
  </script>
</body>
</html>

// server.js - 简单的HTTP服务器
const http = require('http');
const fs = require('fs');
const path = require('path');

const PORT = process.env.PORT || 3000;

const server = http.createServer(async (req, res) => {
  const url = req.url;
  
  if (url === '/') {
    res.writeHead(200, {'Content-Type': 'text/html'});
    res.end('<h1>Welcome to Node.js!</h1>');
  } else if (url === '/api/data') {
    const data = {
      message: 'Hello from API',
      timestamp: new Date().toISOString(),
      items: [1, 2, 3, 4, 5]
    };
    res.writeHead(200, {'Content-Type': 'application/json'});
    res.end(JSON.stringify(data));
  } else if (url === '/api/files') {
    try {
      const files = await fs.promises.readdir('.');
      res.writeHead(200, {'Content-Type': 'application/json'});
      res.end(JSON.stringify({files}));
    } catch (error) {
      res.writeHead(500, {'Content-Type': 'application/json'});
      res.end(JSON.stringify({error: error.message}));
    }
  } else {
    res.writeHead(404, {'Content-Type': 'text/plain'});
    res.end('Not Found');
  }
});

server.listen(PORT, () => {
  console.log(`Server running at http://localhost:${PORT}`);
});

// 现代JavaScript特性展示

// 1. 解构赋值
const {name, age, address: {city}} = {
  name: "Alice",
  age: 20,
  address: {city: "Beijing", zip: "100000"}
};
console.log(`${name}, ${age}, ${city}`);

// 2. 展开运算符
const arr1 = [1, 2, 3];
const arr2 = [...arr1, 4, 5];
const obj1 = {a: 1, b: 2};
const obj2 = {...obj1, c: 3};

// 3. 可选链和空值合并
const user = {profile: {name: "Bob"}};
console.log(user?.profile?.name ?? "Anonymous");
console.log(user?.contact?.phone ?? "No phone");

// 4. Promise和async/await
async function processItems(items) {
  const results = await Promise.allSettled(
    items.map(item => 
      new Promise((resolve, reject) => {
        setTimeout(() => {
          if (item > 0) resolve(item * 2);
          else reject(new Error("Negative number"));
        }, 100);
      })
    )
  );
  
  return results.map(r => 
    r.status === 'fulfilled' ? r.value : r.reason.message
  );
}

processItems([1, -2, 3, -4, 5]).then(console.log);

// 5. Map和Set
const cache = new Map();
cache.set('key1', 'value1');
cache.set('key2', 'value2');

const uniqueItems = new Set([1, 2, 2, 3, 3, 3]);
console.log([...uniqueItems]); // [1, 2, 3]