web前端课程体系基础课程

前端开发是创建Web页面或app等前端界面呈现给用户的过程，通过HTML，CSS及JavaScript以及衍生出来的各种技术、框架、解决方案，来实现互联网产品的用户界面交互。它从网页制作演变而来，名称上有很明显的时代特征。本思维导图是web前端基础课程框架结构总结思维导图，需要的请同学拿走！

web前端课程体系

• 项目流程
  • 软件定义期
    • 可行性研究阶段
    • 需求分析阶段
  • 软件开发期
    • 概要设计阶段
    • 详细设计阶段
    • 编码实现阶段
    • 项目测试阶段
  • 软件维护期
    • 项目部署阶段
    • 项目维护阶段
• MySQL
  • day01
    • 连接MySQL
      • mysql.exe -h127.0.0.1 -P3306 -uroot -p
      • mysql -uroot
      • mysql -uroot < C:/xampp/..../1.sql
    • 常用管理命令
      • quit;
      • show databases;
      • use 数据库名;
      • show tables;
      • desc 表名;
    • 常用SQL语句
      • DDL
        • CREATE/DROP/ALTER
      • DML
        • INSERT/DELETE/UPDATE
      • DQL
        • SELECT
      • DCL
        • GRANT/REVOKE
  • day02
    • 中文乱码
      • 脚本、客户端连接、服务器存储统一使用UTF8编码
    • 列类型
      • 数值类型
        • 整型
          • TINYINT/SMALLINT/INT/BIGINT
        • 浮点型
          • FLOAT/DOUBLE/DECIMAL
        • 布尔型
          • BOOL
      • 字符串类型
        • VARCHAR/CHAR/TEXT
      • 日期时间类型
        • DATE/TIME/DATETIME
    • 列约束
      • 主键约束
        • PRIMARY KEY
        • 自增列
          • AUTO_INCREMENT
      • 唯一约束
        • UNIQUE
      • 非空约束
        • NOT NULL
      • 默认值约束
        • DEFAULT
      • 检查约束
        • CHECK
      • 外键约束
        • FOREIGN KEY(列名) REFERENCES 另个表(主键)
  • day03
    • 简单查询
      • 查询所有的列
        • SELECT * FROM emp;
      • 查询特定的列
        • SELECT eid,ename FROM emp;
      • 给列起别名
        • SELECT eid AS 编号 FROM emp;
      • 合并相同的项
        • SELECT DISTINCT sex FROM emp;
      • 查询时执行计算
        • SELECT ename,salary*12 FROM emp;
      • 查询结果排序
        • SELECT * FROM emp ORDER BY salary DESC;
      • 条件查询
        • SELECT * FROM emp WHERE eid=5;
      • 模糊查询
        • SELECT * FROM emp WHERE ename LIKE '%e_';
      • 分页查询
        • SELECT * FROM emp LIMIT 0,5;
    • 复杂查询
