JavaScript 简介

// 在浏览器控制台运行
console.log('Hello, JavaScript!')

// 操作网页元素
document.body.style.backgroundColor = '#f0f0f0'

// 响应用户操作
document.addEventListener('click', () => {
  alert('你点击了页面！')
})

// JavaScript 和 Java 的对比

// JavaScript：动态类型
let value = 42
value = 'hello' // 完全合法
value = { name: '对象' } // 也没问题

// Java 是静态类型语言，变量类型声明后不能改变
// int value = 42;
// value = "hello";  // 编译错误

let data = 100 // 数字
console.log(typeof data) // "number"

data = '一百' // 字符串
console.log(typeof data) // "string"

data = [1, 2, 3] // 数组
console.log(typeof data) // "object"

data = function () {} // 函数
console.log(typeof data) // "function"

// 创建一个原型对象
const animal = {
  speak() {
    console.log(`${this.name} 发出声音`)
  },
}

// 基于原型创建新对象
const dog = Object.create(animal)
dog.name = '小黑'
dog.speak() // "小黑 发出声音"

// 查看原型链
console.log(Object.getPrototypeOf(dog) === animal) // true

// 函数赋值给变量
const greet = function (name) {
  return `你好，${name}！`
}

// 函数作为参数传递
const names = ['张三', '李四', '王五']
const greetings = names.map(greet)
console.log(greetings)
// ["你好，张三！", "你好，李四！", "你好，王五！"]

// 函数返回函数
function createMultiplier(factor) {
  return function (number) {
    return number * factor
  }
}

const double = createMultiplier(2)
const triple = createMultiplier(3)
console.log(double(5)) // 10
console.log(triple(5)) // 15

console.log('1. 开始')

setTimeout(() => {
  console.log('2. 定时器回调')
}, 0)

Promise.resolve().then(() => {
  console.log('3. Promise 回调')
})

console.log('4. 结束')

// 输出顺序：
// 1. 开始
// 4. 结束
// 3. Promise 回调
// 2. 定时器回调

// DOM 操作
const button = document.createElement('button')
button.textContent = '点我'
button.onclick = () => console.log('按钮被点击')
document.body.appendChild(button)

// BOM 操作
console.log(window.innerWidth) // 窗口宽度
console.log(navigator.userAgent) // 浏览器信息
console.log(location.href) // 当前 URL

// Web API
fetch('https://api.example.com/data')
  .then((response) => response.json())
  .then((data) => console.log(data))

// Node.js 文件操作
// 需要在 Node.js 环境运行（node script.js）
const fs = require('fs')

// 读取文件
fs.readFile('./package.json', 'utf8', (err, data) => {
  if (err) throw err
  console.log(JSON.parse(data).name)
})

// 创建 HTTP 服务器
const http = require('http')

const server = http.createServer((req, res) => {
  res.writeHead(200, { 'Content-Type': 'text/plain' })
  res.end('Hello from Node.js!')
})

server.listen(3000, () => {
  console.log('服务器运行在 http://localhost:3000')
})

// React 组件示例
function Counter() {
  const [count, setCount] = React.useState(0)

  return (
    <div>
      <p>点击次数：{count}</p>
      <button onClick={() => setCount(count + 1)}>增加</button>
    </div>
  )
}

// Express.js 示例
const express = require('express')
const app = express()

app.get('/api/users', (req, res) => {
  res.json([
    { id: 1, name: '张三' },
    { id: 2, name: '李四' },
  ])
})

app.listen(3000)

// 前后端共享类型定义（TypeScript）
interface User {
  id: number
  name: string
  email: string
}

// 后端 API
app.get('/api/user/:id', async (req, res) => {
  const user: User = await db.findUser(req.params.id)
  res.json(user)
})

// 前端调用
const response = await fetch('/api/user/1')
const user: User = await response.json()

// React Native - 移动应用
import { View, Text, Button } from 'react-native'

function App() {
  return (
    <View>
      <Text>我的第一个移动应用</Text>
      <Button title="点击" onPress={() => alert('Hello!')} />
    </View>
  )
}

// Electron - 桌面应用
const { app, BrowserWindow } = require('electron')

app.whenReady().then(() => {
  const win = new BrowserWindow({ width: 800, height: 600 })
  win.loadFile('index.html')
})

// ES5 写法
var self = this
arr.forEach(function (item) {
  console.log(self.prefix + item)
})

// ES6+ 写法
arr.forEach((item) => {
  console.log(this.prefix + item)
})

// Console 面板常用操作
console.log('普通日志')
console.warn('警告信息')
console.error('错误信息')
console.table([
  { name: '张三', age: 25 },
  { name: '李四', age: 30 },
])
console.time('操作耗时')
// ... 一些操作
console.timeEnd('操作耗时')

JavaScript 基础
    ↓
ES6+ 新特性
    ↓
DOM 操作与事件
    ↓
异步编程（Promise、async/await）
    ↓
前端框架（React/Vue）
    ↓
Node.js 与全栈开发