Web前端基础
2021-01-30 13:21:46 1 举报AI智能生成
Web前端学习路线，前端基础梳理
作者其他创作
大纲/内容
第二部分 核心技术
09 DOM基础
9.1 核心技术简介
9.2 DOM是什么？
9.2.1 DOM对象
9.2.2 DOM结构
9.3 节点类型
9.4 获取元素
9.4.1 getElementById()
9.4.2 getElementsByTagName
9.4.3 getElementsByClassName()
9.4.4 querySelector()和querySelectorAll()
9.4.5 getElementsByName()
9.4.6 document.title和document.body
9.5 创建元素
9.6 插入元素
9.6.1 appendChild()
9.6.2 insertBefore()
9.7 删除元素
9.8 复制元素
9.9 替换元素
10 DOM进阶
10.1 HTML属性操作（对象属性）
10.1.1 获取HTML属性值
10.1.2 设置HTML属性值
10.2 HTML属性操作（对象方法）
10.2.1 getAttribute()
10.2.2 setAttribute()
10.2.3 removeAttribute()
10.2.4 hasAttribute()
10.3 CSS属性操作
10.3.1 获取CSS属性值
10.3.2 设置CSS属性值
10.3.3 最后一个问题
10.4 DOM遍历
10.4.1 查找父元素
10.4.2 查找子元素
10.4.3 查找兄弟元素
10.5 innerHTML和innerText
11 事件基础
11.1 事件是什么？
11.2 事件调用方式
11.2.1 在script标签中调用
11.2.2 在元素中调用事件
11.3 鼠标事件
11.3.1 鼠标单击
11.3.2 鼠标移入和鼠标移出
11.3.3 鼠标按下和鼠标松开
11.4 键盘事件
11.5 表单事件
11.5.1 onfocus和onblur
11.5.2 onselect
11.5.3 onchange
11.6 编辑事件
11.6.1 oncopy
11.6.2 onselectstart
11.6.3 oncontextmenu
11.7 页面事件
11.7.1 onload
11.7.2 onbeforeunload
12 事件进阶
12.1 事件监听器
12.1.1 事件处理器
12.1.2 事件监听器
12.2 event对象
12.2.1 type
12.2.2 keyCode
12.3 this
13 window对象
13.1 window对象简介
13.2 窗口操作
13.2.1 打开窗口
13.2.2 关闭窗口
13.3 对话框
13.3.1 alert()
13.3.2 confirm()
13.3.3 prompt()
13.4 定时器
13.4.1 setTimeout()和clearTimeout()
13.4.2 setInterval()和clearInterval()
13.5 location对象
13.5.1 window.location.href
13.5.2 window.location.search
13.5.3 window.location.hash
13.6 navigator对象
14 document对象
14.1 document对象简介
14.2 document对象属性
14.2.1 document.URL
14.2.2 document.referrer
14.3 document对象方法
14.3.1 document.write()
14.3.2 document.writeln()
第一部分 基本语法
01 JavaScript简介
1.1 JavaScript是什么
1.1.1 JavaScript 是属于 HTML 和 Web 的编程语言,编程令计算机完成您需要它们做的工作。
1.1.2 Js能做什么？
JavaScript 能够改变 HTML 内容
JavaScript 能够改变 HTML 属性
JavaScript 能够改变 HTML 样式 (CSS)
JavaScript 能够隐藏、显示 HTML 元素
1.2 JavaScript开发工具
1.2.1 Visual Studio Code（推荐）
1、Visual Studio Code（简称“VS Code”）是Microsoft在2015年4月30日Build开发者大会上正式宣布一个运行于 Mac OS X、Windows和 Linux 之上的，针对于编写现代Web和云应用的跨平台源代码编辑器，可在桌面上运行，并且可用于Windows，macOS和Linux。它具有对JavaScript，TypeScript和Node.js的内置支持，并具有丰富的其他语言（例如C++，C＃，Java，Python，PHP，Go）和运行时（例如.NET和Unity）扩展的生态系统。
2、是一款免费开源的现代化轻量级代码编辑器，支持几乎所有主流的开发语言的语法高亮、智能代码补全、自定义热键、括号匹配、代码片段、代码对比 Diff、GIT 等特性，支持插件扩展，并针对网页开发和云端应用开发做了优化。
常用插件
Name: Auto Close Tag
Id: formulahendry.auto-close-tag
Description: Automatically add HTML/XML close tag, same as Visual Studio IDE or Sublime Text
Version: 0.5.10
Publisher: Jun Han
VS Marketplace Link: https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-close-tag
Id: formulahendry.auto-close-tag
Description: Automatically add HTML/XML close tag, same as Visual Studio IDE or Sublime Text
Version: 0.5.10
Publisher: Jun Han
VS Marketplace Link: https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-close-tag
Name: Live Server
Id: ritwickdey.liveserver
Description: Launch a development local Server with live reload feature for static & dynamic pages
Version: 5.6.1
Publisher: Ritwick Dey
VS Marketplace Link: https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer
Id: ritwickdey.liveserver
Description: Launch a development local Server with live reload feature for static & dynamic pages
Version: 5.6.1
Publisher: Ritwick Dey
VS Marketplace Link: https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer
Name: Vetur
Id: octref.vetur
Description: Vue tooling for VS Code
Version: 0.32.0
Publisher: Pine Wu
VS Marketplace Link: https://marketplace.visualstudio.com/items?itemName=octref.vetur
Id: octref.vetur
Description: Vue tooling for VS Code
Version: 0.32.0
Publisher: Pine Wu
VS Marketplace Link: https://marketplace.visualstudio.com/items?itemName=octref.vetur
Name: CSS Formatter
Id: aeschli.vscode-css-formatter
Description: Formatter for CSS
Version: 1.0.1
Publisher: Martin Aeschlimann
VS Marketplace Link: https://marketplace.visualstudio.com/items?itemName=aeschli.vscode-css-formatter
Id: aeschli.vscode-css-formatter
Description: Formatter for CSS
Version: 1.0.1
Publisher: Martin Aeschlimann
VS Marketplace Link: https://marketplace.visualstudio.com/items?itemName=aeschli.vscode-css-formatter
使用演示
创建index.html
页面预览
创建第一个js文件
官网地址：https://code.visualstudio.com/
1.2.2 WebStorm
WebStorm 是JetBrains公司旗下一款JavaScript 开发工具。已经被广大中国JS开发者誉为“Web前端开发神器”、“最强大的HTML5编辑器”、“最智能的JavaScript IDE”等。与IntelliJ IDEA同源，继承了IntelliJ IDEA强大的JS部分的功能。
官网：https://www.jetbrains.com/webstorm/download/
1.3 JavaScript引入方式
1.3.1 外部JavaScript
1.3.2 内部JavaScript
1.3.3 元素属性JavaScript
1.4 训练题：一个简单的JavaScript程序
02 语法基础
2.1 语法简介
2.2 变量与常量
2.2.1 变量
2.2.2 常量
2.3 数据类型
2.3.1 数字
2.3.2 字符串
2.3.3 布尔值
2.3.4 未定义值
2.3.5 空值
2.4 运算符
2.4.1 算术运算符
2.4.2 赋值运算符
2.4.3 比较运算符
2.4.4 逻辑运算符
2.4.5 条件运算符
2.5 表达式与语句
2.6.1 “字符串”转换为“数字”
2.6.2 “数字”转换为“字符串”
2.6 类型转换
2.7 转义字符
2.8 注释
2.8.1 单行注释
2.8.2 多行注释
03 流程控制
3.1 流程控制简介
3.1.1 顺序结构
3.1.2 选择结构
3.1.3 循环结构
3.2 选择结构：if
3.2.1 单向选择：if…
3.2.2 双向选择：if…else…
3.2.3 多向选择：if…else if…else…
3.2.4 if语句的嵌套
3.3 选择结构：switch
3.4 循环结构：while
3.5 循环结构：do…while
3.6 循环结构：for
3.7 训练题：判断一个数是整数，还是小数？
3.8 训练题：找出“水仙花数”
04 初识函数
4.1 函数是什么？
4.2 函数的定义
4.2.1 没有返回值的函数
4.2.2 有返回值的函数
4.2.3 全局变量与局部变量
4.3 函数的调用
4.3.1 直接调用
4.3.2 在表达式中调用
4.3.3 在超链接中调用
4.3.4 在事件中调用
4.4 嵌套函数
4.5 内置函数
4.6 训练题：判断某一年是否为闰年
4.7 训练题：求出任意五个数最大值
05 字符串对象
5.1 内置对象简介
5.2 获取字符串长度
5.3 大小写转换
5.4 获取某一个字符
5.5 截取字符串
5.6 替换字符串
5.7 分割字符串
5.8 检索字符串的位置
5.9 训练题：删除字符串中的某一个字符
5.10 训练题：找出字符串中的某一个字符串
5.11 训练题：统计字符串中数字的个数
06 数组对象
6.1 数组是什么？
6.2 数组的创建
6.3 数组的获取
6.4 数组的赋值
6.5 获取数组长度
6.6 截取数组某部分
6.7 为数组添加元素
6.7.1 在数组开头添加元素：unshift()
6.7.2 在数组结尾添加元素：push()
6.8 删除数组元素
6.8.1 删除数组中第一个元素：shift()
6.8.2 删除数组最后一个元素：pop()
6.9 数组大小比较
6.10 数组颠倒顺序
6.11 将数组元素连接成字符串
6.12 训练题：数组与字符串的转换操作
6.13 训练题：将字符串所有字符颠倒顺序
6.14 题目：计算面积与体积，返回一个数组
07 时间对象
7.1 日期对象简介
7.2 操作年、月、日
7.2.1 获取年、月、日
7.2.2 设置年、月、日
7.3 操作时、分、秒
7.3.1 获取时、分、秒
7.3.2 设置时、分、秒
7.4 获取星期几
7.5 训练题：在页面显示时间
08 数学对象
8.1 数学对象简介
8.2 Math对象的属性
8.3 Math对象的方法
8.4 最大值与最小值：max()、min()
8.5 取整运算
8.5.1 向下取整：floor()
8.5.2 向上取整：ceil()
8.6 三角函数
8.7 生成随机数
8.7.1 随机生成某个范围内的“任意数”
8.7.2 随机数生成某个范围内的“整数”
8.8 训练题：生成随机验证码
8.9 生成随机颜色值
收藏
职业：研究生
0 条评论
下一页
