30天JavaScript挑战 - 从零基础到精通的完整学习指南

原创

qife122

发布于 2025-10-03 23:28:53

6100

代码可运行

文章被收录于专栏：网络安全技术点滴分享网络安全技术点滴分享

运行总次数：0

代码可运行

30天JavaScript挑战

项目描述

30天JavaScript挑战是一个全面的JavaScript学习项目，旨在通过30天的系统学习帮助开发者从基础到精通掌握JavaScript编程语言。项目包含丰富的代码示例、实践练习和详细的概念解释，覆盖数据类型、函数、对象、数组、DOM操作、异步编程等核心主题。

功能特性

完整的课程体系：30天渐进式学习路径，每天一个主题
丰富的代码示例：每个概念都配有实际可运行的代码示例
互动式学习：包含DOM操作和用户交互的实践项目
现代JavaScript特性：涵盖ES6+的新特性如箭头函数、模板字符串、解构等
实战项目：通过实际项目巩固学习成果
多主题覆盖：包括数据类型、函数、面向对象、异步编程等

安装指南

该项目基于纯JavaScript和HTML，无需复杂的安装过程：

克隆或下载项目文件到本地
使用任何现代浏览器打开HTML文件
确保浏览器支持ES6+特性
打开开发者工具控制台查看输出结果

系统要求：

现代Web浏览器（Chrome、Firefox、Safari、Edge等）
文本编辑器（VS Code、Sublime Text等）

使用说明

基础使用示例

项目包含多个HTML文件，每个文件对应不同的学习主题：

<!DOCTYPE html>
<html lang="en">
<head>
    <title>30DaysOfJavaScript:03 Day</title>
</head>
<body>
    <h1>30DaysOfJavaScript:03 Day</h1>
    <h2>Booleans, undefined, null, date object</h2>
    <script src="./scripts/main.js"></script>
</body>
</html>

JavaScript基础语法示例

// 变量声明和数据类型
let firstName = 'Asabeneh'
let lastName = 'Yetayeh'
let country = 'Finland'
let age = 100
let isMarried = true

// 常量声明
const gravity = 9.81
const PI = 3.14

// 函数定义和使用
function showDateTime() {
    const now = new Date()
    const year = now.getFullYear()
    const month = now.getMonth() + 1
    const date = now.getDate()
    return `${year}-${month}-${date}`
}

DOM操作示例

// 动态更新页面内容
const wrapper = document.querySelector('.wrapper')
const year = document.querySelector('span')
const time = document.querySelector('p')

setInterval(() => {
    year.style.color = hexaColor()
    time.textContent = showDateTime()
    time.style.background = hexaColor()
}, 1000)

// 生成随机颜色
const hexaColor = () => {
    const str = '0123456789abcdef'
    let hexa = '#'
    for (let i = 0; i < 6; i++) {
        let index = Math.floor(Math.random() * str.length)
        hexa += str[index]
    }
    return hexa
}

核心代码

随机颜色生成器

/**
 * 生成随机十六进制颜色代码
 * @returns {string} 十六进制颜色代码
 */
const hexaColor = () => {
    const str = '0123456789abcdef' // 十六进制字符
    let hexa = '#' // 颜色代码以#开头
    let index
    for (let i = 0; i < 6; i++) {
        index = Math.floor(Math.random() * str.length) // 随机索引
        hexa += str[index] // 拼接字符
    }
    return hexa // 返回完整的颜色代码
}

日期时间格式化函数

/**
 * 格式化当前日期时间为可读字符串
 * @returns {string} 格式化后的日期时间字符串
 */
