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() + 1const 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 indexfor (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' + hoursif (minutes < 10) minutes = '0' + minutesif (seconds < 10) seconds = '0' + secondsconst dateMonthYear = `${month} ${date}, ${year}`const time = hours + ':' + minutesconst fullTime = dateMonthYear + ' ' + timereturn fullTime + `:${seconds}` // 返回完整格式
}
类定义和继承示例
/*** Person类 - 人员基础类*/
class Person {constructor(firstName, lastName, age, country, city) {this.firstName = firstNamethis.lastName = lastNamethis.age = agethis.country = countrythis.city = citythis.score = 0this.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开发的优秀资源。
更多精彩内容 请关注我的个人公众号 公众号（办公AI智能小助手）
对网络安全、黑客技术感兴趣的朋友可以关注我的安全公众号（网络安全技术点滴分享）
公众号二维码
公众号二维码
