JavaScriptFoundation

• 一. JavaScript简介
• • 1.1 JavaScript 是什么
  • 1.2 JavaScript 的作用
  • • 1.2.1 网页特效
    • 1.2.2 表单验证
    • 1.2.3 数据交互
    • 1.2.4 服务器编程
  • 1.3 JavaScript 的组成
  • • 1.3.1 ECMAScript
    • • 1.3.1.1 规定了js基础语法核心知识
    • 1.3.2 Web APIs
    • • 1.3.2.1 DOM 操作文档
      • 1.3.2.2 BOM 操作浏览器
• 二. JavaScript的书写位置
• • 2.1 内部 JavaScript
  • • 2.1.1 书写位置
    • 2.1.2 注意事项
  • 2.2 内部 JavaScript
  • • 2.2.1 书写位置
  • 2.3 外部 JavaScript
  • • 2.3.1 书写位置
• 三. 注释
• • 3.1 // 单行注释
  • • 3.1.1 举例
  • 3.2 /* */ 多行注释
• 四. ; 结束符
• • 4.1 举例
  • 4.2 为了风格统一,结束符要么都写,要么都不写
• 五. 输入输出语法
• • 5.1 什么是语法
  • 5.2 输出语法
  • • 5.2.1 向body内输入内容 write/writeln
    • 5.2.2 弹出警告对话框
    • 5.2.3 控制台打印
  • 5.3 输入语法
  • • 5.3.1 弹出对话框 提示输入文字
• 六. 执行顺序
• • 6.1 按照文档流熟顺序执行JavaScript代码
  • 6.2 alert() 和 prompt()会跳过页面渲染先被执行
• 七. 字面量
• • 7.1 什么是字面量
  • • 7.1.1 举例
• 八. let 变量
• • 8.1 变量是什么
  • 8.2 变量的基本使用
  • • 8.2.1 变量的声明
    • 8.2.2 变量的赋值
    • 8.2.3 变量的初始化
    • 8.2.4 更新变量
    • 8.2.4 声明多个变量
  • 8.3 变量案例-弹出姓名
  • 8.4 变量案例-交换变量
  • 8.5 变量的本质
  • 8.6 变量的命名规则与规范
  • • 8.6.1 规则 : 必须遵守,不遵守报错
    • • 8.6.1.1 不能使用关键字
      • 8.6.1.2 只能用下划线、字母、数字、$组成，且数字不能开头
      • 8.6.1.3 字母严格区分大小写，如 Age 和 age 是不同的变量
    • 8.6.2 规范 : 建议遵守,不遵守不报错
  • 8.7 let 和 var 的区别
  • • 8.7.1 var 可以先使用再声明
    • 8.7.1 var 可以重复声明
• 九. 数组
• • 9.1 数组是什么
  • 9.2 数组的声明
  • • 9.2.1 [ ] 字面量方式
    • 9.2.2 new Array() 方式
  • 9.3 数组的取值
  • 9.4 .length 获取数组的长度
  • 9.5 查询 for遍历
  • • 9.5.1 for循环遍历
    • 9.5.2 for in 循环遍历
    • 9.5.2 for of 循环遍历
  • 9.6 更改
  • 9.7 新增
  • • 9.7.1 push() 尾部添加
    • 9.7.2 unShift() 头部添加
    • 9.7.3 练习 将<5的元素添加至新数组
    • 9.7.4 练习 将等于0的元素添加至新数组
  • 9.8 删除
  • • 9.8.1 pop() 删除最后一个元素 并且返回该元素的值
    • 9.8.2 shift() 删除第一个元素 并且返回该元素的值
    • 9.8.3 splice() 删除指定元素
    • • 9.8.3.1 参数
      • 9.8.3.2 举例
  • 9.9 数组排序
  • • 9.9.1 冒泡排序
    • 9.9.2 sort()
    • • 9.9.2.1 降序
      • 9.9.2.2 升序 传递一个函数
• 十. const 常量
• • 10.1 概念
  • 10.2 使用场景
  • 10.3 声明常量 数组/对象尽量使用 const
• 十一. 数据类型
• • 11.1 基本数据类型
  • • 11.1.1 number 数字类型
    • • 11.1.1.3 计算圆的面积
      • 11.1.1.4 NaN 代表一个计算错误
    • 11.1.2 string 字符串类型
    • • 11.1.2.1 字符串拼接
      • 11.1.2.2 ${变量名} 模板字符串
    • 11.1.3 boolean 布尔类型
    • 11.1.4 undefined 未定义类型
    • 11.1.5 null 空类型
  • 11.2 引用数据类型
  • 11.3 typeof 检测数据类型
  • 11.3 数据类型转换
  • • 11.3.1 为什么需要类型转换
    • 11.3.2 隐式转换
    • • 11.3.2.1 转字符串
      • 11.3.2.2 转数字
    • 11.3.3 显示转换
    • • 11.3.3.1 Nuber 转数字类型
      • 11.3.3.2 parseInt 只保留整数
      • 11.3.3.3 parseFloat 可以保留小数
      • 11.3.3.4 +prompt() 转换为数字类型
  • 11.4 综合案例
  • • 11.4.1 综合案例01
    • 11.4.1 综合案例02
