当前位置: 首页 > news >正文

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

30天JavaScript挑战

项目描述

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

功能特性

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

安装指南

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

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

系统要求

  • 现代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智能小助手)
对网络安全、黑客技术感兴趣的朋友可以关注我的安全公众号(网络安全技术点滴分享)

公众号二维码

公众号二维码

http://www.hskmm.com/?act=detail&tid=23732

相关文章:

  • 题解:AT_agc057_c [AGC057C] Increment or Xor
  • 占个位置
  • 使用 Copilot AI + Blazor 编一个五子棋游戏
  • 关于VMware虚拟机如何下载-2025.10.3
  • 国庆集训做题10.1 - 10.3
  • 玳瑁的嵌入式日记---0928(ARM--UART) - 指南
  • 解决Visual Studio中无法使用scanf和C++万能头的问题
  • 英文笔记
  • 解码红黑树
  • 10/3
  • Advanced Computer Graphics
  • Netflix确保数亿用户观影体验的“事件”管理是如何构建与实践的?
  • 为什么词嵌入可以和位置编码相加
  • 【比赛记录】2025CSP-S模拟赛57
  • 实用指南:软件设计师——04 操作系统
  • 20251001国庆模拟
  • 线段树合并 [POI 2011] ROT-Tree Rotations
  • CSS的选择器 - 指南
  • C# Net9的模块初始化器(Module Initializer)
  • 离线轻量大模型,Ollama部署到docker方法
  • 应用拓扑讲义整理 Chapter 6. 单纯复形(Simplicial Complexes)
  • 完整教程:华为麒麟9010、9020、9030、9040系列芯片的性能参数及其与高通芯片的对比
  • AQS(ReentrantLock)源码浅析
  • 05. 事件处理
  • 总结问题2 软工10.3
  • BPL包无法调试的问题
  • 信息科学与数据分析:真正的区别是什么?
  • 最短路练习
  • 杂题,为什么博客的标题必须互异
  • 学习笔记:压位高精