Checkpoint: JavaScript 交互

你将完成什么

给个人主页加交互：导航栏滚动高亮、技能列表动态渲染、项目筛选、表单验证。

验收标准

1. 用 addEventListener 绑定事件
2. 用 querySelector 操作 DOM
3. 用数组方法（map、filter）渲染列表
4. 表单提交前验证

核心代码

导航高亮

const sections = document.querySelectorAll('section');
const navLinks = document.querySelectorAll('nav a');

window.addEventListener('scroll', () => {
    let current = '';
    sections.forEach(section => {
        const sectionTop = section.offsetTop;
        if (scrollY >= sectionTop - 60) {
            current = section.getAttribute('id');
        }
    });

    navLinks.forEach(link => {
        link.classList.remove('active');
        if (link.getAttribute('href') === `#${current}`) {
            link.classList.add('active');
        }
    });
});

技能动态渲染

const skills = ['HTML', 'CSS', 'JavaScript', 'React', 'Node.js'];
const skillsList = document.querySelector('#skills ul');

skills.forEach(skill => {
    const li = document.createElement('li');
    li.textContent = skill;
    skillsList.appendChild(li);
});

项目筛选

const projects = [
    { id: 1, title: '学习平台', category: 'frontend' },
    { id: 2, title: 'API 服务', category: 'backend' },
    { id: 3, title: '全栈应用', category: 'fullstack' },
];

function renderProjects(category = 'all') {
    const filtered = category === 'all'
        ? projects
        : projects.filter(p => p.category === category);

    const container = document.querySelector('#projects');
    container.innerHTML = filtered.map(p => `
        <article>
            <h3>${p.title}</h3>
        </article>
    `).join('');
}

// 筛选按钮
document.querySelectorAll('.filter-btn').forEach(btn => {
    btn.addEventListener('click', () => {
        renderProjects(btn.dataset.category);
    });
});

表单验证

const form = document.querySelector('#contact-form');

form.addEventListener('submit', (e) => {
    e.preventDefault();

    const email = form.email.value;
    if (!email.includes('@')) {
        alert('邮箱格式错误');
        return;
    }

    console.log('提交成功:', email);
});

常见卡点