• 十二. 运算符
• • 12.1 算数运算符
  • • 12.1.1 运算符优先级
  • 12.2 赋值运算符
  • 12.3 一元运算符
  • • 12.3.1 自增
    • 12.3.2 自减
    • 12.3.3 前置后置区别
  • 12.4 比较运算符
  • • 12.4.1 开发中判断是否相等建议使用'==='
    • 12.4.2 字符串比较
    • 12.4.3 NaN不等于任何值包括它本身
    • 12.4.4 尽量不比较小数,有精度问题
    • 12.4.5 不同类型比较会发生隐式转换
  • 12.5 逻辑运算符
  • • 12.5.1 && 并且
    • 12.5.2 || 或者
    • 12.5.3 ! 取反
  • 12.6 运算符优先级
• 十三. 语句
• • 13.1 表达式和语句
  • 13.2 分支语句
  • • 13.2.1 if 语句
    • • 13.2.1.1 单分支
      • 13.2.1.2 双分支
      • 13.2.1.3 多分支
    • 13.2.2 三元运算符
    • 13.2.3 switch case 语句
  • 13.2 循环语句
  • • 13.2.1 循环三要素
    • 13.2.2 while 循环
    • 13.2.3 for 循环
    • • 13.2.3.1 遍历数组
      • 13.2.3.2 for嵌套 遍历二维数组
      • 13.2.3.3 for嵌套 乘法表
    • 13.2.4 break 退出循环
    • 13.2.5 continue 跳出循环
    • 13.2.6 练习 页面输出1-100
    • 13.2.6 练习 1加到100的总和
    • 13.2.6 练习 计算1-100之间的偶数和
• 十四. 方法
• • 14.1 为什么需要函数
  • 14.2 函数的命名规范
  • • 14.2.1 常用动词
  • 14.3 函数的声明
  • • 14.3.1 无返回值 无参
    • 14.3.2 无返回值 有参
    • 14.3.3 有返回值 有参
    • 14.3.4 匿名函数表达式创建函数
    • • 14.3.4.1 立即调用匿名函数
    • 14.3.5 创建默认参数的函数
  • 14.4 函数的调用
  • • 14.4.1 无参函数调用
    • 14.4.2 有参函数调用
    • 14.4.3 通过按钮调用方法
• 十五. 作用域
• • 15.1 全局作用域
  • • 15.1.1 全局变量的位置
  • 15.2 局部作用域
  • • 15.2.1 局部变量的位置
  • 15.3 访问原则 `先局部,局部找不到找全局`
• 十六. 对象
• • 16.1 什么是对象
  • 16.2 对象的声明
  • • 16.2.1 {} 方式声明
    • 16.2.2 new Object() 方式声明
  • 16.3 对象的操做
  • • 16.3.1 增
    • 16.3.2 删
    • 16.3.3 改
    • 16.3.4 查
    • • 16.3.4.1 [ ] 写法 当属性名为字符串时
    • 16.3.5 使用函数
  • 16.4 for in 对象的遍历
  • 16.5 遍历数组对象
  • 16.6 this 环境对象
  • 16.7 回调函数
• 十七. 数据存储方式
• • 17.1 基本类型存储在 栈
  • 17.2 引用类型存储在 堆
  • • 17.2.1 举例 对象赋值 得到的是地址(深拷贝)
• 十八. --------------------------------------- Web API ---------------------------------------
• 十九. DOM(文档对象模型)
• • 19.1 什么是DOM
  • 19.2 DOM的作用
  • 19.3 DOM树
  • 19.4 DOM作用
  • • 19.4.1 DOM对象
    • 19.4.2 DOM的核心思想
    • 19.4.3 document 对象
  • 19.5 获取DOM元素
  • • 19.5.1 querySelector() 选择匹配的第一个元素
    • 19.5.2 querySelectorAll() 获取所有匹配
    • 19.5.3 选中 激活的复选框
  • 19.6 其他获取DOM元素的方法(了解)
  • • 19.6.1 getElementById() 根据id获取元素
    • 19.6.2 getElementsByClassName() 根据类名获取元素
    • 19.6.3 getElementsByTagName() 根据标签名获取元素
  • 19.7 操做元素 内容 innerText / innerHTML
  • • 19.7.1 innerText 不解析标签
    • 19.7.2 innerHTML 解析标签
  • 19.8 操做元素属性
  • • 19.8.1 操做元素常用属性
    • 19.8.2 操做元素样式属性
    • • 19.8.2.1 style属性操做css
      • 19.8.2.2 className属性操做css
      • 19.8.2.3 classList 属性操做css
      • 19.8.2.4 操作表单元素 属性
      • 19.8.2.5 操做自定义属性
  • 19.9 DOM结点
  • • 19.9.1 parentNode 获取父结点
    • 19.9.2 childNodes 获取子结点
    • 19.9.3 获取兄弟结点
    • • 19.9.3.1 nextElementSibling 下一个兄弟结点
      • 19.9.3.2 previousElementSibling 下一个兄弟结点
    • 19.9.4 createElement() 新建结点
    • • 19.9.4.1 步骤
      • 19.9.4.2 append() 追加结点
      • 19.9.4.3 练习添加img 图片标签
      • 19.9.4.4 练习添加img 图片标签02 循环添加
      • 19.9.4.5 动态表格
      • 19.9.4.6 appendChild() 尾插
      • 19.9.4.7 insertBefore() 指定位置添加
      • 19.9.4.8 cloneNode(true) 克隆结点
    • 19.9.5 removeChild() 删除结点
    • 19.9.6 动态加载数据填充到表格