const showDateTime = () => {
    const months = ['January', 'February', 'March', 'April', 'May', 'June', 
                   'July', 'August', 'September', 'October', 'November', 'December']
    const now = new Date() // 创建日期对象
    const year = now.getFullYear() // 获取年份
    const month = months[now.getMonth()] // 获取月份名称
    const date = now.getDate() // 获取日期
    
    // 格式化时间部分，确保两位数显示
    let hours = now.getHours()
    let minutes = now.getMinutes()
    let seconds = now.getSeconds()
    
    if (hours < 10) hours = '0' + hours
    if (minutes < 10) minutes = '0' + minutes
    if (seconds < 10) seconds = '0' + seconds

    const dateMonthYear = `${month} ${date}, ${year}`
    const time = hours + ':' + minutes
    const fullTime = dateMonthYear + ' ' + time
    
    return fullTime + `:${seconds}` // 返回完整格式
}

类定义和继承示例

/**
 * Person类 - 人员基础类
 */
class Person {
    constructor(firstName, lastName, age, country, city) {
        this.firstName = firstName
        this.lastName = lastName
        this.age = age
        this.country = country
        this.city = city
        this.score = 0
        this.skills = []
    }
    
    /**
     * 获取完整姓名
     * @returns {string} 完整姓名
     */
    getFullName() {
        return this.firstName + ' ' + this.lastName
    }
    
    /**
     * 获取人员信息
     * @returns {string} 格式化的人员信息
     */
    getPersonInfo() {
        let fullName = this.getFullName()
        let skills = this.skills.length > 0 ? 
            this.skills.slice(0, -1).join(', ') + ` and ${this.skills[this.skills.length - 1]}` : ''
        
        let formattedSkills = skills ? `He knows ${skills}` : ''
        let info = `${fullName} is ${this.age}. He lives ${this.city}, ${this.country}. ${formattedSkills}`
        
        return info
    }
    
    /**
     * 静态方法 - 随机返回一个技能
     * @returns {string} 随机技能
     */
    static favoriteSkill() {
        const skills = ['HTML', 'CSS', 'JS', 'React', 'Python', 'Node']
        const index = Math.floor(Math.random() * skills.length)
        return skills[index]
    }
}

/**
 * Student类 - 继承自Person类
 */
class Student extends Person {
    constructor(firstName, lastName, age, country, city, gender) {
        super(firstName, lastName, age, country, city) // 调用父类构造函数
        this.gender = gender
    }
    
    /**
     * 学生特定方法
     */
    saySomething() {
        console.log('I am a child of the person class')
    }
    
    /**
     * 重写父类方法
     * @returns {string} 格式化的学生信息
     */
    getPersonInfo() {
        let fullName = this.getFullName()
        let skills = this.skills.length > 0 ? 
            this.skills.slice(0, -1).join(', ') + ` and ${this.skills[this.skills.length - 1]}` : ''
        
        let formattedSkills = skills ? `He knows ${skills}` : ''
        let pronoun = this.gender == 'Male' ? 'He' : 'She'
        let info = `${fullName} is ${this.age}. ${pronoun} lives in ${this.city}, ${this.country}. ${formattedSkills}`
        
        return info
    }
}

字符串操作方法示例

/**
 * 字符串操作工具函数集合
 */
const string = '30 Days Of JavaScript'

// 检查字符串是否以指定子串结尾
console.log(string.endsWith('world')) // false
console.log(string.endsWith('JavaScript')) // true

// 检查字符串是否包含指定子串
console.log(string.includes('Days')) // true
console.log(string.includes('days')) // false

// 查找子串位置
console.log(string.indexOf('JavaScript')) // 11
console.log(string.indexOf('script')) // -1

// 字符串分割为数组
console.log(string.split(' ')) // ["30", "Days", "Of", "JavaScript"]

// 模板字符串使用
let personInfoTwo = `I am ${fullName}. I am ${age}. I live in ${country}.`
console.log(personInfoTwo)

这个项目通过系统化的课程设计和丰富的实践示例，为JavaScript学习者提供了完整的学习路径，从基础语法到高级概念都有详细覆盖，是学习现代JavaScript开发的优秀资源。

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

计算机