• JS_BASIC
  • day01
    • JS执行环境
      • 客户端
        • 浏览器
      • 服务器端
        • NODEJS
    • 变量和常量
      • 变量
        • 声明
          • 使用var关键字
        • 命名规则
          • 含有数字、字母、下划线、美元符号
          • 不能以数字开头，不能使用JS中关键字和保留字
      • 常量
        • 声明
          • 使用const关键字
          • 一旦声明后，就不能再重新赋值
    • 数据类型
      • 原始类型
        • 数值型
          • 整型和浮点型
        • 字符串型
          • 带有引号的
        • 布尔型
          • true/false
        • 未定义型
          • undefined
        • null
          • null(空)
      • 引用类型
  • day02
    • 数据类型转换
      • 隐式转换
        • 加法的转换
          • 数值型+字符串=字符串
          • 数值型+布尔型=数值型
          • 布尔型+字符串=字符串
        • 乘除减
          • 转为数值型
      • 强制转换
        • 转为整型
          • parseInt
        • 转为浮点型
          • parseFloat
        • 转为数值型
          • Number
        • 转为字符串型
          • toString()
    • 运算符
      • 算术运算符
        • + - * / % ++ --
      • 比较运算符
        • > < >= <= == != === !==
      • 逻辑运算符
        • || && !
      • 位运算符
        • & | ^ << >>
      • 赋值运算符
        • = += -= *= /= %=
      • 三目运算符
        • 条件表达式 ? 语句1 : 语句2
  • day03
    • 选择语句
      • if(条件表达式){ 语句1 }
      • if(条件表达式){ 语句1; }else{ 语句2; }
      • if(条件1){ 语句1; }else if(条件2){ 语句2; }......else{ 以上所有条件为false }
      • switch(表达式){ case 1: 语句1; break; .... default: 语句n; //以上所有的比较都是false }
  • day04
    • 循环语句
      • while(循环条件){ 循环体 }
      • do{ 循环体 }while(循环条件);
      • for(初始值;循环条件;i的变化){ 循环体 }
      • 循环嵌套
  • day05
    • 函数相关
      • 创建函数
        • function 函数名称(形参列表){ 函数体;//可以反复调用的 return 返回值; }
      • 调用函数
        • 函数名称(实参列表)
    • 变量的作用域
      • 全局作用域
        • 全局变量
      • 函数(局部)作用域
        • 局部变量
      • 变量提升(预加载)
        • 使用var关键字声明的变量提升到 所在作用域的最前边
    • 函数的作用域
      • 全局作用域
      • 函数(局部)作用域
      • 函数提升
    • 递归
      • 在函数的内部调用自身
      • 要结合关键字return
      • 要有跳出条件
  • day06
    • 匿名函数
      • 创建函数
        • 函数表达式
      • 自调用
        • (function(a){ 函数体 })(1);
      • 回调函数
        • sort(function(a,b){ return a-b; })
    • 系统函数
      • encodeURI
      • decodeURI
      • parseInt
      • parseFloat
      • isNaN
      • isFinite
      • eval
    • 对象
      • 分类
        • 内置对象
        • 宿主对象
        • 自定义对象
      • 自定义对象
        • 对象字面量
        • 内置构造函数
        • 自定义构造函数
      • 遍历对象
        • for-in
      • 检测是否含有属性
        • '属性名' in 对象
        • 对象.hasOwnProperty('属性名')
        • 对象.属性名 === undefined
      • 方法
        • { name:'tom', say: function(){} }
  • day07
    • 数组
      • 创建数组
        • 数组字面量 [ ]
        • 内置构造函数 new Array()
      • 数组的访问
        • 数组[下标]
        • 获取数组长度 length
      • 遍历数组元素
        • for循环
        • for-in
      • 方法
        • toString
        • join
        • concat
        • slice(start, end)
        • splice(start, count, value1...)
        • reverse
        • sort
        • push
        • pop
        • unshift
        • shift
  • day08
    • 字符串对象
      • 创建对象
        • new String()
      • 转义字符 \
      • 方法
        • length
        • charAt()
        • indexOf()
        • lastIndexOf()
        • toUpperCase()
        • toLowerCase()
        • slice(start,end)
        • substr(start, count)
        • substring(start, end)
        • split()
        • String.fromCharCode()
    • 匹配模式
      • replace() ig
      • match()
      • search()
    • Math对象
      • PI
      • abs()
      • ceil()
      • floor()
      • round()
      • max()
      • min()
      • pow(2,3)
      • random()
  • day09
    • Date对象
      • 创建Date对象
        • new Date('2018/11/18 9:10:30');
        • new Date(2018,10,18,9,10,30);
        • new Date();
        • new Date(1000*60)
      • 获取日期时间
        • getFullYear
        • getMonth
        • getDate
        • getHours
        • getMinutes
        • getSeconds
        • getMilliseconds
        • getDay
        • getTime
      • 设置日期时间
        • setFullYear
        • setMonth
        • setDate
        • setHours
        • setMinutes
        • setSeconds
        • setMilliseconds
        • setTime
      • 本地化字符串
        • toLocaleString
        • toLocaleDateString
        • toLocaleTimeString
    • Number对象
      • 创建对象
        • new Number( 数据)
      • 属性/方法
        • Number.MAX_VALUE
        • Number.MIN_VALUE
        • toFixed(n)
        • toString()
    • Boolean对象
      • 创建对象
        • new Boolean(数据)
      • 方法
        • toString()
    • 错误处理
      • 常见错误
        • 语法错误
        • 引用错误
        • 类型错误
        • 范围错误
      • 处理错误
        • try{ 尝试执行，可能出现错误 }catch(err){ err //产生错误的信息 执行其它方案 }
    • ES6
      • 块级作用域
        • 使用let声明变量
        • { } while for do-while
      • 箭头函数
        • 回调函数的另一种写法
        • sort( (a,b)=>{ return a-b; } )