• 二十. BOM(浏览器对象模型)
• • 20.1 定时器对象
  • • 20.1.1 setInterval() 开机间歇函数
    • 20.1.2 clearInterval() 关闭间歇函数
    • 20.1.3 间歇函数练习
    • 20.1.4 setTimeout()开启只调用一次的计时器
    • 20.1.5 clearTimeout() 取消由setTimeout()方法设置的定时器
• 二十一. 事件
• • 21.1 事件监听三要素
  • 21.2 addEventListener()监听事件
  • 21.3 举例 抽奖
  • 21.3 鼠标事件
  • • 21.3.1 click 点击
    • 21.3.2 mouseenter 进入 //没有冒泡
    • 21.3.3 mouseleave 离开 //没有冒泡
  • 21.3 焦点事件
  • • 21.3.1 focus 获得焦点
    • 21.3.2 blur 失去焦点
    • 21.3.3 综合练习
  • 21.4 键盘事件
  • • 21.4.1 keydown 键盘按下触发
    • 21.4.2 keyup 键盘抬起触发
    • 21.4.3 综合练习
  • 21.5 文本事件
  • • 21.5.1 input
  • 21.6 事件对象
  • • 21.6.1 常用事件对象属性
  • 21.7 全选 取消全选案例
  • 21.8 事件流
  • • 21.8.1 事件流动的路径
    • 21.8.2 事件捕获 事件第三个参数为true
    • 21.8.3 事件冒泡 默认即使冒泡
  • 21.9 阻止事件流
  • • 21.9.1 stopPropagation() 阻止向上传播
    • 21.9.2 stopImmediatePropagation() 阻止向上传播
    • 21.9.3 preventDefault() 阻止元素默认行为
    • • 21.9.3.1 阻止a标签跳转
      • 21.9.3.1 阻止form提交
  • 21.10 解绑事件
  • • 21.10.1 匿名函数无法被解绑
    • 21.10.2 removeEventListener() 解绑
  • 21.11 事件委托
  • • 21.11.1 事件委托的好处
  • 21.12 其他事件
  • • 21.12.1 页面加载事件 load
    • • 21.12.1.1 给windows添加load 事件
      • 21.12.1.2 给document添加DOMContentLoaded事件
    • 21.12.2 scroll 元素滚动事件
    • • 21.12.2.1 被卷去补分的值 (可读写)
  • 21.13 resize 页面尺寸事件
  • • 21.13.1 属性
    • 21.13.2 getBoundingClientRect()获取元素尺寸与位置
  • 21.14 M端事件
  • • 21.14.1 touchstart 触摸
    • 21.14.2 touchend 离开
    • 21.14.3 touchmove 触摸并且移动
• 二十二. 常用对象
• • 16.1 Math
  • • 16.1.1 random() 小于1的随机小数
    • 16.1.2 ceil() 向上取整
    • 16.1.3 floor() 向下取整
    • 16.1.4 max() 找最大值
    • 16.1.5 min() 找最小数
    • 16.1.6 pow() 幂运算
    • 16.1.7 abs() 绝对值
  • 16.2 windows
  • • 16.2.0 window中常见的属性
    • • 16.2.0.1 location 位置
      • 16.2.0.2 history历史
    • 16.2.1 eval 执行字符串内容返回
  • 16.3 JSON
  • • 16.3.1 定义JS 对象 JS对象数组
    • 16.3.2 定义JSON对象 JSON对象数组
    • 16.3.3 JSON 与 JS 互转
  • 16.4 Date 日期类
  • • 16.4.1 getFullYear() 年份
    • 16.4.2 getMonth() 月份 月份需要+1
    • 16.4.3 getDate() 日
    • 16.4.5 getDay() 星期
    • 16.4.6 getHours() 小时
    • 16.4.7 getMinutes() 分
    • 16.4.8 getSeconds() 秒
    • 16.4.9 获取页面时间
    • 16.4.9 toLocaleString() 获取年月日 时分秒 字符串
    • 16.4.10 toLocaleDateString() 获取年月日 字符串
    • 16.4.11 toLocaleTimeString() 获取时分秒 字符串
    • 16.4.12 时间戳
    • • 16.4.12.1 时间戳的获取方式
      • 16.4.12.2 返回指定时间的时间戳
      • 16.4.12.3 秒杀倒计时